@ni/nimble-components 35.12.4 → 35.12.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.
- package/dist/all-components-bundle.js +1889 -794
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +3519 -3391
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +188 -87
- package/dist/custom-elements.md +47 -45
- package/dist/esm/label-provider/base/index.d.ts +6 -4
- package/dist/esm/label-provider/base/index.js +12 -7
- package/dist/esm/label-provider/base/index.js.map +1 -1
- package/dist/esm/text-field/index.d.ts +9 -0
- package/dist/esm/text-field/index.js +3 -0
- package/dist/esm/text-field/index.js.map +1 -1
- package/dist/esm/text-field/template.js +1 -0
- package/dist/esm/text-field/template.js.map +1 -1
- package/package.json +2 -2
|
@@ -392,89 +392,6 @@
|
|
|
392
392
|
}
|
|
393
393
|
]
|
|
394
394
|
},
|
|
395
|
-
{
|
|
396
|
-
"kind": "javascript-module",
|
|
397
|
-
"path": "src/anchor-tab/index.ts",
|
|
398
|
-
"declarations": [
|
|
399
|
-
{
|
|
400
|
-
"kind": "class",
|
|
401
|
-
"description": "A nimble-styled link tab",
|
|
402
|
-
"name": "AnchorTab",
|
|
403
|
-
"members": [
|
|
404
|
-
{
|
|
405
|
-
"kind": "field",
|
|
406
|
-
"name": "disabled",
|
|
407
|
-
"type": {
|
|
408
|
-
"text": "boolean"
|
|
409
|
-
},
|
|
410
|
-
"privacy": "public",
|
|
411
|
-
"default": "false",
|
|
412
|
-
"description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information."
|
|
413
|
-
},
|
|
414
|
-
{
|
|
415
|
-
"kind": "field",
|
|
416
|
-
"name": "ariaSelected",
|
|
417
|
-
"type": {
|
|
418
|
-
"text": "string"
|
|
419
|
-
},
|
|
420
|
-
"privacy": "public",
|
|
421
|
-
"default": "'false'",
|
|
422
|
-
"description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected"
|
|
423
|
-
}
|
|
424
|
-
],
|
|
425
|
-
"attributes": [
|
|
426
|
-
{
|
|
427
|
-
"name": "disabled",
|
|
428
|
-
"type": {
|
|
429
|
-
"text": "boolean"
|
|
430
|
-
},
|
|
431
|
-
"default": "false",
|
|
432
|
-
"description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
|
|
433
|
-
"fieldName": "disabled"
|
|
434
|
-
},
|
|
435
|
-
{
|
|
436
|
-
"name": "aria-selected",
|
|
437
|
-
"type": {
|
|
438
|
-
"text": "string"
|
|
439
|
-
},
|
|
440
|
-
"default": "'false'",
|
|
441
|
-
"description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected",
|
|
442
|
-
"fieldName": "ariaSelected"
|
|
443
|
-
}
|
|
444
|
-
],
|
|
445
|
-
"superclass": {
|
|
446
|
-
"name": "AnchorBase",
|
|
447
|
-
"module": "/src/anchor-base"
|
|
448
|
-
}
|
|
449
|
-
},
|
|
450
|
-
{
|
|
451
|
-
"kind": "variable",
|
|
452
|
-
"name": "anchorTabTag",
|
|
453
|
-
"type": {
|
|
454
|
-
"text": "string"
|
|
455
|
-
},
|
|
456
|
-
"default": "'nimble-anchor-tab'"
|
|
457
|
-
}
|
|
458
|
-
],
|
|
459
|
-
"exports": [
|
|
460
|
-
{
|
|
461
|
-
"kind": "js",
|
|
462
|
-
"name": "AnchorTab",
|
|
463
|
-
"declaration": {
|
|
464
|
-
"name": "AnchorTab",
|
|
465
|
-
"module": "src/anchor-tab/index.ts"
|
|
466
|
-
}
|
|
467
|
-
},
|
|
468
|
-
{
|
|
469
|
-
"kind": "js",
|
|
470
|
-
"name": "anchorTabTag",
|
|
471
|
-
"declaration": {
|
|
472
|
-
"name": "anchorTabTag",
|
|
473
|
-
"module": "src/anchor-tab/index.ts"
|
|
474
|
-
}
|
|
475
|
-
}
|
|
476
|
-
]
|
|
477
|
-
},
|
|
478
395
|
{
|
|
479
396
|
"kind": "javascript-module",
|
|
480
397
|
"path": "src/anchor-step/index.ts",
|
|
@@ -659,6 +576,89 @@
|
|
|
659
576
|
}
|
|
660
577
|
]
|
|
661
578
|
},
|
|
579
|
+
{
|
|
580
|
+
"kind": "javascript-module",
|
|
581
|
+
"path": "src/anchor-tab/index.ts",
|
|
582
|
+
"declarations": [
|
|
583
|
+
{
|
|
584
|
+
"kind": "class",
|
|
585
|
+
"description": "A nimble-styled link tab",
|
|
586
|
+
"name": "AnchorTab",
|
|
587
|
+
"members": [
|
|
588
|
+
{
|
|
589
|
+
"kind": "field",
|
|
590
|
+
"name": "disabled",
|
|
591
|
+
"type": {
|
|
592
|
+
"text": "boolean"
|
|
593
|
+
},
|
|
594
|
+
"privacy": "public",
|
|
595
|
+
"default": "false",
|
|
596
|
+
"description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information."
|
|
597
|
+
},
|
|
598
|
+
{
|
|
599
|
+
"kind": "field",
|
|
600
|
+
"name": "ariaSelected",
|
|
601
|
+
"type": {
|
|
602
|
+
"text": "string"
|
|
603
|
+
},
|
|
604
|
+
"privacy": "public",
|
|
605
|
+
"default": "'false'",
|
|
606
|
+
"description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected"
|
|
607
|
+
}
|
|
608
|
+
],
|
|
609
|
+
"attributes": [
|
|
610
|
+
{
|
|
611
|
+
"name": "disabled",
|
|
612
|
+
"type": {
|
|
613
|
+
"text": "boolean"
|
|
614
|
+
},
|
|
615
|
+
"default": "false",
|
|
616
|
+
"description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
|
|
617
|
+
"fieldName": "disabled"
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
"name": "aria-selected",
|
|
621
|
+
"type": {
|
|
622
|
+
"text": "string"
|
|
623
|
+
},
|
|
624
|
+
"default": "'false'",
|
|
625
|
+
"description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected",
|
|
626
|
+
"fieldName": "ariaSelected"
|
|
627
|
+
}
|
|
628
|
+
],
|
|
629
|
+
"superclass": {
|
|
630
|
+
"name": "AnchorBase",
|
|
631
|
+
"module": "/src/anchor-base"
|
|
632
|
+
}
|
|
633
|
+
},
|
|
634
|
+
{
|
|
635
|
+
"kind": "variable",
|
|
636
|
+
"name": "anchorTabTag",
|
|
637
|
+
"type": {
|
|
638
|
+
"text": "string"
|
|
639
|
+
},
|
|
640
|
+
"default": "'nimble-anchor-tab'"
|
|
641
|
+
}
|
|
642
|
+
],
|
|
643
|
+
"exports": [
|
|
644
|
+
{
|
|
645
|
+
"kind": "js",
|
|
646
|
+
"name": "AnchorTab",
|
|
647
|
+
"declaration": {
|
|
648
|
+
"name": "AnchorTab",
|
|
649
|
+
"module": "src/anchor-tab/index.ts"
|
|
650
|
+
}
|
|
651
|
+
},
|
|
652
|
+
{
|
|
653
|
+
"kind": "js",
|
|
654
|
+
"name": "anchorTabTag",
|
|
655
|
+
"declaration": {
|
|
656
|
+
"name": "anchorTabTag",
|
|
657
|
+
"module": "src/anchor-tab/index.ts"
|
|
658
|
+
}
|
|
659
|
+
}
|
|
660
|
+
]
|
|
661
|
+
},
|
|
662
662
|
{
|
|
663
663
|
"kind": "javascript-module",
|
|
664
664
|
"path": "src/anchor-tabs/index.ts",
|
|
@@ -7001,6 +7001,15 @@
|
|
|
7001
7001
|
"privacy": "public",
|
|
7002
7002
|
"description": "The appearance the text field should have."
|
|
7003
7003
|
},
|
|
7004
|
+
{
|
|
7005
|
+
"kind": "field",
|
|
7006
|
+
"name": "autocomplete",
|
|
7007
|
+
"type": {
|
|
7008
|
+
"text": "string | undefined"
|
|
7009
|
+
},
|
|
7010
|
+
"privacy": "public",
|
|
7011
|
+
"description": "The autofill hint forwarded to the internal input (e.g. \"username\",\n\"current-password\", \"off\") for browser password managers and autofill."
|
|
7012
|
+
},
|
|
7004
7013
|
{
|
|
7005
7014
|
"kind": "field",
|
|
7006
7015
|
"name": "fullBleed",
|
|
@@ -7081,6 +7090,14 @@
|
|
|
7081
7090
|
"description": "The appearance the text field should have.",
|
|
7082
7091
|
"fieldName": "appearance"
|
|
7083
7092
|
},
|
|
7093
|
+
{
|
|
7094
|
+
"name": "autocomplete",
|
|
7095
|
+
"type": {
|
|
7096
|
+
"text": "string | undefined"
|
|
7097
|
+
},
|
|
7098
|
+
"description": "The autofill hint forwarded to the internal input (e.g. \"username\",\n\"current-password\", \"off\") for browser password managers and autofill.",
|
|
7099
|
+
"fieldName": "autocomplete"
|
|
7100
|
+
},
|
|
7084
7101
|
{
|
|
7085
7102
|
"name": "full-bleed",
|
|
7086
7103
|
"type": {
|
|
@@ -8458,7 +8475,25 @@
|
|
|
8458
8475
|
{
|
|
8459
8476
|
"name": "property",
|
|
8460
8477
|
"type": {
|
|
8461
|
-
"text": "keyof
|
|
8478
|
+
"text": "keyof SupportedLabels & string"
|
|
8479
|
+
}
|
|
8480
|
+
}
|
|
8481
|
+
]
|
|
8482
|
+
},
|
|
8483
|
+
{
|
|
8484
|
+
"kind": "method",
|
|
8485
|
+
"name": "isSupportedLabel",
|
|
8486
|
+
"privacy": "private",
|
|
8487
|
+
"return": {
|
|
8488
|
+
"type": {
|
|
8489
|
+
"text": "this is this\n & DesignTokensFor<SupportedLabels>\n & { supportedLabels: Pick<SupportedLabelTokens, Property> }"
|
|
8490
|
+
}
|
|
8491
|
+
},
|
|
8492
|
+
"parameters": [
|
|
8493
|
+
{
|
|
8494
|
+
"name": "property",
|
|
8495
|
+
"type": {
|
|
8496
|
+
"text": "Property"
|
|
8462
8497
|
}
|
|
8463
8498
|
}
|
|
8464
8499
|
]
|
|
@@ -8670,7 +8705,29 @@
|
|
|
8670
8705
|
{
|
|
8671
8706
|
"name": "property",
|
|
8672
8707
|
"type": {
|
|
8673
|
-
"text": "keyof
|
|
8708
|
+
"text": "keyof SupportedLabels & string"
|
|
8709
|
+
}
|
|
8710
|
+
}
|
|
8711
|
+
],
|
|
8712
|
+
"inheritedFrom": {
|
|
8713
|
+
"name": "LabelProviderBase",
|
|
8714
|
+
"module": "src/label-provider/base/index.ts"
|
|
8715
|
+
}
|
|
8716
|
+
},
|
|
8717
|
+
{
|
|
8718
|
+
"kind": "method",
|
|
8719
|
+
"name": "isSupportedLabel",
|
|
8720
|
+
"privacy": "private",
|
|
8721
|
+
"return": {
|
|
8722
|
+
"type": {
|
|
8723
|
+
"text": "this is this\n & DesignTokensFor<SupportedLabels>\n & { supportedLabels: Pick<SupportedLabelTokens, Property> }"
|
|
8724
|
+
}
|
|
8725
|
+
},
|
|
8726
|
+
"parameters": [
|
|
8727
|
+
{
|
|
8728
|
+
"name": "property",
|
|
8729
|
+
"type": {
|
|
8730
|
+
"text": "Property"
|
|
8674
8731
|
}
|
|
8675
8732
|
}
|
|
8676
8733
|
],
|
|
@@ -9126,7 +9183,29 @@
|
|
|
9126
9183
|
{
|
|
9127
9184
|
"name": "property",
|
|
9128
9185
|
"type": {
|
|
9129
|
-
"text": "keyof
|
|
9186
|
+
"text": "keyof SupportedLabels & string"
|
|
9187
|
+
}
|
|
9188
|
+
}
|
|
9189
|
+
],
|
|
9190
|
+
"inheritedFrom": {
|
|
9191
|
+
"name": "LabelProviderBase",
|
|
9192
|
+
"module": "src/label-provider/base/index.ts"
|
|
9193
|
+
}
|
|
9194
|
+
},
|
|
9195
|
+
{
|
|
9196
|
+
"kind": "method",
|
|
9197
|
+
"name": "isSupportedLabel",
|
|
9198
|
+
"privacy": "private",
|
|
9199
|
+
"return": {
|
|
9200
|
+
"type": {
|
|
9201
|
+
"text": "this is this\n & DesignTokensFor<SupportedLabels>\n & { supportedLabels: Pick<SupportedLabelTokens, Property> }"
|
|
9202
|
+
}
|
|
9203
|
+
},
|
|
9204
|
+
"parameters": [
|
|
9205
|
+
{
|
|
9206
|
+
"name": "property",
|
|
9207
|
+
"type": {
|
|
9208
|
+
"text": "Property"
|
|
9130
9209
|
}
|
|
9131
9210
|
}
|
|
9132
9211
|
],
|
|
@@ -9488,7 +9567,29 @@
|
|
|
9488
9567
|
{
|
|
9489
9568
|
"name": "property",
|
|
9490
9569
|
"type": {
|
|
9491
|
-
"text": "keyof
|
|
9570
|
+
"text": "keyof SupportedLabels & string"
|
|
9571
|
+
}
|
|
9572
|
+
}
|
|
9573
|
+
],
|
|
9574
|
+
"inheritedFrom": {
|
|
9575
|
+
"name": "LabelProviderBase",
|
|
9576
|
+
"module": "src/label-provider/base/index.ts"
|
|
9577
|
+
}
|
|
9578
|
+
},
|
|
9579
|
+
{
|
|
9580
|
+
"kind": "method",
|
|
9581
|
+
"name": "isSupportedLabel",
|
|
9582
|
+
"privacy": "private",
|
|
9583
|
+
"return": {
|
|
9584
|
+
"type": {
|
|
9585
|
+
"text": "this is this\n & DesignTokensFor<SupportedLabels>\n & { supportedLabels: Pick<SupportedLabelTokens, Property> }"
|
|
9586
|
+
}
|
|
9587
|
+
},
|
|
9588
|
+
"parameters": [
|
|
9589
|
+
{
|
|
9590
|
+
"name": "property",
|
|
9591
|
+
"type": {
|
|
9592
|
+
"text": "Property"
|
|
9492
9593
|
}
|
|
9493
9594
|
}
|
|
9494
9595
|
],
|
package/dist/custom-elements.md
CHANGED
|
@@ -93,30 +93,6 @@
|
|
|
93
93
|
|
|
94
94
|
<hr/>
|
|
95
95
|
|
|
96
|
-
## class: `AnchorTab`
|
|
97
|
-
|
|
98
|
-
### Superclass
|
|
99
|
-
|
|
100
|
-
| Name | Module | Package |
|
|
101
|
-
| ------------ | ---------------- | ------- |
|
|
102
|
-
| `AnchorBase` | /src/anchor-base | |
|
|
103
|
-
|
|
104
|
-
### Fields
|
|
105
|
-
|
|
106
|
-
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
107
|
-
| -------------- | ------- | --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
|
|
108
|
-
| `disabled` | public | `boolean` | `false` | When true, the control will be immutable by user interaction. See https\://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled \| disabled HTML attribute for more information. | |
|
|
109
|
-
| `ariaSelected` | public | `string` | `'false'` | Indicates the current "selected" state of various widgets.
https\://www\.w3.org/TR/wai-aria-1.1/#aria-selected | |
|
|
110
|
-
|
|
111
|
-
### Attributes
|
|
112
|
-
|
|
113
|
-
| Name | Field | Inherited From |
|
|
114
|
-
| --------------- | ------------ | -------------- |
|
|
115
|
-
| `disabled` | disabled | |
|
|
116
|
-
| `aria-selected` | ariaSelected | |
|
|
117
|
-
|
|
118
|
-
<hr/>
|
|
119
|
-
|
|
120
96
|
## class: `AnchorStep`
|
|
121
97
|
|
|
122
98
|
### Superclass
|
|
@@ -149,6 +125,30 @@
|
|
|
149
125
|
|
|
150
126
|
<hr/>
|
|
151
127
|
|
|
128
|
+
## class: `AnchorTab`
|
|
129
|
+
|
|
130
|
+
### Superclass
|
|
131
|
+
|
|
132
|
+
| Name | Module | Package |
|
|
133
|
+
| ------------ | ---------------- | ------- |
|
|
134
|
+
| `AnchorBase` | /src/anchor-base | |
|
|
135
|
+
|
|
136
|
+
### Fields
|
|
137
|
+
|
|
138
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
139
|
+
| -------------- | ------- | --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
|
|
140
|
+
| `disabled` | public | `boolean` | `false` | When true, the control will be immutable by user interaction. See https\://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled \| disabled HTML attribute for more information. | |
|
|
141
|
+
| `ariaSelected` | public | `string` | `'false'` | Indicates the current "selected" state of various widgets.
https\://www\.w3.org/TR/wai-aria-1.1/#aria-selected | |
|
|
142
|
+
|
|
143
|
+
### Attributes
|
|
144
|
+
|
|
145
|
+
| Name | Field | Inherited From |
|
|
146
|
+
| --------------- | ------------ | -------------- |
|
|
147
|
+
| `disabled` | disabled | |
|
|
148
|
+
| `aria-selected` | ariaSelected | |
|
|
149
|
+
|
|
150
|
+
<hr/>
|
|
151
|
+
|
|
152
152
|
## class: `AnchorTabs`
|
|
153
153
|
|
|
154
154
|
### Superclass
|
|
@@ -1036,21 +1036,23 @@
|
|
|
1036
1036
|
|
|
1037
1037
|
### Fields
|
|
1038
1038
|
|
|
1039
|
-
| Name | Privacy | Type | Default | Description
|
|
1040
|
-
| -------------------- | ------- | --------------------- | ------- |
|
|
1041
|
-
| `appearance` | public | `TextFieldAppearance` | | The appearance the text field should have.
|
|
1042
|
-
| `
|
|
1043
|
-
| `
|
|
1044
|
-
| `
|
|
1045
|
-
| `
|
|
1046
|
-
| `
|
|
1047
|
-
| `
|
|
1039
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
1040
|
+
| -------------------- | ------- | --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
|
|
1041
|
+
| `appearance` | public | `TextFieldAppearance` | | The appearance the text field should have. | |
|
|
1042
|
+
| `autocomplete` | public | `string \| undefined` | | The autofill hint forwarded to the internal input (e.g. "username",
"current-password", "off") for browser password managers and autofill. | |
|
|
1043
|
+
| `fullBleed` | public | `boolean` | `false` | | |
|
|
1044
|
+
| `appearanceReadOnly` | public | `boolean` | `false` | | |
|
|
1045
|
+
| `errorText` | public | `string \| undefined` | | The error text that will be displayed when a component is in the error appearance | mixinErrorPattern |
|
|
1046
|
+
| `errorVisible` | public | `boolean` | `false` | | mixinErrorPattern |
|
|
1047
|
+
| `errorHasOverflow` | public | `boolean` | `false` | | mixinErrorPattern |
|
|
1048
|
+
| `requiredVisible` | public | `boolean` | `false` | | mixinRequiredVisiblePattern |
|
|
1048
1049
|
|
|
1049
1050
|
### Attributes
|
|
1050
1051
|
|
|
1051
1052
|
| Name | Field | Inherited From |
|
|
1052
1053
|
| --------------------- | ------------------ | -------------- |
|
|
1053
1054
|
| `appearance` | appearance | |
|
|
1055
|
+
| `autocomplete` | autocomplete | |
|
|
1054
1056
|
| `full-bleed` | fullBleed | |
|
|
1055
1057
|
| `appearance-readonly` | appearanceReadOnly | |
|
|
1056
1058
|
|
|
@@ -1233,9 +1235,9 @@
|
|
|
1233
1235
|
|
|
1234
1236
|
### Methods
|
|
1235
1237
|
|
|
1236
|
-
| Name | Privacy | Description | Parameters
|
|
1237
|
-
| -------------- | ------- | ----------- |
|
|
1238
|
-
| `handleChange` | public | | `_element: LabelProviderBase<SupportedLabels>, property: keyof
|
|
1238
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
1239
|
+
| -------------- | ------- | ----------- | ---------------------------------------------------------------------------------------- | ------ | -------------- |
|
|
1240
|
+
| `handleChange` | public | | `_element: LabelProviderBase<SupportedLabels>, property: keyof SupportedLabels & string` | `void` | |
|
|
1239
1241
|
|
|
1240
1242
|
<hr/>
|
|
1241
1243
|
|
|
@@ -1269,9 +1271,9 @@
|
|
|
1269
1271
|
|
|
1270
1272
|
### Methods
|
|
1271
1273
|
|
|
1272
|
-
| Name | Privacy | Description | Parameters
|
|
1273
|
-
| -------------- | ------- | ----------- |
|
|
1274
|
-
| `handleChange` | public | | `_element: LabelProviderBase<SupportedLabels>, property: keyof
|
|
1274
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
1275
|
+
| -------------- | ------- | ----------- | ---------------------------------------------------------------------------------------- | ------ | ----------------- |
|
|
1276
|
+
| `handleChange` | public | | `_element: LabelProviderBase<SupportedLabels>, property: keyof SupportedLabels & string` | `void` | LabelProviderBase |
|
|
1275
1277
|
|
|
1276
1278
|
### Attributes
|
|
1277
1279
|
|
|
@@ -1314,9 +1316,9 @@
|
|
|
1314
1316
|
|
|
1315
1317
|
### Methods
|
|
1316
1318
|
|
|
1317
|
-
| Name | Privacy | Description | Parameters
|
|
1318
|
-
| -------------- | ------- | ----------- |
|
|
1319
|
-
| `handleChange` | public | | `_element: LabelProviderBase<SupportedLabels>, property: keyof
|
|
1319
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
1320
|
+
| -------------- | ------- | ----------- | ---------------------------------------------------------------------------------------- | ------ | ----------------- |
|
|
1321
|
+
| `handleChange` | public | | `_element: LabelProviderBase<SupportedLabels>, property: keyof SupportedLabels & string` | `void` | LabelProviderBase |
|
|
1320
1322
|
|
|
1321
1323
|
### Attributes
|
|
1322
1324
|
|
|
@@ -1361,9 +1363,9 @@
|
|
|
1361
1363
|
|
|
1362
1364
|
### Methods
|
|
1363
1365
|
|
|
1364
|
-
| Name | Privacy | Description | Parameters
|
|
1365
|
-
| -------------- | ------- | ----------- |
|
|
1366
|
-
| `handleChange` | public | | `_element: LabelProviderBase<SupportedLabels>, property: keyof
|
|
1366
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
1367
|
+
| -------------- | ------- | ----------- | ---------------------------------------------------------------------------------------- | ------ | ----------------- |
|
|
1368
|
+
| `handleChange` | public | | `_element: LabelProviderBase<SupportedLabels>, property: keyof SupportedLabels & string` | `void` | LabelProviderBase |
|
|
1367
1369
|
|
|
1368
1370
|
### Attributes
|
|
1369
1371
|
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
import { DesignToken, FoundationElement } from '@ni/fast-foundation';
|
|
2
2
|
import { type Subscriber } from '@ni/fast-element';
|
|
3
|
+
export interface SupportedLabelTokens {
|
|
4
|
+
[key: string]: DesignToken<string>;
|
|
5
|
+
}
|
|
3
6
|
export type DesignTokensFor<ObjectT> = {
|
|
4
7
|
[key in keyof ObjectT]: string | undefined;
|
|
5
8
|
};
|
|
6
9
|
/**
|
|
7
10
|
* Base class for label providers
|
|
8
11
|
*/
|
|
9
|
-
export declare abstract class LabelProviderBase<SupportedLabels extends {
|
|
10
|
-
[key: string]: DesignToken<string>;
|
|
11
|
-
}> extends FoundationElement implements Subscriber {
|
|
12
|
+
export declare abstract class LabelProviderBase<SupportedLabels extends SupportedLabelTokens> extends FoundationElement implements Subscriber {
|
|
12
13
|
protected abstract supportedLabels: SupportedLabels;
|
|
13
14
|
private readonly propertyNotifier;
|
|
14
15
|
private themeProvider?;
|
|
15
16
|
connectedCallback(): void;
|
|
16
17
|
disconnectedCallback(): void;
|
|
17
|
-
handleChange(_element: LabelProviderBase<SupportedLabels>, property: keyof
|
|
18
|
+
handleChange(_element: LabelProviderBase<SupportedLabels>, property: keyof SupportedLabels & string): void;
|
|
19
|
+
private isSupportedLabel;
|
|
18
20
|
private initializeThemeProvider;
|
|
19
21
|
}
|
|
@@ -25,7 +25,7 @@ export class LabelProviderBase extends FoundationElement {
|
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
handleChange(_element, property) {
|
|
28
|
-
if (this.
|
|
28
|
+
if (this.isSupportedLabel(property)) {
|
|
29
29
|
const token = this.supportedLabels[property];
|
|
30
30
|
const value = this[property];
|
|
31
31
|
if (this.themeProvider) {
|
|
@@ -38,16 +38,21 @@ export class LabelProviderBase extends FoundationElement {
|
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
+
isSupportedLabel(property) {
|
|
42
|
+
return this.supportedLabels[property] !== undefined;
|
|
43
|
+
}
|
|
41
44
|
initializeThemeProvider() {
|
|
42
45
|
this.themeProvider = this.closest(themeProviderTag) ?? undefined;
|
|
43
46
|
if (this.themeProvider) {
|
|
44
47
|
for (const [property, token] of Object.entries(this.supportedLabels)) {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
if (this.isSupportedLabel(property)) {
|
|
49
|
+
const value = this[property];
|
|
50
|
+
if (value === null || value === undefined) {
|
|
51
|
+
token.deleteValueFor(this.themeProvider);
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
token.setValueFor(this.themeProvider, value);
|
|
55
|
+
}
|
|
51
56
|
}
|
|
52
57
|
}
|
|
53
58
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAiB,UAAU,EAAmB,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAiB,UAAU,EAAmB,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAUxD;;GAEG;AACH,MAAM,OAAgB,iBAGlB,SAAQ,iBAAiB;IAH7B;;QAOqB,qBAAgB,GAAa,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IA8D/E,CAAC;IA3DmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC;IAEe,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACxC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,KAAK,MAAM,KAAK,IAAI,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;gBACtD,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAC7C,CAAC;YACD,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;QACnC,CAAC;IACL,CAAC;IAEM,YAAY,CACf,QAA4C,EAC5C,QAAwC;QAExC,IAAI,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;YAClC,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;YAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC7B,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;oBACxC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBAC7C,CAAC;qBAAM,CAAC;oBACJ,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;gBACjD,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC;IAEO,gBAAgB,CACpB,QAAkB;QAIlB,OAAO,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,SAAS,CAAC;IACxD,CAAC;IAEO,uBAAuB;QAC3B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,SAAS,CAAC;QACjE,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,KAAK,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAC1C,IAAI,CAAC,eAAe,CACvB,EAAE,CAAC;gBACA,IAAI,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAClC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;oBAC7B,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;wBACxC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;oBAC7C,CAAC;yBAAM,CAAC;wBACJ,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;oBACjD,CAAC;gBACL,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC;CACJ","sourcesContent":["import { DesignToken, FoundationElement } from '@ni/fast-foundation';\nimport { type Notifier, Observable, type Subscriber } from '@ni/fast-element';\nimport { themeProviderTag } from '../../theme-provider';\n\nexport interface SupportedLabelTokens {\n [key: string]: DesignToken<string>;\n}\n\nexport type DesignTokensFor<ObjectT> = {\n [key in keyof ObjectT]: string | undefined;\n};\n\n/**\n * Base class for label providers\n */\nexport abstract class LabelProviderBase<\n SupportedLabels extends SupportedLabelTokens\n>\n extends FoundationElement\n implements Subscriber {\n protected abstract supportedLabels: SupportedLabels;\n\n private readonly propertyNotifier: Notifier = Observable.getNotifier(this);\n private themeProvider?: HTMLElement;\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.initializeThemeProvider();\n this.propertyNotifier.subscribe(this);\n }\n\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.propertyNotifier.unsubscribe(this);\n if (this.themeProvider) {\n for (const token of Object.values(this.supportedLabels)) {\n token.deleteValueFor(this.themeProvider);\n }\n this.themeProvider = undefined;\n }\n }\n\n public handleChange(\n _element: LabelProviderBase<SupportedLabels>,\n property: keyof SupportedLabels & string\n ): void {\n if (this.isSupportedLabel(property)) {\n const token = this.supportedLabels[property];\n const value = this[property];\n if (this.themeProvider) {\n if (value === null || value === undefined) {\n token.deleteValueFor(this.themeProvider);\n } else {\n token.setValueFor(this.themeProvider, value);\n }\n }\n }\n }\n\n private isSupportedLabel<Property extends keyof SupportedLabels & string>(\n property: Property\n ): this is this\n & DesignTokensFor<SupportedLabels>\n & { supportedLabels: Pick<SupportedLabelTokens, Property> } {\n return this.supportedLabels[property] !== undefined;\n }\n\n private initializeThemeProvider(): void {\n this.themeProvider = this.closest(themeProviderTag) ?? undefined;\n if (this.themeProvider) {\n for (const [property, token] of Object.entries(\n this.supportedLabels\n )) {\n if (this.isSupportedLabel(property)) {\n const value = this[property];\n if (value === null || value === undefined) {\n token.deleteValueFor(this.themeProvider);\n } else {\n token.setValueFor(this.themeProvider, value);\n }\n }\n }\n }\n }\n}\n"]}
|
|
@@ -34,6 +34,15 @@ export declare class TextField extends TextField_base {
|
|
|
34
34
|
* HTML Attribute: appearance
|
|
35
35
|
*/
|
|
36
36
|
appearance: TextFieldAppearance;
|
|
37
|
+
/**
|
|
38
|
+
* The autofill hint forwarded to the internal input (e.g. "username",
|
|
39
|
+
* "current-password", "off") for browser password managers and autofill.
|
|
40
|
+
*
|
|
41
|
+
* @public
|
|
42
|
+
* @remarks
|
|
43
|
+
* HTML Attribute: autocomplete
|
|
44
|
+
*/
|
|
45
|
+
autocomplete?: string;
|
|
37
46
|
fullBleed: boolean;
|
|
38
47
|
appearanceReadOnly: boolean;
|
|
39
48
|
}
|
|
@@ -29,6 +29,9 @@ export class TextField extends mixinErrorPattern(mixinRequiredVisiblePattern(Fou
|
|
|
29
29
|
__decorate([
|
|
30
30
|
attr
|
|
31
31
|
], TextField.prototype, "appearance", void 0);
|
|
32
|
+
__decorate([
|
|
33
|
+
attr
|
|
34
|
+
], TextField.prototype, "autocomplete", void 0);
|
|
32
35
|
__decorate([
|
|
33
36
|
attr({ attribute: 'full-bleed', mode: 'boolean' })
|
|
34
37
|
], TextField.prototype, "fullBleed", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEnC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAQjF;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,iBAAiB,CAC5C,2BAA2B,CAAC,mBAAmB,CAAC,CACnD;IAFD;;QAGI;;;;;;WAMG;QAEI,eAAU,GAAwB,mBAAmB,CAAC,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEnC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAQjF;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,iBAAiB,CAC5C,2BAA2B,CAAC,mBAAmB,CAAC,CACnD;IAFD;;QAGI;;;;;;WAMG;QAEI,eAAU,GAAwB,mBAAmB,CAAC,SAAS,CAAC;QAchE,cAAS,GAAG,KAAK,CAAC;QAGlB,uBAAkB,GAAG,KAAK,CAAC;IACtC,CAAC;CAAA;AAlBU;IADN,IAAI;6CACkE;AAWhE;IADN,IAAI;+CACwB;AAGtB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CAC1B;AAGlB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qDAC1B;AAGtC,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAmB;IACxD,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,mBAAmB;IAC9B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,IAAI,CAAW;WACb,sBAAsB;;;aAGpB,sBAAsB;;;;UAIzB,iBAAiB;KACtB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,mBAAmB,CAAC","sourcesContent":["import { attr, html } from '@ni/fast-element';\nimport {\n DesignSystem,\n TextField as FoundationTextField,\n type TextFieldOptions\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { TextFieldAppearance } from './types';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { mixinErrorPattern } from '../patterns/error/types';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { template } from './template';\nimport { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-text-field': TextField;\n }\n}\n\n/**\n * A nimble-styed HTML text input\n */\nexport class TextField extends mixinErrorPattern(\n mixinRequiredVisiblePattern(FoundationTextField)\n) {\n /**\n * The appearance the text field should have.\n *\n * @public\n * @remarks\n * HTML Attribute: appearance\n */\n @attr\n public appearance: TextFieldAppearance = TextFieldAppearance.underline;\n\n /**\n * The autofill hint forwarded to the internal input (e.g. \"username\",\n * \"current-password\", \"off\") for browser password managers and autofill.\n *\n * @public\n * @remarks\n * HTML Attribute: autocomplete\n */\n @attr\n public autocomplete?: string;\n\n @attr({ attribute: 'full-bleed', mode: 'boolean' })\n public fullBleed = false;\n\n @attr({ attribute: 'appearance-readonly', mode: 'boolean' })\n public appearanceReadOnly = false;\n}\n\nconst nimbleTextField = TextField.compose<TextFieldOptions>({\n baseName: 'text-field',\n baseClass: FoundationTextField,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n },\n end: html<TextField>`\n <${iconExclamationMarkTag}\n severity=\"error\"\n class=\"error-icon\"\n ></${iconExclamationMarkTag}>\n <span part=\"actions\">\n <slot name=\"actions\"></slot>\n </span>\n ${errorTextTemplate}\n `\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());\nexport const textFieldTag = 'nimble-text-field';\n"]}
|
|
@@ -45,6 +45,7 @@ export const template = (context, definition) => html `
|
|
|
45
45
|
?spellcheck="${x => x.spellcheck}"
|
|
46
46
|
:value="${x => x.value}"
|
|
47
47
|
type="${x => x.type}"
|
|
48
|
+
autocomplete="${x => x.autocomplete}"
|
|
48
49
|
aria-atomic="${x => x.ariaAtomic}"
|
|
49
50
|
aria-busy="${x => x.ariaBusy}"
|
|
50
51
|
aria-controls="${x => x.ariaControls}"
|