@mmlogic/components 0.3.4 → 0.3.6

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 (173) hide show
  1. package/dist/{collection/utils/cell-renderer.js → mosterdcomponents/cell-renderer-CbRwLOo8.js} +9 -3
  2. package/dist/mosterdcomponents/cell-renderer-CbRwLOo8.js.map +1 -0
  3. package/dist/{esm/index.js → mosterdcomponents/client-layout-D88nn5zf.js} +4 -1
  4. package/dist/mosterdcomponents/client-layout-D88nn5zf.js.map +1 -0
  5. package/dist/{collection/utils/format.js → mosterdcomponents/format-BAfsQfy1.js} +12 -7
  6. package/dist/mosterdcomponents/format-BAfsQfy1.js.map +1 -0
  7. package/dist/{collection/utils/i18n.js → mosterdcomponents/i18n-hoGGKbKU.js} +6 -1
  8. package/dist/mosterdcomponents/i18n-hoGGKbKU.js.map +1 -0
  9. package/dist/mosterdcomponents/index-B_tPFIvS.js +4585 -0
  10. package/dist/mosterdcomponents/index-B_tPFIvS.js.map +1 -0
  11. package/dist/mosterdcomponents/index-I5SuYv7a.js +4 -0
  12. package/dist/mosterdcomponents/index-I5SuYv7a.js.map +1 -0
  13. package/dist/mosterdcomponents/index.esm.js +5 -1
  14. package/dist/mosterdcomponents/index.esm.js.map +1 -0
  15. package/dist/mosterdcomponents/mosterdcomponents.css +180 -1
  16. package/dist/mosterdcomponents/mosterdcomponents.esm.js +50 -1
  17. package/dist/mosterdcomponents/mosterdcomponents.esm.js.map +1 -0
  18. package/dist/mosterdcomponents/mrd-boolean-field.entry.js +37 -0
  19. package/dist/mosterdcomponents/mrd-boolean-field.entry.js.map +1 -0
  20. package/dist/mosterdcomponents/mrd-currency-field.entry.js +67 -0
  21. package/dist/mosterdcomponents/mrd-currency-field.entry.js.map +1 -0
  22. package/dist/mosterdcomponents/mrd-date-field.entry.js +46 -0
  23. package/dist/mosterdcomponents/mrd-date-field.entry.js.map +1 -0
  24. package/dist/mosterdcomponents/mrd-datetime-field.entry.js +78 -0
  25. package/dist/mosterdcomponents/mrd-datetime-field.entry.js.map +1 -0
  26. package/dist/mosterdcomponents/mrd-email-field.entry.js +50 -0
  27. package/dist/mosterdcomponents/mrd-email-field.entry.js.map +1 -0
  28. package/dist/{collection/components/mrd-field/mrd-field.js → mosterdcomponents/mrd-field.entry.js} +28 -179
  29. package/dist/mosterdcomponents/mrd-field.entry.js.map +1 -0
  30. package/dist/mosterdcomponents/mrd-file-field.entry.js +108 -0
  31. package/dist/mosterdcomponents/mrd-file-field.entry.js.map +1 -0
  32. package/dist/{collection/components/mrd-form/mrd-form.js → mosterdcomponents/mrd-form.entry.js} +82 -280
  33. package/dist/mosterdcomponents/mrd-form.entry.js.map +1 -0
  34. package/dist/mosterdcomponents/mrd-hyperlink-field.entry.js +87 -0
  35. package/dist/mosterdcomponents/mrd-hyperlink-field.entry.js.map +1 -0
  36. package/dist/mosterdcomponents/mrd-image-field.entry.js +122 -0
  37. package/dist/mosterdcomponents/mrd-image-field.entry.js.map +1 -0
  38. package/dist/{collection/components/mrd-layout-section/mrd-layout-section.js → mosterdcomponents/mrd-layout-section.entry.js} +31 -418
  39. package/dist/mosterdcomponents/mrd-layout-section.entry.js.map +1 -0
  40. package/dist/mosterdcomponents/mrd-list-field.entry.js +107 -0
  41. package/dist/mosterdcomponents/mrd-list-field.entry.js.map +1 -0
  42. package/dist/mosterdcomponents/mrd-longtext-field.entry.js +47 -0
  43. package/dist/mosterdcomponents/mrd-longtext-field.entry.js.map +1 -0
  44. package/dist/mosterdcomponents/mrd-number-field.entry.js +87 -0
  45. package/dist/mosterdcomponents/mrd-number-field.entry.js.map +1 -0
  46. package/dist/mosterdcomponents/mrd-relation-field.entry.js +267 -0
  47. package/dist/mosterdcomponents/mrd-relation-field.entry.js.map +1 -0
  48. package/dist/mosterdcomponents/mrd-secret-field.entry.js +49 -0
  49. package/dist/mosterdcomponents/mrd-secret-field.entry.js.map +1 -0
  50. package/dist/{collection/components/mrd-table/mrd-table.js → mosterdcomponents/mrd-table.entry.js} +67 -398
  51. package/dist/mosterdcomponents/mrd-table.entry.js.map +1 -0
  52. package/dist/mosterdcomponents/mrd-text-field.entry.js +47 -0
  53. package/dist/mosterdcomponents/mrd-text-field.entry.js.map +1 -0
  54. package/dist/mosterdcomponents/mrd-textarea-field.entry.js +86 -0
  55. package/dist/mosterdcomponents/mrd-textarea-field.entry.js.map +1 -0
  56. package/dist/mosterdcomponents/mrd-time-field.entry.js +46 -0
  57. package/dist/mosterdcomponents/mrd-time-field.entry.js.map +1 -0
  58. package/dist/{esm/quill-CiuCgGz_.js → mosterdcomponents/quill-C9pgw_k-.js} +16282 -1397
  59. package/dist/mosterdcomponents/quill-C9pgw_k-.js.map +1 -0
  60. package/dist/{collection/utils/validation.js → mosterdcomponents/validation-ixb43cqU.js} +12 -5
  61. package/dist/mosterdcomponents/validation-ixb43cqU.js.map +1 -0
  62. package/dist/types/components/mrd-form/mrd-form.d.ts +13 -1
  63. package/dist/types/components/mrd-relation-field/mrd-relation-field.d.ts +3 -0
  64. package/dist/types/components/mrd-table/mrd-table.d.ts +4 -0
  65. package/dist/types/components.d.ts +19 -9
  66. package/package.json +1 -1
  67. package/dist/cjs/app-globals-V2Kpy_OQ.js +0 -5
  68. package/dist/cjs/index-BPj2cBXs.js +0 -1570
  69. package/dist/cjs/index.cjs.js +0 -66
  70. package/dist/cjs/loader.cjs.js +0 -13
  71. package/dist/cjs/mosterdcomponents.cjs.js +0 -25
  72. package/dist/cjs/mrd-boolean-field_20.cjs.entry.js +0 -3848
  73. package/dist/cjs/quill-DmFfnC1f.js +0 -16272
  74. package/dist/collection/collection-manifest.json +0 -32
  75. package/dist/collection/components/mrd-boolean-field/mrd-boolean-field.js +0 -199
  76. package/dist/collection/components/mrd-boolean-field/mrd-boolean-field.scss +0 -77
  77. package/dist/collection/components/mrd-currency-field/mrd-currency-field.js +0 -248
  78. package/dist/collection/components/mrd-currency-field/mrd-currency-field.scss +0 -100
  79. package/dist/collection/components/mrd-date-field/mrd-date-field.js +0 -206
  80. package/dist/collection/components/mrd-date-field/mrd-date-field.scss +0 -66
  81. package/dist/collection/components/mrd-datetime-field/mrd-datetime-field.js +0 -240
  82. package/dist/collection/components/mrd-datetime-field/mrd-datetime-field.scss +0 -66
  83. package/dist/collection/components/mrd-email-field/mrd-email-field.js +0 -230
  84. package/dist/collection/components/mrd-email-field/mrd-email-field.scss +0 -69
  85. package/dist/collection/components/mrd-field/mrd-field.scss +0 -118
  86. package/dist/collection/components/mrd-file-field/mrd-file-field.js +0 -341
  87. package/dist/collection/components/mrd-file-field/mrd-file-field.scss +0 -153
  88. package/dist/collection/components/mrd-form/mrd-form.scss +0 -148
  89. package/dist/collection/components/mrd-hyperlink-field/mrd-hyperlink-field.js +0 -291
  90. package/dist/collection/components/mrd-hyperlink-field/mrd-hyperlink-field.scss +0 -91
  91. package/dist/collection/components/mrd-image-field/mrd-image-field.js +0 -356
  92. package/dist/collection/components/mrd-image-field/mrd-image-field.scss +0 -190
  93. package/dist/collection/components/mrd-layout-section/mrd-layout-section.scss +0 -445
  94. package/dist/collection/components/mrd-list-field/mrd-list-field.js +0 -313
  95. package/dist/collection/components/mrd-list-field/mrd-list-field.scss +0 -109
  96. package/dist/collection/components/mrd-longtext-field/mrd-longtext-field.js +0 -227
  97. package/dist/collection/components/mrd-longtext-field/mrd-longtext-field.scss +0 -78
  98. package/dist/collection/components/mrd-number-field/mrd-number-field.js +0 -316
  99. package/dist/collection/components/mrd-number-field/mrd-number-field.scss +0 -77
  100. package/dist/collection/components/mrd-relation-field/mrd-relation-field.js +0 -678
  101. package/dist/collection/components/mrd-relation-field/mrd-relation-field.scss +0 -266
  102. package/dist/collection/components/mrd-secret-field/mrd-secret-field.js +0 -229
  103. package/dist/collection/components/mrd-secret-field/mrd-secret-field.scss +0 -73
  104. package/dist/collection/components/mrd-table/mrd-table.scss +0 -742
  105. package/dist/collection/components/mrd-text-field/mrd-text-field.js +0 -227
  106. package/dist/collection/components/mrd-text-field/mrd-text-field.scss +0 -69
  107. package/dist/collection/components/mrd-textarea-field/mrd-textarea-field.js +0 -267
  108. package/dist/collection/components/mrd-textarea-field/mrd-textarea-field.scss +0 -79
  109. package/dist/collection/components/mrd-time-field/mrd-time-field.js +0 -206
  110. package/dist/collection/components/mrd-time-field/mrd-time-field.scss +0 -66
  111. package/dist/collection/dev/api.js +0 -136
  112. package/dist/collection/dev/app.js +0 -868
  113. package/dist/collection/dev/auth.js +0 -156
  114. package/dist/collection/dev/example-data.js +0 -403
  115. package/dist/collection/dev/sprites.svg +0 -55
  116. package/dist/collection/index.js +0 -1
  117. package/dist/collection/types/client-layout.js +0 -64
  118. package/dist/collection/types/index.js +0 -1
  119. package/dist/components/client-layout.js +0 -1
  120. package/dist/components/format.js +0 -1
  121. package/dist/components/i18n.js +0 -1
  122. package/dist/components/index.js +0 -1
  123. package/dist/components/mrd-boolean-field.js +0 -1
  124. package/dist/components/mrd-boolean-field2.js +0 -1
  125. package/dist/components/mrd-currency-field.js +0 -1
  126. package/dist/components/mrd-currency-field2.js +0 -1
  127. package/dist/components/mrd-date-field.js +0 -1
  128. package/dist/components/mrd-date-field2.js +0 -1
  129. package/dist/components/mrd-datetime-field.js +0 -1
  130. package/dist/components/mrd-datetime-field2.js +0 -1
  131. package/dist/components/mrd-email-field.js +0 -1
  132. package/dist/components/mrd-email-field2.js +0 -1
  133. package/dist/components/mrd-field.js +0 -1
  134. package/dist/components/mrd-field2.js +0 -1
  135. package/dist/components/mrd-file-field.js +0 -1
  136. package/dist/components/mrd-file-field2.js +0 -1
  137. package/dist/components/mrd-form.js +0 -1
  138. package/dist/components/mrd-hyperlink-field.js +0 -1
  139. package/dist/components/mrd-hyperlink-field2.js +0 -1
  140. package/dist/components/mrd-image-field.js +0 -1
  141. package/dist/components/mrd-image-field2.js +0 -1
  142. package/dist/components/mrd-layout-section.js +0 -1
  143. package/dist/components/mrd-list-field.js +0 -1
  144. package/dist/components/mrd-list-field2.js +0 -1
  145. package/dist/components/mrd-longtext-field.js +0 -1
  146. package/dist/components/mrd-longtext-field2.js +0 -1
  147. package/dist/components/mrd-number-field.js +0 -1
  148. package/dist/components/mrd-number-field2.js +0 -1
  149. package/dist/components/mrd-relation-field.js +0 -1
  150. package/dist/components/mrd-relation-field2.js +0 -1
  151. package/dist/components/mrd-secret-field.js +0 -1
  152. package/dist/components/mrd-secret-field2.js +0 -1
  153. package/dist/components/mrd-table.js +0 -1
  154. package/dist/components/mrd-table2.js +0 -1
  155. package/dist/components/mrd-text-field.js +0 -1
  156. package/dist/components/mrd-text-field2.js +0 -1
  157. package/dist/components/mrd-textarea-field.js +0 -1
  158. package/dist/components/mrd-textarea-field2.js +0 -1
  159. package/dist/components/mrd-time-field.js +0 -1
  160. package/dist/components/mrd-time-field2.js +0 -1
  161. package/dist/components/quill.js +0 -1
  162. package/dist/components/validation.js +0 -1
  163. package/dist/esm/app-globals-DQuL1Twl.js +0 -3
  164. package/dist/esm/index-_tsCCkAi.js +0 -1561
  165. package/dist/esm/loader.js +0 -11
  166. package/dist/esm/mosterdcomponents.js +0 -21
  167. package/dist/esm/mrd-boolean-field_20.entry.js +0 -3827
  168. package/dist/index.cjs.js +0 -1
  169. package/dist/index.js +0 -1
  170. package/dist/mosterdcomponents/p-CiuCgGz_.js +0 -1
  171. package/dist/mosterdcomponents/p-DQuL1Twl.js +0 -1
  172. package/dist/mosterdcomponents/p-_tsCCkAi.js +0 -2
  173. package/dist/mosterdcomponents/p-c9839596.entry.js +0 -1
@@ -1,32 +0,0 @@
1
- {
2
- "entries": [
3
- "components/mrd-boolean-field/mrd-boolean-field.js",
4
- "components/mrd-currency-field/mrd-currency-field.js",
5
- "components/mrd-date-field/mrd-date-field.js",
6
- "components/mrd-datetime-field/mrd-datetime-field.js",
7
- "components/mrd-email-field/mrd-email-field.js",
8
- "components/mrd-field/mrd-field.js",
9
- "components/mrd-file-field/mrd-file-field.js",
10
- "components/mrd-form/mrd-form.js",
11
- "components/mrd-hyperlink-field/mrd-hyperlink-field.js",
12
- "components/mrd-image-field/mrd-image-field.js",
13
- "components/mrd-layout-section/mrd-layout-section.js",
14
- "components/mrd-list-field/mrd-list-field.js",
15
- "components/mrd-longtext-field/mrd-longtext-field.js",
16
- "components/mrd-number-field/mrd-number-field.js",
17
- "components/mrd-relation-field/mrd-relation-field.js",
18
- "components/mrd-secret-field/mrd-secret-field.js",
19
- "components/mrd-table/mrd-table.js",
20
- "components/mrd-text-field/mrd-text-field.js",
21
- "components/mrd-textarea-field/mrd-textarea-field.js",
22
- "components/mrd-time-field/mrd-time-field.js"
23
- ],
24
- "mixins": [],
25
- "compiler": {
26
- "name": "@stencil/core",
27
- "version": "4.43.2",
28
- "typescriptVersion": "5.8.3"
29
- },
30
- "collections": [],
31
- "bundles": []
32
- }
@@ -1,199 +0,0 @@
1
- import { Host, h } from "@stencil/core";
2
- export class MrdBooleanField {
3
- constructor() {
4
- this.name = '';
5
- this.label = '';
6
- this.value = false;
7
- this.required = false;
8
- this.disabled = false;
9
- this.locale = navigator.language;
10
- this.checked = false;
11
- this.handleChange = (e) => {
12
- this.checked = e.target.checked;
13
- this.mrdChange.emit({ name: this.name, value: this.checked });
14
- };
15
- this.handleBlur = () => {
16
- this.mrdBlur.emit({ name: this.name, value: this.checked });
17
- };
18
- }
19
- componentWillLoad() {
20
- this.checked = !!this.value;
21
- }
22
- render() {
23
- return (h(Host, { key: 'aed1d936d686870114a12aad9fc4cccb76ecd31e' }, h("div", { key: '5cc8aaa0f12d4195d02fce8a810d7d993e2e8c99', class: "mrd-boolean-field" }, h("label", { key: '41c3b3e0f01778fc2654ba86e3fe4e5a07c8537a', class: "mrd-boolean-field__toggle-label" }, h("input", { key: 'c261e6903e050d2f3d8df8abb90c74d99ed20161', class: "mrd-boolean-field__checkbox", type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h("span", { key: '079ee220fe692536af15a7fb4286626102ae940e', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (h("span", { key: '1f4f52a41f0bd6ba4c61cf9d4db74ab2f1aa8877', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
24
- }
25
- static get is() { return "mrd-boolean-field"; }
26
- static get encapsulation() { return "scoped"; }
27
- static get originalStyleUrls() {
28
- return {
29
- "$": ["mrd-boolean-field.scss"]
30
- };
31
- }
32
- static get styleUrls() {
33
- return {
34
- "$": ["mrd-boolean-field.css"]
35
- };
36
- }
37
- static get properties() {
38
- return {
39
- "name": {
40
- "type": "string",
41
- "mutable": false,
42
- "complexType": {
43
- "original": "string",
44
- "resolved": "string",
45
- "references": {}
46
- },
47
- "required": false,
48
- "optional": false,
49
- "docs": {
50
- "tags": [],
51
- "text": ""
52
- },
53
- "getter": false,
54
- "setter": false,
55
- "reflect": false,
56
- "attribute": "name",
57
- "defaultValue": "''"
58
- },
59
- "label": {
60
- "type": "string",
61
- "mutable": false,
62
- "complexType": {
63
- "original": "string",
64
- "resolved": "string",
65
- "references": {}
66
- },
67
- "required": false,
68
- "optional": false,
69
- "docs": {
70
- "tags": [],
71
- "text": ""
72
- },
73
- "getter": false,
74
- "setter": false,
75
- "reflect": false,
76
- "attribute": "label",
77
- "defaultValue": "''"
78
- },
79
- "value": {
80
- "type": "boolean",
81
- "mutable": false,
82
- "complexType": {
83
- "original": "boolean",
84
- "resolved": "boolean",
85
- "references": {}
86
- },
87
- "required": false,
88
- "optional": false,
89
- "docs": {
90
- "tags": [],
91
- "text": ""
92
- },
93
- "getter": false,
94
- "setter": false,
95
- "reflect": false,
96
- "attribute": "value",
97
- "defaultValue": "false"
98
- },
99
- "required": {
100
- "type": "boolean",
101
- "mutable": false,
102
- "complexType": {
103
- "original": "boolean",
104
- "resolved": "boolean",
105
- "references": {}
106
- },
107
- "required": false,
108
- "optional": false,
109
- "docs": {
110
- "tags": [],
111
- "text": ""
112
- },
113
- "getter": false,
114
- "setter": false,
115
- "reflect": false,
116
- "attribute": "required",
117
- "defaultValue": "false"
118
- },
119
- "disabled": {
120
- "type": "boolean",
121
- "mutable": false,
122
- "complexType": {
123
- "original": "boolean",
124
- "resolved": "boolean",
125
- "references": {}
126
- },
127
- "required": false,
128
- "optional": false,
129
- "docs": {
130
- "tags": [],
131
- "text": ""
132
- },
133
- "getter": false,
134
- "setter": false,
135
- "reflect": false,
136
- "attribute": "disabled",
137
- "defaultValue": "false"
138
- },
139
- "locale": {
140
- "type": "string",
141
- "mutable": false,
142
- "complexType": {
143
- "original": "string",
144
- "resolved": "string",
145
- "references": {}
146
- },
147
- "required": false,
148
- "optional": false,
149
- "docs": {
150
- "tags": [],
151
- "text": ""
152
- },
153
- "getter": false,
154
- "setter": false,
155
- "reflect": false,
156
- "attribute": "locale",
157
- "defaultValue": "navigator.language"
158
- }
159
- };
160
- }
161
- static get states() {
162
- return {
163
- "checked": {}
164
- };
165
- }
166
- static get events() {
167
- return [{
168
- "method": "mrdChange",
169
- "name": "mrdChange",
170
- "bubbles": true,
171
- "cancelable": true,
172
- "composed": true,
173
- "docs": {
174
- "tags": [],
175
- "text": ""
176
- },
177
- "complexType": {
178
- "original": "{ name: string; value: boolean }",
179
- "resolved": "{ name: string; value: boolean; }",
180
- "references": {}
181
- }
182
- }, {
183
- "method": "mrdBlur",
184
- "name": "mrdBlur",
185
- "bubbles": true,
186
- "cancelable": true,
187
- "composed": true,
188
- "docs": {
189
- "tags": [],
190
- "text": ""
191
- },
192
- "complexType": {
193
- "original": "{ name: string; value: boolean }",
194
- "resolved": "{ name: string; value: boolean; }",
195
- "references": {}
196
- }
197
- }];
198
- }
199
- }
@@ -1,77 +0,0 @@
1
- :host {
2
- display: block;
3
- }
4
-
5
- .mrd-boolean-field {
6
- display: flex;
7
- align-items: center;
8
- width: 100%;
9
- }
10
-
11
- .mrd-boolean-field__toggle-label {
12
- display: flex;
13
- align-items: center;
14
- gap: var(--mrd-space-3);
15
- cursor: pointer;
16
- user-select: none;
17
- }
18
-
19
- .mrd-boolean-field__checkbox {
20
- position: absolute;
21
- opacity: 0;
22
- width: 0;
23
- height: 0;
24
- pointer-events: none;
25
- }
26
-
27
- .mrd-boolean-field__checkbox:checked + .mrd-boolean-field__toggle {
28
- background-color: var(--mrd-color-primary);
29
- }
30
-
31
- .mrd-boolean-field__checkbox:checked + .mrd-boolean-field__toggle::after {
32
- transform: translateX(20px);
33
- }
34
-
35
- .mrd-boolean-field__checkbox:focus + .mrd-boolean-field__toggle {
36
- box-shadow: var(--mrd-shadow-focus);
37
- }
38
-
39
- .mrd-boolean-field__checkbox:disabled + .mrd-boolean-field__toggle {
40
- opacity: 0.5;
41
- cursor: not-allowed;
42
- }
43
-
44
- .mrd-boolean-field__toggle {
45
- position: relative;
46
- display: inline-block;
47
- width: 44px;
48
- height: 24px;
49
- background-color: var(--mrd-color-neutral-300);
50
- border-radius: var(--mrd-border-radius-full);
51
- transition: background-color var(--mrd-transition);
52
- flex-shrink: 0;
53
- }
54
-
55
- .mrd-boolean-field__toggle::after {
56
- content: '';
57
- position: absolute;
58
- top: 2px;
59
- left: 2px;
60
- width: 20px;
61
- height: 20px;
62
- background-color: var(--mrd-color-white);
63
- border-radius: 50%;
64
- transition: transform var(--mrd-transition);
65
- box-shadow: var(--mrd-shadow-sm);
66
- }
67
-
68
- .mrd-boolean-field__text {
69
- font-family: var(--mrd-font-family);
70
- font-size: var(--mrd-font-size-base);
71
- color: var(--mrd-color-neutral-800);
72
- }
73
-
74
- .mrd-boolean-field__text--required::after {
75
- content: ' *';
76
- color: var(--mrd-color-danger);
77
- }
@@ -1,248 +0,0 @@
1
- import { Host, h } from "@stencil/core";
2
- import { t } from "../../utils/i18n";
3
- import { validateRequired } from "../../utils/validation";
4
- import { parseLocalizedNumber } from "../../utils/format";
5
- const COMMON_CURRENCIES = [
6
- 'EUR', 'USD', 'GBP', 'CHF', 'JPY', 'CNY', 'AUD', 'CAD',
7
- 'SEK', 'NOK', 'DKK', 'NZD', 'SGD', 'HKD', 'PLN', 'CZK',
8
- 'HUF', 'MXN', 'BRL', 'INR', 'TRY', 'ZAR', 'AED', 'SAR',
9
- ];
10
- export class MrdCurrencyField {
11
- constructor() {
12
- this.name = '';
13
- this.label = '';
14
- this.value = { amount: null, currency: 'EUR' };
15
- this.required = false;
16
- this.disabled = false;
17
- this.locale = navigator.language;
18
- this.amountDisplay = '';
19
- this.currency = 'EUR';
20
- this.error = '';
21
- this.handleAmountInput = (e) => {
22
- this.amountDisplay = e.target.value;
23
- };
24
- this.handleAmountBlur = (e) => {
25
- const raw = e.target.value;
26
- const parsed = parseLocalizedNumber(raw, this.locale);
27
- if (this.required && !validateRequired(raw)) {
28
- this.error = t('required', this.locale);
29
- }
30
- else {
31
- this.error = '';
32
- }
33
- const val = { amount: parsed, currency: this.currency };
34
- this.mrdChange.emit({ name: this.name, value: val });
35
- this.mrdBlur.emit({ name: this.name, value: val });
36
- };
37
- this.handleCurrencyChange = (e) => {
38
- this.currency = e.target.value;
39
- const parsed = parseLocalizedNumber(this.amountDisplay, this.locale);
40
- this.mrdChange.emit({ name: this.name, value: { amount: parsed, currency: this.currency } });
41
- };
42
- }
43
- componentWillLoad() {
44
- if (this.value) {
45
- this.currency = this.value.currency || 'EUR';
46
- this.amountDisplay = this.value.amount !== null ? String(this.value.amount) : '';
47
- }
48
- }
49
- render() {
50
- const hasError = !!this.error;
51
- return (h(Host, { key: 'd3450e9c26b1a755d3e6a5a3561d93b2ac566a28' }, h("div", { key: 'b66942cc1953daff728504deef8a9cc1330ef549', class: "mrd-currency-field" }, this.label && (h("label", { key: '3d3f2f06e9ffea944552f0f7cf3150d0246c54f0', class: `mrd-currency-field__label${this.required ? ' mrd-currency-field__label--required' : ''}` }, this.label)), h("div", { key: 'd30a2adfceefdbefef2d4fe6633a163a753b15d0', class: "mrd-currency-field__row" }, h("input", { key: '9af09b19b6cbe24498d6ca8edf7b28f675afdec5', class: `mrd-currency-field__amount${hasError ? ' mrd-currency-field__amount--error' : ''}`, type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: "0.00", required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onBlur: this.handleAmountBlur }), h("select", { key: '21e55b04b7bf16586b5cfaa82d77db45c6dedf21', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), hasError && h("span", { key: '7a0006d4230557cf9c58f82f21de73b5d12f7e17', class: "mrd-currency-field__error" }, this.error))));
52
- }
53
- static get is() { return "mrd-currency-field"; }
54
- static get encapsulation() { return "scoped"; }
55
- static get originalStyleUrls() {
56
- return {
57
- "$": ["mrd-currency-field.scss"]
58
- };
59
- }
60
- static get styleUrls() {
61
- return {
62
- "$": ["mrd-currency-field.css"]
63
- };
64
- }
65
- static get properties() {
66
- return {
67
- "name": {
68
- "type": "string",
69
- "mutable": false,
70
- "complexType": {
71
- "original": "string",
72
- "resolved": "string",
73
- "references": {}
74
- },
75
- "required": false,
76
- "optional": false,
77
- "docs": {
78
- "tags": [],
79
- "text": ""
80
- },
81
- "getter": false,
82
- "setter": false,
83
- "reflect": false,
84
- "attribute": "name",
85
- "defaultValue": "''"
86
- },
87
- "label": {
88
- "type": "string",
89
- "mutable": false,
90
- "complexType": {
91
- "original": "string",
92
- "resolved": "string",
93
- "references": {}
94
- },
95
- "required": false,
96
- "optional": false,
97
- "docs": {
98
- "tags": [],
99
- "text": ""
100
- },
101
- "getter": false,
102
- "setter": false,
103
- "reflect": false,
104
- "attribute": "label",
105
- "defaultValue": "''"
106
- },
107
- "value": {
108
- "type": "unknown",
109
- "mutable": false,
110
- "complexType": {
111
- "original": "CurrencyValue",
112
- "resolved": "CurrencyValue",
113
- "references": {
114
- "CurrencyValue": {
115
- "location": "import",
116
- "path": "../../types",
117
- "id": "src/types/index.ts::CurrencyValue",
118
- "referenceLocation": "CurrencyValue"
119
- }
120
- }
121
- },
122
- "required": false,
123
- "optional": false,
124
- "docs": {
125
- "tags": [],
126
- "text": ""
127
- },
128
- "getter": false,
129
- "setter": false,
130
- "defaultValue": "{ amount: null, currency: 'EUR' }"
131
- },
132
- "required": {
133
- "type": "boolean",
134
- "mutable": false,
135
- "complexType": {
136
- "original": "boolean",
137
- "resolved": "boolean",
138
- "references": {}
139
- },
140
- "required": false,
141
- "optional": false,
142
- "docs": {
143
- "tags": [],
144
- "text": ""
145
- },
146
- "getter": false,
147
- "setter": false,
148
- "reflect": false,
149
- "attribute": "required",
150
- "defaultValue": "false"
151
- },
152
- "disabled": {
153
- "type": "boolean",
154
- "mutable": false,
155
- "complexType": {
156
- "original": "boolean",
157
- "resolved": "boolean",
158
- "references": {}
159
- },
160
- "required": false,
161
- "optional": false,
162
- "docs": {
163
- "tags": [],
164
- "text": ""
165
- },
166
- "getter": false,
167
- "setter": false,
168
- "reflect": false,
169
- "attribute": "disabled",
170
- "defaultValue": "false"
171
- },
172
- "locale": {
173
- "type": "string",
174
- "mutable": false,
175
- "complexType": {
176
- "original": "string",
177
- "resolved": "string",
178
- "references": {}
179
- },
180
- "required": false,
181
- "optional": false,
182
- "docs": {
183
- "tags": [],
184
- "text": ""
185
- },
186
- "getter": false,
187
- "setter": false,
188
- "reflect": false,
189
- "attribute": "locale",
190
- "defaultValue": "navigator.language"
191
- }
192
- };
193
- }
194
- static get states() {
195
- return {
196
- "amountDisplay": {},
197
- "currency": {},
198
- "error": {}
199
- };
200
- }
201
- static get events() {
202
- return [{
203
- "method": "mrdChange",
204
- "name": "mrdChange",
205
- "bubbles": true,
206
- "cancelable": true,
207
- "composed": true,
208
- "docs": {
209
- "tags": [],
210
- "text": ""
211
- },
212
- "complexType": {
213
- "original": "{ name: string; value: CurrencyValue }",
214
- "resolved": "{ name: string; value: CurrencyValue; }",
215
- "references": {
216
- "CurrencyValue": {
217
- "location": "import",
218
- "path": "../../types",
219
- "id": "src/types/index.ts::CurrencyValue",
220
- "referenceLocation": "CurrencyValue"
221
- }
222
- }
223
- }
224
- }, {
225
- "method": "mrdBlur",
226
- "name": "mrdBlur",
227
- "bubbles": true,
228
- "cancelable": true,
229
- "composed": true,
230
- "docs": {
231
- "tags": [],
232
- "text": ""
233
- },
234
- "complexType": {
235
- "original": "{ name: string; value: CurrencyValue }",
236
- "resolved": "{ name: string; value: CurrencyValue; }",
237
- "references": {
238
- "CurrencyValue": {
239
- "location": "import",
240
- "path": "../../types",
241
- "id": "src/types/index.ts::CurrencyValue",
242
- "referenceLocation": "CurrencyValue"
243
- }
244
- }
245
- }
246
- }];
247
- }
248
- }
@@ -1,100 +0,0 @@
1
- :host {
2
- display: block;
3
- }
4
-
5
- .mrd-currency-field {
6
- display: flex;
7
- flex-direction: column;
8
- gap: var(--mrd-space-1);
9
- width: 100%;
10
- }
11
-
12
- .mrd-currency-field__label {
13
- display: block;
14
- font-family: var(--mrd-font-family);
15
- font-size: var(--mrd-label-font-size);
16
- font-weight: var(--mrd-label-font-weight);
17
- color: var(--mrd-label-color);
18
- }
19
-
20
- .mrd-currency-field__label--required::after {
21
- content: ' *';
22
- color: var(--mrd-color-danger);
23
- }
24
-
25
- .mrd-currency-field__row {
26
- display: flex;
27
- gap: var(--mrd-space-2);
28
- align-items: stretch;
29
- }
30
-
31
- .mrd-currency-field__amount {
32
- flex: 1;
33
- height: var(--mrd-input-height);
34
- padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);
35
- font-family: var(--mrd-font-family);
36
- font-size: var(--mrd-font-size-base);
37
- color: var(--mrd-input-color);
38
- background-color: var(--mrd-input-bg);
39
- border: var(--mrd-border-width) solid var(--mrd-border-color);
40
- border-radius: var(--mrd-border-radius);
41
- transition: border-color var(--mrd-transition), box-shadow var(--mrd-transition);
42
- outline: none;
43
- appearance: none;
44
- text-align: right;
45
- box-sizing: border-box;
46
- }
47
-
48
- .mrd-currency-field__amount:focus {
49
- border-color: var(--mrd-border-color-focus);
50
- box-shadow: var(--mrd-shadow-focus);
51
- }
52
-
53
- .mrd-currency-field__amount:disabled {
54
- background-color: var(--mrd-input-bg-disabled);
55
- cursor: not-allowed;
56
- opacity: 0.7;
57
- }
58
-
59
- .mrd-currency-field__amount--error {
60
- border-color: var(--mrd-border-color-error);
61
- }
62
-
63
- .mrd-currency-field__amount--error:focus {
64
- box-shadow: var(--mrd-shadow-focus-error);
65
- }
66
-
67
- .mrd-currency-field__currency {
68
- width: 90px;
69
- height: var(--mrd-input-height);
70
- padding: var(--mrd-input-padding-y) var(--mrd-space-2);
71
- font-family: var(--mrd-font-family);
72
- font-size: var(--mrd-font-size-sm);
73
- font-weight: var(--mrd-font-weight-medium);
74
- color: var(--mrd-input-color);
75
- background-color: var(--mrd-color-neutral-50);
76
- border: var(--mrd-border-width) solid var(--mrd-border-color);
77
- border-radius: var(--mrd-border-radius);
78
- outline: none;
79
- cursor: pointer;
80
- box-sizing: border-box;
81
- appearance: none;
82
- text-align: center;
83
- }
84
-
85
- .mrd-currency-field__currency:focus {
86
- border-color: var(--mrd-border-color-focus);
87
- box-shadow: var(--mrd-shadow-focus);
88
- }
89
-
90
- .mrd-currency-field__currency:disabled {
91
- background-color: var(--mrd-input-bg-disabled);
92
- cursor: not-allowed;
93
- opacity: 0.7;
94
- }
95
-
96
- .mrd-currency-field__error {
97
- font-family: var(--mrd-font-family);
98
- font-size: var(--mrd-error-font-size);
99
- color: var(--mrd-error-color);
100
- }