@department-of-veterans-affairs/component-library 52.1.1 → 52.1.2-rc2
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/dist/12.app.bundle.js +1 -1
- package/dist/2261.app.bundle.js +1 -0
- package/dist/272.app.bundle.js +1 -1
- package/dist/3305.app.bundle.js +1 -1
- package/dist/4475.app.bundle.js +1 -1
- package/dist/4534.app.bundle.js +1 -0
- package/dist/4775.app.bundle.js +2 -0
- package/dist/4775.app.bundle.js.LICENSE.txt +5 -0
- package/dist/4780.app.bundle.js +1 -1
- package/dist/5663.app.bundle.js +1 -1
- package/dist/5760.app.bundle.js +1 -0
- package/dist/6696.app.bundle.js +1 -1
- package/dist/7166.app.bundle.js +1 -1
- package/dist/7508.app.bundle.js +1 -0
- package/dist/7747.app.bundle.js +1 -0
- package/dist/8039.app.bundle.js +1 -0
- package/dist/8255.app.bundle.js +1 -1
- package/dist/9474.app.bundle.js +2 -0
- package/dist/9474.app.bundle.js.LICENSE.txt +5 -0
- package/dist/app.bundle.js +1 -1
- package/dist/components/date-utils.js +1 -1
- package/dist/components/types/components.d.ts +32 -0
- package/dist/components/va-button-segmented.js +1 -1
- package/dist/components/va-date.js +1 -1
- package/dist/components/va-input-telephone.d.ts +11 -0
- package/dist/components/va-input-telephone.js +1 -0
- package/dist/components/va-memorable-date.js +1 -1
- package/dist/components/va-on-this-page.js +1 -1
- package/dist/components/va-select2.js +1 -1
- package/dist/components/va-telephone-input.js +1 -1
- package/dist/components/va-text-input2.js +1 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
import{i as instance}from"./i18next.js";import{Build}from"@stencil/core/internal/client";Build.isTesting&&instance.init({lng:"cimode"});const maxYear=(new Date).getFullYear()+100,minYear=1900,maxMonths=12,minMonths=1,minDays=1,months=[{label:"January",value:1},{label:"February",value:2},{label:"March",value:3},{label:"April",value:4},{label:"May",value:5},{label:"June",value:6},{label:"July",value:7},{label:"August",value:8},{label:"September",value:9},{label:"October",value:10},{label:"November",value:11},{label:"December",value:12}],twentyNineDays=["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29"],thirtyDays=["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30"],thirtyOneDays=["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"],days={1:thirtyOneDays,2:twentyNineDays,3:thirtyOneDays,4:thirtyDays,5:thirtyOneDays,6:thirtyDays,7:thirtyOneDays,8:thirtyOneDays,9:thirtyDays,10:thirtyOneDays,11:thirtyDays,12:thirtyOneDays},internalErrors=["year-range","day-range","month-range","date-error","month-select"];function getMonthErrorKey(e){return e?"month-select":"month-range"}function validate({component:e,year:r,month:a,day:t,monthYearOnly:n,yearTouched:i,monthTouched:o,dayTouched:l,monthSelect:s,monthOptional:d}){const y=daysForSelectedMonth(r,a);e.invalidYear=!1,e.invalidMonth=!1,e.invalidDay=!1;const
|
|
1
|
+
import{i as instance}from"./i18next.js";import{Build}from"@stencil/core/internal/client";Build.isTesting&&instance.init({lng:"cimode"});const maxYear=(new Date).getFullYear()+100,minYear=1900,maxMonths=12,minMonths=1,minDays=1,months=[{label:"January",value:1},{label:"February",value:2},{label:"March",value:3},{label:"April",value:4},{label:"May",value:5},{label:"June",value:6},{label:"July",value:7},{label:"August",value:8},{label:"September",value:9},{label:"October",value:10},{label:"November",value:11},{label:"December",value:12}],twentyNineDays=["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29"],thirtyDays=["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30"],thirtyOneDays=["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"],days={1:thirtyOneDays,2:twentyNineDays,3:thirtyOneDays,4:thirtyDays,5:thirtyOneDays,6:thirtyDays,7:thirtyOneDays,8:thirtyOneDays,9:thirtyDays,10:thirtyOneDays,11:thirtyDays,12:thirtyOneDays},internalErrors=["year-range","day-range","month-range","date-error","month-select"];function getMonthErrorKey(e){return e?"month-select":"month-range"}function validate({component:e,year:r,month:a,day:t,monthYearOnly:n,yearTouched:i,monthTouched:o,dayTouched:l,monthSelect:s,monthOptional:d}){if(!r&&!a&&!t)return;const y=daysForSelectedMonth(r,a);e.invalidYear=!1,e.invalidMonth=!1,e.invalidDay=!1;const v=!(n&&d);if(v&&isNaN(a)&&o)return e.invalidMonth=!0,void(e.error=getMonthErrorKey(s));if(!n&&isNaN(t)&&l)return e.invalidDay=!0,void(e.error="day-range");if(isNaN(r)&&i)return e.invalidYear=!0,void(e.error="year-range");if(e.required&&(!r||v&&!a||!n&&!t)){if(v&&o&&!a)return e.invalidMonth=!0,void(e.error="date-error");if(l&&!t&&!n)return e.invalidDay=!0,void(e.error="date-error");if(i&&!r)return e.invalidYear=!0,void(e.error="date-error")}return v&&!a&&o?(e.invalidMonth=!0,void(e.error=getMonthErrorKey(s))):t||n||!l?!r&&i?(e.invalidYear=!0,void(e.error="year-range")):v&&a&&(a<1||a>12)&&o?(e.invalidMonth=!0,void(e.error=getMonthErrorKey(s))):t&&!n&&(t<1||t>y)&&l?(e.invalidDay=!0,void(e.error="day-range")):r&&(r<1900||r>maxYear)&&i?(e.invalidYear=!0,void(e.error="year-range")):!a||!o||l||i?a&&o&&t&&l&&!i?(e.invalidYear=!0,void(e.error="date-error")):void(e.invalidYear||e.invalidMonth||e.invalidDay||e.error&&!internalErrors.includes(e.error)||(e.error=null)):void(n?(e.invalidYear=!0,e.error="date-error"):(e.invalidDay=!0,e.error="date-error")):(e.invalidDay=!0,void(e.error="day-range"))}function getErrorParameters(e,r,a){const t=daysForSelectedMonth(r,a);switch(e){case"month-range":case"month-select":return{start:1,end:12};case"day-range":return{start:1,end:t};case"year-range":return{start:1900,end:maxYear};default:return null}}const daysForSelectedMonth=(e,r)=>{var a;return e&&r?new Date(e,r,0).getDate():(null===(a=days[r])||void 0===a?void 0:a.length)||31},formatDate=(e,r={dateStyle:"full",timeStyle:"short"},a="America/New_York")=>{if(e&&e instanceof Date)return e.toLocaleString("en-US",Object.assign(Object.assign({},r),{timeZone:a}))},isDateAfter=(e,r)=>{if(e&&e instanceof Date&&r&&r instanceof Date)return e.getTime()>r.getTime()},isDateBefore=(e,r)=>{if(e&&e instanceof Date&&r&&r instanceof Date)return e.getTime()<r.getTime()},isDateSameDay=(e,r)=>{if(e&&e instanceof Date&&r&&r instanceof Date)return e.getFullYear()===r.getFullYear()&&e.getMonth()===r.getMonth()&&e.getDay()===r.getDay()},zeroPadStart=e=>`00${(e||"").toString()}`.slice(-2);export{isDateBefore as a,isDateAfter as b,daysForSelectedMonth as d,formatDate as f,getErrorParameters as g,isDateSameDay as i,months as m,validate as v,zeroPadStart as z};
|
|
@@ -1125,6 +1125,10 @@ export namespace Components {
|
|
|
1125
1125
|
* Used to create unique name attributes for each input.
|
|
1126
1126
|
*/
|
|
1127
1127
|
"name": string;
|
|
1128
|
+
/**
|
|
1129
|
+
* Removes the default date hint text
|
|
1130
|
+
*/
|
|
1131
|
+
"removeDateHint"?: boolean;
|
|
1128
1132
|
/**
|
|
1129
1133
|
* Render marker indicating field is required.
|
|
1130
1134
|
*/
|
|
@@ -1321,6 +1325,10 @@ export namespace Components {
|
|
|
1321
1325
|
* If true, analytics event will not be fired
|
|
1322
1326
|
*/
|
|
1323
1327
|
"disableAnalytics"?: boolean;
|
|
1328
|
+
/**
|
|
1329
|
+
* Header level. Must be between 1 and 6
|
|
1330
|
+
*/
|
|
1331
|
+
"headerLevel"?: number;
|
|
1324
1332
|
}
|
|
1325
1333
|
/**
|
|
1326
1334
|
* @componentName Pagination
|
|
@@ -1695,6 +1703,10 @@ export namespace Components {
|
|
|
1695
1703
|
* Whether an error message should be shown - set to false when this component is used inside va-date or va-memorable-date in which the error for the va-select will be rendered outside of va-select
|
|
1696
1704
|
*/
|
|
1697
1705
|
"showError"?: boolean;
|
|
1706
|
+
/**
|
|
1707
|
+
* Whether or not to show the (*Required) text.
|
|
1708
|
+
*/
|
|
1709
|
+
"showRequiredText"?: boolean;
|
|
1698
1710
|
/**
|
|
1699
1711
|
* Enabling this will add a heading and description for integrating into the forms pattern. Accepts `single` or `multiple` to indicate if the form is a single input or will have multiple inputs
|
|
1700
1712
|
*/
|
|
@@ -2182,6 +2194,10 @@ export namespace Components {
|
|
|
2182
2194
|
* When `false`, hides the error message from view, but not from the screen reader. Should only be used if error is being displayed elsewhere. Must use kebab-case on this attribute for it to work properly.
|
|
2183
2195
|
*/
|
|
2184
2196
|
"showInputError"?: boolean;
|
|
2197
|
+
/**
|
|
2198
|
+
* Whether or not to show the (*Required) text.
|
|
2199
|
+
*/
|
|
2200
|
+
"showRequiredText"?: boolean;
|
|
2185
2201
|
/**
|
|
2186
2202
|
* The step attribute is a number, or the string 'any', that specifies the granularity of the value. For example: `<va-text-input type="number" step=".1"/>` enables float/decimal values to be valid and increment by one-tenth. <br/> Defaults to 1 for every field type except for time and datetime-local which default to 60 (seconds). View more documentation on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)
|
|
2187
2203
|
*/
|
|
@@ -5084,6 +5100,10 @@ declare namespace LocalJSX {
|
|
|
5084
5100
|
* Fires when the date input loses focus after its value was changed
|
|
5085
5101
|
*/
|
|
5086
5102
|
"onDateChange"?: (event: VaMemorableDateCustomEvent<any>) => void;
|
|
5103
|
+
/**
|
|
5104
|
+
* Removes the default date hint text
|
|
5105
|
+
*/
|
|
5106
|
+
"removeDateHint"?: boolean;
|
|
5087
5107
|
/**
|
|
5088
5108
|
* Render marker indicating field is required.
|
|
5089
5109
|
*/
|
|
@@ -5308,6 +5328,10 @@ declare namespace LocalJSX {
|
|
|
5308
5328
|
* If true, analytics event will not be fired
|
|
5309
5329
|
*/
|
|
5310
5330
|
"disableAnalytics"?: boolean;
|
|
5331
|
+
/**
|
|
5332
|
+
* Header level. Must be between 1 and 6
|
|
5333
|
+
*/
|
|
5334
|
+
"headerLevel"?: number;
|
|
5311
5335
|
/**
|
|
5312
5336
|
* The event used to track usage of the component. This is emitted when the user clicks on a link and enableAnalytics is true.
|
|
5313
5337
|
*/
|
|
@@ -5762,6 +5786,10 @@ declare namespace LocalJSX {
|
|
|
5762
5786
|
* Whether an error message should be shown - set to false when this component is used inside va-date or va-memorable-date in which the error for the va-select will be rendered outside of va-select
|
|
5763
5787
|
*/
|
|
5764
5788
|
"showError"?: boolean;
|
|
5789
|
+
/**
|
|
5790
|
+
* Whether or not to show the (*Required) text.
|
|
5791
|
+
*/
|
|
5792
|
+
"showRequiredText"?: boolean;
|
|
5765
5793
|
/**
|
|
5766
5794
|
* Enabling this will add a heading and description for integrating into the forms pattern. Accepts `single` or `multiple` to indicate if the form is a single input or will have multiple inputs
|
|
5767
5795
|
*/
|
|
@@ -6293,6 +6321,10 @@ declare namespace LocalJSX {
|
|
|
6293
6321
|
* When `false`, hides the error message from view, but not from the screen reader. Should only be used if error is being displayed elsewhere. Must use kebab-case on this attribute for it to work properly.
|
|
6294
6322
|
*/
|
|
6295
6323
|
"showInputError"?: boolean;
|
|
6324
|
+
/**
|
|
6325
|
+
* Whether or not to show the (*Required) text.
|
|
6326
|
+
*/
|
|
6327
|
+
"showRequiredText"?: boolean;
|
|
6296
6328
|
/**
|
|
6297
6329
|
* The step attribute is a number, or the string 'any', that specifies the granularity of the value. For example: `<va-text-input type="number" step=".1"/>` enables float/decimal values to be valid and increment by one-tenth. <br/> Defaults to 1 for every field type except for time and datetime-local which default to 60 (seconds). View more documentation on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)
|
|
6298
6330
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement,HTMLElement,createEvent,h,Host}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";const vaButtonSegmentedCss='button:not([disabled]):focus,select:not([disabled]):focus,a:not([disabled]):focus,h1:focus,input:not([disabled]):focus,textarea:not([disabled]):focus,#form-question [role=\'option\']:focus,*[tabindex]:focus{outline:2px solid var(--vads-color-action-focus-on-light)}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-button{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:0.9;color:white;background-color:#005ea2;-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-flex-align:center;align-items:center;border:0;border-radius:0.25rem;cursor:pointer;-webkit-column-gap:0.5rem;-moz-column-gap:0.5rem;column-gap:0.5rem;display:-ms-inline-flexbox;display:inline-flex;font-weight:700;-ms-flex-pack:center;justify-content:center;margin-right:0.5rem;padding:0.75rem 1.25rem;text-align:center;text-decoration:none;width:100%}@media all and (min-width: 30em){.usa-button{width:auto}}.usa-button:visited{color:white}.usa-button:hover,.usa-button.usa-button--hover{color:white;background-color:#1a4480;border-bottom:0;text-decoration:none}.usa-button:active,.usa-button.usa-button--active{color:white;background-color:#162e51}.usa-button:not([disabled]):focus,.usa-button:not([disabled]).usa-focus{outline-offset:0.25rem}.usa-button:disabled,.usa-button[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-button:disabled:hover,.usa-button:disabled:active,.usa-button:disabled:focus,.usa-button:disabled.usa-focus,.usa-button[aria-disabled=true]:hover,.usa-button[aria-disabled=true]:active,.usa-button[aria-disabled=true]:focus,.usa-button[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-button:disabled,.usa-button[aria-disabled=true]{border:0;color:GrayText}.usa-button:disabled:hover,.usa-button:disabled:active,.usa-button:disabled:focus,.usa-button:disabled.usa-focus,.usa-button[aria-disabled=true]:hover,.usa-button[aria-disabled=true]:active,.usa-button[aria-disabled=true]:focus,.usa-button[aria-disabled=true].usa-focus{color:GrayText}}.usa-button:disabled.usa-button--hover,.usa-button:disabled.usa-button--active,.usa-button[aria-disabled=true].usa-button--hover,.usa-button[aria-disabled=true].usa-button--active{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-button:disabled.usa-button--hover:hover,.usa-button:disabled.usa-button--hover:active,.usa-button:disabled.usa-button--hover:focus,.usa-button:disabled.usa-button--hover.usa-focus,.usa-button:disabled.usa-button--active:hover,.usa-button:disabled.usa-button--active:active,.usa-button:disabled.usa-button--active:focus,.usa-button:disabled.usa-button--active.usa-focus,.usa-button[aria-disabled=true].usa-button--hover:hover,.usa-button[aria-disabled=true].usa-button--hover:active,.usa-button[aria-disabled=true].usa-button--hover:focus,.usa-button[aria-disabled=true].usa-button--hover.usa-focus,.usa-button[aria-disabled=true].usa-button--active:hover,.usa-button[aria-disabled=true].usa-button--active:active,.usa-button[aria-disabled=true].usa-button--active:focus,.usa-button[aria-disabled=true].usa-button--active.usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-button:disabled.usa-button--hover,.usa-button:disabled.usa-button--active,.usa-button[aria-disabled=true].usa-button--hover,.usa-button[aria-disabled=true].usa-button--active{border:0;color:GrayText}.usa-button:disabled.usa-button--hover:hover,.usa-button:disabled.usa-button--hover:active,.usa-button:disabled.usa-button--hover:focus,.usa-button:disabled.usa-button--hover.usa-focus,.usa-button:disabled.usa-button--active:hover,.usa-button:disabled.usa-button--active:active,.usa-button:disabled.usa-button--active:focus,.usa-button:disabled.usa-button--active.usa-focus,.usa-button[aria-disabled=true].usa-button--hover:hover,.usa-button[aria-disabled=true].usa-button--hover:active,.usa-button[aria-disabled=true].usa-button--hover:focus,.usa-button[aria-disabled=true].usa-button--hover.usa-focus,.usa-button[aria-disabled=true].usa-button--active:hover,.usa-button[aria-disabled=true].usa-button--active:active,.usa-button[aria-disabled=true].usa-button--active:focus,.usa-button[aria-disabled=true].usa-button--active.usa-focus{color:GrayText}}@media (forced-colors: active){.usa-button:disabled:not(.usa-button--unstyled),.usa-button[aria-disabled=true]:not(.usa-button--unstyled){border:2px solid GrayText}}.usa-button .usa-icon{-ms-flex-negative:0;flex-shrink:0}@media (forced-colors: active){.usa-button:not(.usa-button--unstyled){border:2px solid transparent}}.usa-button--accent-cool{color:#1b1b1b;background-color:#00bde3}.usa-button--accent-cool:visited{color:#1b1b1b;background-color:#00bde3}.usa-button--accent-cool:hover,.usa-button--accent-cool.usa-button--hover{color:#1b1b1b;background-color:#28a0cb}.usa-button--accent-cool:active,.usa-button--accent-cool.usa-button--active{color:white;background-color:#07648d}.usa-button--accent-warm{color:#1b1b1b;background-color:#fa9441}.usa-button--accent-warm:visited{color:#1b1b1b;background-color:#fa9441}.usa-button--accent-warm:hover,.usa-button--accent-warm.usa-button--hover{color:white;background-color:#c05600}.usa-button--accent-warm:active,.usa-button--accent-warm.usa-button--active{color:white;background-color:#775540}.usa-button--outline{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px #005ea2;box-shadow:inset 0 0 0 2px #005ea2;color:#005ea2}.usa-button--outline:visited{color:#005ea2}.usa-button--outline:hover,.usa-button--outline.usa-button--hover{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px #1a4480;box-shadow:inset 0 0 0 2px #1a4480;color:#1a4480}.usa-button--outline:active,.usa-button--outline.usa-button--active{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px #162e51;box-shadow:inset 0 0 0 2px #162e51;color:#162e51}.usa-button--outline.usa-button--inverse{-webkit-box-shadow:inset 0 0 0 2px #dfe1e2;box-shadow:inset 0 0 0 2px #dfe1e2;color:#dfe1e2}.usa-button--outline.usa-button--inverse:visited{color:#dfe1e2}.usa-button--outline.usa-button--inverse:hover,.usa-button--outline.usa-button--inverse.usa-button--hover{-webkit-box-shadow:inset 0 0 0 2px #f0f0f0;box-shadow:inset 0 0 0 2px #f0f0f0;color:#f0f0f0}.usa-button--outline.usa-button--inverse:active,.usa-button--outline.usa-button--inverse.usa-button--active{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px white;box-shadow:inset 0 0 0 2px white;color:white}.usa-button--outline.usa-button--inverse.usa-button--unstyled{color:#005ea2;text-decoration:underline;background-color:transparent;border:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none;font-weight:normal;-ms-flex-pack:normal;justify-content:normal;text-align:left;margin:0;padding:0;width:auto;color:#dfe1e2}.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited{color:#54278f}.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover{color:#1a4480}.usa-button--outline.usa-button--inverse.usa-button--unstyled:active{color:#162e51}.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus{outline:0.25rem solid #2491ff;outline-offset:0rem}.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true].usa-button--hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true].usa-button--active,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true].usa-focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true],.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;text-decoration:underline}.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover{color:#1a4480}.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active{color:#162e51}.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true],.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:focus{color:#757575}@media (forced-colors: active){.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true],.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:focus{color:GrayText}}.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited{color:#dfe1e2}.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover{color:#f0f0f0}.usa-button--outline.usa-button--inverse.usa-button--unstyled:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active{color:white}.usa-button--base{color:white;background-color:#71767a}.usa-button--base:hover,.usa-button--base.usa-button--hover{color:white;background-color:#565c65}.usa-button--base:active,.usa-button--base.usa-button--active{color:white;background-color:#3d4551}.usa-button--secondary{color:white;background-color:#d83933}.usa-button--secondary:hover,.usa-button--secondary.usa-button--hover{color:white;background-color:#b50909}.usa-button--secondary:active,.usa-button--secondary.usa-button--active{color:white;background-color:#8b0a03}.usa-button--big{border-radius:0.25rem;font-size:1.46rem;padding:1rem 1.5rem}.usa-button--outline:disabled,.usa-button--outline:disabled:hover,.usa-button--outline:disabled:active,.usa-button--outline:disabled:focus,.usa-button--outline[aria-disabled=true],.usa-button--outline[aria-disabled=true]:hover,.usa-button--outline[aria-disabled=true]:active,.usa-button--outline[aria-disabled=true]:focus,.usa-button--outline-inverse:disabled,.usa-button--outline-inverse:disabled:hover,.usa-button--outline-inverse:disabled:active,.usa-button--outline-inverse:disabled:focus,.usa-button--outline-inverse[aria-disabled=true],.usa-button--outline-inverse[aria-disabled=true]:hover,.usa-button--outline-inverse[aria-disabled=true]:active,.usa-button--outline-inverse[aria-disabled=true]:focus{background-color:transparent;color:#757575}.usa-button--outline:disabled,.usa-button--outline[aria-disabled=true]{-webkit-box-shadow:inset 0 0 0 2px #c9c9c9;box-shadow:inset 0 0 0 2px #c9c9c9}.usa-button--outline:disabled.usa-button--inverse,.usa-button--outline[aria-disabled=true].usa-button--inverse{-webkit-box-shadow:inset 0 0 0 2px #919191;box-shadow:inset 0 0 0 2px #919191;color:#919191}@media (forced-colors: active){.usa-button--outline:disabled.usa-button--inverse,.usa-button--outline[aria-disabled=true].usa-button--inverse{color:GrayText}}.usa-button--unstyled{color:#005ea2;text-decoration:underline;background-color:transparent;border:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none;font-weight:normal;-ms-flex-pack:normal;justify-content:normal;text-align:left;margin:0;padding:0;width:auto}.usa-button--unstyled:visited{color:#54278f}.usa-button--unstyled:hover{color:#1a4480}.usa-button--unstyled:active{color:#162e51}.usa-button--unstyled:focus{outline:0.25rem solid #2491ff;outline-offset:0rem}.usa-button--unstyled:hover,.usa-button--unstyled.usa-button--hover,.usa-button--unstyled:disabled:hover,.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--unstyled:disabled.usa-button--hover,.usa-button--unstyled[aria-disabled=true].usa-button--hover,.usa-button--unstyled:active,.usa-button--unstyled.usa-button--active,.usa-button--unstyled:disabled:active,.usa-button--unstyled[aria-disabled=true]:active,.usa-button--unstyled:disabled.usa-button--active,.usa-button--unstyled[aria-disabled=true].usa-button--active,.usa-button--unstyled:disabled:focus,.usa-button--unstyled[aria-disabled=true]:focus,.usa-button--unstyled:disabled.usa-focus,.usa-button--unstyled[aria-disabled=true].usa-focus,.usa-button--unstyled:disabled,.usa-button--unstyled[aria-disabled=true],.usa-button--unstyled.usa-button--disabled{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;text-decoration:underline}.usa-button--unstyled.usa-button--hover{color:#1a4480}.usa-button--unstyled.usa-button--active{color:#162e51}.usa-button--unstyled:disabled,.usa-button--unstyled[aria-disabled=true],.usa-button--unstyled:disabled:hover,.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--unstyled[aria-disabled=true]:focus{color:#757575}@media (forced-colors: active){.usa-button--unstyled:disabled,.usa-button--unstyled[aria-disabled=true],.usa-button--unstyled:disabled:hover,.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--unstyled[aria-disabled=true]:focus{color:GrayText}}.usa-button-group{margin-bottom:0;margin-top:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style-type:none;margin-left:-0.25rem;margin-right:-0.25rem;padding-left:0}@media all and (min-width: 30em){.usa-button-group{-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex-direction:row;flex-direction:row}}.usa-button-group .usa-button-group{height:100%}@media all and (min-width: 30em){.usa-button-group .usa-button-group .usa-button-group__item{margin-top:0;margin-bottom:0}}.usa-button-group .usa-button-group--segmented .usa-button-group__item{margin-top:0;margin-bottom:0}.usa-button-group__item{margin:0.25rem}@media all and (min-width: 30em){.usa-button-group__item:last-child{margin-right:0}}.usa-button-group__item .usa-button{height:100%;margin-left:0;margin-right:0}.usa-button-group--segmented{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:justify;justify-content:space-between;margin-left:0;margin-right:0}@media all and (min-width: 30em){.usa-button-group--segmented{-ms-flex-pack:start;justify-content:flex-start}}.usa-button-group--segmented .usa-button{position:relative;width:calc(100% + 2px)}@media all and (min-width: 30em){.usa-button-group--segmented .usa-button{width:auto}}.usa-button-group--segmented .usa-button:hover,.usa-button-group--segmented .usa-button:active{z-index:2}.usa-button-group--segmented .usa-button:focus{z-index:3}.usa-button-group--segmented .usa-button-group__item{margin-left:0;margin-right:0;width:100%}@media all and (min-width: 30em){.usa-button-group--segmented .usa-button-group__item{width:auto}}.usa-button-group--segmented .usa-button-group__item:first-child>.usa-button{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.usa-button-group--segmented .usa-button-group__item:last-child>.usa-button{border-top-left-radius:0;border-bottom-left-radius:0;margin-right:0;margin-left:-2px;width:calc(100% + 2px)}@media all and (min-width: 30em){.usa-button-group--segmented .usa-button-group__item:last-child>.usa-button{margin-left:-1px;width:auto}}.usa-button-group--segmented .usa-button-group__item:where(:not(:first-child):not(:last-child))>.usa-button{border-radius:0;margin-right:-1px;margin-left:-1px}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button::before{border-right:1px solid #1a4480;bottom:0;content:"";display:block;height:100%;position:absolute;right:1px;top:0;width:1px;z-index:3}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--secondary::before{border-right-color:#b50909}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--accent-cool::before{border-right-color:#28a0cb}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--base::before{border-right-color:#565c65}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) [class*=usa-button]:disabled::before,.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) [class*=usa-button][aria-disabled=true]::before{border-right-color:white}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button:active::before,.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--outline::before{display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.va-segmented-button{background-color:var(--vads-color-base-lighter);padding:var(--vads-spacing-0p5);border-radius:8px;margin-left:0;margin-right:0;display:grid;grid-template-columns:repeat(4, 1fr);gap:8px}.usa-button-group__item{margin:0}.va-segmented-button__button{width:100%;max-width:160px;height:100%;min-height:44px;background-color:var(--vads-color-base-lighter);border:0;border-radius:4px;color:var(--vads-color-base);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;font-family:var(--font-source-sans);font-size:1.06rem}@media screen and (max-width: 640px){.va-segmented-button{width:100%}.va-segmented-button__button{padding:var(--vads-spacing-1p5) var(--vads-spacing-0p5) var(--vads-spacing-1p5) var(--vads-spacing-0p5)}}@media screen and (min-width: 640px){.va-segmented-button__button{max-width:160px;padding:var(--vads-spacing-1p5) var(--vads-spacing-2p5) var(--vads-spacing-1p5) var(--vads-spacing-2p5)}}.va-segmented-button__button:hover{background-color:var(--vads-button-color-background-disabled-on-light);border-color:var(--vads-button-color-background-disabled-on-light)}.va-segmented-button__button:active,.va-segmented-button__button[aria-pressed=true]{background-color:var(--vads-color-white);position:relative}.va-segmented-button__button:active::after,.va-segmented-button__button[aria-pressed=true]::after{content:attr(data-label)/"";background:var(--vads-color-white);border-radius:4px;font-weight:700;position:absolute;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}',VaButtonSegmentedStyle0=vaButtonSegmentedCss,VaButtonSegmented$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.vaButtonClick=createEvent(this,"vaButtonClick",7),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.handleClick=t=>{if(!this.disableAnalytics){const t={componentName:"va-button-segmented",action:"click",details:{selected:this.selected}};this.componentLibraryAnalytics.emit(t)}this.vaButtonClick.emit(t)},this.label=void 0,this.buttons=void 0,this.disableAnalytics=!1,this.selected=0}validateButtons(t){t.length>4&&(this.buttons=t.slice(0,4))}validateSelectedIndex(t){(t<0||t>=this.buttons.length)&&(this.selected=0)}componentWillLoad(){this.buttons&&this.buttons.length>4&&(this.buttons=this.buttons.slice(0,4))}render(){const t=classnames({"usa-button-group":!0,"va-segmented-button":!0}),e=classnames({"va-segmented-button__button":!0});return this.buttons&&Array.isArray(this.buttons)&&0!==this.buttons.length?h(Host,null,h("ul",{class:t,"aria-label":this.label},this.buttons.map(((t,u)=>h("li",{class:"usa-button-group__item"},h("button",{class:e,onClick:()=>{this.selected=u,this.handleClick(t)},type:"button",title:t.label.length>20?t.label:void 0,"aria-pressed":this.selected===u?"true":"false","data-label":t.label},t.label)))))):(console.error('va-button-segmented: "buttons" prop array is required and must contain at least one item.'),null)}get el(){return this}static get watchers(){return{buttons:["validateButtons"],selected:["validateSelectedIndex"]}}static get style(){return VaButtonSegmentedStyle0}},[1,"va-button-segmented",{label:[1],buttons:[1040],disableAnalytics:[4,"disable-analytics"],selected:[1026]},void 0,{buttons:["validateButtons"],selected:["validateSelectedIndex"]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-button-segmented"].forEach((t=>{"va-button-segmented"===t&&(customElements.get(t)||customElements.define(t,VaButtonSegmented$1))}))}const VaButtonSegmented=VaButtonSegmented$1,defineCustomElement=defineCustomElement$1;export{VaButtonSegmented,defineCustomElement};
|
|
1
|
+
import{proxyCustomElement,HTMLElement,createEvent,h,Host}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";const vaButtonSegmentedCss='button:not([disabled]):focus,select:not([disabled]):focus,a:not([disabled]):focus,h1:focus,input:not([disabled]):focus,textarea:not([disabled]):focus,#form-question [role=\'option\']:focus,*[tabindex]:focus{outline:2px solid var(--vads-color-action-focus-on-light)}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-button{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:0.9;color:white;background-color:#005ea2;-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-flex-align:center;align-items:center;border:0;border-radius:0.25rem;cursor:pointer;-webkit-column-gap:0.5rem;-moz-column-gap:0.5rem;column-gap:0.5rem;display:-ms-inline-flexbox;display:inline-flex;font-weight:700;-ms-flex-pack:center;justify-content:center;margin-right:0.5rem;padding:0.75rem 1.25rem;text-align:center;text-decoration:none;width:100%}@media all and (min-width: 30em){.usa-button{width:auto}}.usa-button:visited{color:white}.usa-button:hover,.usa-button.usa-button--hover{color:white;background-color:#1a4480;border-bottom:0;text-decoration:none}.usa-button:active,.usa-button.usa-button--active{color:white;background-color:#162e51}.usa-button:not([disabled]):focus,.usa-button:not([disabled]).usa-focus{outline-offset:0.25rem}.usa-button:disabled,.usa-button[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-button:disabled:hover,.usa-button:disabled:active,.usa-button:disabled:focus,.usa-button:disabled.usa-focus,.usa-button[aria-disabled=true]:hover,.usa-button[aria-disabled=true]:active,.usa-button[aria-disabled=true]:focus,.usa-button[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-button:disabled,.usa-button[aria-disabled=true]{border:0;color:GrayText}.usa-button:disabled:hover,.usa-button:disabled:active,.usa-button:disabled:focus,.usa-button:disabled.usa-focus,.usa-button[aria-disabled=true]:hover,.usa-button[aria-disabled=true]:active,.usa-button[aria-disabled=true]:focus,.usa-button[aria-disabled=true].usa-focus{color:GrayText}}.usa-button:disabled.usa-button--hover,.usa-button:disabled.usa-button--active,.usa-button[aria-disabled=true].usa-button--hover,.usa-button[aria-disabled=true].usa-button--active{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-button:disabled.usa-button--hover:hover,.usa-button:disabled.usa-button--hover:active,.usa-button:disabled.usa-button--hover:focus,.usa-button:disabled.usa-button--hover.usa-focus,.usa-button:disabled.usa-button--active:hover,.usa-button:disabled.usa-button--active:active,.usa-button:disabled.usa-button--active:focus,.usa-button:disabled.usa-button--active.usa-focus,.usa-button[aria-disabled=true].usa-button--hover:hover,.usa-button[aria-disabled=true].usa-button--hover:active,.usa-button[aria-disabled=true].usa-button--hover:focus,.usa-button[aria-disabled=true].usa-button--hover.usa-focus,.usa-button[aria-disabled=true].usa-button--active:hover,.usa-button[aria-disabled=true].usa-button--active:active,.usa-button[aria-disabled=true].usa-button--active:focus,.usa-button[aria-disabled=true].usa-button--active.usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-button:disabled.usa-button--hover,.usa-button:disabled.usa-button--active,.usa-button[aria-disabled=true].usa-button--hover,.usa-button[aria-disabled=true].usa-button--active{border:0;color:GrayText}.usa-button:disabled.usa-button--hover:hover,.usa-button:disabled.usa-button--hover:active,.usa-button:disabled.usa-button--hover:focus,.usa-button:disabled.usa-button--hover.usa-focus,.usa-button:disabled.usa-button--active:hover,.usa-button:disabled.usa-button--active:active,.usa-button:disabled.usa-button--active:focus,.usa-button:disabled.usa-button--active.usa-focus,.usa-button[aria-disabled=true].usa-button--hover:hover,.usa-button[aria-disabled=true].usa-button--hover:active,.usa-button[aria-disabled=true].usa-button--hover:focus,.usa-button[aria-disabled=true].usa-button--hover.usa-focus,.usa-button[aria-disabled=true].usa-button--active:hover,.usa-button[aria-disabled=true].usa-button--active:active,.usa-button[aria-disabled=true].usa-button--active:focus,.usa-button[aria-disabled=true].usa-button--active.usa-focus{color:GrayText}}@media (forced-colors: active){.usa-button:disabled:not(.usa-button--unstyled),.usa-button[aria-disabled=true]:not(.usa-button--unstyled){border:2px solid GrayText}}.usa-button .usa-icon{-ms-flex-negative:0;flex-shrink:0}@media (forced-colors: active){.usa-button:not(.usa-button--unstyled){border:2px solid transparent}}.usa-button--accent-cool{color:#1b1b1b;background-color:#00bde3}.usa-button--accent-cool:visited{color:#1b1b1b;background-color:#00bde3}.usa-button--accent-cool:hover,.usa-button--accent-cool.usa-button--hover{color:#1b1b1b;background-color:#28a0cb}.usa-button--accent-cool:active,.usa-button--accent-cool.usa-button--active{color:white;background-color:#07648d}.usa-button--accent-warm{color:#1b1b1b;background-color:#fa9441}.usa-button--accent-warm:visited{color:#1b1b1b;background-color:#fa9441}.usa-button--accent-warm:hover,.usa-button--accent-warm.usa-button--hover{color:white;background-color:#c05600}.usa-button--accent-warm:active,.usa-button--accent-warm.usa-button--active{color:white;background-color:#775540}.usa-button--outline{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px #005ea2;box-shadow:inset 0 0 0 2px #005ea2;color:#005ea2}.usa-button--outline:visited{color:#005ea2}.usa-button--outline:hover,.usa-button--outline.usa-button--hover{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px #1a4480;box-shadow:inset 0 0 0 2px #1a4480;color:#1a4480}.usa-button--outline:active,.usa-button--outline.usa-button--active{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px #162e51;box-shadow:inset 0 0 0 2px #162e51;color:#162e51}.usa-button--outline.usa-button--inverse{-webkit-box-shadow:inset 0 0 0 2px #dfe1e2;box-shadow:inset 0 0 0 2px #dfe1e2;color:#dfe1e2}.usa-button--outline.usa-button--inverse:visited{color:#dfe1e2}.usa-button--outline.usa-button--inverse:hover,.usa-button--outline.usa-button--inverse.usa-button--hover{-webkit-box-shadow:inset 0 0 0 2px #f0f0f0;box-shadow:inset 0 0 0 2px #f0f0f0;color:#f0f0f0}.usa-button--outline.usa-button--inverse:active,.usa-button--outline.usa-button--inverse.usa-button--active{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px white;box-shadow:inset 0 0 0 2px white;color:white}.usa-button--outline.usa-button--inverse.usa-button--unstyled{color:#005ea2;text-decoration:underline;background-color:transparent;border:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none;font-weight:normal;-ms-flex-pack:normal;justify-content:normal;text-align:left;margin:0;padding:0;width:auto;color:#dfe1e2}.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited{color:#54278f}.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover{color:#1a4480}.usa-button--outline.usa-button--inverse.usa-button--unstyled:active{color:#162e51}.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus{outline:0.25rem solid #2491ff;outline-offset:0rem}.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true].usa-button--hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true].usa-button--active,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true].usa-focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true],.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;text-decoration:underline}.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover{color:#1a4480}.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active{color:#162e51}.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true],.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:focus{color:#757575}@media (forced-colors: active){.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true],.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:focus{color:GrayText}}.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited{color:#dfe1e2}.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover{color:#f0f0f0}.usa-button--outline.usa-button--inverse.usa-button--unstyled:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active{color:white}.usa-button--base{color:white;background-color:#71767a}.usa-button--base:hover,.usa-button--base.usa-button--hover{color:white;background-color:#565c65}.usa-button--base:active,.usa-button--base.usa-button--active{color:white;background-color:#3d4551}.usa-button--secondary{color:white;background-color:#d83933}.usa-button--secondary:hover,.usa-button--secondary.usa-button--hover{color:white;background-color:#b50909}.usa-button--secondary:active,.usa-button--secondary.usa-button--active{color:white;background-color:#8b0a03}.usa-button--big{border-radius:0.25rem;font-size:1.46rem;padding:1rem 1.5rem}.usa-button--outline:disabled,.usa-button--outline:disabled:hover,.usa-button--outline:disabled:active,.usa-button--outline:disabled:focus,.usa-button--outline[aria-disabled=true],.usa-button--outline[aria-disabled=true]:hover,.usa-button--outline[aria-disabled=true]:active,.usa-button--outline[aria-disabled=true]:focus,.usa-button--outline-inverse:disabled,.usa-button--outline-inverse:disabled:hover,.usa-button--outline-inverse:disabled:active,.usa-button--outline-inverse:disabled:focus,.usa-button--outline-inverse[aria-disabled=true],.usa-button--outline-inverse[aria-disabled=true]:hover,.usa-button--outline-inverse[aria-disabled=true]:active,.usa-button--outline-inverse[aria-disabled=true]:focus{background-color:transparent;color:#757575}.usa-button--outline:disabled,.usa-button--outline[aria-disabled=true]{-webkit-box-shadow:inset 0 0 0 2px #c9c9c9;box-shadow:inset 0 0 0 2px #c9c9c9}.usa-button--outline:disabled.usa-button--inverse,.usa-button--outline[aria-disabled=true].usa-button--inverse{-webkit-box-shadow:inset 0 0 0 2px #919191;box-shadow:inset 0 0 0 2px #919191;color:#919191}@media (forced-colors: active){.usa-button--outline:disabled.usa-button--inverse,.usa-button--outline[aria-disabled=true].usa-button--inverse{color:GrayText}}.usa-button--unstyled{color:#005ea2;text-decoration:underline;background-color:transparent;border:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none;font-weight:normal;-ms-flex-pack:normal;justify-content:normal;text-align:left;margin:0;padding:0;width:auto}.usa-button--unstyled:visited{color:#54278f}.usa-button--unstyled:hover{color:#1a4480}.usa-button--unstyled:active{color:#162e51}.usa-button--unstyled:focus{outline:0.25rem solid #2491ff;outline-offset:0rem}.usa-button--unstyled:hover,.usa-button--unstyled.usa-button--hover,.usa-button--unstyled:disabled:hover,.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--unstyled:disabled.usa-button--hover,.usa-button--unstyled[aria-disabled=true].usa-button--hover,.usa-button--unstyled:active,.usa-button--unstyled.usa-button--active,.usa-button--unstyled:disabled:active,.usa-button--unstyled[aria-disabled=true]:active,.usa-button--unstyled:disabled.usa-button--active,.usa-button--unstyled[aria-disabled=true].usa-button--active,.usa-button--unstyled:disabled:focus,.usa-button--unstyled[aria-disabled=true]:focus,.usa-button--unstyled:disabled.usa-focus,.usa-button--unstyled[aria-disabled=true].usa-focus,.usa-button--unstyled:disabled,.usa-button--unstyled[aria-disabled=true],.usa-button--unstyled.usa-button--disabled{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;text-decoration:underline}.usa-button--unstyled.usa-button--hover{color:#1a4480}.usa-button--unstyled.usa-button--active{color:#162e51}.usa-button--unstyled:disabled,.usa-button--unstyled[aria-disabled=true],.usa-button--unstyled:disabled:hover,.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--unstyled[aria-disabled=true]:focus{color:#757575}@media (forced-colors: active){.usa-button--unstyled:disabled,.usa-button--unstyled[aria-disabled=true],.usa-button--unstyled:disabled:hover,.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--unstyled[aria-disabled=true]:focus{color:GrayText}}.usa-button-group{margin-bottom:0;margin-top:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style-type:none;margin-left:-0.25rem;margin-right:-0.25rem;padding-left:0}@media all and (min-width: 30em){.usa-button-group{-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex-direction:row;flex-direction:row}}.usa-button-group .usa-button-group{height:100%}@media all and (min-width: 30em){.usa-button-group .usa-button-group .usa-button-group__item{margin-top:0;margin-bottom:0}}.usa-button-group .usa-button-group--segmented .usa-button-group__item{margin-top:0;margin-bottom:0}.usa-button-group__item{margin:0.25rem}@media all and (min-width: 30em){.usa-button-group__item:last-child{margin-right:0}}.usa-button-group__item .usa-button{height:100%;margin-left:0;margin-right:0}.usa-button-group--segmented{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:justify;justify-content:space-between;margin-left:0;margin-right:0}@media all and (min-width: 30em){.usa-button-group--segmented{-ms-flex-pack:start;justify-content:flex-start}}.usa-button-group--segmented .usa-button{position:relative;width:calc(100% + 2px)}@media all and (min-width: 30em){.usa-button-group--segmented .usa-button{width:auto}}.usa-button-group--segmented .usa-button:hover,.usa-button-group--segmented .usa-button:active{z-index:2}.usa-button-group--segmented .usa-button:focus{z-index:3}.usa-button-group--segmented .usa-button-group__item{margin-left:0;margin-right:0;width:100%}@media all and (min-width: 30em){.usa-button-group--segmented .usa-button-group__item{width:auto}}.usa-button-group--segmented .usa-button-group__item:first-child>.usa-button{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.usa-button-group--segmented .usa-button-group__item:last-child>.usa-button{border-top-left-radius:0;border-bottom-left-radius:0;margin-right:0;margin-left:-2px;width:calc(100% + 2px)}@media all and (min-width: 30em){.usa-button-group--segmented .usa-button-group__item:last-child>.usa-button{margin-left:-1px;width:auto}}.usa-button-group--segmented .usa-button-group__item:where(:not(:first-child):not(:last-child))>.usa-button{border-radius:0;margin-right:-1px;margin-left:-1px}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button::before{border-right:1px solid #1a4480;bottom:0;content:"";display:block;height:100%;position:absolute;right:1px;top:0;width:1px;z-index:3}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--secondary::before{border-right-color:#b50909}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--accent-cool::before{border-right-color:#28a0cb}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--base::before{border-right-color:#565c65}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) [class*=usa-button]:disabled::before,.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) [class*=usa-button][aria-disabled=true]::before{border-right-color:white}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button:active::before,.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--outline::before{display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.va-segmented-button{background-color:var(--vads-color-base-lighter);padding:var(--vads-spacing-0p5);border-radius:8px;margin-left:0;margin-right:0;display:grid;gap:8px}.va-segmented-button[data-count="4"]{grid-template-columns:repeat(4, 1fr)}.va-segmented-button[data-count="4"] .va-segmented-button__button{max-width:160px}.va-segmented-button[data-count="3"]{grid-template-columns:repeat(3, 1fr)}.va-segmented-button[data-count="2"]{grid-template-columns:repeat(2, 1fr)}.usa-button-group__item{margin:0}.va-segmented-button__button{width:100%;height:100%;min-height:44px;background-color:var(--vads-color-base-lighter);border:0;border-radius:4px;color:var(--vads-color-base);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;font-family:var(--font-source-sans);font-size:1.06rem}@media screen and (max-width: 640px){.va-segmented-button{width:100%}.va-segmented-button__button{padding:var(--vads-spacing-1p5) var(--vads-spacing-0p5) var(--vads-spacing-1p5) var(--vads-spacing-0p5)}}@media screen and (min-width: 640px){.va-segmented-button[data-count="2"],.va-segmented-button[data-count="3"]{display:-ms-flexbox;display:flex}.va-segmented-button__button{max-width:160px;padding:var(--vads-spacing-1p5) var(--vads-spacing-2p5) var(--vads-spacing-1p5) var(--vads-spacing-2p5)}}.va-segmented-button__button:hover{background-color:var(--vads-button-color-background-disabled-on-light);border-color:var(--vads-button-color-background-disabled-on-light)}.va-segmented-button__button:active,.va-segmented-button__button[aria-pressed=true]{background-color:var(--vads-color-white);position:relative}.va-segmented-button__button:active::after,.va-segmented-button__button[aria-pressed=true]::after{content:attr(data-label)/"";background:var(--vads-color-white);border-radius:4px;font-weight:700;position:absolute;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}',VaButtonSegmentedStyle0=vaButtonSegmentedCss,VaButtonSegmented$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.vaButtonClick=createEvent(this,"vaButtonClick",7),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.handleClick=t=>{if(!this.disableAnalytics){const t={componentName:"va-button-segmented",action:"click",details:{selected:this.selected}};this.componentLibraryAnalytics.emit(t)}this.vaButtonClick.emit(t)},this.label=void 0,this.buttons=void 0,this.disableAnalytics=!1,this.selected=0}validateButtons(t){t.length>4&&(this.buttons=t.slice(0,4))}validateSelectedIndex(t){(t<0||t>=this.buttons.length)&&(this.selected=0)}componentWillLoad(){this.buttons&&this.buttons.length>4&&(this.buttons=this.buttons.slice(0,4))}render(){const t=classnames({"usa-button-group":!0,"va-segmented-button":!0}),e=classnames({"va-segmented-button__button":!0});return this.buttons&&Array.isArray(this.buttons)&&0!==this.buttons.length?h(Host,null,h("ul",{class:t,"aria-label":this.label,"data-count":this.buttons.length},this.buttons.map(((t,u)=>h("li",{class:"usa-button-group__item"},h("button",{class:e,onClick:()=>{this.selected=u,this.handleClick(t)},type:"button",title:t.label.length>20?t.label:void 0,"aria-pressed":this.selected===u?"true":"false","data-label":t.label},t.label)))))):(console.error('va-button-segmented: "buttons" prop array is required and must contain at least one item.'),null)}get el(){return this}static get watchers(){return{buttons:["validateButtons"],selected:["validateSelectedIndex"]}}static get style(){return VaButtonSegmentedStyle0}},[1,"va-button-segmented",{label:[1],buttons:[1040],disableAnalytics:[4,"disable-analytics"],selected:[1026]},void 0,{buttons:["validateButtons"],selected:["validateSelectedIndex"]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-button-segmented"].forEach((t=>{"va-button-segmented"===t&&(customElements.get(t)||customElements.define(t,VaButtonSegmented$1))}))}const VaButtonSegmented=VaButtonSegmented$1,defineCustomElement=defineCustomElement$1;export{VaButtonSegmented,defineCustomElement};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement,HTMLElement,createEvent,h,Host,Fragment}from"@stencil/core/internal/client";import"./i18n-setup.js";import"./contacts.js";import{v as validate,z as zeroPadStart,d as daysForSelectedMonth,g as getErrorParameters,m as months}from"./date-utils.js";import{d as defineCustomElement$4}from"./va-icon2.js";import{d as defineCustomElement$3}from"./va-select2.js";import{d as defineCustomElement$2}from"./va-text-input2.js";import{i as instance}from"./i18next.js";const vaDateCss='.sr-only{border:0;clip:rect(0, 0, 0, 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}#error-message{margin-bottom:0.75rem}#error-message,#input-error-message{color:var(--vads-color-secondary-dark);display:block;font-weight:700;font-size:1.06rem}:host([error]:not([error=\'\'])),:host(.va-form-group--error){border-left:0.3rem solid var(--vads-color-secondary-dark);padding-left:1.25rem;position:relative}@media screen and (min-width: 1008px){:host([error]:not([error=\'\'])),:host(.va-form-group--error){margin-left:-1.4375rem;}}.hint-text{color:#71767A;display:block;font-size:1.06rem}.usa-error-message{font-size:1.06rem}:host([error]:not([error=""])),:host(.va-form-group--error){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}:host([error]:not([error=""])[use-forms-pattern=multiple]),:host(.va-form-group--error[use-forms-pattern=multiple]){border-left:none}:host([error]:not([error=""])[use-forms-pattern=multiple]) .input-wrap,:host(.va-form-group--error[use-forms-pattern=multiple]) .input-wrap{border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}@media screen and (min-width: 1008px){:host([error]:not([error=""])),:host(.va-form-group--error){margin-left:-0.9rem}:host([error]:not([error=""])[use-forms-pattern=multiple]) .input-wrap,:host(.va-form-group--error[use-forms-pattern=multiple]) .input-wrap{margin-left:-0.9rem}}@media screen and (max-width: 1008px){:host([error]:not([error=""])[use-forms-pattern=multiple]),:host(.va-form-group--error[use-forms-pattern=multiple]){padding-left:0}}.usa-label--required{color:var(--vads-color-secondary-dark)}.usa-error-message{color:var(--vads-color-secondary-dark)}:host{display:block;font-family:var(--font-source-sans);margin-top:1.875rem}fieldset{border:none;margin:0;padding:0}legend{border:0;font-size:1.06rem;padding:0}span.required{color:var(--vads-color-secondary-dark)}#error-message{color:var(--vads-color-secondary-dark);display:block;margin-bottom:0}.date-container{display:-ms-flexbox;display:flex;margin-top:12px;-ms-flex-wrap:wrap;flex-wrap:wrap;row-gap:12px}:host([error]:not([error=""])) .date-container{padding-top:0}.select-month{width:8.125rem;margin-right:0.9375rem}.select-day{width:5rem;margin-right:0.9375rem}.input-year{width:5rem}va-select::part(label),va-text-input::part(label){margin-top:0;margin-bottom:12px}va-text-input::part(validation){display:none}',VaDateStyle0=vaDateCss,VaDate$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.dateChange=createEvent(this,"dateChange",7),this.dateBlur=createEvent(this,"dateBlur",7),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.dayTouched=!1,this.monthTouched=!1,this.yearTouched=!1,this.handleDateBlur=e=>{const[t,r,a]=(this.value||"").split("-").map((e=>Number(e)));if(validate({component:this,year:t,month:r,day:a,yearTouched:this.yearTouched,monthTouched:this.monthTouched,dayTouched:this.dayTouched,monthSelect:!0,monthYearOnly:this.monthYearOnly,monthOptional:this.monthOptional}),!this.error&&(this.setValue(t,r,a),this.dateBlur.emit(e),this.enableAnalytics)){const e={componentName:"va-date",action:"blur",details:{year:t,month:r,day:a,"month-year-only":this.monthYearOnly}};this.componentLibraryAnalytics.emit(e)}},this.handleDateChange=e=>{const t=e.target;let[r,a,o]=(this.value||"").split("-");t.classList.contains("select-month")&&(a=t.value),t.classList.contains("select-day")&&(o=t.value),t.classList.contains("input-year")&&(r=t.value),this.setValue(parseInt(r),parseInt(a),parseInt(o)),this.dateChange.emit(e)},this.handleMonthBlur=()=>{this.monthTouched=!0},this.handleDayBlur=()=>{this.dayTouched=!0},this.handleYearBlur=()=>{this.yearTouched=!0},this.required=!1,this.label=void 0,this.name=void 0,this.hint=void 0,this.error=void 0,this.monthYearOnly=!1,this.monthOptional=!1,this.value=void 0,this.invalidDay=!1,this.invalidMonth=!1,this.invalidYear=!1,this.enableAnalytics=!1}setValue(e,t,r){const a=`${e||""}-${t?zeroPadStart(t):""}-${r?zeroPadStart(r):""}`.replace(/-+$/,"");this.value=a||null}render(){const{required:e,label:t,name:r,error:a,handleDateBlur:o,handleDateChange:n,monthYearOnly:s,value:i,hint:l}=this,[d,m,u]=(i||"").split("-").map((e=>parseInt(e))),p=Array.from({length:daysForSelectedMonth(d,m)},((e,t)=>t+1));return h(Host,{onBlur:o},h("fieldset",null,h("legend",null,t," ",e&&h("span",{class:"required"},"(*Required)")),l&&h("span",{class:"hint-text"},l),h("slot",null),h("span",{id:"error-message",role:"alert"},a&&h(Fragment,null,h("span",{class:"sr-only"},"Error")," ",instance.t(a,(e=>getErrorParameters(e,d,m))(a)))),h("div",{class:"date-container"},h("va-select",{label:"Month","aria-describedby":a?"error-message":void 0,name:`${r}Month`,value:null==m?void 0:m.toString(),onVaSelect:n,onBlur:this.handleMonthBlur,invalid:this.invalidMonth,class:"select-month",error:this.monthTouched&&this.invalidMonth?a:null,showError:!1},months&&months.map((e=>h("option",{value:e.value},e.label)))),!s&&h("va-select",{label:"Day","aria-describedby":a?"error-message":void 0,name:`${r}Day`,value:null==u?void 0:u.toString(),onVaSelect:n,onBlur:this.handleDayBlur,invalid:this.invalidDay,class:"select-day",error:this.dayTouched&&this.invalidDay?this.error:null,showError:!1},p.map((e=>h("option",{value:e},e)))),h("va-text-input",{label:"Year","aria-describedby":a?"error-message":void 0,name:`${r}Year`,maxlength:4,pattern:"[0-9]{4}",value:d?d.toString():"",invalid:this.invalidYear,onInput:n,onBlur:this.handleYearBlur,error:this.yearTouched&&this.invalidYear?a:null,"show-input-error":"false",class:"input-year",inputmode:"numeric",type:"text","aria-label":"Please enter four digits for the year"}))))}get el(){return this}static get style(){return VaDateStyle0}},[1,"va-date",{required:[4],label:[1],name:[1],hint:[1],error:[1537],monthYearOnly:[4,"month-year-only"],monthOptional:[4,"month-optional"],value:[1537],invalidDay:[1028,"invalid-day"],invalidMonth:[1028,"invalid-month"],invalidYear:[1028,"invalid-year"],enableAnalytics:[4,"enable-analytics"]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-date","va-icon","va-select","va-text-input"].forEach((e=>{switch(e){case"va-date":customElements.get(e)||customElements.define(e,VaDate$1);break;case"va-icon":customElements.get(e)||defineCustomElement$4();break;case"va-select":customElements.get(e)||defineCustomElement$3();break;case"va-text-input":customElements.get(e)||defineCustomElement$2()}}))}const VaDate=VaDate$1,defineCustomElement=defineCustomElement$1;export{VaDate,defineCustomElement};
|
|
1
|
+
import{proxyCustomElement,HTMLElement,createEvent,h,Host,Fragment}from"@stencil/core/internal/client";import"./i18n-setup.js";import"./contacts.js";import{v as validate,z as zeroPadStart,d as daysForSelectedMonth,g as getErrorParameters,m as months}from"./date-utils.js";import{d as defineCustomElement$4}from"./va-icon2.js";import{d as defineCustomElement$3}from"./va-select2.js";import{d as defineCustomElement$2}from"./va-text-input2.js";import{i as instance}from"./i18next.js";const vaDateCss='.sr-only{border:0;clip:rect(0, 0, 0, 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}#error-message{margin-bottom:0.75rem}#error-message,#input-error-message{color:var(--vads-color-secondary-dark);display:block;font-weight:700;font-size:1.06rem}:host([error]:not([error=\'\'])),:host(.va-form-group--error){border-left:0.3rem solid var(--vads-color-secondary-dark);padding-left:1.25rem;position:relative}@media screen and (min-width: 1008px){:host([error]:not([error=\'\'])),:host(.va-form-group--error){margin-left:-1.4375rem;}}.hint-text{color:#71767A;display:block;font-size:1.06rem}.usa-error-message{font-size:1.06rem}:host([error]:not([error=""])),:host(.va-form-group--error){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}:host([error]:not([error=""])[use-forms-pattern=multiple]),:host(.va-form-group--error[use-forms-pattern=multiple]){border-left:none}:host([error]:not([error=""])[use-forms-pattern=multiple]) .input-wrap,:host(.va-form-group--error[use-forms-pattern=multiple]) .input-wrap{border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}@media screen and (min-width: 1008px){:host([error]:not([error=""])),:host(.va-form-group--error){margin-left:-0.9rem}:host([error]:not([error=""])[use-forms-pattern=multiple]) .input-wrap,:host(.va-form-group--error[use-forms-pattern=multiple]) .input-wrap{margin-left:-0.9rem}}@media screen and (max-width: 1008px){:host([error]:not([error=""])[use-forms-pattern=multiple]),:host(.va-form-group--error[use-forms-pattern=multiple]){padding-left:0}}.usa-label--required{color:var(--vads-color-secondary-dark)}.usa-error-message{color:var(--vads-color-secondary-dark)}:host{display:block;font-family:var(--font-source-sans);margin-top:1.875rem}fieldset{border:none;margin:0;padding:0}legend{border:0;font-size:1.06rem;padding:0}span.required{color:var(--vads-color-secondary-dark)}#error-message{color:var(--vads-color-secondary-dark);display:block;margin-bottom:0}.date-container{display:-ms-flexbox;display:flex;margin-top:12px;-ms-flex-wrap:wrap;flex-wrap:wrap;row-gap:12px}:host([error]:not([error=""])) .date-container{padding-top:0}.select-month{width:8.125rem;margin-right:0.9375rem}.select-day{width:5rem;margin-right:0.9375rem}.input-year{width:5rem}va-select::part(label),va-text-input::part(label){margin-top:0;margin-bottom:12px}va-text-input::part(validation){display:none}',VaDateStyle0=vaDateCss,VaDate$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.dateChange=createEvent(this,"dateChange",7),this.dateBlur=createEvent(this,"dateBlur",7),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.dayTouched=!1,this.monthTouched=!1,this.yearTouched=!1,this.handleDateBlur=e=>{const[t,r,a]=(this.value||"").split("-").map((e=>Number(e)));if(validate({component:this,year:t,month:r,day:a,yearTouched:this.yearTouched,monthTouched:this.monthTouched,dayTouched:this.dayTouched,monthSelect:!0,monthYearOnly:this.monthYearOnly,monthOptional:this.monthOptional}),!this.error&&(this.setValue(t,r,a),this.dateBlur.emit(e),this.enableAnalytics)){const e={componentName:"va-date",action:"blur",details:{year:t,month:r,day:a,"month-year-only":this.monthYearOnly}};this.componentLibraryAnalytics.emit(e)}},this.handleDateChange=e=>{const t=e.target;let[r,a,o]=(this.value||"").split("-");t.classList.contains("select-month")&&(a=t.value),t.classList.contains("select-day")&&(o=t.value),t.classList.contains("input-year")&&(r=t.value),this.setValue(parseInt(r),parseInt(a),parseInt(o)),this.dateChange.emit(e)},this.handleMonthBlur=()=>{this.monthTouched=!0},this.handleDayBlur=()=>{this.dayTouched=!0},this.handleYearBlur=()=>{this.yearTouched=!0},this.required=!1,this.label=void 0,this.name=void 0,this.hint=void 0,this.error=void 0,this.monthYearOnly=!1,this.monthOptional=!1,this.value=void 0,this.invalidDay=!1,this.invalidMonth=!1,this.invalidYear=!1,this.enableAnalytics=!1}setValue(e,t,r){const a=`${e||""}-${t?zeroPadStart(t):""}-${r?zeroPadStart(r):""}`.replace(/-+$/,"");this.value=a||null}render(){const{required:e,label:t,name:r,error:a,handleDateBlur:o,handleDateChange:n,monthYearOnly:s,value:i,hint:l}=this,[d,m,u]=(i||"").split("-").map((e=>parseInt(e))),p=Array.from({length:daysForSelectedMonth(d,m)},((e,t)=>t+1));return h(Host,{onBlur:o},h("fieldset",null,h("legend",null,t," ",e&&h("span",{class:"required"},"(*Required)")),l&&h("span",{class:"hint-text"},l),h("slot",null),h("span",{id:"error-message",role:"alert"},a&&h(Fragment,null,h("span",{class:"sr-only"},"Error")," ",instance.t(a,(e=>getErrorParameters(e,d,m))(a)))),h("div",{class:"date-container"},h("va-select",{label:"Month","aria-describedby":a?"error-message":void 0,name:`${r}Month`,value:null==m?void 0:m.toString(),onVaSelect:n,onBlur:this.handleMonthBlur,invalid:this.invalidMonth,class:"select-month",required:e,showRequiredText:!1,error:this.monthTouched&&this.invalidMonth?a:null,showError:!1},months&&months.map((e=>h("option",{value:e.value},e.label)))),!s&&h("va-select",{label:"Day","aria-describedby":a?"error-message":void 0,name:`${r}Day`,value:null==u?void 0:u.toString(),onVaSelect:n,onBlur:this.handleDayBlur,invalid:this.invalidDay,class:"select-day",required:e,showRequiredText:!1,error:this.dayTouched&&this.invalidDay?this.error:null,showError:!1},p.map((e=>h("option",{value:e},e)))),h("va-text-input",{label:"Year","aria-describedby":a?"error-message":void 0,name:`${r}Year`,maxlength:4,pattern:"[0-9]{4}",value:d?d.toString():"",invalid:this.invalidYear,onInput:n,onBlur:this.handleYearBlur,required:e,showRequiredText:!1,error:this.yearTouched&&this.invalidYear?a:null,"show-input-error":"false",class:"input-year",inputmode:"numeric",type:"text","aria-label":"Please enter four digits for the year"}))))}get el(){return this}static get style(){return VaDateStyle0}},[1,"va-date",{required:[4],label:[1],name:[1],hint:[1],error:[1537],monthYearOnly:[4,"month-year-only"],monthOptional:[4,"month-optional"],value:[1537],invalidDay:[1028,"invalid-day"],invalidMonth:[1028,"invalid-month"],invalidYear:[1028,"invalid-year"],enableAnalytics:[4,"enable-analytics"]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-date","va-icon","va-select","va-text-input"].forEach((e=>{switch(e){case"va-date":customElements.get(e)||customElements.define(e,VaDate$1);break;case"va-icon":customElements.get(e)||defineCustomElement$4();break;case"va-select":customElements.get(e)||defineCustomElement$3();break;case"va-text-input":customElements.get(e)||defineCustomElement$2()}}))}const VaDate=VaDate$1,defineCustomElement=defineCustomElement$1;export{VaDate,defineCustomElement};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface VaInputTelephone extends Components.VaInputTelephone, HTMLElement {}
|
|
4
|
+
export const VaInputTelephone: {
|
|
5
|
+
prototype: VaInputTelephone;
|
|
6
|
+
new (): VaInputTelephone;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|