@momentum-design/components 0.23.1 → 0.23.2
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.
- package/dist/browser/index.js +60 -46
- package/dist/browser/index.js.map +3 -3
- package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +7 -0
- package/dist/components/formfieldwrapper/formfieldwrapper.component.js +19 -0
- package/dist/components/formfieldwrapper/formfieldwrapper.styles.js +4 -0
- package/dist/components/input/input.component.d.ts +0 -5
- package/dist/components/input/input.component.js +1 -10
- package/dist/components/input/input.styles.js +1 -0
- package/dist/custom-elements.json +163 -19
- package/package.json +1 -1
|
@@ -17,6 +17,12 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
|
|
|
17
17
|
* The label of the input field. It is linked to the input field using the `for` attribute.
|
|
18
18
|
*/
|
|
19
19
|
label?: string;
|
|
20
|
+
/**
|
|
21
|
+
* The required label of the input field.
|
|
22
|
+
* When an appropriate string value is set,
|
|
23
|
+
* the input field is marked as required and the label is appended with this text.
|
|
24
|
+
*/
|
|
25
|
+
requiredLabel?: string;
|
|
20
26
|
/**
|
|
21
27
|
* The unique id of the input field. It is used to link the input field with the label.
|
|
22
28
|
* @default `mdc-input-${uuidv4()}`
|
|
@@ -36,6 +42,7 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
|
|
|
36
42
|
* @returns void
|
|
37
43
|
*/
|
|
38
44
|
protected renderLabelElement(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
45
|
+
protected renderRequiredLabel(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
39
46
|
/**
|
|
40
47
|
* creates the helpertext icon based on the helpTextType for validation.
|
|
41
48
|
* If the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.
|
|
@@ -49,6 +49,20 @@ class FormfieldWrapper extends DisabledMixin(Component) {
|
|
|
49
49
|
}
|
|
50
50
|
return html `<label for="${this.id}" class="mdc-label" part="label">${this.label}</label>`;
|
|
51
51
|
}
|
|
52
|
+
renderRequiredLabel() {
|
|
53
|
+
if (!this.requiredLabel) {
|
|
54
|
+
return nothing;
|
|
55
|
+
}
|
|
56
|
+
return html `
|
|
57
|
+
<mdc-text
|
|
58
|
+
part="required-label"
|
|
59
|
+
tagname=${MDC_TEXT_OPTIONS.TAGNAME}
|
|
60
|
+
type=${MDC_TEXT_OPTIONS.TYPE}
|
|
61
|
+
>
|
|
62
|
+
(${this.requiredLabel})
|
|
63
|
+
</mdc-text>
|
|
64
|
+
`;
|
|
65
|
+
}
|
|
52
66
|
/**
|
|
53
67
|
* creates the helpertext icon based on the helpTextType for validation.
|
|
54
68
|
* If the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.
|
|
@@ -90,6 +104,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
|
|
|
90
104
|
renderLabel() {
|
|
91
105
|
return html `<div class="mdc-label-text" part="label-text">
|
|
92
106
|
<slot name="label">${this.renderLabelElement()}</slot>
|
|
107
|
+
<slot name="required-label">${this.renderRequiredLabel()}</slot>
|
|
93
108
|
<slot name="label-info"></slot>
|
|
94
109
|
</div>`;
|
|
95
110
|
}
|
|
@@ -109,6 +124,10 @@ __decorate([
|
|
|
109
124
|
property({ reflect: true, type: String }),
|
|
110
125
|
__metadata("design:type", String)
|
|
111
126
|
], FormfieldWrapper.prototype, "label", void 0);
|
|
127
|
+
__decorate([
|
|
128
|
+
property({ type: String, reflect: true, attribute: 'required-label' }),
|
|
129
|
+
__metadata("design:type", String)
|
|
130
|
+
], FormfieldWrapper.prototype, "requiredLabel", void 0);
|
|
112
131
|
__decorate([
|
|
113
132
|
property({ type: String }),
|
|
114
133
|
__metadata("design:type", Object)
|
|
@@ -25,10 +25,14 @@ const styles = [
|
|
|
25
25
|
display: flex;
|
|
26
26
|
align-items: center;
|
|
27
27
|
gap: 0.5rem;
|
|
28
|
+
width: 100%;
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
.mdc-label {
|
|
31
32
|
color: var(--mds-color-theme-text-primary-normal);
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
text-overflow: ellipsis;
|
|
35
|
+
white-space: nowrap;
|
|
32
36
|
}
|
|
33
37
|
|
|
34
38
|
.mdc-help-text {
|
|
@@ -44,11 +44,6 @@ declare class Input extends Input_base {
|
|
|
44
44
|
* The placeholder text that is displayed when the input field is empty.
|
|
45
45
|
*/
|
|
46
46
|
placeholder: string;
|
|
47
|
-
/**
|
|
48
|
-
* required attribute of the input field.
|
|
49
|
-
* If true, the consumer should indicate it on the label that the input field is required.
|
|
50
|
-
*/
|
|
51
|
-
required: boolean;
|
|
52
47
|
/**
|
|
53
48
|
* readonly attribute of the input field. If true, the input field is read-only.
|
|
54
49
|
*/
|
|
@@ -71,11 +71,6 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
|
|
|
71
71
|
* The placeholder text that is displayed when the input field is empty.
|
|
72
72
|
*/
|
|
73
73
|
this.placeholder = '';
|
|
74
|
-
/**
|
|
75
|
-
* required attribute of the input field.
|
|
76
|
-
* If true, the consumer should indicate it on the label that the input field is required.
|
|
77
|
-
*/
|
|
78
|
-
this.required = false;
|
|
79
74
|
/**
|
|
80
75
|
* readonly attribute of the input field. If true, the input field is read-only.
|
|
81
76
|
*/
|
|
@@ -316,7 +311,7 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
|
|
|
316
311
|
.value="${this.value}"
|
|
317
312
|
?disabled="${this.disabled}"
|
|
318
313
|
?readonly="${this.readonly}"
|
|
319
|
-
?required="${this.
|
|
314
|
+
?required="${!!this.requiredLabel}"
|
|
320
315
|
type="text"
|
|
321
316
|
placeholder=${ifDefined(this.placeholder)}
|
|
322
317
|
minlength=${ifDefined(this.minlength)}
|
|
@@ -347,10 +342,6 @@ __decorate([
|
|
|
347
342
|
property({ type: String }),
|
|
348
343
|
__metadata("design:type", Object)
|
|
349
344
|
], Input.prototype, "placeholder", void 0);
|
|
350
|
-
__decorate([
|
|
351
|
-
property({ type: Boolean }),
|
|
352
|
-
__metadata("design:type", Object)
|
|
353
|
-
], Input.prototype, "required", void 0);
|
|
354
345
|
__decorate([
|
|
355
346
|
property({ type: Boolean }),
|
|
356
347
|
__metadata("design:type", Object)
|
|
@@ -2234,6 +2234,20 @@
|
|
|
2234
2234
|
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
2235
2235
|
}
|
|
2236
2236
|
},
|
|
2237
|
+
{
|
|
2238
|
+
"kind": "field",
|
|
2239
|
+
"name": "requiredLabel",
|
|
2240
|
+
"type": {
|
|
2241
|
+
"text": "string | undefined"
|
|
2242
|
+
},
|
|
2243
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
2244
|
+
"attribute": "required-label",
|
|
2245
|
+
"reflects": true,
|
|
2246
|
+
"inheritedFrom": {
|
|
2247
|
+
"name": "FormfieldWrapper",
|
|
2248
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
2249
|
+
}
|
|
2250
|
+
},
|
|
2237
2251
|
{
|
|
2238
2252
|
"kind": "field",
|
|
2239
2253
|
"name": "id",
|
|
@@ -2274,6 +2288,15 @@
|
|
|
2274
2288
|
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
2275
2289
|
}
|
|
2276
2290
|
},
|
|
2291
|
+
{
|
|
2292
|
+
"kind": "method",
|
|
2293
|
+
"name": "renderRequiredLabel",
|
|
2294
|
+
"privacy": "protected",
|
|
2295
|
+
"inheritedFrom": {
|
|
2296
|
+
"name": "FormfieldWrapper",
|
|
2297
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
2298
|
+
}
|
|
2299
|
+
},
|
|
2277
2300
|
{
|
|
2278
2301
|
"kind": "method",
|
|
2279
2302
|
"name": "renderHelpTextIcon",
|
|
@@ -2425,6 +2448,18 @@
|
|
|
2425
2448
|
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
2426
2449
|
}
|
|
2427
2450
|
},
|
|
2451
|
+
{
|
|
2452
|
+
"name": "required-label",
|
|
2453
|
+
"type": {
|
|
2454
|
+
"text": "string | undefined"
|
|
2455
|
+
},
|
|
2456
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
2457
|
+
"fieldName": "requiredLabel",
|
|
2458
|
+
"inheritedFrom": {
|
|
2459
|
+
"name": "FormfieldWrapper",
|
|
2460
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
2461
|
+
}
|
|
2462
|
+
},
|
|
2428
2463
|
{
|
|
2429
2464
|
"name": "id",
|
|
2430
2465
|
"default": "`mdc-input-${uuidv4()}`",
|
|
@@ -2865,6 +2900,16 @@
|
|
|
2865
2900
|
"attribute": "label",
|
|
2866
2901
|
"reflects": true
|
|
2867
2902
|
},
|
|
2903
|
+
{
|
|
2904
|
+
"kind": "field",
|
|
2905
|
+
"name": "requiredLabel",
|
|
2906
|
+
"type": {
|
|
2907
|
+
"text": "string | undefined"
|
|
2908
|
+
},
|
|
2909
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
2910
|
+
"attribute": "required-label",
|
|
2911
|
+
"reflects": true
|
|
2912
|
+
},
|
|
2868
2913
|
{
|
|
2869
2914
|
"kind": "field",
|
|
2870
2915
|
"name": "id",
|
|
@@ -2903,6 +2948,11 @@
|
|
|
2903
2948
|
}
|
|
2904
2949
|
}
|
|
2905
2950
|
},
|
|
2951
|
+
{
|
|
2952
|
+
"kind": "method",
|
|
2953
|
+
"name": "renderRequiredLabel",
|
|
2954
|
+
"privacy": "protected"
|
|
2955
|
+
},
|
|
2906
2956
|
{
|
|
2907
2957
|
"kind": "method",
|
|
2908
2958
|
"name": "renderHelpTextIcon",
|
|
@@ -2972,6 +3022,14 @@
|
|
|
2972
3022
|
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
2973
3023
|
"fieldName": "label"
|
|
2974
3024
|
},
|
|
3025
|
+
{
|
|
3026
|
+
"name": "required-label",
|
|
3027
|
+
"type": {
|
|
3028
|
+
"text": "string | undefined"
|
|
3029
|
+
},
|
|
3030
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
3031
|
+
"fieldName": "requiredLabel"
|
|
3032
|
+
},
|
|
2975
3033
|
{
|
|
2976
3034
|
"name": "id",
|
|
2977
3035
|
"default": "`mdc-input-${uuidv4()}`",
|
|
@@ -3500,16 +3558,6 @@
|
|
|
3500
3558
|
"description": "The placeholder text that is displayed when the input field is empty.",
|
|
3501
3559
|
"attribute": "placeholder"
|
|
3502
3560
|
},
|
|
3503
|
-
{
|
|
3504
|
-
"kind": "field",
|
|
3505
|
-
"name": "required",
|
|
3506
|
-
"type": {
|
|
3507
|
-
"text": "boolean"
|
|
3508
|
-
},
|
|
3509
|
-
"default": "false",
|
|
3510
|
-
"description": "required attribute of the input field.\nIf true, the consumer should indicate it on the label that the input field is required.",
|
|
3511
|
-
"attribute": "required"
|
|
3512
|
-
},
|
|
3513
3561
|
{
|
|
3514
3562
|
"kind": "field",
|
|
3515
3563
|
"name": "readonly",
|
|
@@ -3837,6 +3885,20 @@
|
|
|
3837
3885
|
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
3838
3886
|
}
|
|
3839
3887
|
},
|
|
3888
|
+
{
|
|
3889
|
+
"kind": "field",
|
|
3890
|
+
"name": "requiredLabel",
|
|
3891
|
+
"type": {
|
|
3892
|
+
"text": "string | undefined"
|
|
3893
|
+
},
|
|
3894
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
3895
|
+
"attribute": "required-label",
|
|
3896
|
+
"reflects": true,
|
|
3897
|
+
"inheritedFrom": {
|
|
3898
|
+
"name": "FormfieldWrapper",
|
|
3899
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
3900
|
+
}
|
|
3901
|
+
},
|
|
3840
3902
|
{
|
|
3841
3903
|
"kind": "field",
|
|
3842
3904
|
"name": "id",
|
|
@@ -3891,6 +3953,15 @@
|
|
|
3891
3953
|
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
3892
3954
|
}
|
|
3893
3955
|
},
|
|
3956
|
+
{
|
|
3957
|
+
"kind": "method",
|
|
3958
|
+
"name": "renderRequiredLabel",
|
|
3959
|
+
"privacy": "protected",
|
|
3960
|
+
"inheritedFrom": {
|
|
3961
|
+
"name": "FormfieldWrapper",
|
|
3962
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
3963
|
+
}
|
|
3964
|
+
},
|
|
3894
3965
|
{
|
|
3895
3966
|
"kind": "method",
|
|
3896
3967
|
"name": "renderHelpTextIcon",
|
|
@@ -3969,15 +4040,6 @@
|
|
|
3969
4040
|
"description": "The placeholder text that is displayed when the input field is empty.",
|
|
3970
4041
|
"fieldName": "placeholder"
|
|
3971
4042
|
},
|
|
3972
|
-
{
|
|
3973
|
-
"name": "required",
|
|
3974
|
-
"type": {
|
|
3975
|
-
"text": "boolean"
|
|
3976
|
-
},
|
|
3977
|
-
"default": "false",
|
|
3978
|
-
"description": "required attribute of the input field.\nIf true, the consumer should indicate it on the label that the input field is required.",
|
|
3979
|
-
"fieldName": "required"
|
|
3980
|
-
},
|
|
3981
4043
|
{
|
|
3982
4044
|
"name": "readonly",
|
|
3983
4045
|
"type": {
|
|
@@ -4161,6 +4223,18 @@
|
|
|
4161
4223
|
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
4162
4224
|
}
|
|
4163
4225
|
},
|
|
4226
|
+
{
|
|
4227
|
+
"name": "required-label",
|
|
4228
|
+
"type": {
|
|
4229
|
+
"text": "string | undefined"
|
|
4230
|
+
},
|
|
4231
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
4232
|
+
"fieldName": "requiredLabel",
|
|
4233
|
+
"inheritedFrom": {
|
|
4234
|
+
"name": "FormfieldWrapper",
|
|
4235
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
4236
|
+
}
|
|
4237
|
+
},
|
|
4164
4238
|
{
|
|
4165
4239
|
"name": "id",
|
|
4166
4240
|
"default": "`mdc-input-${uuidv4()}`",
|
|
@@ -5110,6 +5184,20 @@
|
|
|
5110
5184
|
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5111
5185
|
}
|
|
5112
5186
|
},
|
|
5187
|
+
{
|
|
5188
|
+
"kind": "field",
|
|
5189
|
+
"name": "requiredLabel",
|
|
5190
|
+
"type": {
|
|
5191
|
+
"text": "string | undefined"
|
|
5192
|
+
},
|
|
5193
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
5194
|
+
"attribute": "required-label",
|
|
5195
|
+
"reflects": true,
|
|
5196
|
+
"inheritedFrom": {
|
|
5197
|
+
"name": "FormfieldWrapper",
|
|
5198
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5199
|
+
}
|
|
5200
|
+
},
|
|
5113
5201
|
{
|
|
5114
5202
|
"kind": "field",
|
|
5115
5203
|
"name": "id",
|
|
@@ -5164,6 +5252,15 @@
|
|
|
5164
5252
|
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5165
5253
|
}
|
|
5166
5254
|
},
|
|
5255
|
+
{
|
|
5256
|
+
"kind": "method",
|
|
5257
|
+
"name": "renderRequiredLabel",
|
|
5258
|
+
"privacy": "protected",
|
|
5259
|
+
"inheritedFrom": {
|
|
5260
|
+
"name": "FormfieldWrapper",
|
|
5261
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5262
|
+
}
|
|
5263
|
+
},
|
|
5167
5264
|
{
|
|
5168
5265
|
"kind": "method",
|
|
5169
5266
|
"name": "renderHelpTextIcon",
|
|
@@ -5315,6 +5412,18 @@
|
|
|
5315
5412
|
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
5316
5413
|
}
|
|
5317
5414
|
},
|
|
5415
|
+
{
|
|
5416
|
+
"name": "required-label",
|
|
5417
|
+
"type": {
|
|
5418
|
+
"text": "string | undefined"
|
|
5419
|
+
},
|
|
5420
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
5421
|
+
"fieldName": "requiredLabel",
|
|
5422
|
+
"inheritedFrom": {
|
|
5423
|
+
"name": "FormfieldWrapper",
|
|
5424
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
5425
|
+
}
|
|
5426
|
+
},
|
|
5318
5427
|
{
|
|
5319
5428
|
"name": "id",
|
|
5320
5429
|
"default": "`mdc-input-${uuidv4()}`",
|
|
@@ -6461,6 +6570,20 @@
|
|
|
6461
6570
|
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
6462
6571
|
}
|
|
6463
6572
|
},
|
|
6573
|
+
{
|
|
6574
|
+
"kind": "field",
|
|
6575
|
+
"name": "requiredLabel",
|
|
6576
|
+
"type": {
|
|
6577
|
+
"text": "string | undefined"
|
|
6578
|
+
},
|
|
6579
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
6580
|
+
"attribute": "required-label",
|
|
6581
|
+
"reflects": true,
|
|
6582
|
+
"inheritedFrom": {
|
|
6583
|
+
"name": "FormfieldWrapper",
|
|
6584
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
6585
|
+
}
|
|
6586
|
+
},
|
|
6464
6587
|
{
|
|
6465
6588
|
"kind": "field",
|
|
6466
6589
|
"name": "id",
|
|
@@ -6501,6 +6624,15 @@
|
|
|
6501
6624
|
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
6502
6625
|
}
|
|
6503
6626
|
},
|
|
6627
|
+
{
|
|
6628
|
+
"kind": "method",
|
|
6629
|
+
"name": "renderRequiredLabel",
|
|
6630
|
+
"privacy": "protected",
|
|
6631
|
+
"inheritedFrom": {
|
|
6632
|
+
"name": "FormfieldWrapper",
|
|
6633
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
6634
|
+
}
|
|
6635
|
+
},
|
|
6504
6636
|
{
|
|
6505
6637
|
"kind": "method",
|
|
6506
6638
|
"name": "renderHelpTextIcon",
|
|
@@ -6652,6 +6784,18 @@
|
|
|
6652
6784
|
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
6653
6785
|
}
|
|
6654
6786
|
},
|
|
6787
|
+
{
|
|
6788
|
+
"name": "required-label",
|
|
6789
|
+
"type": {
|
|
6790
|
+
"text": "string | undefined"
|
|
6791
|
+
},
|
|
6792
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
6793
|
+
"fieldName": "requiredLabel",
|
|
6794
|
+
"inheritedFrom": {
|
|
6795
|
+
"name": "FormfieldWrapper",
|
|
6796
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
6797
|
+
}
|
|
6798
|
+
},
|
|
6655
6799
|
{
|
|
6656
6800
|
"name": "id",
|
|
6657
6801
|
"default": "`mdc-input-${uuidv4()}`",
|
package/package.json
CHANGED