@aurodesignsystem-dev/auro-formkit 0.0.0-pr794.0 → 0.0.0-pr798.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/checkbox/demo/api.min.js +4 -2
- package/components/checkbox/demo/index.min.js +4 -2
- package/components/checkbox/dist/index.js +4 -2
- package/components/checkbox/dist/registered.js +4 -2
- package/components/combobox/demo/api.min.js +21 -28
- package/components/combobox/demo/index.min.js +21 -28
- package/components/combobox/dist/index.js +13 -6
- package/components/combobox/dist/registered.js +13 -6
- package/components/counter/demo/api.min.js +10 -5
- package/components/counter/demo/index.md +4 -4
- package/components/counter/demo/index.min.js +10 -5
- package/components/counter/dist/index.js +10 -5
- package/components/counter/dist/registered.js +10 -5
- package/components/datepicker/demo/api.min.js +13 -6
- package/components/datepicker/demo/index.min.js +13 -6
- package/components/datepicker/dist/index.js +13 -6
- package/components/datepicker/dist/registered.js +13 -6
- package/components/dropdown/demo/api.md +7 -6
- package/components/dropdown/demo/api.min.js +5 -2
- package/components/dropdown/demo/index.min.js +5 -2
- package/components/dropdown/dist/index.js +5 -2
- package/components/dropdown/dist/registered.js +5 -2
- 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 +4 -2
- package/components/input/demo/index.min.js +4 -2
- package/components/input/dist/index.js +4 -2
- package/components/input/dist/registered.js +4 -2
- 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.min.js +4 -2
- package/components/radio/demo/index.min.js +4 -2
- package/components/radio/dist/index.js +4 -2
- package/components/radio/dist/registered.js +4 -2
- package/components/select/demo/api.md +6 -3
- package/components/select/demo/api.min.js +21 -26
- package/components/select/demo/index.min.js +21 -26
- package/components/select/dist/auro-select.d.ts +4 -0
- package/components/select/dist/index.js +13 -4
- package/components/select/dist/registered.js +13 -4
- package/package.json +1 -1
|
@@ -1277,7 +1277,7 @@ class AuroDependencyVersioning {
|
|
|
1277
1277
|
|
|
1278
1278
|
var colorCss = i$5`: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)}`;
|
|
1279
1279
|
|
|
1280
|
-
var styleCss = i$5
|
|
1280
|
+
var styleCss = i$5`: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}`;
|
|
1281
1281
|
|
|
1282
1282
|
var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
1283
1283
|
|
|
@@ -1357,6 +1357,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
1357
1357
|
|
|
1358
1358
|
/**
|
|
1359
1359
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
1360
|
+
*
|
|
1361
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
1360
1362
|
*/
|
|
1361
1363
|
class AuroHelpText extends i$2 {
|
|
1362
1364
|
|
|
@@ -1472,7 +1474,7 @@ class AuroHelpText extends i$2 {
|
|
|
1472
1474
|
// function that renders the HTML and CSS into the scope of the component
|
|
1473
1475
|
render() {
|
|
1474
1476
|
return x`
|
|
1475
|
-
<div class="helptext-wrapper
|
|
1477
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
1476
1478
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
1477
1479
|
</div>
|
|
1478
1480
|
`;
|
|
@@ -1252,7 +1252,7 @@ class AuroDependencyVersioning {
|
|
|
1252
1252
|
|
|
1253
1253
|
var colorCss = i$5`: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)}`;
|
|
1254
1254
|
|
|
1255
|
-
var styleCss = i$5
|
|
1255
|
+
var styleCss = i$5`: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}`;
|
|
1256
1256
|
|
|
1257
1257
|
var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
1258
1258
|
|
|
@@ -1332,6 +1332,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
1332
1332
|
|
|
1333
1333
|
/**
|
|
1334
1334
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
1335
|
+
*
|
|
1336
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
1335
1337
|
*/
|
|
1336
1338
|
class AuroHelpText extends i$2 {
|
|
1337
1339
|
|
|
@@ -1447,7 +1449,7 @@ class AuroHelpText extends i$2 {
|
|
|
1447
1449
|
// function that renders the HTML and CSS into the scope of the component
|
|
1448
1450
|
render() {
|
|
1449
1451
|
return x`
|
|
1450
|
-
<div class="helptext-wrapper
|
|
1452
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
1451
1453
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
1452
1454
|
</div>
|
|
1453
1455
|
`;
|
|
@@ -1205,7 +1205,7 @@ class AuroDependencyVersioning {
|
|
|
1205
1205
|
|
|
1206
1206
|
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)}`;
|
|
1207
1207
|
|
|
1208
|
-
var styleCss = css
|
|
1208
|
+
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}`;
|
|
1209
1209
|
|
|
1210
1210
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
1211
1211
|
|
|
@@ -1285,6 +1285,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
1285
1285
|
|
|
1286
1286
|
/**
|
|
1287
1287
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
1288
|
+
*
|
|
1289
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
1288
1290
|
*/
|
|
1289
1291
|
class AuroHelpText extends LitElement {
|
|
1290
1292
|
|
|
@@ -1400,7 +1402,7 @@ class AuroHelpText extends LitElement {
|
|
|
1400
1402
|
// function that renders the HTML and CSS into the scope of the component
|
|
1401
1403
|
render() {
|
|
1402
1404
|
return html`
|
|
1403
|
-
<div class="helptext-wrapper
|
|
1405
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
1404
1406
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
1405
1407
|
</div>
|
|
1406
1408
|
`;
|
|
@@ -1205,7 +1205,7 @@ class AuroDependencyVersioning {
|
|
|
1205
1205
|
|
|
1206
1206
|
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)}`;
|
|
1207
1207
|
|
|
1208
|
-
var styleCss = css
|
|
1208
|
+
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}`;
|
|
1209
1209
|
|
|
1210
1210
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
1211
1211
|
|
|
@@ -1285,6 +1285,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
1285
1285
|
|
|
1286
1286
|
/**
|
|
1287
1287
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
1288
|
+
*
|
|
1289
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
1288
1290
|
*/
|
|
1289
1291
|
class AuroHelpText extends LitElement {
|
|
1290
1292
|
|
|
@@ -1400,7 +1402,7 @@ class AuroHelpText extends LitElement {
|
|
|
1400
1402
|
// function that renders the HTML and CSS into the scope of the component
|
|
1401
1403
|
render() {
|
|
1402
1404
|
return html`
|
|
1403
|
-
<div class="helptext-wrapper
|
|
1405
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
1404
1406
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
1405
1407
|
</div>
|
|
1406
1408
|
`;
|
|
@@ -73,9 +73,12 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
|
|
|
73
73
|
|
|
74
74
|
## CSS Shadow Parts
|
|
75
75
|
|
|
76
|
-
| Part
|
|
77
|
-
|
|
78
|
-
| [
|
|
76
|
+
| Part | Description |
|
|
77
|
+
|-------------------|--------------------------------------------------|
|
|
78
|
+
| [dropdownChevron](#dropdownChevron) | Apply CSS to the collapsed/expanded state icon container. |
|
|
79
|
+
| [dropdownSize](#dropdownSize) | Apply size styles to the dropdown bib. (height, width, maxHeight, maxWidth only) |
|
|
80
|
+
| [dropdownTrigger](#dropdownTrigger) | Apply CSS to the trigger content container. |
|
|
81
|
+
| [helpText](#helpText) | Apply CSS to the help text. |
|
|
79
82
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
80
83
|
|
|
81
84
|
## API Examples
|
|
@@ -4294,7 +4294,7 @@ var styleSnowflakeCss = i$5`:host{display:block}.wrapper{display:flex;flex:1;fle
|
|
|
4294
4294
|
|
|
4295
4295
|
var colorCss$5 = i$5`: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)}`;
|
|
4296
4296
|
|
|
4297
|
-
var styleCss$6 = i$5
|
|
4297
|
+
var styleCss$6 = i$5`: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}`;
|
|
4298
4298
|
|
|
4299
4299
|
var tokensCss$4 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
4300
4300
|
|
|
@@ -4374,6 +4374,8 @@ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
|
4374
4374
|
|
|
4375
4375
|
/**
|
|
4376
4376
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
4377
|
+
*
|
|
4378
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
4377
4379
|
*/
|
|
4378
4380
|
let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
4379
4381
|
|
|
@@ -4489,7 +4491,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
4489
4491
|
// function that renders the HTML and CSS into the scope of the component
|
|
4490
4492
|
render() {
|
|
4491
4493
|
return x`
|
|
4492
|
-
<div class="helptext-wrapper
|
|
4494
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
4493
4495
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
4494
4496
|
</div>
|
|
4495
4497
|
`;
|
|
@@ -4603,6 +4605,7 @@ let AuroElement$3 = class AuroElement extends i$2 {
|
|
|
4603
4605
|
* @slot trigger - Defines the content of the trigger.
|
|
4604
4606
|
* @csspart trigger - The trigger content container.
|
|
4605
4607
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
4608
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
4606
4609
|
* @csspart helpText - The helpText content container.
|
|
4607
4610
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
4608
4611
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -7457,7 +7460,7 @@ var bibTemplateVersion = '1.0.0';
|
|
|
7457
7460
|
|
|
7458
7461
|
var colorCss$3 = i$5`: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)}`;
|
|
7459
7462
|
|
|
7460
|
-
var styleCss$4 = i$5
|
|
7463
|
+
var styleCss$4 = i$5`: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}`;
|
|
7461
7464
|
|
|
7462
7465
|
var tokensCss$2 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
7463
7466
|
|
|
@@ -7537,6 +7540,8 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
|
7537
7540
|
|
|
7538
7541
|
/**
|
|
7539
7542
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
7543
|
+
*
|
|
7544
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
7540
7545
|
*/
|
|
7541
7546
|
class AuroHelpText extends i$2 {
|
|
7542
7547
|
|
|
@@ -7652,7 +7657,7 @@ class AuroHelpText extends i$2 {
|
|
|
7652
7657
|
// function that renders the HTML and CSS into the scope of the component
|
|
7653
7658
|
render() {
|
|
7654
7659
|
return x`
|
|
7655
|
-
<div class="helptext-wrapper
|
|
7660
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
7656
7661
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
7657
7662
|
</div>
|
|
7658
7663
|
`;
|
|
@@ -7681,6 +7686,10 @@ var styleCss$3 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock
|
|
|
7681
7686
|
* @event auroSelect-valueSet - Notifies that the component has a new value set.
|
|
7682
7687
|
* @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
|
|
7683
7688
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
|
|
7689
|
+
*
|
|
7690
|
+
* @csspart dropdownTrigger - Apply CSS to the trigger content container.
|
|
7691
|
+
* @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
|
|
7692
|
+
* @csspart dropdownSize - Apply size styles to the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
7684
7693
|
* @csspart helpText - Apply CSS to the help text.
|
|
7685
7694
|
*/
|
|
7686
7695
|
|
|
@@ -8987,7 +8996,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8987
8996
|
// aria-hidden="${this.hideAudible(this.hiddenAudible)}"
|
|
8988
8997
|
}
|
|
8989
8998
|
|
|
8990
|
-
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:block;vertical-align:middle}:host .wrapper{box-sizing:border-box;display:inline-block;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;display:inline-block}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .wrapper[class*=-lg]{padding:var(--ds-size-150, 0.75rem)}:host([root]) .wrapper[class*=-xl]{padding:var(--ds-size-200, 1rem)}`;
|
|
8999
|
+
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:block;vertical-align:middle}:host .wrapper{box-sizing:border-box;display:inline-block;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .wrapper[class*=-lg]{padding:var(--ds-size-150, 0.75rem)}:host([root]) .wrapper[class*=-xl]{padding:var(--ds-size-200, 1rem)}`;
|
|
8991
9000
|
|
|
8992
9001
|
var colorCss$2 = i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
|
|
8993
9002
|
|
|
@@ -9064,8 +9073,8 @@ class AuroMenu extends AuroElement$4 {
|
|
|
9064
9073
|
|
|
9065
9074
|
// State properties (reactive)
|
|
9066
9075
|
|
|
9067
|
-
this.shape =
|
|
9068
|
-
this.size =
|
|
9076
|
+
this.shape = ""; // box, rounded, pill
|
|
9077
|
+
this.size = ""; // md, lg, xl
|
|
9069
9078
|
|
|
9070
9079
|
// Value of the selected options
|
|
9071
9080
|
this.value = undefined;
|
|
@@ -9813,7 +9822,7 @@ class AuroMenu extends AuroElement$4 {
|
|
|
9813
9822
|
class="${this.hasLoadingPlaceholder ? "" : "empty"}"
|
|
9814
9823
|
>
|
|
9815
9824
|
<div>
|
|
9816
|
-
<slot name="loadingIcon"
|
|
9825
|
+
<slot name="loadingIcon"></slot>
|
|
9817
9826
|
<slot name="loadingText"></slot>
|
|
9818
9827
|
</div>
|
|
9819
9828
|
</auro-menuoption>
|
|
@@ -9829,7 +9838,7 @@ class AuroMenu extends AuroElement$4 {
|
|
|
9829
9838
|
}
|
|
9830
9839
|
}
|
|
9831
9840
|
|
|
9832
|
-
var styleCss$1 = i$5`:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box],:host .wrapper[class*=shape-snowflake]{border-radius:unset}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem)}:host .wrapper[class*=-lg]:not(:last-child){margin-bottom:var(--ds-size-50, 0.25rem)}:host .wrapper[class*=-xl]{padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem)}:host .wrapper[class*=-xl]:not(:last-child){margin-bottom:var(--ds-size-100, 0.5rem)}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
|
|
9841
|
+
var styleCss$1 = i$5`:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box],:host .wrapper[class*=shape-snowflake]{border-radius:unset}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem)}:host .wrapper[class*=-lg]:not(:last-child){margin-bottom:var(--ds-size-50, 0.25rem)}:host .wrapper[class*=-xl]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem)}:host .wrapper[class*=-xl]:not(:last-child){margin-bottom:var(--ds-size-100, 0.5rem)}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
|
|
9833
9842
|
|
|
9834
9843
|
var colorCss$1 = i$5`:host .wrapper{border:1px solid var(--ds-auro-menuoption-container-border-color);background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
|
|
9835
9844
|
|
|
@@ -10250,8 +10259,8 @@ class AuroMenuOption extends AuroElement$4 {
|
|
|
10250
10259
|
constructor() {
|
|
10251
10260
|
super();
|
|
10252
10261
|
|
|
10253
|
-
this.size =
|
|
10254
|
-
this.shape =
|
|
10262
|
+
this.size = ""; // md, lg, xl
|
|
10263
|
+
this.shape = ""; // box, rounded, pill
|
|
10255
10264
|
|
|
10256
10265
|
/**
|
|
10257
10266
|
* Generate unique names for dependency components.
|
|
@@ -10367,22 +10376,8 @@ class AuroMenuOption extends AuroElement$4 {
|
|
|
10367
10376
|
* @returns {void}
|
|
10368
10377
|
*/
|
|
10369
10378
|
renderLayout() {
|
|
10370
|
-
|
|
10371
|
-
const fontClassMap = {
|
|
10372
|
-
xs: 'body-default',
|
|
10373
|
-
sm: 'body-default',
|
|
10374
|
-
md: 'body-default',
|
|
10375
|
-
lg: 'body-lg',
|
|
10376
|
-
xl: 'body-lg'
|
|
10377
|
-
};
|
|
10378
|
-
|
|
10379
|
-
const classes = e({
|
|
10380
|
-
wrapper: true,
|
|
10381
|
-
[this.size ? fontClassMap[this.size] : 'body-default']: true,
|
|
10382
|
-
});
|
|
10383
|
-
|
|
10384
10379
|
return u`
|
|
10385
|
-
<div class="
|
|
10380
|
+
<div class="wrapper">
|
|
10386
10381
|
${this.selected && !this.nocheckmark
|
|
10387
10382
|
? this.generateIconHtml(checkmarkIcon.svg)
|
|
10388
10383
|
: undefined}
|
|
@@ -4202,7 +4202,7 @@ var styleSnowflakeCss = i$5`:host{display:block}.wrapper{display:flex;flex:1;fle
|
|
|
4202
4202
|
|
|
4203
4203
|
var colorCss$5 = i$5`: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)}`;
|
|
4204
4204
|
|
|
4205
|
-
var styleCss$6 = i$5
|
|
4205
|
+
var styleCss$6 = i$5`: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}`;
|
|
4206
4206
|
|
|
4207
4207
|
var tokensCss$4 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
4208
4208
|
|
|
@@ -4282,6 +4282,8 @@ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
|
4282
4282
|
|
|
4283
4283
|
/**
|
|
4284
4284
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
4285
|
+
*
|
|
4286
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
4285
4287
|
*/
|
|
4286
4288
|
let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
4287
4289
|
|
|
@@ -4397,7 +4399,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
4397
4399
|
// function that renders the HTML and CSS into the scope of the component
|
|
4398
4400
|
render() {
|
|
4399
4401
|
return x`
|
|
4400
|
-
<div class="helptext-wrapper
|
|
4402
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
4401
4403
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
4402
4404
|
</div>
|
|
4403
4405
|
`;
|
|
@@ -4511,6 +4513,7 @@ let AuroElement$3 = class AuroElement extends i$2 {
|
|
|
4511
4513
|
* @slot trigger - Defines the content of the trigger.
|
|
4512
4514
|
* @csspart trigger - The trigger content container.
|
|
4513
4515
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
4516
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
4514
4517
|
* @csspart helpText - The helpText content container.
|
|
4515
4518
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
4516
4519
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -7365,7 +7368,7 @@ var bibTemplateVersion = '1.0.0';
|
|
|
7365
7368
|
|
|
7366
7369
|
var colorCss$3 = i$5`: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)}`;
|
|
7367
7370
|
|
|
7368
|
-
var styleCss$4 = i$5
|
|
7371
|
+
var styleCss$4 = i$5`: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}`;
|
|
7369
7372
|
|
|
7370
7373
|
var tokensCss$2 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
7371
7374
|
|
|
@@ -7445,6 +7448,8 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
|
7445
7448
|
|
|
7446
7449
|
/**
|
|
7447
7450
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
7451
|
+
*
|
|
7452
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
7448
7453
|
*/
|
|
7449
7454
|
class AuroHelpText extends i$2 {
|
|
7450
7455
|
|
|
@@ -7560,7 +7565,7 @@ class AuroHelpText extends i$2 {
|
|
|
7560
7565
|
// function that renders the HTML and CSS into the scope of the component
|
|
7561
7566
|
render() {
|
|
7562
7567
|
return x`
|
|
7563
|
-
<div class="helptext-wrapper
|
|
7568
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
7564
7569
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
7565
7570
|
</div>
|
|
7566
7571
|
`;
|
|
@@ -7589,6 +7594,10 @@ var styleCss$3 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock
|
|
|
7589
7594
|
* @event auroSelect-valueSet - Notifies that the component has a new value set.
|
|
7590
7595
|
* @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
|
|
7591
7596
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
|
|
7597
|
+
*
|
|
7598
|
+
* @csspart dropdownTrigger - Apply CSS to the trigger content container.
|
|
7599
|
+
* @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
|
|
7600
|
+
* @csspart dropdownSize - Apply size styles to the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
7592
7601
|
* @csspart helpText - Apply CSS to the help text.
|
|
7593
7602
|
*/
|
|
7594
7603
|
|
|
@@ -8895,7 +8904,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8895
8904
|
// aria-hidden="${this.hideAudible(this.hiddenAudible)}"
|
|
8896
8905
|
}
|
|
8897
8906
|
|
|
8898
|
-
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:block;vertical-align:middle}:host .wrapper{box-sizing:border-box;display:inline-block;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;display:inline-block}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .wrapper[class*=-lg]{padding:var(--ds-size-150, 0.75rem)}:host([root]) .wrapper[class*=-xl]{padding:var(--ds-size-200, 1rem)}`;
|
|
8907
|
+
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:block;vertical-align:middle}:host .wrapper{box-sizing:border-box;display:inline-block;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .wrapper[class*=-lg]{padding:var(--ds-size-150, 0.75rem)}:host([root]) .wrapper[class*=-xl]{padding:var(--ds-size-200, 1rem)}`;
|
|
8899
8908
|
|
|
8900
8909
|
var colorCss$2 = i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
|
|
8901
8910
|
|
|
@@ -8972,8 +8981,8 @@ class AuroMenu extends AuroElement$4 {
|
|
|
8972
8981
|
|
|
8973
8982
|
// State properties (reactive)
|
|
8974
8983
|
|
|
8975
|
-
this.shape =
|
|
8976
|
-
this.size =
|
|
8984
|
+
this.shape = ""; // box, rounded, pill
|
|
8985
|
+
this.size = ""; // md, lg, xl
|
|
8977
8986
|
|
|
8978
8987
|
// Value of the selected options
|
|
8979
8988
|
this.value = undefined;
|
|
@@ -9721,7 +9730,7 @@ class AuroMenu extends AuroElement$4 {
|
|
|
9721
9730
|
class="${this.hasLoadingPlaceholder ? "" : "empty"}"
|
|
9722
9731
|
>
|
|
9723
9732
|
<div>
|
|
9724
|
-
<slot name="loadingIcon"
|
|
9733
|
+
<slot name="loadingIcon"></slot>
|
|
9725
9734
|
<slot name="loadingText"></slot>
|
|
9726
9735
|
</div>
|
|
9727
9736
|
</auro-menuoption>
|
|
@@ -9737,7 +9746,7 @@ class AuroMenu extends AuroElement$4 {
|
|
|
9737
9746
|
}
|
|
9738
9747
|
}
|
|
9739
9748
|
|
|
9740
|
-
var styleCss$1 = i$5`:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box],:host .wrapper[class*=shape-snowflake]{border-radius:unset}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem)}:host .wrapper[class*=-lg]:not(:last-child){margin-bottom:var(--ds-size-50, 0.25rem)}:host .wrapper[class*=-xl]{padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem)}:host .wrapper[class*=-xl]:not(:last-child){margin-bottom:var(--ds-size-100, 0.5rem)}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
|
|
9749
|
+
var styleCss$1 = i$5`:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box],:host .wrapper[class*=shape-snowflake]{border-radius:unset}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem)}:host .wrapper[class*=-lg]:not(:last-child){margin-bottom:var(--ds-size-50, 0.25rem)}:host .wrapper[class*=-xl]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem)}:host .wrapper[class*=-xl]:not(:last-child){margin-bottom:var(--ds-size-100, 0.5rem)}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
|
|
9741
9750
|
|
|
9742
9751
|
var colorCss$1 = i$5`:host .wrapper{border:1px solid var(--ds-auro-menuoption-container-border-color);background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
|
|
9743
9752
|
|
|
@@ -10158,8 +10167,8 @@ class AuroMenuOption extends AuroElement$4 {
|
|
|
10158
10167
|
constructor() {
|
|
10159
10168
|
super();
|
|
10160
10169
|
|
|
10161
|
-
this.size =
|
|
10162
|
-
this.shape =
|
|
10170
|
+
this.size = ""; // md, lg, xl
|
|
10171
|
+
this.shape = ""; // box, rounded, pill
|
|
10163
10172
|
|
|
10164
10173
|
/**
|
|
10165
10174
|
* Generate unique names for dependency components.
|
|
@@ -10275,22 +10284,8 @@ class AuroMenuOption extends AuroElement$4 {
|
|
|
10275
10284
|
* @returns {void}
|
|
10276
10285
|
*/
|
|
10277
10286
|
renderLayout() {
|
|
10278
|
-
|
|
10279
|
-
const fontClassMap = {
|
|
10280
|
-
xs: 'body-default',
|
|
10281
|
-
sm: 'body-default',
|
|
10282
|
-
md: 'body-default',
|
|
10283
|
-
lg: 'body-lg',
|
|
10284
|
-
xl: 'body-lg'
|
|
10285
|
-
};
|
|
10286
|
-
|
|
10287
|
-
const classes = e({
|
|
10288
|
-
wrapper: true,
|
|
10289
|
-
[this.size ? fontClassMap[this.size] : 'body-default']: true,
|
|
10290
|
-
});
|
|
10291
|
-
|
|
10292
10287
|
return u`
|
|
10293
|
-
<div class="
|
|
10288
|
+
<div class="wrapper">
|
|
10294
10289
|
${this.selected && !this.nocheckmark
|
|
10295
10290
|
? this.generateIconHtml(checkmarkIcon.svg)
|
|
10296
10291
|
: undefined}
|