@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
|
@@ -35,6 +35,21 @@
|
|
|
35
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
36
|
</head>
|
|
37
37
|
<body class="auro-markdown">
|
|
38
|
+
<header oninput="onRadioInput(event)">
|
|
39
|
+
<auro-radio-group required horizontal name="shape">
|
|
40
|
+
<span slot="legend">Shape</span>
|
|
41
|
+
<auro-radio label="box" value="box" checked></auro-radio>
|
|
42
|
+
<auro-radio label="rounded" value="rounded"></auro-radio>
|
|
43
|
+
<auro-radio label="pill" value="pill"></auro-radio>
|
|
44
|
+
</auro-radio-group>
|
|
45
|
+
<auro-radio-group required horizontal name="size">
|
|
46
|
+
<span slot="legend">Size</span>
|
|
47
|
+
<auro-radio label="medium(default)" value="md" checked></auro-radio>
|
|
48
|
+
<auro-radio label="large" value="lg"></auro-radio>
|
|
49
|
+
<auro-radio label="xlarge" value="xl"></auro-radio>
|
|
50
|
+
</auro-radio-group>
|
|
51
|
+
|
|
52
|
+
</header>
|
|
38
53
|
<main></main>
|
|
39
54
|
|
|
40
55
|
<script type="module">
|
|
@@ -18,8 +18,8 @@ The auro-menu element provides users a way to select from a list of options.
|
|
|
18
18
|
| [noCheckmark](#noCheckmark) | `nocheckmark` | `boolean` | false | When true, selected option will not show the checkmark. |
|
|
19
19
|
| [optionActive](#optionActive) | `optionactive` | `object` | "undefined" | Specifies the current active menuOption. |
|
|
20
20
|
| [optionSelected](#optionSelected) | `optionSelected` | `HTMLElement\|Array<HTMLElement>` | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
|
|
21
|
-
| [shape](#shape) | |
|
|
22
|
-
| [size](#size) | |
|
|
21
|
+
| [shape](#shape) | | `string` | "" | |
|
|
22
|
+
| [size](#size) | | `string` | "" | |
|
|
23
23
|
| [value](#value) | `value` | `string` | "undefined" | Value selected for the component. |
|
|
24
24
|
|
|
25
25
|
## Methods
|
|
@@ -59,16 +59,16 @@ The auro-menu element provides users a way to define a menu option.
|
|
|
59
59
|
|
|
60
60
|
## Properties
|
|
61
61
|
|
|
62
|
-
| Property | Attribute | Type | Default
|
|
63
|
-
|
|
64
|
-
| [disabled](#disabled) | `disabled` | `Boolean` | false
|
|
65
|
-
| [iconTag](#iconTag) | | `string` |
|
|
66
|
-
| [layout](#layout) | | `string` |
|
|
67
|
-
| [nocheckmark](#nocheckmark) | `nocheckmark` | `boolean` | false
|
|
68
|
-
| [selected](#selected) | `selected` | `Boolean` | false
|
|
69
|
-
| [shape](#shape) | |
|
|
70
|
-
| [size](#size) | |
|
|
71
|
-
| [value](#value) | `value` | `String` |
|
|
62
|
+
| Property | Attribute | Type | Default | Description |
|
|
63
|
+
|---------------|---------------|-----------|---------|--------------------------------------------------|
|
|
64
|
+
| [disabled](#disabled) | `disabled` | `Boolean` | false | When true specifies that the menuoption is disabled. |
|
|
65
|
+
| [iconTag](#iconTag) | | `string` | | |
|
|
66
|
+
| [layout](#layout) | | `string` | | |
|
|
67
|
+
| [nocheckmark](#nocheckmark) | `nocheckmark` | `boolean` | false | |
|
|
68
|
+
| [selected](#selected) | `selected` | `Boolean` | false | Specifies that an option is selected. |
|
|
69
|
+
| [shape](#shape) | | `string` | "" | |
|
|
70
|
+
| [size](#size) | | `string` | "" | |
|
|
71
|
+
| [value](#value) | `value` | `String` | | Specifies the value to be sent to a server. |
|
|
72
72
|
|
|
73
73
|
## Events
|
|
74
74
|
|
|
@@ -64,7 +64,7 @@ const t$1=globalThis,i$3=t$1.trustedTypes,s$2=i$3?i$3.createPolicy("lit-html",{c
|
|
|
64
64
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
65
65
|
*/const s$1=globalThis;let i$2 = class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}};i$2._$litElement$=true,i$2["finalized"]=true,s$1.litElementHydrateSupport?.({LitElement:i$2});const o$2=s$1.litElementPolyfillSupport;o$2?.({LitElement:i$2});(s$1.litElementVersions??=[]).push("4.2.0");
|
|
66
66
|
|
|
67
|
-
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)}`;
|
|
67
|
+
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)}`;
|
|
68
68
|
|
|
69
69
|
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)}`;
|
|
70
70
|
|
|
@@ -306,8 +306,8 @@ class AuroMenu extends AuroElement$1 {
|
|
|
306
306
|
|
|
307
307
|
// State properties (reactive)
|
|
308
308
|
|
|
309
|
-
this.shape =
|
|
310
|
-
this.size =
|
|
309
|
+
this.shape = ""; // box, rounded, pill
|
|
310
|
+
this.size = ""; // md, lg, xl
|
|
311
311
|
|
|
312
312
|
// Value of the selected options
|
|
313
313
|
this.value = undefined;
|
|
@@ -1055,7 +1055,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
1055
1055
|
class="${this.hasLoadingPlaceholder ? "" : "empty"}"
|
|
1056
1056
|
>
|
|
1057
1057
|
<div>
|
|
1058
|
-
<slot name="loadingIcon"
|
|
1058
|
+
<slot name="loadingIcon"></slot>
|
|
1059
1059
|
<slot name="loadingText"></slot>
|
|
1060
1060
|
</div>
|
|
1061
1061
|
</auro-menuoption>
|
|
@@ -1078,7 +1078,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
1078
1078
|
*/
|
|
1079
1079
|
const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
|
|
1080
1080
|
|
|
1081
|
-
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}`;
|
|
1081
|
+
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}`;
|
|
1082
1082
|
|
|
1083
1083
|
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)}`;
|
|
1084
1084
|
|
|
@@ -1558,8 +1558,8 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
1558
1558
|
constructor() {
|
|
1559
1559
|
super();
|
|
1560
1560
|
|
|
1561
|
-
this.size =
|
|
1562
|
-
this.shape =
|
|
1561
|
+
this.size = ""; // md, lg, xl
|
|
1562
|
+
this.shape = ""; // box, rounded, pill
|
|
1563
1563
|
|
|
1564
1564
|
/**
|
|
1565
1565
|
* Generate unique names for dependency components.
|
|
@@ -1675,22 +1675,8 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
1675
1675
|
* @returns {void}
|
|
1676
1676
|
*/
|
|
1677
1677
|
renderLayout() {
|
|
1678
|
-
|
|
1679
|
-
const fontClassMap = {
|
|
1680
|
-
xs: 'body-default',
|
|
1681
|
-
sm: 'body-default',
|
|
1682
|
-
md: 'body-default',
|
|
1683
|
-
lg: 'body-lg',
|
|
1684
|
-
xl: 'body-lg'
|
|
1685
|
-
};
|
|
1686
|
-
|
|
1687
|
-
const classes = e({
|
|
1688
|
-
wrapper: true,
|
|
1689
|
-
[this.size ? fontClassMap[this.size] : 'body-default']: true,
|
|
1690
|
-
});
|
|
1691
|
-
|
|
1692
1678
|
return u`
|
|
1693
|
-
<div class="
|
|
1679
|
+
<div class="wrapper">
|
|
1694
1680
|
${this.selected && !this.nocheckmark
|
|
1695
1681
|
? this.generateIconHtml(checkmarkIcon.svg)
|
|
1696
1682
|
: undefined}
|
|
@@ -24,7 +24,7 @@ const t$1=globalThis,i$3=t$1.trustedTypes,s$2=i$3?i$3.createPolicy("lit-html",{c
|
|
|
24
24
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
25
25
|
*/const s$1=globalThis;let i$2 = class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}};i$2._$litElement$=true,i$2["finalized"]=true,s$1.litElementHydrateSupport?.({LitElement:i$2});const o$2=s$1.litElementPolyfillSupport;o$2?.({LitElement:i$2});(s$1.litElementVersions??=[]).push("4.2.0");
|
|
26
26
|
|
|
27
|
-
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)}`;
|
|
27
|
+
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)}`;
|
|
28
28
|
|
|
29
29
|
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)}`;
|
|
30
30
|
|
|
@@ -266,8 +266,8 @@ class AuroMenu extends AuroElement$1 {
|
|
|
266
266
|
|
|
267
267
|
// State properties (reactive)
|
|
268
268
|
|
|
269
|
-
this.shape =
|
|
270
|
-
this.size =
|
|
269
|
+
this.shape = ""; // box, rounded, pill
|
|
270
|
+
this.size = ""; // md, lg, xl
|
|
271
271
|
|
|
272
272
|
// Value of the selected options
|
|
273
273
|
this.value = undefined;
|
|
@@ -1015,7 +1015,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
1015
1015
|
class="${this.hasLoadingPlaceholder ? "" : "empty"}"
|
|
1016
1016
|
>
|
|
1017
1017
|
<div>
|
|
1018
|
-
<slot name="loadingIcon"
|
|
1018
|
+
<slot name="loadingIcon"></slot>
|
|
1019
1019
|
<slot name="loadingText"></slot>
|
|
1020
1020
|
</div>
|
|
1021
1021
|
</auro-menuoption>
|
|
@@ -1038,7 +1038,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
1038
1038
|
*/
|
|
1039
1039
|
const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
|
|
1040
1040
|
|
|
1041
|
-
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}`;
|
|
1041
|
+
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}`;
|
|
1042
1042
|
|
|
1043
1043
|
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)}`;
|
|
1044
1044
|
|
|
@@ -1518,8 +1518,8 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
1518
1518
|
constructor() {
|
|
1519
1519
|
super();
|
|
1520
1520
|
|
|
1521
|
-
this.size =
|
|
1522
|
-
this.shape =
|
|
1521
|
+
this.size = ""; // md, lg, xl
|
|
1522
|
+
this.shape = ""; // box, rounded, pill
|
|
1523
1523
|
|
|
1524
1524
|
/**
|
|
1525
1525
|
* Generate unique names for dependency components.
|
|
@@ -1635,22 +1635,8 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
1635
1635
|
* @returns {void}
|
|
1636
1636
|
*/
|
|
1637
1637
|
renderLayout() {
|
|
1638
|
-
|
|
1639
|
-
const fontClassMap = {
|
|
1640
|
-
xs: 'body-default',
|
|
1641
|
-
sm: 'body-default',
|
|
1642
|
-
md: 'body-default',
|
|
1643
|
-
lg: 'body-lg',
|
|
1644
|
-
xl: 'body-lg'
|
|
1645
|
-
};
|
|
1646
|
-
|
|
1647
|
-
const classes = e({
|
|
1648
|
-
wrapper: true,
|
|
1649
|
-
[this.size ? fontClassMap[this.size] : 'body-default']: true,
|
|
1650
|
-
});
|
|
1651
|
-
|
|
1652
1638
|
return u`
|
|
1653
|
-
<div class="
|
|
1639
|
+
<div class="wrapper">
|
|
1654
1640
|
${this.selected && !this.nocheckmark
|
|
1655
1641
|
? this.generateIconHtml(checkmarkIcon.svg)
|
|
1656
1642
|
: undefined}
|
|
@@ -3,7 +3,7 @@ import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
|
|
|
3
3
|
import { classMap } from 'lit/directives/class-map.js';
|
|
4
4
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
5
|
|
|
6
|
-
var styleCss$2 = css`: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)}`;
|
|
6
|
+
var styleCss$2 = css`: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)}`;
|
|
7
7
|
|
|
8
8
|
var colorCss$2 = css`: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)}`;
|
|
9
9
|
|
|
@@ -286,8 +286,8 @@ class AuroMenu extends AuroElement$1 {
|
|
|
286
286
|
|
|
287
287
|
// State properties (reactive)
|
|
288
288
|
|
|
289
|
-
this.shape =
|
|
290
|
-
this.size =
|
|
289
|
+
this.shape = ""; // box, rounded, pill
|
|
290
|
+
this.size = ""; // md, lg, xl
|
|
291
291
|
|
|
292
292
|
// Value of the selected options
|
|
293
293
|
this.value = undefined;
|
|
@@ -1035,7 +1035,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
1035
1035
|
class="${this.hasLoadingPlaceholder ? "" : "empty"}"
|
|
1036
1036
|
>
|
|
1037
1037
|
<div>
|
|
1038
|
-
<slot name="loadingIcon"
|
|
1038
|
+
<slot name="loadingIcon"></slot>
|
|
1039
1039
|
<slot name="loadingText"></slot>
|
|
1040
1040
|
</div>
|
|
1041
1041
|
</auro-menuoption>
|
|
@@ -1051,7 +1051,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
1051
1051
|
}
|
|
1052
1052
|
}
|
|
1053
1053
|
|
|
1054
|
-
var styleCss$1 = css`: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}`;
|
|
1054
|
+
var styleCss$1 = css`: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}`;
|
|
1055
1055
|
|
|
1056
1056
|
var colorCss$1 = css`: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)}`;
|
|
1057
1057
|
|
|
@@ -1512,8 +1512,8 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
1512
1512
|
constructor() {
|
|
1513
1513
|
super();
|
|
1514
1514
|
|
|
1515
|
-
this.size =
|
|
1516
|
-
this.shape =
|
|
1515
|
+
this.size = ""; // md, lg, xl
|
|
1516
|
+
this.shape = ""; // box, rounded, pill
|
|
1517
1517
|
|
|
1518
1518
|
/**
|
|
1519
1519
|
* Generate unique names for dependency components.
|
|
@@ -1629,22 +1629,8 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
1629
1629
|
* @returns {void}
|
|
1630
1630
|
*/
|
|
1631
1631
|
renderLayout() {
|
|
1632
|
-
|
|
1633
|
-
const fontClassMap = {
|
|
1634
|
-
xs: 'body-default',
|
|
1635
|
-
sm: 'body-default',
|
|
1636
|
-
md: 'body-default',
|
|
1637
|
-
lg: 'body-lg',
|
|
1638
|
-
xl: 'body-lg'
|
|
1639
|
-
};
|
|
1640
|
-
|
|
1641
|
-
const classes = classMap({
|
|
1642
|
-
wrapper: true,
|
|
1643
|
-
[this.size ? fontClassMap[this.size] : 'body-default']: true,
|
|
1644
|
-
});
|
|
1645
|
-
|
|
1646
1632
|
return html$1`
|
|
1647
|
-
<div class="
|
|
1633
|
+
<div class="wrapper">
|
|
1648
1634
|
${this.selected && !this.nocheckmark
|
|
1649
1635
|
? this.generateIconHtml(checkmarkIcon.svg)
|
|
1650
1636
|
: undefined}
|
|
@@ -3,7 +3,7 @@ import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
|
|
|
3
3
|
import { classMap } from 'lit/directives/class-map.js';
|
|
4
4
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
5
|
|
|
6
|
-
var styleCss$2 = css`: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)}`;
|
|
6
|
+
var styleCss$2 = css`: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)}`;
|
|
7
7
|
|
|
8
8
|
var colorCss$2 = css`: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)}`;
|
|
9
9
|
|
|
@@ -245,8 +245,8 @@ class AuroMenu extends AuroElement$1 {
|
|
|
245
245
|
|
|
246
246
|
// State properties (reactive)
|
|
247
247
|
|
|
248
|
-
this.shape =
|
|
249
|
-
this.size =
|
|
248
|
+
this.shape = ""; // box, rounded, pill
|
|
249
|
+
this.size = ""; // md, lg, xl
|
|
250
250
|
|
|
251
251
|
// Value of the selected options
|
|
252
252
|
this.value = undefined;
|
|
@@ -994,7 +994,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
994
994
|
class="${this.hasLoadingPlaceholder ? "" : "empty"}"
|
|
995
995
|
>
|
|
996
996
|
<div>
|
|
997
|
-
<slot name="loadingIcon"
|
|
997
|
+
<slot name="loadingIcon"></slot>
|
|
998
998
|
<slot name="loadingText"></slot>
|
|
999
999
|
</div>
|
|
1000
1000
|
</auro-menuoption>
|
|
@@ -1010,7 +1010,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
1010
1010
|
}
|
|
1011
1011
|
}
|
|
1012
1012
|
|
|
1013
|
-
var styleCss$1 = css`: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}`;
|
|
1013
|
+
var styleCss$1 = css`: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}`;
|
|
1014
1014
|
|
|
1015
1015
|
var colorCss$1 = css`: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)}`;
|
|
1016
1016
|
|
|
@@ -1471,8 +1471,8 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
1471
1471
|
constructor() {
|
|
1472
1472
|
super();
|
|
1473
1473
|
|
|
1474
|
-
this.size =
|
|
1475
|
-
this.shape =
|
|
1474
|
+
this.size = ""; // md, lg, xl
|
|
1475
|
+
this.shape = ""; // box, rounded, pill
|
|
1476
1476
|
|
|
1477
1477
|
/**
|
|
1478
1478
|
* Generate unique names for dependency components.
|
|
@@ -1588,22 +1588,8 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
1588
1588
|
* @returns {void}
|
|
1589
1589
|
*/
|
|
1590
1590
|
renderLayout() {
|
|
1591
|
-
|
|
1592
|
-
const fontClassMap = {
|
|
1593
|
-
xs: 'body-default',
|
|
1594
|
-
sm: 'body-default',
|
|
1595
|
-
md: 'body-default',
|
|
1596
|
-
lg: 'body-lg',
|
|
1597
|
-
xl: 'body-lg'
|
|
1598
|
-
};
|
|
1599
|
-
|
|
1600
|
-
const classes = classMap({
|
|
1601
|
-
wrapper: true,
|
|
1602
|
-
[this.size ? fontClassMap[this.size] : 'body-default']: true,
|
|
1603
|
-
});
|
|
1604
|
-
|
|
1605
1591
|
return html$1`
|
|
1606
|
-
<div class="
|
|
1592
|
+
<div class="wrapper">
|
|
1607
1593
|
${this.selected && !this.nocheckmark
|
|
1608
1594
|
? this.generateIconHtml(checkmarkIcon.svg)
|
|
1609
1595
|
: undefined}
|
|
@@ -302,7 +302,7 @@ Use the `disabled` attribute to disable singular `<auro-radio>` elements or the
|
|
|
302
302
|
|
|
303
303
|
Use the `error` attribute to apply a persistent custom error that supersedes the HTML5 validation logic.
|
|
304
304
|
|
|
305
|
-
A custom error message can be set using the `error` attribute, or it can be used in
|
|
305
|
+
A custom error message can be set using the `error` attribute, or it can be used in conjuction with the `setCustomValidityCustomError` attribute.
|
|
306
306
|
|
|
307
307
|
<div class="exampleWrapper">
|
|
308
308
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
|
|
@@ -544,37 +544,6 @@ export function dynamicExample() {
|
|
|
544
544
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
545
545
|
</auro-accordion>
|
|
546
546
|
|
|
547
|
-
## Multiline Label
|
|
548
|
-
|
|
549
|
-
Example to show text wrapping on multiline labels.
|
|
550
|
-
|
|
551
|
-
<div class="exampleWrapper">
|
|
552
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multilineGroup.html) -->
|
|
553
|
-
<!-- The below content is automatically added from ./../apiExamples/multilineGroup.html -->
|
|
554
|
-
<auro-radio-group>
|
|
555
|
-
<span slot="legend">Form label goes here</span>
|
|
556
|
-
<auro-radio id="basicGroupRadio1" label="Sample text" name="radioDemo" value="option1"></auro-radio>
|
|
557
|
-
<auro-radio id="basicGroupRadio2" label="This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines." name="radioDemo" value="option2"></auro-radio>
|
|
558
|
-
<auro-radio id="basicGroupRadio3" label="Sample text" name="radioDemo" value="option3"></auro-radio>
|
|
559
|
-
</auro-radio-group>
|
|
560
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
561
|
-
</div>
|
|
562
|
-
<auro-accordion alignRight>
|
|
563
|
-
<span slot="trigger">See code</span>
|
|
564
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multilineGroup.html) -->
|
|
565
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/multilineGroup.html -->
|
|
566
|
-
|
|
567
|
-
```html
|
|
568
|
-
<auro-radio-group>
|
|
569
|
-
<span slot="legend">Form label goes here</span>
|
|
570
|
-
<auro-radio id="basicGroupRadio1" label="Sample text" name="radioDemo" value="option1"></auro-radio>
|
|
571
|
-
<auro-radio id="basicGroupRadio2" label="This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines." name="radioDemo" value="option2"></auro-radio>
|
|
572
|
-
<auro-radio id="basicGroupRadio3" label="Sample text" name="radioDemo" value="option3"></auro-radio>
|
|
573
|
-
</auro-radio-group>
|
|
574
|
-
```
|
|
575
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
576
|
-
</auro-accordion>
|
|
577
|
-
|
|
578
547
|
## Theme Support
|
|
579
548
|
|
|
580
549
|
The component may be restyled using the following code sample and changing the values of the following token(s).
|
|
@@ -70,7 +70,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
70
70
|
|
|
71
71
|
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t():"function"==typeof define&&define.amd?define(t):t();}(0,function(){function e(e){var t=true,n=false,o=null,d={text:true,search:true,url:true,tel:true,email:true,password:true,number:true,date:true,month:true,week:true,time:true,datetime:true,"datetime-local":true};function i(e){return !!(e&&e!==document&&"HTML"!==e.nodeName&&"BODY"!==e.nodeName&&"classList"in e&&"contains"in e.classList)}function s(e){e.classList.contains("focus-visible")||(e.classList.add("focus-visible"),e.setAttribute("data-focus-visible-added",""));}function u(e){t=false;}function a(){document.addEventListener("mousemove",c),document.addEventListener("mousedown",c),document.addEventListener("mouseup",c),document.addEventListener("pointermove",c),document.addEventListener("pointerdown",c),document.addEventListener("pointerup",c),document.addEventListener("touchmove",c),document.addEventListener("touchstart",c),document.addEventListener("touchend",c);}function c(e){e.target.nodeName&&"html"===e.target.nodeName.toLowerCase()||(t=false,document.removeEventListener("mousemove",c),document.removeEventListener("mousedown",c),document.removeEventListener("mouseup",c),document.removeEventListener("pointermove",c),document.removeEventListener("pointerdown",c),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",c),document.removeEventListener("touchstart",c),document.removeEventListener("touchend",c));}document.addEventListener("keydown",function(n){n.metaKey||n.altKey||n.ctrlKey||(i(e.activeElement)&&s(e.activeElement),t=true);},true),document.addEventListener("mousedown",u,true),document.addEventListener("pointerdown",u,true),document.addEventListener("touchstart",u,true),document.addEventListener("visibilitychange",function(e){"hidden"===document.visibilityState&&(n&&(t=true),a());},true),a(),e.addEventListener("focus",function(e){var n,o,u;i(e.target)&&(t||(n=e.target,o=n.type,"INPUT"===(u=n.tagName)&&d[o]&&!n.readOnly||"TEXTAREA"===u&&!n.readOnly||n.isContentEditable))&&s(e.target);},true),e.addEventListener("blur",function(e){var t;i(e.target)&&(e.target.classList.contains("focus-visible")||e.target.hasAttribute("data-focus-visible-added"))&&(n=true,window.clearTimeout(o),o=window.setTimeout(function(){n=false;},100),(t=e.target).hasAttribute("data-focus-visible-added")&&(t.classList.remove("focus-visible"),t.removeAttribute("data-focus-visible-added")));},true),e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&e.host?e.host.setAttribute("data-js-focus-visible",""):e.nodeType===Node.DOCUMENT_NODE&&(document.documentElement.classList.add("js-focus-visible"),document.documentElement.setAttribute("data-js-focus-visible",""));}if("undefined"!=typeof window&&"undefined"!=typeof document){var t;window.applyFocusVisiblePolyfill=e;try{t=new CustomEvent("focus-visible-polyfill-ready");}catch(e){(t=document.createEvent("CustomEvent")).initCustomEvent("focus-visible-polyfill-ready",false,false,{});}window.dispatchEvent(t);}"undefined"!=typeof document&&e(document);});
|
|
72
72
|
|
|
73
|
-
var styleCss$2 = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3)}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;outline:unset}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .rdoGroup{display:block;padding-right:var(--ds-size-100, 0.5rem);outline:3px solid transparent}:host(.focus-visible) .rdoGroup .label:after{outline-width:1px;outline-style:solid}.rdoGroup{position:relative;padding-right:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-75, 0.375rem)}.label{display:block;margin-left:var(--ds-size-300, 1.5rem)}.label:hover{cursor:pointer}.label:after{position:absolute;z-index:1;top:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));content:"";border-radius:50%;border:1px solid}.slotContent{display:block;margin-left:var(--ds-size-400, 2rem);padding-left:var(--ds-size-100, 0.5rem)}`;
|
|
73
|
+
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;outline:unset}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .rdoGroup{display:block;padding-right:var(--ds-size-100, 0.5rem);outline:3px solid transparent}:host(.focus-visible) .rdoGroup .label:after{outline-width:1px;outline-style:solid}.rdoGroup{position:relative;padding-right:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.label{display:block;margin-left:var(--ds-size-300, 1.5rem)}.label:hover{cursor:pointer}.label:after{position:absolute;z-index:1;top:var(--ds-size-200, 1rem);left:var(--ds-size-50, 0.25rem);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));transform:translateY(-50%);content:"";border-radius:50%;border:1px solid}.slotContent{display:block;margin-left:var(--ds-size-400, 2rem);padding-left:var(--ds-size-100, 0.5rem)}`;
|
|
74
74
|
|
|
75
75
|
var colorCss$2 = i$5`.label{color:var(--ds-auro-radio-label-color)}.label:after{background-color:var(--ds-auro-radio-btn-fill-color);border-color:var(--ds-auro-radio-btn-border-color);box-shadow:inset 0 0 0 3px var(--ds-auro-radio-btn-inset-color);outline-color:var(--ds-auro-radio-btn-border-color);-webkit-tap-highlight-color:var(--ds-auro-radio-tap-color)}:host([checked]){--ds-auro-radio-btn-inset-color: var(--ds-advanced-color-boolean-indicator, #ffffff);--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-istrue, #01426a);--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-istrue, #01426a)}:host([error]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([checked][error]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([disabled]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-radio-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([checked][disabled]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host(.focus-visible){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark]){--ds-auro-radio-label-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-radio-btn-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([onDark][checked]){--ds-auro-radio-btn-inset-color: var(--ds-advanced-color-boolean-indicator-inverse, #00274a);--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff);--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff)}:host([onDark][error]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][checked][error]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][disabled]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-radio-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][checked][disabled]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark].focus-visible){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}`;
|
|
76
76
|
|
|
@@ -411,7 +411,7 @@ class AuroRadio extends i$2 {
|
|
|
411
411
|
};
|
|
412
412
|
|
|
413
413
|
return x`
|
|
414
|
-
<div class="ods-inputGroup rdoGroup
|
|
414
|
+
<div class="ods-inputGroup rdoGroup" part="radio">
|
|
415
415
|
<input
|
|
416
416
|
class="util_displayHidden ods-inputOption rdo--input"
|
|
417
417
|
part="radio-input"
|
|
@@ -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
|
`;
|