@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
|
@@ -7583,7 +7583,7 @@ var buttonVersion = '11.0.0';
|
|
|
7583
7583
|
|
|
7584
7584
|
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)}`;
|
|
7585
7585
|
|
|
7586
|
-
var styleCss = i$5
|
|
7586
|
+
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}`;
|
|
7587
7587
|
|
|
7588
7588
|
var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
7589
7589
|
|
|
@@ -7663,6 +7663,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
7663
7663
|
|
|
7664
7664
|
/**
|
|
7665
7665
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
7666
|
+
*
|
|
7667
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
7666
7668
|
*/
|
|
7667
7669
|
class AuroHelpText extends i$2 {
|
|
7668
7670
|
|
|
@@ -7778,7 +7780,7 @@ class AuroHelpText extends i$2 {
|
|
|
7778
7780
|
// function that renders the HTML and CSS into the scope of the component
|
|
7779
7781
|
render() {
|
|
7780
7782
|
return x`
|
|
7781
|
-
<div class="helptext-wrapper
|
|
7783
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
7782
7784
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
7783
7785
|
</div>
|
|
7784
7786
|
`;
|
|
@@ -7507,7 +7507,7 @@ var buttonVersion = '11.0.0';
|
|
|
7507
7507
|
|
|
7508
7508
|
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)}`;
|
|
7509
7509
|
|
|
7510
|
-
var styleCss = css
|
|
7510
|
+
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}`;
|
|
7511
7511
|
|
|
7512
7512
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
7513
7513
|
|
|
@@ -7587,6 +7587,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
7587
7587
|
|
|
7588
7588
|
/**
|
|
7589
7589
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
7590
|
+
*
|
|
7591
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
7590
7592
|
*/
|
|
7591
7593
|
class AuroHelpText extends LitElement {
|
|
7592
7594
|
|
|
@@ -7702,7 +7704,7 @@ class AuroHelpText extends LitElement {
|
|
|
7702
7704
|
// function that renders the HTML and CSS into the scope of the component
|
|
7703
7705
|
render() {
|
|
7704
7706
|
return html`
|
|
7705
|
-
<div class="helptext-wrapper
|
|
7707
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
7706
7708
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
7707
7709
|
</div>
|
|
7708
7710
|
`;
|
|
@@ -7507,7 +7507,7 @@ var buttonVersion = '11.0.0';
|
|
|
7507
7507
|
|
|
7508
7508
|
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)}`;
|
|
7509
7509
|
|
|
7510
|
-
var styleCss = css
|
|
7510
|
+
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}`;
|
|
7511
7511
|
|
|
7512
7512
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
7513
7513
|
|
|
@@ -7587,6 +7587,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
7587
7587
|
|
|
7588
7588
|
/**
|
|
7589
7589
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
7590
|
+
*
|
|
7591
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
7590
7592
|
*/
|
|
7591
7593
|
class AuroHelpText extends LitElement {
|
|
7592
7594
|
|
|
@@ -7702,7 +7704,7 @@ class AuroHelpText extends LitElement {
|
|
|
7702
7704
|
// function that renders the HTML and CSS into the scope of the component
|
|
7703
7705
|
render() {
|
|
7704
7706
|
return html`
|
|
7705
|
-
<div class="helptext-wrapper
|
|
7707
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
7706
7708
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
7707
7709
|
</div>
|
|
7708
7710
|
`;
|
|
@@ -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}
|