@aurodesignsystem-dev/auro-formkit 0.0.0-pr755.1 → 0.0.0-pr756.1
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 +98 -81
- package/components/combobox/demo/index.html +10 -16
- package/components/combobox/demo/index.min.js +98 -81
- package/components/combobox/demo/readme.html +9 -16
- package/components/combobox/dist/index.js +86 -44
- package/components/combobox/dist/registered.js +86 -44
- package/components/counter/demo/api.html +10 -16
- package/components/counter/demo/api.md +7 -13
- package/components/counter/demo/api.min.js +84 -36
- package/components/counter/demo/index.html +10 -16
- package/components/counter/demo/index.md +1 -1
- package/components/counter/demo/index.min.js +84 -36
- package/components/counter/demo/readme.html +9 -16
- package/components/counter/dist/auro-counter-group.d.ts +1 -1
- package/components/counter/dist/index.js +84 -36
- package/components/counter/dist/registered.js +84 -36
- package/components/datepicker/demo/api.html +10 -16
- package/components/datepicker/demo/api.min.js +92 -65
- package/components/datepicker/demo/index.html +10 -16
- package/components/datepicker/demo/index.min.js +92 -65
- package/components/datepicker/demo/readme.html +9 -16
- package/components/datepicker/dist/auro-datepicker.d.ts +0 -6
- package/components/datepicker/dist/index.js +92 -65
- package/components/datepicker/dist/registered.js +92 -65
- 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 +12 -12
- package/components/input/demo/index.html +10 -16
- package/components/input/demo/index.min.js +12 -12
- package/components/input/demo/readme.html +9 -16
- package/components/input/dist/base-input.d.ts +1 -1
- package/components/input/dist/index.js +12 -12
- package/components/input/dist/registered.js +12 -12
- package/components/menu/demo/api.html +32 -16
- package/components/menu/demo/api.md +1 -1
- package/components/menu/demo/api.min.js +12 -37
- package/components/menu/demo/index.html +10 -16
- package/components/menu/demo/index.min.js +12 -37
- package/components/menu/demo/readme.html +9 -16
- package/components/menu/dist/auro-menu.d.ts +2 -13
- package/components/menu/dist/index.js +12 -37
- package/components/menu/dist/registered.js +12 -37
- 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 +9 -15
- package/components/select/demo/api.min.js +194 -125
- package/components/select/demo/index.html +11 -16
- package/components/select/demo/index.md +1 -1
- package/components/select/demo/index.min.js +194 -125
- package/components/select/demo/readme.html +9 -16
- package/components/select/dist/auro-select.d.ts +4 -20
- package/components/select/dist/index.js +182 -88
- package/components/select/dist/registered.js +182 -88
- package/package.json +2 -2
|
@@ -2075,19 +2075,19 @@ class AuroFormValidation {
|
|
|
2075
2075
|
{
|
|
2076
2076
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
2077
2077
|
validity: 'tooShort',
|
|
2078
|
-
message: e => e.
|
|
2078
|
+
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
2079
2079
|
},
|
|
2080
2080
|
{
|
|
2081
2081
|
check: (e) => e.value?.length > e.maxLength,
|
|
2082
2082
|
validity: 'tooLong',
|
|
2083
|
-
message: e => e.
|
|
2083
|
+
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
2084
2084
|
}
|
|
2085
2085
|
],
|
|
2086
2086
|
pattern: [
|
|
2087
2087
|
{
|
|
2088
2088
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
2089
2089
|
validity: 'patternMismatch',
|
|
2090
|
-
message: e => e.
|
|
2090
|
+
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
2091
2091
|
}
|
|
2092
2092
|
]
|
|
2093
2093
|
},
|
|
@@ -2282,10 +2282,10 @@ class AuroFormValidation {
|
|
|
2282
2282
|
if (!hasValue && elem.required && elem.touched) {
|
|
2283
2283
|
elem.validity = 'valueMissing';
|
|
2284
2284
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
2285
|
-
} else if (
|
|
2285
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
2286
2286
|
this.validateType(elem);
|
|
2287
2287
|
this.validateElementAttributes(elem);
|
|
2288
|
-
} else if (
|
|
2288
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
2289
2289
|
this.validateElementAttributes(elem);
|
|
2290
2290
|
}
|
|
2291
2291
|
}
|
|
@@ -2409,7 +2409,7 @@ var styleCss$8 = css`.counter{display:flex;align-items:center;justify-content:sp
|
|
|
2409
2409
|
|
|
2410
2410
|
var colorCss$6 = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
2411
2411
|
|
|
2412
|
-
var styleCss$7 = css
|
|
2412
|
+
var styleCss$7 = 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}`;
|
|
2413
2413
|
|
|
2414
2414
|
var tokensCss$4 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
2415
2415
|
|
|
@@ -3011,7 +3011,7 @@ class AuroCounter extends LitElement {
|
|
|
3011
3011
|
}
|
|
3012
3012
|
}
|
|
3013
3013
|
|
|
3014
|
-
var counterGroupStyles = css`:host(:not([layout=classic])) .triggerContent{padding:0
|
|
3014
|
+
var counterGroupStyles = css`:host(:not([layout=classic])) .triggerContent{padding:0 8px 0 24px}:host([layout=snowflake]) [auro-dropdown] .mainContent{align-items:center}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}.mainContent{display:flex;width:100%;flex-direction:column;align-items:flex-start;justify-content:center}label{font-size:var(--ds-text-body-size-default, 1rem);line-height:20px}label.filled{font-size:var(--ds-text-body-size-xs, 0.75rem)}.accents ::slotted([slot=typeIcon]){margin-right:8px}.accents ::slotted(*):not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}slot[name=valueText]{font-size:var(--ds-text-body-size-default, 1rem);overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.counters{display:flex;flex-direction:column;gap:var(--ds-size-300, 1.5rem)}.counters ::slotted(auro-counter:not(:first-of-type)){padding-top:var(--ds-size-300, 1.5rem);border-top-width:1px;border-top-style:solid}`;
|
|
3015
3015
|
|
|
3016
3016
|
var shapeSizeCss$1 = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
|
|
3017
3017
|
|
|
@@ -6152,7 +6152,7 @@ var dropdownVersion$1 = '3.0.0';
|
|
|
6152
6152
|
|
|
6153
6153
|
var shapeSizeCss = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
|
|
6154
6154
|
|
|
6155
|
-
var colorCss$1$1 = css`:host(:not([
|
|
6155
|
+
var colorCss$1$1 = css`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
6156
6156
|
|
|
6157
6157
|
var classicColorCss = css``;
|
|
6158
6158
|
|
|
@@ -6164,7 +6164,7 @@ var styleSnowflakeCss = css`:host{display:block}.wrapper{display:flex;flex:1;fle
|
|
|
6164
6164
|
|
|
6165
6165
|
var colorCss$5 = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
6166
6166
|
|
|
6167
|
-
var styleCss$6 = css
|
|
6167
|
+
var styleCss$6 = 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}`;
|
|
6168
6168
|
|
|
6169
6169
|
var tokensCss$3 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
6170
6170
|
|
|
@@ -6469,8 +6469,10 @@ let AuroElement$3 = class AuroElement extends LitElement {
|
|
|
6469
6469
|
// See LICENSE in the project root for license information.
|
|
6470
6470
|
|
|
6471
6471
|
|
|
6472
|
-
|
|
6472
|
+
/**
|
|
6473
|
+
* @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
|
|
6473
6474
|
* @slot - Default slot for the popover content.
|
|
6475
|
+
* @slot label - Defines the content of the label.
|
|
6474
6476
|
* @slot helpText - Defines the content of the helpText.
|
|
6475
6477
|
* @slot trigger - Defines the content of the trigger.
|
|
6476
6478
|
* @csspart trigger - The trigger content container.
|
|
@@ -6489,22 +6491,18 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6489
6491
|
this.matchWidth = false;
|
|
6490
6492
|
this.noHideOnThisFocusLoss = false;
|
|
6491
6493
|
|
|
6492
|
-
this.errorMessage =
|
|
6494
|
+
this.errorMessage = ''; // TODO - check with Doug if there is still more to do here
|
|
6493
6495
|
|
|
6494
6496
|
// Layout Config
|
|
6495
|
-
this.layout =
|
|
6496
|
-
this.shape =
|
|
6497
|
-
this.size =
|
|
6497
|
+
this.layout = 'classic';
|
|
6498
|
+
this.shape = 'classic';
|
|
6499
|
+
this.size = 'xl';
|
|
6498
6500
|
|
|
6499
6501
|
this.parentBorder = false;
|
|
6500
6502
|
|
|
6501
6503
|
this.privateDefaults();
|
|
6502
6504
|
}
|
|
6503
6505
|
|
|
6504
|
-
/**
|
|
6505
|
-
* @private
|
|
6506
|
-
* @returns {object} Class definition for the wrapper element.
|
|
6507
|
-
*/
|
|
6508
6506
|
get commonWrapperClasses() {
|
|
6509
6507
|
return {
|
|
6510
6508
|
'trigger': true,
|
|
@@ -6524,8 +6522,12 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6524
6522
|
this.disabled = false;
|
|
6525
6523
|
this.disableFocusTrap = false;
|
|
6526
6524
|
this.error = false;
|
|
6525
|
+
this.inset = false;
|
|
6526
|
+
this.rounded = false;
|
|
6527
6527
|
this.tabIndex = 0;
|
|
6528
6528
|
this.noToggle = false;
|
|
6529
|
+
this.a11yAutocomplete = 'none';
|
|
6530
|
+
this.labeled = true;
|
|
6529
6531
|
this.a11yRole = 'button';
|
|
6530
6532
|
this.onDark = false;
|
|
6531
6533
|
this.showTriggerBorders = true;
|
|
@@ -6647,27 +6649,26 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6647
6649
|
},
|
|
6648
6650
|
|
|
6649
6651
|
/**
|
|
6650
|
-
* If declared,
|
|
6651
|
-
* @default false
|
|
6652
|
+
* If declared, applies a border around the trigger slot.
|
|
6652
6653
|
*/
|
|
6653
|
-
|
|
6654
|
+
simple: {
|
|
6654
6655
|
type: Boolean,
|
|
6655
6656
|
reflect: true
|
|
6656
6657
|
},
|
|
6657
6658
|
|
|
6658
6659
|
/**
|
|
6659
|
-
* If declared,
|
|
6660
|
+
* If declared, the dropdown displays a chevron on the right.
|
|
6661
|
+
* @attr {Boolean} chevron
|
|
6660
6662
|
*/
|
|
6661
|
-
|
|
6663
|
+
chevron: {
|
|
6662
6664
|
type: Boolean,
|
|
6663
6665
|
reflect: true
|
|
6664
6666
|
},
|
|
6665
6667
|
|
|
6666
6668
|
/**
|
|
6667
|
-
* If declared, the dropdown
|
|
6668
|
-
* @attr {Boolean} chevron
|
|
6669
|
+
* If declared, the dropdown will be styled with the common theme.
|
|
6669
6670
|
*/
|
|
6670
|
-
|
|
6671
|
+
common: {
|
|
6671
6672
|
type: Boolean,
|
|
6672
6673
|
reflect: true
|
|
6673
6674
|
},
|
|
@@ -6681,7 +6682,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6681
6682
|
},
|
|
6682
6683
|
|
|
6683
6684
|
/**
|
|
6684
|
-
* If
|
|
6685
|
+
* If declare, the focus trap inside of bib will be turned off.
|
|
6685
6686
|
*/
|
|
6686
6687
|
disableFocusTrap: {
|
|
6687
6688
|
type: Boolean,
|
|
@@ -6728,6 +6729,22 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6728
6729
|
reflect: true
|
|
6729
6730
|
},
|
|
6730
6731
|
|
|
6732
|
+
/**
|
|
6733
|
+
* Makes the trigger to be full width of its parent container.
|
|
6734
|
+
*/
|
|
6735
|
+
fluid: {
|
|
6736
|
+
type: Boolean,
|
|
6737
|
+
reflect: true
|
|
6738
|
+
},
|
|
6739
|
+
|
|
6740
|
+
/**
|
|
6741
|
+
* If declared, will apply padding around trigger slot content.
|
|
6742
|
+
*/
|
|
6743
|
+
inset: {
|
|
6744
|
+
type: Boolean,
|
|
6745
|
+
reflect: true
|
|
6746
|
+
},
|
|
6747
|
+
|
|
6731
6748
|
/**
|
|
6732
6749
|
* If true, the dropdown bib is displayed.
|
|
6733
6750
|
*/
|
|
@@ -6771,6 +6788,15 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6771
6788
|
reflect: true
|
|
6772
6789
|
},
|
|
6773
6790
|
|
|
6791
|
+
/**
|
|
6792
|
+
* Defines if there is a label preset.
|
|
6793
|
+
* @private
|
|
6794
|
+
*/
|
|
6795
|
+
labeled: {
|
|
6796
|
+
type: Boolean,
|
|
6797
|
+
reflect: true
|
|
6798
|
+
},
|
|
6799
|
+
|
|
6774
6800
|
/**
|
|
6775
6801
|
* Defines if the trigger should size based on the parent element providing the border UI.
|
|
6776
6802
|
* @private
|
|
@@ -6831,9 +6857,6 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6831
6857
|
reflect: true
|
|
6832
6858
|
},
|
|
6833
6859
|
|
|
6834
|
-
/**
|
|
6835
|
-
* If declared, and a function is set, that function will execute when the slot content is updated.
|
|
6836
|
-
*/
|
|
6837
6860
|
onSlotChange: {
|
|
6838
6861
|
type: Function,
|
|
6839
6862
|
reflect: false
|
|
@@ -6848,6 +6871,14 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6848
6871
|
reflect: true
|
|
6849
6872
|
},
|
|
6850
6873
|
|
|
6874
|
+
/**
|
|
6875
|
+
* If declared, will apply border-radius to trigger and default slots.
|
|
6876
|
+
*/
|
|
6877
|
+
rounded: {
|
|
6878
|
+
type: Boolean,
|
|
6879
|
+
reflect: true
|
|
6880
|
+
},
|
|
6881
|
+
|
|
6851
6882
|
/**
|
|
6852
6883
|
* @private
|
|
6853
6884
|
*/
|
|
@@ -6862,14 +6893,22 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6862
6893
|
type: String || undefined,
|
|
6863
6894
|
attribute: false,
|
|
6864
6895
|
reflect: false
|
|
6896
|
+
},
|
|
6897
|
+
|
|
6898
|
+
/**
|
|
6899
|
+
* The value for the aria-autocomplete attribute of the trigger element.
|
|
6900
|
+
*/
|
|
6901
|
+
a11yAutocomplete: {
|
|
6902
|
+
type: String,
|
|
6903
|
+
attribute: false,
|
|
6865
6904
|
}
|
|
6866
6905
|
};
|
|
6867
6906
|
}
|
|
6868
6907
|
|
|
6869
6908
|
static get styles() {
|
|
6870
6909
|
return [
|
|
6871
|
-
tokensCss$1$1,
|
|
6872
6910
|
colorCss$1$1,
|
|
6911
|
+
tokensCss$1$1,
|
|
6873
6912
|
|
|
6874
6913
|
// default layout
|
|
6875
6914
|
classicColorCss,
|
|
@@ -7309,7 +7348,10 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
7309
7348
|
id="bib"
|
|
7310
7349
|
shape="${this.shape}"
|
|
7311
7350
|
?data-show="${this.isPopoverVisible}"
|
|
7312
|
-
?isfullscreen="${this.isBibFullscreen}"
|
|
7351
|
+
?isfullscreen="${this.isBibFullscreen}"
|
|
7352
|
+
?common="${this.common}"
|
|
7353
|
+
?rounded="${this.common || this.rounded}"
|
|
7354
|
+
?inset="${this.common || this.inset}">
|
|
7313
7355
|
<div class="slotContent">
|
|
7314
7356
|
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
7315
7357
|
</div>
|
|
@@ -9290,7 +9332,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
9290
9332
|
<div id="bibTemplate" part="bibtemplate">
|
|
9291
9333
|
${this.isFullscreen ? html$1`
|
|
9292
9334
|
<div id="headerContainer">
|
|
9293
|
-
<${this.buttonTag} id="closeButton"
|
|
9335
|
+
<${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
|
|
9294
9336
|
<${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
|
|
9295
9337
|
</${this.buttonTag}>
|
|
9296
9338
|
<${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
|
|
@@ -9699,7 +9741,7 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9699
9741
|
* "top" | "right" | "bottom" | "left" |
|
|
9700
9742
|
* "bottom-start" | "top-start" | "top-end" |
|
|
9701
9743
|
* "right-start" | "right-end" | "bottom-end" |
|
|
9702
|
-
* "left-start" | "left-end"
|
|
9744
|
+
* "left-start" | "left-end"
|
|
9703
9745
|
* @default bottom-start
|
|
9704
9746
|
*/
|
|
9705
9747
|
placement: {
|
|
@@ -9787,7 +9829,13 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9787
9829
|
if (!messages || messages.length === 0) return html$1``;
|
|
9788
9830
|
|
|
9789
9831
|
// Return messages as a TemplateResult
|
|
9790
|
-
return messages.map(message => html$1
|
|
9832
|
+
return messages.map((message, index) => html$1`
|
|
9833
|
+
${message}
|
|
9834
|
+
${index < messages.length - 1
|
|
9835
|
+
? html$1`<br>`
|
|
9836
|
+
: ''
|
|
9837
|
+
}
|
|
9838
|
+
`);
|
|
9791
9839
|
}
|
|
9792
9840
|
|
|
9793
9841
|
/**
|
|
@@ -10090,7 +10138,7 @@ class AuroCounterGroup extends AuroElement {
|
|
|
10090
10138
|
return html$1`
|
|
10091
10139
|
<${this.dropdownTag}
|
|
10092
10140
|
noHideOnThisFocusLoss
|
|
10093
|
-
chevron
|
|
10141
|
+
chevron common fluid
|
|
10094
10142
|
part="dropdown"
|
|
10095
10143
|
?autoPlacement="${this.autoPlacement}"
|
|
10096
10144
|
?error="${this.validity !== undefined && this.validity !== 'valid'}"
|
|
@@ -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-datepicker 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
|
|