@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
|
@@ -4126,7 +4126,7 @@ var styleSnowflakeCss$1 = i$5`:host{display:block}.wrapper{display:flex;flex:1;f
|
|
|
4126
4126
|
|
|
4127
4127
|
var colorCss$6 = 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)}`;
|
|
4128
4128
|
|
|
4129
|
-
var styleCss$7 = i$5
|
|
4129
|
+
var styleCss$7 = 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}`;
|
|
4130
4130
|
|
|
4131
4131
|
var tokensCss$6 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
4132
4132
|
|
|
@@ -4206,6 +4206,8 @@ let AuroLibraryRuntimeUtils$6 = class AuroLibraryRuntimeUtils {
|
|
|
4206
4206
|
|
|
4207
4207
|
/**
|
|
4208
4208
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
4209
|
+
*
|
|
4210
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
4209
4211
|
*/
|
|
4210
4212
|
let AuroHelpText$2 = class AuroHelpText extends i$2 {
|
|
4211
4213
|
|
|
@@ -4321,7 +4323,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$2 {
|
|
|
4321
4323
|
// function that renders the HTML and CSS into the scope of the component
|
|
4322
4324
|
render() {
|
|
4323
4325
|
return x`
|
|
4324
|
-
<div class="helptext-wrapper
|
|
4326
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
4325
4327
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
4326
4328
|
</div>
|
|
4327
4329
|
`;
|
|
@@ -4435,6 +4437,7 @@ let AuroElement$4 = class AuroElement extends i$2 {
|
|
|
4435
4437
|
* @slot trigger - Defines the content of the trigger.
|
|
4436
4438
|
* @csspart trigger - The trigger content container.
|
|
4437
4439
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
4440
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
4438
4441
|
* @csspart helpText - The helpText content container.
|
|
4439
4442
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
4440
4443
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -12885,7 +12888,7 @@ var buttonVersion$1 = '11.0.0';
|
|
|
12885
12888
|
|
|
12886
12889
|
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)}`;
|
|
12887
12890
|
|
|
12888
|
-
var styleCss$6 = i$5
|
|
12891
|
+
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}`;
|
|
12889
12892
|
|
|
12890
12893
|
var tokensCss$5 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
12891
12894
|
|
|
@@ -12965,6 +12968,8 @@ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
|
12965
12968
|
|
|
12966
12969
|
/**
|
|
12967
12970
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
12971
|
+
*
|
|
12972
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
12968
12973
|
*/
|
|
12969
12974
|
let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
12970
12975
|
|
|
@@ -13080,7 +13085,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
13080
13085
|
// function that renders the HTML and CSS into the scope of the component
|
|
13081
13086
|
render() {
|
|
13082
13087
|
return x`
|
|
13083
|
-
<div class="helptext-wrapper
|
|
13088
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
13084
13089
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
13085
13090
|
</div>
|
|
13086
13091
|
`;
|
|
@@ -15617,7 +15622,7 @@ let AuroElement$1 = class AuroElement extends i$2 {
|
|
|
15617
15622
|
|
|
15618
15623
|
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)}`;
|
|
15619
15624
|
|
|
15620
|
-
var styleCss$3 = i$5
|
|
15625
|
+
var styleCss$3 = 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}`;
|
|
15621
15626
|
|
|
15622
15627
|
var tokensCss$2 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
15623
15628
|
|
|
@@ -15697,6 +15702,8 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
|
15697
15702
|
|
|
15698
15703
|
/**
|
|
15699
15704
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
15705
|
+
*
|
|
15706
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
15700
15707
|
*/
|
|
15701
15708
|
class AuroHelpText extends i$2 {
|
|
15702
15709
|
|
|
@@ -15812,7 +15819,7 @@ class AuroHelpText extends i$2 {
|
|
|
15812
15819
|
// function that renders the HTML and CSS into the scope of the component
|
|
15813
15820
|
render() {
|
|
15814
15821
|
return x`
|
|
15815
|
-
<div class="helptext-wrapper
|
|
15822
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
15816
15823
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
15817
15824
|
</div>
|
|
15818
15825
|
`;
|
|
@@ -16927,7 +16934,7 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16927
16934
|
}
|
|
16928
16935
|
}
|
|
16929
16936
|
|
|
16930
|
-
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)}`;
|
|
16937
|
+
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)}`;
|
|
16931
16938
|
|
|
16932
16939
|
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)}`;
|
|
16933
16940
|
|
|
@@ -17004,8 +17011,8 @@ class AuroMenu extends AuroElement$1 {
|
|
|
17004
17011
|
|
|
17005
17012
|
// State properties (reactive)
|
|
17006
17013
|
|
|
17007
|
-
this.shape =
|
|
17008
|
-
this.size =
|
|
17014
|
+
this.shape = ""; // box, rounded, pill
|
|
17015
|
+
this.size = ""; // md, lg, xl
|
|
17009
17016
|
|
|
17010
17017
|
// Value of the selected options
|
|
17011
17018
|
this.value = undefined;
|
|
@@ -17753,7 +17760,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
17753
17760
|
class="${this.hasLoadingPlaceholder ? "" : "empty"}"
|
|
17754
17761
|
>
|
|
17755
17762
|
<div>
|
|
17756
|
-
<slot name="loadingIcon"
|
|
17763
|
+
<slot name="loadingIcon"></slot>
|
|
17757
17764
|
<slot name="loadingText"></slot>
|
|
17758
17765
|
</div>
|
|
17759
17766
|
</auro-menuoption>
|
|
@@ -17769,7 +17776,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
17769
17776
|
}
|
|
17770
17777
|
}
|
|
17771
17778
|
|
|
17772
|
-
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}`;
|
|
17779
|
+
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}`;
|
|
17773
17780
|
|
|
17774
17781
|
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)}`;
|
|
17775
17782
|
|
|
@@ -18190,8 +18197,8 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
18190
18197
|
constructor() {
|
|
18191
18198
|
super();
|
|
18192
18199
|
|
|
18193
|
-
this.size =
|
|
18194
|
-
this.shape =
|
|
18200
|
+
this.size = ""; // md, lg, xl
|
|
18201
|
+
this.shape = ""; // box, rounded, pill
|
|
18195
18202
|
|
|
18196
18203
|
/**
|
|
18197
18204
|
* Generate unique names for dependency components.
|
|
@@ -18307,22 +18314,8 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
18307
18314
|
* @returns {void}
|
|
18308
18315
|
*/
|
|
18309
18316
|
renderLayout() {
|
|
18310
|
-
|
|
18311
|
-
const fontClassMap = {
|
|
18312
|
-
xs: 'body-default',
|
|
18313
|
-
sm: 'body-default',
|
|
18314
|
-
md: 'body-default',
|
|
18315
|
-
lg: 'body-lg',
|
|
18316
|
-
xl: 'body-lg'
|
|
18317
|
-
};
|
|
18318
|
-
|
|
18319
|
-
const classes = e({
|
|
18320
|
-
wrapper: true,
|
|
18321
|
-
[this.size ? fontClassMap[this.size] : 'body-default']: true,
|
|
18322
|
-
});
|
|
18323
|
-
|
|
18324
18317
|
return u$2`
|
|
18325
|
-
<div class="
|
|
18318
|
+
<div class="wrapper">
|
|
18326
18319
|
${this.selected && !this.nocheckmark
|
|
18327
18320
|
? this.generateIconHtml(checkmarkIcon.svg)
|
|
18328
18321
|
: undefined}
|
|
@@ -4057,7 +4057,7 @@ var styleSnowflakeCss$1 = css`:host{display:block}.wrapper{display:flex;flex:1;f
|
|
|
4057
4057
|
|
|
4058
4058
|
var colorCss$6 = 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)}`;
|
|
4059
4059
|
|
|
4060
|
-
var styleCss$7 = css
|
|
4060
|
+
var styleCss$7 = 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}`;
|
|
4061
4061
|
|
|
4062
4062
|
var tokensCss$6 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
4063
4063
|
|
|
@@ -4137,6 +4137,8 @@ let AuroLibraryRuntimeUtils$6 = class AuroLibraryRuntimeUtils {
|
|
|
4137
4137
|
|
|
4138
4138
|
/**
|
|
4139
4139
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
4140
|
+
*
|
|
4141
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
4140
4142
|
*/
|
|
4141
4143
|
let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
4142
4144
|
|
|
@@ -4252,7 +4254,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4252
4254
|
// function that renders the HTML and CSS into the scope of the component
|
|
4253
4255
|
render() {
|
|
4254
4256
|
return html$1`
|
|
4255
|
-
<div class="helptext-wrapper
|
|
4257
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
4256
4258
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
4257
4259
|
</div>
|
|
4258
4260
|
`;
|
|
@@ -4366,6 +4368,7 @@ let AuroElement$4 = class AuroElement extends LitElement {
|
|
|
4366
4368
|
* @slot trigger - Defines the content of the trigger.
|
|
4367
4369
|
* @csspart trigger - The trigger content container.
|
|
4368
4370
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
4371
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
4369
4372
|
* @csspart helpText - The helpText content container.
|
|
4370
4373
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
4371
4374
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -12803,7 +12806,7 @@ var buttonVersion$1 = '11.0.0';
|
|
|
12803
12806
|
|
|
12804
12807
|
var colorCss$5 = 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)}`;
|
|
12805
12808
|
|
|
12806
|
-
var styleCss$6 = css
|
|
12809
|
+
var styleCss$6 = 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}`;
|
|
12807
12810
|
|
|
12808
12811
|
var tokensCss$5 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
12809
12812
|
|
|
@@ -12883,6 +12886,8 @@ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
|
12883
12886
|
|
|
12884
12887
|
/**
|
|
12885
12888
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
12889
|
+
*
|
|
12890
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
12886
12891
|
*/
|
|
12887
12892
|
let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
12888
12893
|
|
|
@@ -12998,7 +13003,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
12998
13003
|
// function that renders the HTML and CSS into the scope of the component
|
|
12999
13004
|
render() {
|
|
13000
13005
|
return html$1`
|
|
13001
|
-
<div class="helptext-wrapper
|
|
13006
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
13002
13007
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
13003
13008
|
</div>
|
|
13004
13009
|
`;
|
|
@@ -15535,7 +15540,7 @@ class AuroElement extends LitElement {
|
|
|
15535
15540
|
|
|
15536
15541
|
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)}`;
|
|
15537
15542
|
|
|
15538
|
-
var styleCss = css
|
|
15543
|
+
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}`;
|
|
15539
15544
|
|
|
15540
15545
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
15541
15546
|
|
|
@@ -15615,6 +15620,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
15615
15620
|
|
|
15616
15621
|
/**
|
|
15617
15622
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
15623
|
+
*
|
|
15624
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
15618
15625
|
*/
|
|
15619
15626
|
class AuroHelpText extends LitElement {
|
|
15620
15627
|
|
|
@@ -15730,7 +15737,7 @@ class AuroHelpText extends LitElement {
|
|
|
15730
15737
|
// function that renders the HTML and CSS into the scope of the component
|
|
15731
15738
|
render() {
|
|
15732
15739
|
return html$1`
|
|
15733
|
-
<div class="helptext-wrapper
|
|
15740
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
15734
15741
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
15735
15742
|
</div>
|
|
15736
15743
|
`;
|
|
@@ -4057,7 +4057,7 @@ var styleSnowflakeCss$1 = css`:host{display:block}.wrapper{display:flex;flex:1;f
|
|
|
4057
4057
|
|
|
4058
4058
|
var colorCss$6 = 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)}`;
|
|
4059
4059
|
|
|
4060
|
-
var styleCss$7 = css
|
|
4060
|
+
var styleCss$7 = 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}`;
|
|
4061
4061
|
|
|
4062
4062
|
var tokensCss$6 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
4063
4063
|
|
|
@@ -4137,6 +4137,8 @@ let AuroLibraryRuntimeUtils$6 = class AuroLibraryRuntimeUtils {
|
|
|
4137
4137
|
|
|
4138
4138
|
/**
|
|
4139
4139
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
4140
|
+
*
|
|
4141
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
4140
4142
|
*/
|
|
4141
4143
|
let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
4142
4144
|
|
|
@@ -4252,7 +4254,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4252
4254
|
// function that renders the HTML and CSS into the scope of the component
|
|
4253
4255
|
render() {
|
|
4254
4256
|
return html$1`
|
|
4255
|
-
<div class="helptext-wrapper
|
|
4257
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
4256
4258
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
4257
4259
|
</div>
|
|
4258
4260
|
`;
|
|
@@ -4366,6 +4368,7 @@ let AuroElement$4 = class AuroElement extends LitElement {
|
|
|
4366
4368
|
* @slot trigger - Defines the content of the trigger.
|
|
4367
4369
|
* @csspart trigger - The trigger content container.
|
|
4368
4370
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
4371
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
4369
4372
|
* @csspart helpText - The helpText content container.
|
|
4370
4373
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
4371
4374
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -12803,7 +12806,7 @@ var buttonVersion$1 = '11.0.0';
|
|
|
12803
12806
|
|
|
12804
12807
|
var colorCss$5 = 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)}`;
|
|
12805
12808
|
|
|
12806
|
-
var styleCss$6 = css
|
|
12809
|
+
var styleCss$6 = 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}`;
|
|
12807
12810
|
|
|
12808
12811
|
var tokensCss$5 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
12809
12812
|
|
|
@@ -12883,6 +12886,8 @@ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
|
12883
12886
|
|
|
12884
12887
|
/**
|
|
12885
12888
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
12889
|
+
*
|
|
12890
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
12886
12891
|
*/
|
|
12887
12892
|
let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
12888
12893
|
|
|
@@ -12998,7 +13003,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
12998
13003
|
// function that renders the HTML and CSS into the scope of the component
|
|
12999
13004
|
render() {
|
|
13000
13005
|
return html$1`
|
|
13001
|
-
<div class="helptext-wrapper
|
|
13006
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
13002
13007
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
13003
13008
|
</div>
|
|
13004
13009
|
`;
|
|
@@ -15535,7 +15540,7 @@ class AuroElement extends LitElement {
|
|
|
15535
15540
|
|
|
15536
15541
|
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)}`;
|
|
15537
15542
|
|
|
15538
|
-
var styleCss = css
|
|
15543
|
+
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}`;
|
|
15539
15544
|
|
|
15540
15545
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
15541
15546
|
|
|
@@ -15615,6 +15620,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
15615
15620
|
|
|
15616
15621
|
/**
|
|
15617
15622
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
15623
|
+
*
|
|
15624
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
15618
15625
|
*/
|
|
15619
15626
|
class AuroHelpText extends LitElement {
|
|
15620
15627
|
|
|
@@ -15730,7 +15737,7 @@ class AuroHelpText extends LitElement {
|
|
|
15730
15737
|
// function that renders the HTML and CSS into the scope of the component
|
|
15731
15738
|
render() {
|
|
15732
15739
|
return html$1`
|
|
15733
|
-
<div class="helptext-wrapper
|
|
15740
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
15734
15741
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
15735
15742
|
</div>
|
|
15736
15743
|
`;
|