@aurodesignsystem-dev/auro-formkit 0.0.0-pr750.1 → 0.0.0-pr754.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/index.js +1 -1
- package/components/bibtemplate/dist/registered.js +1 -1
- package/components/checkbox/demo/api.html +10 -16
- package/components/checkbox/demo/api.min.js +11 -11
- package/components/checkbox/demo/index.html +10 -16
- package/components/checkbox/demo/index.min.js +11 -11
- package/components/checkbox/demo/readme.html +9 -16
- package/components/checkbox/dist/index.js +11 -11
- package/components/checkbox/dist/registered.js +11 -11
- package/components/combobox/demo/api.html +10 -16
- package/components/combobox/demo/api.md +6 -12
- package/components/combobox/demo/api.min.js +89 -48
- package/components/combobox/demo/index.html +10 -16
- package/components/combobox/demo/index.min.js +89 -48
- package/components/combobox/demo/readme.html +9 -16
- package/components/combobox/dist/index.js +88 -46
- package/components/combobox/dist/registered.js +88 -46
- package/components/counter/demo/api.html +10 -16
- package/components/counter/demo/api.md +7 -140
- package/components/counter/demo/api.min.js +386 -556
- package/components/counter/demo/index.html +10 -16
- package/components/counter/demo/index.md +0 -82
- package/components/counter/demo/index.min.js +386 -556
- package/components/counter/demo/readme.html +9 -16
- package/components/counter/dist/auro-counter-group.d.ts +14 -71
- package/components/counter/dist/auro-counter.d.ts +0 -10
- package/components/counter/dist/index.js +386 -556
- package/components/counter/dist/registered.js +386 -556
- package/components/datepicker/demo/api.html +10 -16
- package/components/datepicker/demo/api.min.js +94 -67
- package/components/datepicker/demo/index.html +10 -16
- package/components/datepicker/demo/index.min.js +94 -67
- package/components/datepicker/demo/readme.html +9 -16
- package/components/datepicker/dist/auro-datepicker.d.ts +0 -6
- package/components/datepicker/dist/index.js +94 -67
- package/components/datepicker/dist/registered.js +94 -67
- package/components/dropdown/demo/api.html +10 -16
- package/components/dropdown/demo/api.md +268 -76
- package/components/dropdown/demo/api.min.js +67 -25
- package/components/dropdown/demo/index.html +10 -16
- package/components/dropdown/demo/index.md +363 -45
- package/components/dropdown/demo/index.min.js +67 -25
- package/components/dropdown/demo/readme.html +9 -16
- package/components/dropdown/dist/auro-dropdown.d.ts +71 -21
- package/components/dropdown/dist/index.js +67 -25
- package/components/dropdown/dist/registered.js +67 -25
- package/components/form/demo/api.html +9 -16
- package/components/form/demo/autocomplete.html +3 -19
- package/components/form/demo/index.html +9 -16
- package/components/form/demo/readme.html +9 -16
- package/components/form/demo/working.html +13 -19
- package/components/helptext/dist/index.js +1 -1
- package/components/helptext/dist/registered.js +1 -1
- package/components/input/demo/api.html +10 -16
- package/components/input/demo/api.md +1 -1
- package/components/input/demo/api.min.js +14 -14
- package/components/input/demo/index.html +10 -16
- package/components/input/demo/index.min.js +14 -14
- package/components/input/demo/readme.html +9 -16
- package/components/input/dist/base-input.d.ts +1 -1
- package/components/input/dist/index.js +14 -14
- package/components/input/dist/registered.js +14 -14
- package/components/menu/demo/api.html +32 -16
- package/components/menu/demo/api.md +15 -14
- package/components/menu/demo/api.min.js +1 -2
- package/components/menu/demo/index.html +10 -16
- package/components/menu/demo/index.min.js +1 -2
- package/components/menu/demo/readme.html +9 -16
- package/components/menu/dist/auro-menu.d.ts +1 -2
- package/components/menu/dist/index.js +1 -2
- package/components/menu/dist/registered.js +1 -2
- package/components/radio/demo/api.html +10 -16
- package/components/radio/demo/api.min.js +10 -10
- package/components/radio/demo/index.html +10 -16
- package/components/radio/demo/index.min.js +10 -10
- package/components/radio/demo/readme.html +9 -16
- package/components/radio/dist/auro-radio.d.ts +1 -1
- package/components/radio/dist/index.js +10 -10
- package/components/radio/dist/registered.js +10 -10
- package/components/select/demo/api.html +10 -16
- package/components/select/demo/api.md +36 -41
- package/components/select/demo/api.min.js +103 -61
- package/components/select/demo/index.html +11 -16
- package/components/select/demo/index.md +1 -1
- package/components/select/demo/index.min.js +103 -61
- package/components/select/demo/readme.html +9 -16
- package/components/select/dist/auro-select.d.ts +2 -9
- package/components/select/dist/index.js +102 -59
- package/components/select/dist/registered.js +102 -59
- package/package.json +3 -4
|
@@ -16,24 +16,17 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet"
|
|
26
|
-
|
|
27
|
-
<!-- Design Token Alaska Theme -->
|
|
28
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
-
|
|
30
|
-
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
-
|
|
33
|
-
<!-- Demo Specific Styles -->
|
|
19
|
+
<title>Auro Web Component Generator | auro-menu custom element</title>
|
|
20
|
+
<link
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
type="text/css"
|
|
23
|
+
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
|
|
24
|
+
/>
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
|
|
26
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
|
|
34
27
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
28
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
-
</head>
|
|
29
|
+
</head>
|
|
37
30
|
<body class="auro-markdown">
|
|
38
31
|
<main></main>
|
|
39
32
|
|
|
@@ -117,10 +117,9 @@ export class AuroMenu extends AuroElement {
|
|
|
117
117
|
/**
|
|
118
118
|
* Formatted value based on `multiSelect` state.
|
|
119
119
|
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
120
|
-
* @private
|
|
121
120
|
* @returns {String|Array<String>}
|
|
122
121
|
*/
|
|
123
|
-
|
|
122
|
+
get formattedValue(): string | Array<string>;
|
|
124
123
|
firstUpdated(): void;
|
|
125
124
|
loadingSlots: NodeListOf<Element>;
|
|
126
125
|
/**
|
|
@@ -423,7 +423,6 @@ class AuroMenu extends AuroElement$1 {
|
|
|
423
423
|
/**
|
|
424
424
|
* Formatted value based on `multiSelect` state.
|
|
425
425
|
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
426
|
-
* @private
|
|
427
426
|
* @returns {String|Array<String>}
|
|
428
427
|
*/
|
|
429
428
|
get formattedValue() {
|
|
@@ -1051,7 +1050,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
1051
1050
|
}
|
|
1052
1051
|
}
|
|
1053
1052
|
|
|
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) +
|
|
1053
|
+
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) + 24px + 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) + 24px + 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
1054
|
|
|
1056
1055
|
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
1056
|
|
|
@@ -382,7 +382,6 @@ class AuroMenu extends AuroElement$1 {
|
|
|
382
382
|
/**
|
|
383
383
|
* Formatted value based on `multiSelect` state.
|
|
384
384
|
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
385
|
-
* @private
|
|
386
385
|
* @returns {String|Array<String>}
|
|
387
386
|
*/
|
|
388
387
|
get formattedValue() {
|
|
@@ -1010,7 +1009,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
1010
1009
|
}
|
|
1011
1010
|
}
|
|
1012
1011
|
|
|
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) +
|
|
1012
|
+
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) + 24px + 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) + 24px + 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
1013
|
|
|
1015
1014
|
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
1015
|
|
|
@@ -15,24 +15,18 @@
|
|
|
15
15
|
<head>
|
|
16
16
|
<meta charset="UTF-8" />
|
|
17
17
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
18
|
-
<title>Auro Web Component
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<link rel="stylesheet"
|
|
25
|
-
|
|
26
|
-
<!-- Design Token Alaska Theme -->
|
|
27
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
28
|
-
|
|
29
|
-
<!-- Webcore Stylesheet Alaska Theme -->
|
|
30
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
31
|
-
|
|
32
|
-
<!-- Demo Specific Styles -->
|
|
18
|
+
<title>Auro Web Component Generator | auro-radio custom element</title>
|
|
19
|
+
<link
|
|
20
|
+
rel="stylesheet"
|
|
21
|
+
type="text/css"
|
|
22
|
+
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
|
|
23
|
+
/>
|
|
24
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
|
|
33
26
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
34
27
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
35
|
-
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
|
|
29
|
+
</head>
|
|
36
30
|
<body class="auro-markdown">
|
|
37
31
|
<main></main>
|
|
38
32
|
|
|
@@ -246,8 +246,8 @@ class AuroRadio extends i$2 {
|
|
|
246
246
|
},
|
|
247
247
|
|
|
248
248
|
/**
|
|
249
|
-
* Do not add to api doc since changing of this can easily break a11y.
|
|
250
249
|
* @private
|
|
250
|
+
* not to add to api.md since changing of this can easily break a11y.
|
|
251
251
|
*/
|
|
252
252
|
role: {
|
|
253
253
|
type: String,
|
|
@@ -443,7 +443,7 @@ class AuroRadio extends i$2 {
|
|
|
443
443
|
*/
|
|
444
444
|
const a=Symbol.for(""),o=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(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(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);
|
|
445
445
|
|
|
446
|
-
var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}
|
|
446
|
+
var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}`;
|
|
447
447
|
|
|
448
448
|
var colorCss$1 = i$5`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
449
449
|
|
|
@@ -923,19 +923,19 @@ class AuroFormValidation {
|
|
|
923
923
|
{
|
|
924
924
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
925
925
|
validity: 'tooShort',
|
|
926
|
-
message: e => e.
|
|
926
|
+
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
927
927
|
},
|
|
928
928
|
{
|
|
929
929
|
check: (e) => e.value?.length > e.maxLength,
|
|
930
930
|
validity: 'tooLong',
|
|
931
|
-
message: e => e.
|
|
931
|
+
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
932
932
|
}
|
|
933
933
|
],
|
|
934
934
|
pattern: [
|
|
935
935
|
{
|
|
936
936
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
937
937
|
validity: 'patternMismatch',
|
|
938
|
-
message: e => e.
|
|
938
|
+
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
939
939
|
}
|
|
940
940
|
]
|
|
941
941
|
},
|
|
@@ -1130,10 +1130,10 @@ class AuroFormValidation {
|
|
|
1130
1130
|
if (!hasValue && elem.required && elem.touched) {
|
|
1131
1131
|
elem.validity = 'valueMissing';
|
|
1132
1132
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
1133
|
-
} else if (
|
|
1133
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
1134
1134
|
this.validateType(elem);
|
|
1135
1135
|
this.validateElementAttributes(elem);
|
|
1136
|
-
} else if (
|
|
1136
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
1137
1137
|
this.validateElementAttributes(elem);
|
|
1138
1138
|
}
|
|
1139
1139
|
}
|
|
@@ -1266,7 +1266,7 @@ class AuroDependencyVersioning {
|
|
|
1266
1266
|
|
|
1267
1267
|
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)}`;
|
|
1268
1268
|
|
|
1269
|
-
var styleCss = i$5
|
|
1269
|
+
var styleCss = i$5`.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}`;
|
|
1270
1270
|
|
|
1271
1271
|
var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
1272
1272
|
|
|
@@ -1903,11 +1903,11 @@ class AuroRadioGroup extends i$2 {
|
|
|
1903
1903
|
|
|
1904
1904
|
${!this.validity || this.validity === undefined || this.validity === 'valid'
|
|
1905
1905
|
? u`
|
|
1906
|
-
<${this.helpTextTag} ?onDark="${this.onDark}" part="helpText">
|
|
1906
|
+
<${this.helpTextTag} large ?onDark="${this.onDark}" part="helpText">
|
|
1907
1907
|
<slot name="helpText"></slot>
|
|
1908
1908
|
</${this.helpTextTag}>`
|
|
1909
1909
|
: u`
|
|
1910
|
-
<${this.helpTextTag} ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
|
|
1910
|
+
<${this.helpTextTag} large ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
|
|
1911
1911
|
${this.errorMessage}
|
|
1912
1912
|
</${this.helpTextTag}>`
|
|
1913
1913
|
}
|
|
@@ -16,24 +16,18 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet"
|
|
26
|
-
|
|
27
|
-
<!-- Design Token Alaska Theme -->
|
|
28
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
-
|
|
30
|
-
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
-
|
|
33
|
-
<!-- Demo Specific Styles -->
|
|
19
|
+
<title>Auro Web Component Generator | auro-radio custom element</title>
|
|
20
|
+
<link
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
type="text/css"
|
|
23
|
+
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
|
|
24
|
+
/>
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
|
|
26
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
|
|
34
27
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
28
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
-
|
|
29
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
|
|
30
|
+
</head>
|
|
37
31
|
<body class="auro-markdown">
|
|
38
32
|
<main></main>
|
|
39
33
|
|
|
@@ -221,8 +221,8 @@ class AuroRadio extends i$2 {
|
|
|
221
221
|
},
|
|
222
222
|
|
|
223
223
|
/**
|
|
224
|
-
* Do not add to api doc since changing of this can easily break a11y.
|
|
225
224
|
* @private
|
|
225
|
+
* not to add to api.md since changing of this can easily break a11y.
|
|
226
226
|
*/
|
|
227
227
|
role: {
|
|
228
228
|
type: String,
|
|
@@ -418,7 +418,7 @@ class AuroRadio extends i$2 {
|
|
|
418
418
|
*/
|
|
419
419
|
const a=Symbol.for(""),o=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(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(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);
|
|
420
420
|
|
|
421
|
-
var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}
|
|
421
|
+
var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}`;
|
|
422
422
|
|
|
423
423
|
var colorCss$1 = i$5`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
424
424
|
|
|
@@ -898,19 +898,19 @@ class AuroFormValidation {
|
|
|
898
898
|
{
|
|
899
899
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
900
900
|
validity: 'tooShort',
|
|
901
|
-
message: e => e.
|
|
901
|
+
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
902
902
|
},
|
|
903
903
|
{
|
|
904
904
|
check: (e) => e.value?.length > e.maxLength,
|
|
905
905
|
validity: 'tooLong',
|
|
906
|
-
message: e => e.
|
|
906
|
+
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
907
907
|
}
|
|
908
908
|
],
|
|
909
909
|
pattern: [
|
|
910
910
|
{
|
|
911
911
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
912
912
|
validity: 'patternMismatch',
|
|
913
|
-
message: e => e.
|
|
913
|
+
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
914
914
|
}
|
|
915
915
|
]
|
|
916
916
|
},
|
|
@@ -1105,10 +1105,10 @@ class AuroFormValidation {
|
|
|
1105
1105
|
if (!hasValue && elem.required && elem.touched) {
|
|
1106
1106
|
elem.validity = 'valueMissing';
|
|
1107
1107
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
1108
|
-
} else if (
|
|
1108
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
1109
1109
|
this.validateType(elem);
|
|
1110
1110
|
this.validateElementAttributes(elem);
|
|
1111
|
-
} else if (
|
|
1111
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
1112
1112
|
this.validateElementAttributes(elem);
|
|
1113
1113
|
}
|
|
1114
1114
|
}
|
|
@@ -1241,7 +1241,7 @@ class AuroDependencyVersioning {
|
|
|
1241
1241
|
|
|
1242
1242
|
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)}`;
|
|
1243
1243
|
|
|
1244
|
-
var styleCss = i$5
|
|
1244
|
+
var styleCss = i$5`.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}`;
|
|
1245
1245
|
|
|
1246
1246
|
var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
1247
1247
|
|
|
@@ -1878,11 +1878,11 @@ class AuroRadioGroup extends i$2 {
|
|
|
1878
1878
|
|
|
1879
1879
|
${!this.validity || this.validity === undefined || this.validity === 'valid'
|
|
1880
1880
|
? u`
|
|
1881
|
-
<${this.helpTextTag} ?onDark="${this.onDark}" part="helpText">
|
|
1881
|
+
<${this.helpTextTag} large ?onDark="${this.onDark}" part="helpText">
|
|
1882
1882
|
<slot name="helpText"></slot>
|
|
1883
1883
|
</${this.helpTextTag}>`
|
|
1884
1884
|
: u`
|
|
1885
|
-
<${this.helpTextTag} ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
|
|
1885
|
+
<${this.helpTextTag} large ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
|
|
1886
1886
|
${this.errorMessage}
|
|
1887
1887
|
</${this.helpTextTag}>`
|
|
1888
1888
|
}
|
|
@@ -16,24 +16,17 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet"
|
|
26
|
-
|
|
27
|
-
<!-- Design Token Alaska Theme -->
|
|
28
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
-
|
|
30
|
-
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
-
|
|
33
|
-
<!-- Demo Specific Styles -->
|
|
19
|
+
<title>Auro Web Component Generator | auro-radio custom element</title>
|
|
20
|
+
<link
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
type="text/css"
|
|
23
|
+
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
|
|
24
|
+
/>
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
|
|
26
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
|
|
34
27
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
28
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
-
</head>
|
|
29
|
+
</head>
|
|
37
30
|
<body class="auro-markdown">
|
|
38
31
|
<main></main>
|
|
39
32
|
|
|
@@ -69,8 +69,8 @@ export class AuroRadio extends LitElement {
|
|
|
69
69
|
attribute: boolean;
|
|
70
70
|
};
|
|
71
71
|
/**
|
|
72
|
-
* Do not add to api doc since changing of this can easily break a11y.
|
|
73
72
|
* @private
|
|
73
|
+
* not to add to api.md since changing of this can easily break a11y.
|
|
74
74
|
*/
|
|
75
75
|
role: {
|
|
76
76
|
type: StringConstructor;
|
|
@@ -181,8 +181,8 @@ class AuroRadio extends LitElement {
|
|
|
181
181
|
},
|
|
182
182
|
|
|
183
183
|
/**
|
|
184
|
-
* Do not add to api doc since changing of this can easily break a11y.
|
|
185
184
|
* @private
|
|
185
|
+
* not to add to api.md since changing of this can easily break a11y.
|
|
186
186
|
*/
|
|
187
187
|
role: {
|
|
188
188
|
type: String,
|
|
@@ -371,7 +371,7 @@ class AuroRadio extends LitElement {
|
|
|
371
371
|
}
|
|
372
372
|
}
|
|
373
373
|
|
|
374
|
-
var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}
|
|
374
|
+
var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}`;
|
|
375
375
|
|
|
376
376
|
var colorCss$1 = css`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
377
377
|
|
|
@@ -851,19 +851,19 @@ class AuroFormValidation {
|
|
|
851
851
|
{
|
|
852
852
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
853
853
|
validity: 'tooShort',
|
|
854
|
-
message: e => e.
|
|
854
|
+
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
855
855
|
},
|
|
856
856
|
{
|
|
857
857
|
check: (e) => e.value?.length > e.maxLength,
|
|
858
858
|
validity: 'tooLong',
|
|
859
|
-
message: e => e.
|
|
859
|
+
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
860
860
|
}
|
|
861
861
|
],
|
|
862
862
|
pattern: [
|
|
863
863
|
{
|
|
864
864
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
865
865
|
validity: 'patternMismatch',
|
|
866
|
-
message: e => e.
|
|
866
|
+
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
867
867
|
}
|
|
868
868
|
]
|
|
869
869
|
},
|
|
@@ -1058,10 +1058,10 @@ class AuroFormValidation {
|
|
|
1058
1058
|
if (!hasValue && elem.required && elem.touched) {
|
|
1059
1059
|
elem.validity = 'valueMissing';
|
|
1060
1060
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
1061
|
-
} else if (
|
|
1061
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
1062
1062
|
this.validateType(elem);
|
|
1063
1063
|
this.validateElementAttributes(elem);
|
|
1064
|
-
} else if (
|
|
1064
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
1065
1065
|
this.validateElementAttributes(elem);
|
|
1066
1066
|
}
|
|
1067
1067
|
}
|
|
@@ -1194,7 +1194,7 @@ class AuroDependencyVersioning {
|
|
|
1194
1194
|
|
|
1195
1195
|
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)}`;
|
|
1196
1196
|
|
|
1197
|
-
var styleCss = css
|
|
1197
|
+
var styleCss = css`.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}`;
|
|
1198
1198
|
|
|
1199
1199
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
1200
1200
|
|
|
@@ -1831,11 +1831,11 @@ class AuroRadioGroup extends LitElement {
|
|
|
1831
1831
|
|
|
1832
1832
|
${!this.validity || this.validity === undefined || this.validity === 'valid'
|
|
1833
1833
|
? html$1`
|
|
1834
|
-
<${this.helpTextTag} ?onDark="${this.onDark}" part="helpText">
|
|
1834
|
+
<${this.helpTextTag} large ?onDark="${this.onDark}" part="helpText">
|
|
1835
1835
|
<slot name="helpText"></slot>
|
|
1836
1836
|
</${this.helpTextTag}>`
|
|
1837
1837
|
: html$1`
|
|
1838
|
-
<${this.helpTextTag} ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
|
|
1838
|
+
<${this.helpTextTag} large ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
|
|
1839
1839
|
${this.errorMessage}
|
|
1840
1840
|
</${this.helpTextTag}>`
|
|
1841
1841
|
}
|
|
@@ -181,8 +181,8 @@ class AuroRadio extends LitElement {
|
|
|
181
181
|
},
|
|
182
182
|
|
|
183
183
|
/**
|
|
184
|
-
* Do not add to api doc since changing of this can easily break a11y.
|
|
185
184
|
* @private
|
|
185
|
+
* not to add to api.md since changing of this can easily break a11y.
|
|
186
186
|
*/
|
|
187
187
|
role: {
|
|
188
188
|
type: String,
|
|
@@ -371,7 +371,7 @@ class AuroRadio extends LitElement {
|
|
|
371
371
|
}
|
|
372
372
|
}
|
|
373
373
|
|
|
374
|
-
var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}
|
|
374
|
+
var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}`;
|
|
375
375
|
|
|
376
376
|
var colorCss$1 = css`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
377
377
|
|
|
@@ -851,19 +851,19 @@ class AuroFormValidation {
|
|
|
851
851
|
{
|
|
852
852
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
853
853
|
validity: 'tooShort',
|
|
854
|
-
message: e => e.
|
|
854
|
+
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
855
855
|
},
|
|
856
856
|
{
|
|
857
857
|
check: (e) => e.value?.length > e.maxLength,
|
|
858
858
|
validity: 'tooLong',
|
|
859
|
-
message: e => e.
|
|
859
|
+
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
860
860
|
}
|
|
861
861
|
],
|
|
862
862
|
pattern: [
|
|
863
863
|
{
|
|
864
864
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
865
865
|
validity: 'patternMismatch',
|
|
866
|
-
message: e => e.
|
|
866
|
+
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
867
867
|
}
|
|
868
868
|
]
|
|
869
869
|
},
|
|
@@ -1058,10 +1058,10 @@ class AuroFormValidation {
|
|
|
1058
1058
|
if (!hasValue && elem.required && elem.touched) {
|
|
1059
1059
|
elem.validity = 'valueMissing';
|
|
1060
1060
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
1061
|
-
} else if (
|
|
1061
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
1062
1062
|
this.validateType(elem);
|
|
1063
1063
|
this.validateElementAttributes(elem);
|
|
1064
|
-
} else if (
|
|
1064
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
1065
1065
|
this.validateElementAttributes(elem);
|
|
1066
1066
|
}
|
|
1067
1067
|
}
|
|
@@ -1194,7 +1194,7 @@ class AuroDependencyVersioning {
|
|
|
1194
1194
|
|
|
1195
1195
|
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)}`;
|
|
1196
1196
|
|
|
1197
|
-
var styleCss = css
|
|
1197
|
+
var styleCss = css`.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}`;
|
|
1198
1198
|
|
|
1199
1199
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
1200
1200
|
|
|
@@ -1831,11 +1831,11 @@ class AuroRadioGroup extends LitElement {
|
|
|
1831
1831
|
|
|
1832
1832
|
${!this.validity || this.validity === undefined || this.validity === 'valid'
|
|
1833
1833
|
? html$1`
|
|
1834
|
-
<${this.helpTextTag} ?onDark="${this.onDark}" part="helpText">
|
|
1834
|
+
<${this.helpTextTag} large ?onDark="${this.onDark}" part="helpText">
|
|
1835
1835
|
<slot name="helpText"></slot>
|
|
1836
1836
|
</${this.helpTextTag}>`
|
|
1837
1837
|
: html$1`
|
|
1838
|
-
<${this.helpTextTag} ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
|
|
1838
|
+
<${this.helpTextTag} large ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
|
|
1839
1839
|
${this.errorMessage}
|
|
1840
1840
|
</${this.helpTextTag}>`
|
|
1841
1841
|
}
|
|
@@ -16,24 +16,18 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet"
|
|
26
|
-
|
|
27
|
-
<!-- Design Token Alaska Theme -->
|
|
28
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
-
|
|
30
|
-
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
-
|
|
33
|
-
<!-- Demo Specific Styles -->
|
|
19
|
+
<title>Auro Web Component Generator | auro-select custom element</title>
|
|
20
|
+
<link
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
type="text/css"
|
|
23
|
+
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
|
|
24
|
+
/>
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
|
|
26
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
|
|
34
27
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
28
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
-
|
|
29
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
|
|
30
|
+
</head>
|
|
37
31
|
<body class="auro-markdown">
|
|
38
32
|
<main></main>
|
|
39
33
|
|