@aurodesignsystem-dev/auro-formkit 0.0.0-pr794.1 → 0.0.0-pr800.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.
- package/components/bibtemplate/dist/buttonVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +22 -72
- package/components/bibtemplate/dist/registered.js +22 -72
- package/components/checkbox/demo/api.md +1 -2
- package/components/checkbox/demo/api.min.js +4 -9
- package/components/checkbox/demo/index.min.js +4 -9
- package/components/checkbox/dist/index.js +4 -9
- package/components/checkbox/dist/registered.js +4 -9
- package/components/combobox/demo/api.min.js +68 -182
- package/components/combobox/demo/index.min.js +68 -182
- package/components/combobox/dist/index.js +60 -160
- package/components/combobox/dist/registered.js +60 -160
- package/components/counter/demo/api.md +1 -1
- package/components/counter/demo/api.min.js +72 -174
- package/components/counter/demo/index.md +4 -4
- package/components/counter/demo/index.min.js +72 -174
- package/components/counter/dist/auro-counter-group.d.ts +10 -10
- package/components/counter/dist/index.js +72 -174
- package/components/counter/dist/registered.js +72 -174
- package/components/datepicker/README.md +1 -1
- package/components/datepicker/demo/api.md +20 -40
- package/components/datepicker/demo/api.min.js +187 -462
- package/components/datepicker/demo/index.md +4 -4
- package/components/datepicker/demo/index.min.js +187 -462
- package/components/datepicker/demo/readme.md +1 -1
- package/components/datepicker/dist/auro-datepicker.d.ts +22 -60
- package/components/datepicker/dist/index.js +187 -462
- package/components/datepicker/dist/registered.js +187 -462
- package/components/dropdown/demo/api.md +8 -7
- package/components/dropdown/demo/api.min.js +5 -9
- package/components/dropdown/demo/index.min.js +5 -9
- package/components/dropdown/dist/index.js +5 -9
- package/components/dropdown/dist/registered.js +5 -9
- package/components/helptext/dist/auro-helptext.d.ts +2 -0
- package/components/helptext/dist/index.js +4 -2
- package/components/helptext/dist/registered.js +4 -2
- package/components/input/demo/api.min.js +28 -76
- package/components/input/demo/index.min.js +28 -76
- package/components/input/dist/index.js +28 -76
- package/components/input/dist/registered.js +28 -76
- package/components/menu/demo/api.html +15 -0
- package/components/menu/demo/api.md +12 -12
- package/components/menu/demo/api.min.js +8 -22
- package/components/menu/demo/index.min.js +8 -22
- package/components/menu/dist/auro-menu.d.ts +2 -2
- package/components/menu/dist/auro-menuoption.d.ts +2 -2
- package/components/menu/dist/index.js +8 -22
- package/components/menu/dist/registered.js +8 -22
- package/components/radio/demo/api.md +1 -32
- package/components/radio/demo/api.min.js +6 -4
- package/components/radio/demo/index.min.js +6 -4
- package/components/radio/dist/index.js +6 -4
- package/components/radio/dist/registered.js +6 -4
- package/components/select/demo/api.md +71 -48
- package/components/select/demo/api.min.js +64 -126
- package/components/select/demo/index.md +137 -1057
- package/components/select/demo/index.min.js +64 -126
- package/components/select/dist/auro-select.d.ts +14 -10
- package/components/select/dist/index.js +56 -104
- package/components/select/dist/registered.js +56 -104
- package/package.json +1 -1
- package/components/datepicker/dist/styles/classic/style-css.d.ts +0 -2
- /package/components/datepicker/dist/styles/{classic → default}/color-css.d.ts +0 -0
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
|-----------------------------|--------------------------------------|--------------------------------------------------|
|
|
49
49
|
| `auroDropdown-idAdded` | `Object<key : 'id', value: string>` | |
|
|
50
50
|
| `auroDropdown-toggled` | | Notifies that the visibility of the dropdown bib has changed. |
|
|
51
|
-
| `auroDropdown-triggerClick` |
|
|
51
|
+
| `auroDropdown-triggerClick` | | Notifies that the trigger has been clicked. |
|
|
52
52
|
|
|
53
53
|
## Slots
|
|
54
54
|
|
|
@@ -60,12 +60,13 @@
|
|
|
60
60
|
|
|
61
61
|
## CSS Shadow Parts
|
|
62
62
|
|
|
63
|
-
| Part | Description
|
|
64
|
-
|
|
65
|
-
| [chevron](#chevron) | The collapsed/expanded state icon container.
|
|
66
|
-
| [helpText](#helpText) | The helpText content container.
|
|
67
|
-
| [popover](#popover) | The bib content container.
|
|
68
|
-
| [
|
|
63
|
+
| Part | Description |
|
|
64
|
+
|------------|--------------------------------------------------|
|
|
65
|
+
| [chevron](#chevron) | The collapsed/expanded state icon container. |
|
|
66
|
+
| [helpText](#helpText) | The helpText content container. |
|
|
67
|
+
| [popover](#popover) | The bib content container. |
|
|
68
|
+
| [size](#size) | The size of the dropdown bib. (height, width, maxHeight, maxWidth only) |
|
|
69
|
+
| [trigger](#trigger) | The trigger content container. |
|
|
69
70
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
70
71
|
|
|
71
72
|
## API Examples
|
|
@@ -3230,7 +3230,7 @@ var styleSnowflakeCss = i$2`:host{display:block}.wrapper{display:flex;flex:1;fle
|
|
|
3230
3230
|
|
|
3231
3231
|
var colorCss = i$2`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
3232
3232
|
|
|
3233
|
-
var styleCss = i$2
|
|
3233
|
+
var styleCss = i$2`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
3234
3234
|
|
|
3235
3235
|
var tokensCss = i$2`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
3236
3236
|
|
|
@@ -3310,6 +3310,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
3310
3310
|
|
|
3311
3311
|
/**
|
|
3312
3312
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
3313
|
+
*
|
|
3314
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
3313
3315
|
*/
|
|
3314
3316
|
class AuroHelpText extends i {
|
|
3315
3317
|
|
|
@@ -3425,7 +3427,7 @@ class AuroHelpText extends i {
|
|
|
3425
3427
|
// function that renders the HTML and CSS into the scope of the component
|
|
3426
3428
|
render() {
|
|
3427
3429
|
return x`
|
|
3428
|
-
<div class="helptext-wrapper
|
|
3430
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
3429
3431
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
3430
3432
|
</div>
|
|
3431
3433
|
`;
|
|
@@ -3539,6 +3541,7 @@ class AuroElement extends i {
|
|
|
3539
3541
|
* @slot trigger - Defines the content of the trigger.
|
|
3540
3542
|
* @csspart trigger - The trigger content container.
|
|
3541
3543
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
3544
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
3542
3545
|
* @csspart helpText - The helpText content container.
|
|
3543
3546
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
3544
3547
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -4036,13 +4039,6 @@ class AuroDropdown extends AuroElement {
|
|
|
4036
4039
|
|
|
4037
4040
|
// Add the tag name as an attribute if it is different than the component name
|
|
4038
4041
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
|
|
4039
|
-
|
|
4040
|
-
this.trigger.addEventListener('click', () => {
|
|
4041
|
-
this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
|
|
4042
|
-
bubbles: true,
|
|
4043
|
-
composed: true
|
|
4044
|
-
}));
|
|
4045
|
-
});
|
|
4046
4042
|
}
|
|
4047
4043
|
|
|
4048
4044
|
/**
|
|
@@ -3205,7 +3205,7 @@ var styleSnowflakeCss = i$2`:host{display:block}.wrapper{display:flex;flex:1;fle
|
|
|
3205
3205
|
|
|
3206
3206
|
var colorCss = i$2`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
3207
3207
|
|
|
3208
|
-
var styleCss = i$2
|
|
3208
|
+
var styleCss = i$2`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
3209
3209
|
|
|
3210
3210
|
var tokensCss = i$2`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
3211
3211
|
|
|
@@ -3285,6 +3285,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
3285
3285
|
|
|
3286
3286
|
/**
|
|
3287
3287
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
3288
|
+
*
|
|
3289
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
3288
3290
|
*/
|
|
3289
3291
|
class AuroHelpText extends i {
|
|
3290
3292
|
|
|
@@ -3400,7 +3402,7 @@ class AuroHelpText extends i {
|
|
|
3400
3402
|
// function that renders the HTML and CSS into the scope of the component
|
|
3401
3403
|
render() {
|
|
3402
3404
|
return x`
|
|
3403
|
-
<div class="helptext-wrapper
|
|
3405
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
3404
3406
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
3405
3407
|
</div>
|
|
3406
3408
|
`;
|
|
@@ -3514,6 +3516,7 @@ class AuroElement extends i {
|
|
|
3514
3516
|
* @slot trigger - Defines the content of the trigger.
|
|
3515
3517
|
* @csspart trigger - The trigger content container.
|
|
3516
3518
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
3519
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
3517
3520
|
* @csspart helpText - The helpText content container.
|
|
3518
3521
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
3519
3522
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -4011,13 +4014,6 @@ class AuroDropdown extends AuroElement {
|
|
|
4011
4014
|
|
|
4012
4015
|
// Add the tag name as an attribute if it is different than the component name
|
|
4013
4016
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
|
|
4014
|
-
|
|
4015
|
-
this.trigger.addEventListener('click', () => {
|
|
4016
|
-
this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
|
|
4017
|
-
bubbles: true,
|
|
4018
|
-
composed: true
|
|
4019
|
-
}));
|
|
4020
|
-
});
|
|
4021
4017
|
}
|
|
4022
4018
|
|
|
4023
4019
|
/**
|
|
@@ -3158,7 +3158,7 @@ var styleSnowflakeCss = css`:host{display:block}.wrapper{display:flex;flex:1;fle
|
|
|
3158
3158
|
|
|
3159
3159
|
var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
3160
3160
|
|
|
3161
|
-
var styleCss = css
|
|
3161
|
+
var styleCss = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
3162
3162
|
|
|
3163
3163
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
3164
3164
|
|
|
@@ -3238,6 +3238,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
3238
3238
|
|
|
3239
3239
|
/**
|
|
3240
3240
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
3241
|
+
*
|
|
3242
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
3241
3243
|
*/
|
|
3242
3244
|
class AuroHelpText extends LitElement {
|
|
3243
3245
|
|
|
@@ -3353,7 +3355,7 @@ class AuroHelpText extends LitElement {
|
|
|
3353
3355
|
// function that renders the HTML and CSS into the scope of the component
|
|
3354
3356
|
render() {
|
|
3355
3357
|
return html`
|
|
3356
|
-
<div class="helptext-wrapper
|
|
3358
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
3357
3359
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
3358
3360
|
</div>
|
|
3359
3361
|
`;
|
|
@@ -3467,6 +3469,7 @@ class AuroElement extends LitElement {
|
|
|
3467
3469
|
* @slot trigger - Defines the content of the trigger.
|
|
3468
3470
|
* @csspart trigger - The trigger content container.
|
|
3469
3471
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
3472
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
3470
3473
|
* @csspart helpText - The helpText content container.
|
|
3471
3474
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
3472
3475
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -3964,13 +3967,6 @@ class AuroDropdown extends AuroElement {
|
|
|
3964
3967
|
|
|
3965
3968
|
// Add the tag name as an attribute if it is different than the component name
|
|
3966
3969
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
|
|
3967
|
-
|
|
3968
|
-
this.trigger.addEventListener('click', () => {
|
|
3969
|
-
this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
|
|
3970
|
-
bubbles: true,
|
|
3971
|
-
composed: true
|
|
3972
|
-
}));
|
|
3973
|
-
});
|
|
3974
3970
|
}
|
|
3975
3971
|
|
|
3976
3972
|
/**
|
|
@@ -3158,7 +3158,7 @@ var styleSnowflakeCss = css`:host{display:block}.wrapper{display:flex;flex:1;fle
|
|
|
3158
3158
|
|
|
3159
3159
|
var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
3160
3160
|
|
|
3161
|
-
var styleCss = css
|
|
3161
|
+
var styleCss = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
3162
3162
|
|
|
3163
3163
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
3164
3164
|
|
|
@@ -3238,6 +3238,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
3238
3238
|
|
|
3239
3239
|
/**
|
|
3240
3240
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
3241
|
+
*
|
|
3242
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
3241
3243
|
*/
|
|
3242
3244
|
class AuroHelpText extends LitElement {
|
|
3243
3245
|
|
|
@@ -3353,7 +3355,7 @@ class AuroHelpText extends LitElement {
|
|
|
3353
3355
|
// function that renders the HTML and CSS into the scope of the component
|
|
3354
3356
|
render() {
|
|
3355
3357
|
return html`
|
|
3356
|
-
<div class="helptext-wrapper
|
|
3358
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
3357
3359
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
3358
3360
|
</div>
|
|
3359
3361
|
`;
|
|
@@ -3467,6 +3469,7 @@ class AuroElement extends LitElement {
|
|
|
3467
3469
|
* @slot trigger - Defines the content of the trigger.
|
|
3468
3470
|
* @csspart trigger - The trigger content container.
|
|
3469
3471
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
3472
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
3470
3473
|
* @csspart helpText - The helpText content container.
|
|
3471
3474
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
3472
3475
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -3964,13 +3967,6 @@ class AuroDropdown extends AuroElement {
|
|
|
3964
3967
|
|
|
3965
3968
|
// Add the tag name as an attribute if it is different than the component name
|
|
3966
3969
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
|
|
3967
|
-
|
|
3968
|
-
this.trigger.addEventListener('click', () => {
|
|
3969
|
-
this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
|
|
3970
|
-
bubbles: true,
|
|
3971
|
-
composed: true
|
|
3972
|
-
}));
|
|
3973
|
-
});
|
|
3974
3970
|
}
|
|
3975
3971
|
|
|
3976
3972
|
/**
|
|
@@ -2,7 +2,7 @@ import { css, LitElement, html } from 'lit';
|
|
|
2
2
|
|
|
3
3
|
var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
4
4
|
|
|
5
|
-
var styleCss = css
|
|
5
|
+
var styleCss = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
6
6
|
|
|
7
7
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
8
8
|
|
|
@@ -82,6 +82,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
82
82
|
|
|
83
83
|
/**
|
|
84
84
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
85
|
+
*
|
|
86
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
85
87
|
*/
|
|
86
88
|
class AuroHelpText extends LitElement {
|
|
87
89
|
|
|
@@ -197,7 +199,7 @@ class AuroHelpText extends LitElement {
|
|
|
197
199
|
// function that renders the HTML and CSS into the scope of the component
|
|
198
200
|
render() {
|
|
199
201
|
return html`
|
|
200
|
-
<div class="helptext-wrapper
|
|
202
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
201
203
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
202
204
|
</div>
|
|
203
205
|
`;
|
|
@@ -2,7 +2,7 @@ import { css, LitElement, html } from 'lit';
|
|
|
2
2
|
|
|
3
3
|
var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
4
4
|
|
|
5
|
-
var styleCss = css
|
|
5
|
+
var styleCss = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
6
6
|
|
|
7
7
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
8
8
|
|
|
@@ -82,6 +82,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
82
82
|
|
|
83
83
|
/**
|
|
84
84
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
85
|
+
*
|
|
86
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
85
87
|
*/
|
|
86
88
|
class AuroHelpText extends LitElement {
|
|
87
89
|
|
|
@@ -197,7 +199,7 @@ class AuroHelpText extends LitElement {
|
|
|
197
199
|
// function that renders the HTML and CSS into the scope of the component
|
|
198
200
|
render() {
|
|
199
201
|
return html`
|
|
200
|
-
<div class="helptext-wrapper
|
|
202
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
201
203
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
202
204
|
</div>
|
|
203
205
|
`;
|