@department-of-veterans-affairs/component-library 54.4.1 → 54.4.2
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/Modal.js +1 -1
- package/Modal.unit.spec.js +1 -1
- package/contacts.js +1 -1
- package/dist/1339.app.bundle.js +1 -1
- package/dist/1351.app.bundle.js +1 -1
- package/dist/2387.app.bundle.js +1 -1
- package/dist/2654.app.bundle.js +1 -1
- package/dist/2664.app.bundle.js +1 -1
- package/dist/2801.app.bundle.js +1 -1
- package/dist/3126.app.bundle.js +1 -1
- package/dist/4064.app.bundle.js +1 -1
- package/dist/4117.app.bundle.js +1 -1
- package/dist/4140.app.bundle.js +1 -1
- package/dist/4708.app.bundle.js +1 -1
- package/dist/4715.app.bundle.js +1 -1
- package/dist/5019.app.bundle.js +1 -1
- package/dist/5155.app.bundle.js +1 -1
- package/dist/5189.app.bundle.js +1 -1
- package/dist/5306.app.bundle.js +1 -1
- package/dist/5699.app.bundle.js +1 -1
- package/dist/6034.app.bundle.js +1 -1
- package/dist/6246.app.bundle.js +1 -1
- package/dist/6349.app.bundle.js +1 -1
- package/dist/641.app.bundle.js +1 -1
- package/dist/6527.app.bundle.js +1 -1
- package/dist/6633.app.bundle.js +1 -1
- package/dist/6683.app.bundle.js +1 -1
- package/dist/6771.app.bundle.js +1 -1
- package/dist/712.app.bundle.js +1 -1
- package/dist/7367.app.bundle.js +1 -1
- package/dist/7531.app.bundle.js +1 -1
- package/dist/7663.app.bundle.js +1 -1
- package/dist/7814.app.bundle.js +1 -1
- package/dist/7821.app.bundle.js +1 -1
- package/dist/8175.app.bundle.js +1 -1
- package/dist/82.app.bundle.js +1 -1
- package/dist/8206.app.bundle.js +1 -1
- package/dist/8495.app.bundle.js +1 -1
- package/dist/8762.app.bundle.js +1 -1
- package/dist/8859.app.bundle.js +1 -1
- package/dist/890.app.bundle.js +1 -1
- package/dist/9288.app.bundle.js +1 -1
- package/dist/9755.app.bundle.js +1 -1
- package/dist/9794.app.bundle.js +1 -1
- package/dist/9800.app.bundle.js +1 -1
- package/dist/9915.app.bundle.js +1 -1
- package/dist/app.bundle.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/p-0311e4e3.js +1 -0
- package/dist/components/p-067d7618.js +1 -0
- package/dist/components/p-3962731f.js +1 -0
- package/dist/components/p-40738d84.js +1 -0
- package/dist/components/p-494b538e.js +1 -0
- package/dist/components/p-6a3cf3d7.js +1 -0
- package/dist/components/p-6b349d85.js +1 -0
- package/dist/components/p-6e4b9401.js +1 -0
- package/dist/components/p-70a619e9.js +1 -0
- package/dist/components/p-7129443f.js +1 -0
- package/dist/components/p-784bed9b.js +1 -0
- package/dist/components/p-a12014b1.js +1 -0
- package/dist/components/{index2.js → p-a5dce9e6.js} +1 -1
- package/dist/components/p-a836c3e1.js +1 -0
- package/dist/components/{parsePhoneNumber_.js → p-b276cef8.js} +1 -1
- package/dist/components/p-b92d2c38.js +1 -0
- package/dist/components/p-bac94659.js +1 -0
- package/dist/components/p-bea05aab.js +1 -0
- package/dist/components/p-c3fdb782.js +1 -0
- package/dist/components/p-ce1b8abc.js +1 -0
- package/dist/components/p-cf580be9.js +1 -0
- package/dist/components/p-d20739b4.js +20 -0
- package/dist/components/p-d4b7abf9.js +1 -0
- package/dist/components/p-d9f21f0d.js +1 -0
- package/dist/components/p-dffbc03b.js +1 -0
- package/dist/components/p-e1092a04.js +1 -0
- package/dist/components/p-ef5c0d66.js +1 -0
- package/dist/components/p-f3a1dcd5.js +1 -0
- package/dist/components/p-fda59844.js +1 -0
- package/dist/components/types/index.d.ts +2 -0
- package/dist/components/va-accordion-item.js +1 -1
- package/dist/components/va-accordion.js +1 -1
- package/dist/components/va-additional-info.js +1 -1
- package/dist/components/va-alert-expandable.js +1 -1
- package/dist/components/va-alert-sign-in.js +1 -1
- package/dist/components/va-alert.js +1 -1
- package/dist/components/va-back-to-top.js +1 -1
- package/dist/components/va-banner.js +1 -1
- package/dist/components/va-breadcrumbs.js +1 -1
- package/dist/components/va-button-icon.js +1 -1
- package/dist/components/va-button-pair.js +1 -1
- package/dist/components/va-button-segmented.js +1 -1
- package/dist/components/va-button.js +1 -1
- package/dist/components/va-card.js +1 -1
- package/dist/components/va-checkbox-group.js +1 -1
- package/dist/components/va-checkbox.js +1 -1
- package/dist/components/va-combo-box.js +1 -1
- package/dist/components/va-crisis-line-modal.js +1 -1
- package/dist/components/va-critical-action.js +1 -1
- package/dist/components/va-date.js +1 -1
- package/dist/components/va-file-input-multiple.js +1 -1
- package/dist/components/va-file-input.js +1 -1
- package/dist/components/va-header-minimal.js +1 -1
- package/dist/components/va-icon.js +1 -1
- package/dist/components/va-language-toggle.js +1 -1
- package/dist/components/va-link-action.js +1 -1
- package/dist/components/va-link.js +1 -1
- package/dist/components/va-loading-indicator.js +1 -1
- package/dist/components/va-maintenance-banner.js +1 -1
- package/dist/components/va-memorable-date.js +1 -1
- package/dist/components/va-minimal-footer.js +1 -1
- package/dist/components/va-modal.js +1 -1
- package/dist/components/va-need-help.js +1 -1
- package/dist/components/va-notification.js +1 -1
- package/dist/components/va-official-gov-banner.js +1 -1
- package/dist/components/va-omb-info.js +1 -1
- package/dist/components/va-on-this-page.js +1 -1
- package/dist/components/va-pagination.js +1 -1
- package/dist/components/va-privacy-agreement.js +1 -1
- package/dist/components/va-process-list-item.js +1 -1
- package/dist/components/va-process-list.js +1 -1
- package/dist/components/va-progress-bar.js +1 -1
- package/dist/components/va-promo-banner.js +1 -1
- package/dist/components/va-radio-option.js +1 -1
- package/dist/components/va-radio.js +1 -1
- package/dist/components/va-search-filter.js +1 -1
- package/dist/components/va-search-input.js +1 -1
- package/dist/components/va-segmented-progress-bar.js +1 -1
- package/dist/components/va-select.js +1 -1
- package/dist/components/va-service-list-item.js +1 -1
- package/dist/components/va-sidenav-item.js +1 -1
- package/dist/components/va-sidenav-submenu.js +1 -1
- package/dist/components/va-sidenav.js +1 -1
- package/dist/components/va-statement-of-truth.js +1 -1
- package/dist/components/va-summary-box.js +1 -1
- package/dist/components/va-tab-item.js +1 -1
- package/dist/components/va-tab-panel.js +1 -1
- package/dist/components/va-table-inner.js +1 -1
- package/dist/components/va-table-row.js +1 -1
- package/dist/components/va-table.js +1 -1
- package/dist/components/va-tabs.js +1 -1
- package/dist/components/va-tag-status.js +1 -1
- package/dist/components/va-telephone-input.js +1 -1
- package/dist/components/va-telephone.js +1 -1
- package/dist/components/va-text-input.js +1 -1
- package/dist/components/va-textarea.js +1 -1
- package/dist/react-bindings/components.d.ts +336 -0
- package/dist/react-bindings/components.js +1 -0
- package/dist/react-bindings/components.js.map +1 -0
- package/dist/react-bindings/components.ts +961 -0
- package/dist/react-bindings/index.d.ts +6 -67
- package/dist/react-bindings/index.js +1 -1
- package/dist/react-bindings/index.js.map +1 -1
- package/dist/react-bindings/index.ts +6 -75
- package/format-date.js +1 -1
- package/format-date.unit.spec.js +1 -1
- package/package.json +3 -2
- package/test-helpers.js +1 -1
- package/utilities.unit.spec.js +1 -1
- package/validations.js +1 -1
- package/dist/components/contacts.js +0 -1
- package/dist/components/date-utils.js +0 -1
- package/dist/components/i18next.js +0 -1
- package/dist/components/utils.js +0 -1
- package/dist/components/va-accordion-item2.js +0 -1
- package/dist/components/va-accordion2.js +0 -1
- package/dist/components/va-alert2.js +0 -1
- package/dist/components/va-button-icon2.js +0 -1
- package/dist/components/va-button2.js +0 -1
- package/dist/components/va-card2.js +0 -1
- package/dist/components/va-checkbox-group2.js +0 -1
- package/dist/components/va-checkbox2.js +0 -1
- package/dist/components/va-combo-box2.js +0 -20
- package/dist/components/va-crisis-line-modal2.js +0 -1
- package/dist/components/va-critical-action2.js +0 -1
- package/dist/components/va-file-input2.js +0 -1
- package/dist/components/va-icon2.js +0 -1
- package/dist/components/va-link2.js +0 -1
- package/dist/components/va-modal2.js +0 -1
- package/dist/components/va-official-gov-banner2.js +0 -1
- package/dist/components/va-progress-bar2.js +0 -1
- package/dist/components/va-select2.js +0 -1
- package/dist/components/va-table-inner2.js +0 -1
- package/dist/components/va-telephone2.js +0 -1
- package/dist/components/va-text-input2.js +0 -1
- package/dist/react-bindings/react-component-lib/createComponent.d.ts +0 -10
- package/dist/react-bindings/react-component-lib/createComponent.js +0 -1
- package/dist/react-bindings/react-component-lib/createComponent.js.map +0 -1
- package/dist/react-bindings/react-component-lib/createComponent.tsx +0 -106
- package/dist/react-bindings/react-component-lib/createOverlayComponent.d.ts +0 -21
- package/dist/react-bindings/react-component-lib/createOverlayComponent.js +0 -1
- package/dist/react-bindings/react-component-lib/createOverlayComponent.js.map +0 -1
- package/dist/react-bindings/react-component-lib/createOverlayComponent.tsx +0 -142
- package/dist/react-bindings/react-component-lib/index.d.ts +0 -2
- package/dist/react-bindings/react-component-lib/index.js +0 -1
- package/dist/react-bindings/react-component-lib/index.js.map +0 -1
- package/dist/react-bindings/react-component-lib/index.ts +0 -2
- package/dist/react-bindings/react-component-lib/interfaces.d.ts +0 -29
- package/dist/react-bindings/react-component-lib/interfaces.js +0 -1
- package/dist/react-bindings/react-component-lib/interfaces.js.map +0 -1
- package/dist/react-bindings/react-component-lib/interfaces.ts +0 -34
- package/dist/react-bindings/react-component-lib/utils/attachProps.d.ts +0 -16
- package/dist/react-bindings/react-component-lib/utils/attachProps.js +0 -2
- package/dist/react-bindings/react-component-lib/utils/attachProps.js.LICENSE.txt +0 -4
- package/dist/react-bindings/react-component-lib/utils/attachProps.js.map +0 -1
- package/dist/react-bindings/react-component-lib/utils/attachProps.ts +0 -125
- package/dist/react-bindings/react-component-lib/utils/case.d.ts +0 -2
- package/dist/react-bindings/react-component-lib/utils/case.js +0 -1
- package/dist/react-bindings/react-component-lib/utils/case.js.map +0 -1
- package/dist/react-bindings/react-component-lib/utils/case.ts +0 -7
- package/dist/react-bindings/react-component-lib/utils/dev.d.ts +0 -2
- package/dist/react-bindings/react-component-lib/utils/dev.js +0 -1
- package/dist/react-bindings/react-component-lib/utils/dev.js.map +0 -1
- package/dist/react-bindings/react-component-lib/utils/dev.ts +0 -14
- package/dist/react-bindings/react-component-lib/utils/index.d.ts +0 -10
- package/dist/react-bindings/react-component-lib/utils/index.js +0 -1
- package/dist/react-bindings/react-component-lib/utils/index.js.map +0 -1
- package/dist/react-bindings/react-component-lib/utils/index.tsx +0 -50
- /package/dist/components/{index2.js.LICENSE.txt → p-a5dce9e6.js.LICENSE.txt} +0 -0
- /package/dist/components/{va-combo-box2.js.LICENSE.txt → p-d20739b4.js.LICENSE.txt} +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{proxyCustomElement,HTMLElement,createEvent,h,Host,Fragment}from"@stencil/core/internal/client";import{i as isMessageSet}from"./utils.js";import{n as normalizeArguments,a as parsePhoneNumber$2,w as withMetadataArgument}from"./parsePhoneNumber_.js";function parsePhoneNumber$1(){var t=normalizeArguments(arguments),e=t.text,n=t.options,o=t.metadata;return parsePhoneNumber$2(e,n,o)}function parsePhoneNumber(){return withMetadataArgument(parsePhoneNumber$1,arguments)}const vaTelephoneCss="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,a.va-sidenav-submenu__link:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px;z-index:2}a{text-decoration:none;color:var(--vads-color-link);-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color}a:hover{background-color:rgba(0, 0, 0, 0.05);color:inherit}a:visited{color:var(--vads-color-link-visited)}.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}:host{font-size:1.06rem}a{white-space:nowrap}a,a:hover{text-decoration:underline}",VaTelephoneStyle0=vaTelephoneCss,VaTelephone=proxyCustomElement(class t extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.contact=void 0,this.extension=void 0,this.notClickable=!1,this.international=!1,this.countryCode=void 0,this.tty=!1,this.sms=!1,this.vanity=void 0,this.messageAriaDescribedby=void 0,this.disableAnalytics=!1}static cleanContact(t){return(t||"").replace(/[^\d]/g,"")}static splitContact(e){const n=t.cleanContact(e);if(10===n.length){const t=[.../^(\d{3})(\d{3})(\d{4})$/g.exec(n)];return 4===t.length?t.slice(-3):[n]}return[n]}static formatPhoneNumber({contact:e,extension:n,international:o=!1,countryCode:i,vanity:a,tty:s=!1}){const r=i?[e]:t.splitContact(e);let c=r.join("");if(10===c.length&&!i){const[t,e,i]=r;c=`${t}-${e}-${i}`,o&&(c=`+1-${c}`),n&&(c=`${c}, ext. ${n}`),a&&(c=4===a.length?`${t}-${e}-${a} (${i})`:`${a} (${c})`)}if(i){let t=null;try{t=parsePhoneNumber(`+${i}${c}`)}catch(t){console.error("Error parsing phone number:",t)}t&&n&&t.setExt(n),c=t?t.formatInternational():c.startsWith("+")?`${c}`:`+${i} ${c}`}return s&&(c=`TTY: ${c}`),c}static createHref({contact:e,extension:n,sms:o,countryCode:i}){const a=t.cleanContact(e),s=3===a.length;let r=null;return r=o?`sms:${a}`:s?`tel:${a}`:i?`tel:+${i}${a}`:`tel:+1${a}`,`${r}${n?`,${n}`:""}`}handleClick(){this.disableAnalytics||this.componentLibraryAnalytics.emit({componentName:"va-telephone",action:"click",details:{contact:this.contact,extension:this.extension}})}render(){const{contact:e,extension:n,notClickable:o,international:i,countryCode:a,tty:s,vanity:r,sms:c,messageAriaDescribedby:l}=this,d=t.formatPhoneNumber({contact:e,extension:n,international:i,countryCode:a,vanity:r,tty:s}),u=t.createHref({contact:e,extension:n,sms:c,countryCode:a}),m=isMessageSet(l),p=m?"number-description":null;return h(Host,{key:"3c24983adac7445f8d52287cc45e2bb807417dba"},o?h(Fragment,null,h("span",{"aria-describedby":p},d)):h("a",{"aria-describedby":p,href:u,onClick:this.handleClick.bind(this)},d),m&&h("span",{key:"519133e9f716d0c56af48239d8ef9b2dc551d572",id:"number-description",class:"sr-only"},l))}static get style(){return VaTelephoneStyle0}},[1,"va-telephone",{contact:[1],extension:[1],notClickable:[4,"not-clickable"],international:[4],countryCode:[1,"country-code"],tty:[4],sms:[4],vanity:[1],messageAriaDescribedby:[1,"message-aria-describedby"],disableAnalytics:[4,"disable-analytics"]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["va-telephone"].forEach((t=>{"va-telephone"===t&&(customElements.get(t)||customElements.define(t,VaTelephone))}))}export{VaTelephone as V,defineCustomElement as d};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{Build,proxyCustomElement,HTMLElement,createEvent,forceUpdate,h,Fragment,Host}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";import"./contacts.js";import{e as debounce,f as getMaxLength,h as getCharacterMessage,c as consoleDevError,i as isMessageSet,u as updateScreenReaderCount,g as getHeaderLevel}from"./utils.js";import{d as defineCustomElement$1}from"./va-icon2.js";import{i as instance}from"./i18next.js";const vaTextInputCss='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,a.va-sidenav-submenu__link:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px;z-index:2}h1{margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:0;margin-top:0;clear:both}*+h1,*+h2,*+h3,*+h4,*+h5,*+h6{margin-top:1.5em}h1+*,h2+*,h3+*,h4+*,h5+*,h6+*{margin-top:1em}h1{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:2.44rem;line-height:1.2;font-weight:700}h2{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.95rem;line-height:1.2;font-weight:700}h3{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.34rem;line-height:1.2;font-weight:700}h4{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:0.98rem;line-height:1.2;font-weight:700}h5{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:0.91rem;line-height:1.2;font-weight:700}h6{font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;font-size:0.87rem;line-height:1.1;font-weight:normal;letter-spacing:0.025em;text-transform:uppercase}h1,h2,h3,h4,h5{font-family:Bitter, Georgia, Cambria, "Times New Roman", Times, serif;font-weight:700}h6{font-family:"Source Sans Pro Web", "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;font-weight:700}h1{margin-top:0;font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.25rem}h4{font-size:1.0625rem}h5{font-size:0.9375rem}h6{font-size:0.9375rem}@media (max-width: 481px){h1{font-size:1.875rem}h2{font-size:1.5rem}}h6{margin:0.5em 0 0;text-transform:none;font-weight:700}@media (max-width: 481px){h1{font-size:1.875rem}h2{font-size:1.5rem}}h6{margin:0.5em 0 0;text-transform:none;font-weight:700}:host legend :is(h1,h2,h3,h4,h5,h6),:host label :is(h1,h2,h3,h4,h5,h6){display:inline;margin:0px}:host legend :is(h1,h2,h3,h4,h5),:host label :is(h1,h2,h3,h4,h5){font-family:var(--font-serif)}:host h1+*,:host h2+*,:host h3+*,:host h4+*,:host h5+*,:host h6+*{margin-top:unset}:host #form-question{margin-bottom:1rem}.usa-hint,.usa-input-group,.usa-input{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}.usa-input-group,.usa-input{border-width:1px;border-color:#565c65;border-style:solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;color:#1b1b1b;display:block;height:2.5rem;margin-top:0.5rem;max-width:30rem;padding:0.5rem;width:100%}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-label{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3;display:block;font-weight:normal;margin-top:1.5rem;max-width:30rem}.usa-label--error{font-weight:700;margin-top:0}.usa-label--required{color:#b50909}.usa-input:disabled,.usa-input[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1;-webkit-text-fill-color:#454545}.usa-input:disabled:hover,.usa-input:disabled:active,.usa-input:disabled:focus,.usa-input:disabled.usa-focus,.usa-input[aria-disabled=true]:hover,.usa-input[aria-disabled=true]:active,.usa-input[aria-disabled=true]:focus,.usa-input[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-input:disabled,.usa-input[aria-disabled=true]{border:0;color:GrayText}.usa-input:disabled:hover,.usa-input:disabled:active,.usa-input:disabled:focus,.usa-input:disabled.usa-focus,.usa-input[aria-disabled=true]:hover,.usa-input[aria-disabled=true]:active,.usa-input[aria-disabled=true]:focus,.usa-input[aria-disabled=true].usa-focus{color:GrayText}}@media (forced-colors: active){.usa-input:disabled,.usa-input[aria-disabled=true]{border:2px solid GrayText}}.usa-input--error{border-width:0.25rem;border-color:#b50909;border-style:solid;padding-top:calc(0.5rem - 0.25rem);padding-bottom:calc(0.5rem - 0.25rem)}.usa-input--success{border-width:0.25rem;border-color:#00a91c;border-style:solid;padding-top:calc(0.5rem - 0.25rem);padding-bottom:calc(0.5rem - 0.25rem)}.usa-input-group{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding:0;position:relative}.usa-input-group--error input:focus,.usa-input-group--success input:focus{outline-offset:0.25rem}.usa-input-group--error{border-width:0.25rem;border-color:#b50909;border-style:solid}.usa-input-group--success{border-width:0.25rem;border-color:#00a91c;border-style:solid}.usa-input-group input{padding-right:2.5rem;border:0;height:100%;margin-top:0;min-width:0;width:100%}.usa-input-group input:disabled+.usa-input-suffix,.usa-input-group input[aria-disabled=true]+.usa-input-suffix{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-input-group input:disabled+.usa-input-suffix:hover,.usa-input-group input:disabled+.usa-input-suffix:active,.usa-input-group input:disabled+.usa-input-suffix:focus,.usa-input-group input:disabled+.usa-input-suffix.usa-focus,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:hover,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:active,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:focus,.usa-input-group input[aria-disabled=true]+.usa-input-suffix.usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-input-group input:disabled+.usa-input-suffix,.usa-input-group input[aria-disabled=true]+.usa-input-suffix{border:0;color:GrayText}.usa-input-group input:disabled+.usa-input-suffix:hover,.usa-input-group input:disabled+.usa-input-suffix:active,.usa-input-group input:disabled+.usa-input-suffix:focus,.usa-input-group input:disabled+.usa-input-suffix.usa-focus,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:hover,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:active,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:focus,.usa-input-group input[aria-disabled=true]+.usa-input-suffix.usa-focus{color:GrayText}}@media (forced-colors: active){.usa-input-group input:disabled,.usa-input-group input[aria-disabled=true]{border:0}}@media (forced-colors: active){.usa-input-group:has(input:disabled),.usa-input-group:has(input[aria-disabled=true]){border:2px solid GrayText}}.usa-input-prefix:has(+input:disabled),.usa-input-prefix:has(+input[aria-disabled=true]){color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-input-prefix:has(+input:disabled):hover,.usa-input-prefix:has(+input:disabled):active,.usa-input-prefix:has(+input:disabled):focus,.usa-input-prefix:has(+input:disabled).usa-focus,.usa-input-prefix:has(+input[aria-disabled=true]):hover,.usa-input-prefix:has(+input[aria-disabled=true]):active,.usa-input-prefix:has(+input[aria-disabled=true]):focus,.usa-input-prefix:has(+input[aria-disabled=true]).usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-input-prefix:has(+input:disabled),.usa-input-prefix:has(+input[aria-disabled=true]){border:0;color:GrayText}.usa-input-prefix:has(+input:disabled):hover,.usa-input-prefix:has(+input:disabled):active,.usa-input-prefix:has(+input:disabled):focus,.usa-input-prefix:has(+input:disabled).usa-focus,.usa-input-prefix:has(+input[aria-disabled=true]):hover,.usa-input-prefix:has(+input[aria-disabled=true]):active,.usa-input-prefix:has(+input[aria-disabled=true]):focus,.usa-input-prefix:has(+input[aria-disabled=true]).usa-focus{color:GrayText}}.usa-input-prefix,.usa-input-suffix{position:absolute;color:#71767a;line-height:0;padding:0 0.5rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.usa-input-prefix .usa-icon,.usa-input-suffix .usa-icon{height:1.5rem;width:1.5rem}.usa-input-prefix+input{padding-left:2.5rem;padding-right:0.5rem}.usa-input-suffix{right:0}.usa-error-message{padding-bottom:0.25rem;padding-top:0.25rem;color:#b50909;display:block;font-weight:700}.usa-hint{color:#71767a}.usa-hint--required{color:#b50909}.usa-character-count__status{display:inline-block;padding-top:0.25rem}.usa-character-count__status.usa-character-count__status--invalid{color:#b50909;font-weight:700}.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: 1024px){: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: 1023px){:host([error]:not([error=""])[use-forms-pattern=multiple]),:host(.va-form-group--error[use-forms-pattern=multiple]){padding-left:0}}:host .usa-input--2xs{max-width:5ex}:host .usa-input--xs{max-width:9ex}:host .usa-input--sm,:host .usa-input--small{max-width:13ex}:host .usa-input--md,:host .usa-input--medium{max-width:20ex}:host .usa-input--lg{max-width:30ex}:host .usa-input--xl{max-width:40ex}:host .usa-input--2xl{max-width:50ex}:host{color:var(--vads-color-base)}:host{display:block;font-family:var(--font-source-sans)}.usa-input-group{-webkit-box-sizing:border-box;box-sizing:border-box}input{-webkit-box-sizing:border-box;box-sizing:border-box}input.usa-input{color:var(--vads-color-base)}.usa-hint{display:block}.currency-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.currency-wrapper>div{position:absolute;left:10px}.currency-wrapper #symbol{margin-top:8px}.currency-wrapper #inputField{padding-left:25px}:host([error]:not([error=""])[show-input-error=false]){border-left:0;padding-left:0;margin-left:0}',VaTextInputStyle0=vaTextInputCss;Build.isTesting&&instance.init({lng:"cimode"});const VaTextInput=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.vaInput=createEvent(this,"vaInput",7),this.allowedInputTypes=["email","number","password","search","tel","text","url"],this.updatePaddingLeft=()=>{if(this.inputIconPrefix)this.paddingLeftValue="2.5rem";else if(this.inputPrefix){const e=this.inputPrefix?Math.min(this.inputPrefix.length,25):null;this.paddingLeftValue=.5*e+1+"rem"}},this.updatePaddingRight=()=>{const e=this.inputSuffix?Math.min(this.inputSuffix.length,25):null;this.paddingRightValue=.5*e+1+"rem"},this.debouncedUpdateScreenReaderCount=debounce(updateScreenReaderCount,1e3),this.handleInput=e=>{const i=e.target;this.value=i.value,this.debouncedUpdateScreenReaderCount(this.charCountElement,this.value,getMaxLength(this.maxlength)),this.vaInput.emit({value:this.value})},this.handleBlur=e=>{if(this.enableAnalytics&&this.componentLibraryAnalytics.emit({componentName:"va-text-input",action:"blur",details:{label:this.label,value:this.value}}),("decimal"===this.inputmode||"numeric"===this.inputmode||this.currency)&&this.value){let i=instance.t("number-error");const t=e.target.checkValidity();this.error||t?this.error&&this.error===i&&t&&(this.error=null,this.el.setAttribute("error","")):(this.error=i,this.el.setAttribute("error",i))}},this.label=void 0,this.error=void 0,this.reflectInputError=!1,this.showInputError=!0,this.invalid=!1,this.required=!1,this.hideRequiredText=!1,this.inputmode=void 0,this.step=void 0,this.type="text",this.maxlength=void 0,this.autocomplete=void 0,this.enableAnalytics=!1,this.name=void 0,this.pattern=void 0,this.hint=void 0,this.messageAriaDescribedby=void 0,this.value=void 0,this.success=!1,this.width=void 0,this.useFormsPattern=void 0,this.formHeadingLevel=3,this.formHeading=void 0,this.charcount=!1,this.currency=!1,this.inputPrefix=void 0,this.inputIconPrefix=void 0,this.inputSuffix=void 0,this.inputIconSuffix=void 0,this.min=void 0,this.max=void 0,this.errorHasPii=!1,this.paddingLeftValue="0",this.paddingRightValue="0"}connectedCallback(){instance.on("languageChanged",(()=>{forceUpdate(this.el)}))}disconnectedCallback(){instance.off("languageChanged")}componentDidRender(){this.charCountElement&&!this.charCountElement.innerText&&(this.charCountElement.innerText=getCharacterMessage(this.value,getMaxLength(this.maxlength)),setTimeout((()=>{this.charCountElement.setAttribute("aria-live","polite")}),0))}componentWillLoad(){this.updatePaddingLeft(),this.updatePaddingRight()}componentDidUpdate(){this.updatePaddingLeft(),this.updatePaddingRight()}getInputType(){return this.allowedInputTypes.includes(this.type)?this.max||this.min?"number":this.type:(consoleDevError(`The input type "${this.type}" is invalid or unsupported!`),"text")}getPattern(){return this.currency?"^[0-9]+(.[0-9]{2})?$":void 0!==this.pattern||"decimal"!==this.inputmode&&"numeric"!==this.inputmode?this.pattern:"[0-9]+(.[0-9]{1,})?"}getInputmode(){return this.currency?"numeric":this.inputmode?this.inputmode:void 0}getStep(){return this.step||"decimal"!==this.inputmode?this.step?this.step:void 0:".01"}render(){const{label:e,error:i,reflectInputError:t,showInputError:a,invalid:s,required:r,hideRequiredText:n,value:u,name:o,autocomplete:p,hint:d,handleInput:l,handleBlur:c,success:m,messageAriaDescribedby:f,width:g,useFormsPattern:b,formHeadingLevel:x,formHeading:v,charcount:y,min:w,max:T,currency:S,inputPrefix:I,inputIconPrefix:C,inputSuffix:P,inputIconSuffix:E,errorHasPii:z=!1}=this,L=this.getInputType(),H=getMaxLength(this.maxlength),R=this.getInputmode(),k=this.getStep(),M=`${f?"input-message":""} ${i?"input-error-message":""} ${y&&H?"charcount-message":""}`.trim()||null,V=`${b&&v?"form-question":""} ${b?"form-description":""} ${b&&e?"input-label":""}`.trim()||null,q=this.getPattern(),_=classnames({"currency-wrapper":S,"usa-input-group":P||I||C||E}),A=(()=>"0"!==this.paddingLeftValue&&I?{paddingLeft:this.paddingLeftValue}:P?{paddingRight:this.paddingRightValue}:{})(),G=H&&(null==u?void 0:u.length)>H,$=classnames({"usa-label":!0,"usa-label--error":i}),F=classnames({"usa-input":!0,"usa-input--success":m,"usa-input--error":i||t,[`usa-input--${g}`]:g}),N=classnames({"usa-hint":!0,"usa-character-count__status":H,"usa-character-count__status--invalid":H&&(null==u?void 0:u.length)>H}),W=classnames({"usa-sr-only":!a}),D=classnames({"usa-error-message":!0,"dd-privacy-hidden":z});let B=null;if("single"===b||"multiple"===b){const e=getHeaderLevel(x);B=h(Fragment,null,v&&h(e,{id:"form-question",part:"form-header"},v),h("div",{id:"form-description"},h("slot",{name:"form-description"})))}return h(Host,null,B,h("div",{class:"input-wrap"},e&&h("label",{htmlFor:"inputField",id:"input-label",class:$,part:"label"},e,r&&!n&&h("span",{class:"usa-label--required"}," ",instance.t("required")),d&&h("span",{class:"usa-hint"},d)),h("slot",null),h("span",{id:"input-error-message",role:"alert",class:W},i&&h(Fragment,null,h("span",{class:"usa-sr-only"},instance.t("error")),h("span",{class:D,"data-dd-action-name":z?"input error":void 0},i))),h("div",{class:_},S&&h("div",{id:"symbol"},"$"),I&&h("div",{class:"usa-input-prefix",part:"input-prefix"},I.substring(0,25)),C&&h("div",{class:"usa-input-prefix",part:"input-prefix"},h("va-icon",{icon:C,size:3,part:"icon"})),h("input",{class:F,id:"inputField",type:L,onInput:l,onBlur:c,"aria-describedby":M,style:A,"aria-labelledby":V,"aria-invalid":s||i||G?"true":"false",inputmode:R,step:k,maxlength:H,pattern:q,name:o,autocomplete:p,required:r||null,part:"input",min:w,max:T,value:u}),P&&h("div",{class:"usa-input-suffix",part:"suffix","aria-hidden":"true"},P.substring(0,25)),E&&h("div",{class:"usa-input-suffix",part:"input-suffix"},h("va-icon",{icon:E,size:3,part:"icon"}))),isMessageSet(f)&&h("span",{id:"input-message",class:"usa-sr-only dd-privacy-hidden"},f),y&&H&&h(Fragment,null,h("span",{"aria-hidden":"true",class:N},getCharacterMessage(this.value,getMaxLength(this.maxlength))),h("span",{id:"charcount-message",class:"usa-sr-only",ref:e=>this.charCountElement=e}))))}get el(){return this}static get style(){return VaTextInputStyle0}},[1,"va-text-input",{label:[1],error:[1537],reflectInputError:[4,"reflect-input-error"],showInputError:[516,"show-input-error"],invalid:[4],required:[4],hideRequiredText:[4,"hide-required-text"],inputmode:[1],step:[1],type:[1],maxlength:[2],autocomplete:[1],enableAnalytics:[4,"enable-analytics"],name:[1],pattern:[1],hint:[1],messageAriaDescribedby:[1,"message-aria-describedby"],value:[1537],success:[4],width:[1],useFormsPattern:[1,"use-forms-pattern"],formHeadingLevel:[2,"form-heading-level"],formHeading:[1,"form-heading"],charcount:[4],currency:[4],inputPrefix:[1,"input-prefix"],inputIconPrefix:[1,"input-icon-prefix"],inputSuffix:[1,"input-suffix"],inputIconSuffix:[1,"input-icon-suffix"],min:[8],max:[8],errorHasPii:[4,"error-has-pii"],paddingLeftValue:[32],paddingRightValue:[32]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["va-text-input","va-icon"].forEach((e=>{switch(e){case"va-text-input":customElements.get(e)||customElements.define(e,VaTextInput);break;case"va-icon":customElements.get(e)||defineCustomElement$1()}}))}export{VaTextInput as V,defineCustomElement as d};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface HTMLStencilElement extends HTMLElement {
|
|
3
|
-
componentOnReady(): Promise<this>;
|
|
4
|
-
}
|
|
5
|
-
interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
|
|
6
|
-
forwardedRef: React.RefObject<ElementType>;
|
|
7
|
-
ref?: React.Ref<any>;
|
|
8
|
-
}
|
|
9
|
-
export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & import("./interfaces").StyleReactProps> & React.RefAttributes<ElementType>>;
|
|
10
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var __extends=this&&this.__extends||function(){var e=function(t,r){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},e(t,r)};return function(t,r){if("function"!=typeof r&&null!==r)throw new TypeError("Class extends value "+String(r)+" is not a constructor or null");function n(){this.constructor=t}e(t,r),t.prototype=null===r?Object.create(r):(n.prototype=r.prototype,new n)}}(),__assign=this&&this.__assign||function(){return __assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},__assign.apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.createReactComponent=void 0;var react_1=__importStar(require("react")),utils_1=require("./utils"),createReactComponent=function(e,t,r,n){void 0!==n&&n();var o=(0,utils_1.dashToPascalCase)(e),i=function(t){function n(e){var r=t.call(this,e)||this;return r.setComponentElRef=function(e){r.componentEl=e},r}return __extends(n,t),n.prototype.componentDidMount=function(){this.componentDidUpdate(this.props)},n.prototype.componentDidUpdate=function(e){(0,utils_1.attachProps)(this.componentEl,this.props,e)},n.prototype.render=function(){var t=this.props,n=t.children,o=t.forwardedRef,i=t.style,s=(t.className,t.ref,__rest(t,["children","forwardedRef","style","className","ref"])),a=Object.keys(s).reduce((function(e,t){var r=s[t];if(0===t.indexOf("on")&&t[2]===t[2].toUpperCase()){var n=t.substring(2).toLowerCase();"undefined"!=typeof document&&(0,utils_1.isCoveredByReact)(n)&&(e[t]=r)}else{var o=typeof r;"string"!==o&&"boolean"!==o&&"number"!==o||(e[(0,utils_1.camelToDashCase)(t)]=r)}return e}),{});r&&(a=r(this.props,a));var c=__assign(__assign({},a),{ref:(0,utils_1.mergeRefs)(o,this.setComponentElRef),style:i});return(0,react_1.createElement)(e,c,n)},Object.defineProperty(n,"displayName",{get:function(){return o},enumerable:!1,configurable:!0}),n}(react_1.default.Component);return t&&(i.contextType=t),(0,utils_1.createForwardRef)(i,o)};exports.createReactComponent=createReactComponent;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"createComponent.js","sourceRoot":"","sources":["createComponent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import React, { createElement } from 'react';
|
|
2
|
-
|
|
3
|
-
import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
|
|
4
|
-
|
|
5
|
-
export interface HTMLStencilElement extends HTMLElement {
|
|
6
|
-
componentOnReady(): Promise<this>;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
|
|
10
|
-
forwardedRef: React.RefObject<ElementType>;
|
|
11
|
-
ref?: React.Ref<any>;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export const createReactComponent = <
|
|
15
|
-
PropType,
|
|
16
|
-
ElementType extends HTMLStencilElement,
|
|
17
|
-
ContextStateType = {},
|
|
18
|
-
ExpandedPropsTypes = {}
|
|
19
|
-
>(
|
|
20
|
-
tagName: string,
|
|
21
|
-
ReactComponentContext?: React.Context<ContextStateType>,
|
|
22
|
-
manipulatePropsFunction?: (
|
|
23
|
-
originalProps: StencilReactInternalProps<ElementType>,
|
|
24
|
-
propsToPass: any
|
|
25
|
-
) => ExpandedPropsTypes,
|
|
26
|
-
defineCustomElement?: () => void
|
|
27
|
-
) => {
|
|
28
|
-
if (defineCustomElement !== undefined) {
|
|
29
|
-
defineCustomElement();
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
const displayName = dashToPascalCase(tagName);
|
|
33
|
-
const ReactComponent = class extends React.Component<StencilReactInternalProps<ElementType>> {
|
|
34
|
-
componentEl!: ElementType;
|
|
35
|
-
|
|
36
|
-
setComponentElRef = (element: ElementType) => {
|
|
37
|
-
this.componentEl = element;
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
constructor(props: StencilReactInternalProps<ElementType>) {
|
|
41
|
-
super(props);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
componentDidMount() {
|
|
45
|
-
this.componentDidUpdate(this.props);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
componentDidUpdate(prevProps: StencilReactInternalProps<ElementType>) {
|
|
49
|
-
attachProps(this.componentEl, this.props, prevProps);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
render() {
|
|
53
|
-
const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
|
|
54
|
-
|
|
55
|
-
let propsToPass = Object.keys(cProps).reduce((acc: any, name) => {
|
|
56
|
-
const value = (cProps as any)[name];
|
|
57
|
-
|
|
58
|
-
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
59
|
-
const eventName = name.substring(2).toLowerCase();
|
|
60
|
-
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
|
|
61
|
-
acc[name] = value;
|
|
62
|
-
}
|
|
63
|
-
} else {
|
|
64
|
-
// we should only render strings, booleans, and numbers as attrs in html.
|
|
65
|
-
// objects, functions, arrays etc get synced via properties on mount.
|
|
66
|
-
const type = typeof value;
|
|
67
|
-
|
|
68
|
-
if (type === 'string' || type === 'boolean' || type === 'number') {
|
|
69
|
-
acc[camelToDashCase(name)] = value;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
return acc;
|
|
73
|
-
}, {} as ExpandedPropsTypes);
|
|
74
|
-
|
|
75
|
-
if (manipulatePropsFunction) {
|
|
76
|
-
propsToPass = manipulatePropsFunction(this.props, propsToPass);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
const newProps: Omit<StencilReactInternalProps<ElementType>, 'forwardedRef'> = {
|
|
80
|
-
...propsToPass,
|
|
81
|
-
ref: mergeRefs(forwardedRef, this.setComponentElRef),
|
|
82
|
-
style,
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* We use createElement here instead of
|
|
87
|
-
* React.createElement to work around a
|
|
88
|
-
* bug in Vite (https://github.com/vitejs/vite/issues/6104).
|
|
89
|
-
* React.createElement causes all elements to be rendered
|
|
90
|
-
* as <tagname> instead of the actual Web Component.
|
|
91
|
-
*/
|
|
92
|
-
return createElement(tagName, newProps, children);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
static get displayName() {
|
|
96
|
-
return displayName;
|
|
97
|
-
}
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
// If context was passed to createReactComponent then conditionally add it to the Component Class
|
|
101
|
-
if (ReactComponentContext) {
|
|
102
|
-
ReactComponent.contextType = ReactComponentContext;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
return createForwardRef<PropType, ElementType>(ReactComponent, displayName);
|
|
106
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { OverlayEventDetail } from './interfaces';
|
|
3
|
-
import { StencilReactForwardedRef } from './utils';
|
|
4
|
-
interface OverlayElement extends HTMLElement {
|
|
5
|
-
present: () => Promise<void>;
|
|
6
|
-
dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
|
|
7
|
-
}
|
|
8
|
-
export interface ReactOverlayProps {
|
|
9
|
-
children?: React.ReactNode;
|
|
10
|
-
isOpen: boolean;
|
|
11
|
-
onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
12
|
-
onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
13
|
-
onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
14
|
-
onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
15
|
-
}
|
|
16
|
-
export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
|
|
17
|
-
create: (options: any) => Promise<OverlayType>;
|
|
18
|
-
}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
|
|
19
|
-
forwardedRef?: StencilReactForwardedRef<OverlayType>;
|
|
20
|
-
}> & React.RefAttributes<OverlayType>>;
|
|
21
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var __extends=this&&this.__extends||function(){var t=function(e,n){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},t(e,n)};return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),__assign=this&&this.__assign||function(){return __assign=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},__assign.apply(this,arguments)},__awaiter=this&&this.__awaiter||function(t,e,n,r){return new(n||(n=Promise))((function(o,s){function i(t){try{l(r.next(t))}catch(t){s(t)}}function a(t){try{l(r.throw(t))}catch(t){s(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(i,a)}l((r=r.apply(t,e||[])).next())}))},__generator=this&&this.__generator||function(t,e){var n,r,o,s,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return s={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function a(a){return function(l){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;s&&(s=0,a[0]&&(i=0)),i;)try{if(n=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,r=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!((o=(o=i.trys).length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(6===a[0]&&i.label<o[1]){i.label=o[1],o=a;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(a);break}o[2]&&i.ops.pop(),i.trys.pop();continue}a=e.call(t,i)}catch(t){a=[6,t],r=0}finally{n=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,l])}}},__rest=this&&this.__rest||function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(t,r[o])&&(n[r[o]]=t[r[o]])}return n},__importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.createOverlayComponent=void 0;var react_1=__importDefault(require("react")),react_dom_1=__importDefault(require("react-dom")),utils_1=require("./utils"),createOverlayComponent=function(t,e,n){(0,utils_1.defineCustomElement)(t,n);var r=(0,utils_1.dashToPascalCase)(t),o="on".concat(r,"DidDismiss"),s="on".concat(r,"DidPresent"),i="on".concat(r,"WillDismiss"),a="on".concat(r,"WillPresent"),l=!1,p=function(t){function n(e){var n=t.call(this,e)||this;return"undefined"!=typeof document&&(n.el=document.createElement("div")),n.handleDismiss=n.handleDismiss.bind(n),n}return __extends(n,t),Object.defineProperty(n,"displayName",{get:function(){return r},enumerable:!1,configurable:!0}),n.prototype.componentDidMount=function(){this.props.isOpen&&this.present()},n.prototype.componentWillUnmount=function(){this.overlay&&this.overlay.dismiss()},n.prototype.handleDismiss=function(t){this.props.onDidDismiss&&this.props.onDidDismiss(t),(0,utils_1.setRef)(this.props.forwardedRef,null)},n.prototype.shouldComponentUpdate=function(t){return this.overlay&&t.isOpen!==this.props.isOpen&&!1===t.isOpen&&(l=!0),!0},n.prototype.componentDidUpdate=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return this.overlay&&(0,utils_1.attachProps)(this.overlay,this.props,t),t.isOpen!==this.props.isOpen&&!0===this.props.isOpen&&this.present(t),this.overlay&&t.isOpen!==this.props.isOpen&&!1===this.props.isOpen?[4,this.overlay.dismiss()]:[3,2];case 1:e.sent(),l=!1,this.forceUpdate(),e.label=2;case 2:return[2]}}))}))},n.prototype.present=function(t){return __awaiter(this,void 0,void 0,(function(){var n,r,l,p,u,c=this;return __generator(this,(function(f){switch(f.label){case 0:return(n=this.props).children,n.isOpen,n.onDidDismiss,n.onDidPresent,n.onWillDismiss,n.onWillPresent,r=__rest(n,["children","isOpen","onDidDismiss","onDidPresent","onWillDismiss","onWillPresent"]),l=__assign(__assign({},r),((u={ref:this.props.forwardedRef})[o]=this.handleDismiss,u[s]=function(t){return c.props.onDidPresent&&c.props.onDidPresent(t)},u[i]=function(t){return c.props.onWillDismiss&&c.props.onWillDismiss(t)},u[a]=function(t){return c.props.onWillPresent&&c.props.onWillPresent(t)},u)),p=this,[4,e.create(__assign(__assign({},l),{component:this.el,componentProps:{}}))];case 1:return p.overlay=f.sent(),(0,utils_1.setRef)(this.props.forwardedRef,this.overlay),(0,utils_1.attachProps)(this.overlay,l,t),[4,this.overlay.present()];case 2:return f.sent(),[2]}}))}))},n.prototype.render=function(){return react_dom_1.default.createPortal(this.props.isOpen||l?this.props.children:null,this.el)},n}(react_1.default.Component);return react_1.default.forwardRef((function(t,e){return react_1.default.createElement(p,__assign({},t,{forwardedRef:e}))}))};exports.createOverlayComponent=createOverlayComponent;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"createOverlayComponent.js","sourceRoot":"","sources":["createOverlayComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,wDAAiC;AAGjC,iCAA+G;AAgBxG,IAAM,sBAAsB,GAAG,UACpC,OAAe,EACf,UAA8D,EAC9D,aAAmB;IAEnB,IAAA,2BAAmB,EAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IAE5C,IAAM,WAAW,GAAG,IAAA,wBAAgB,EAAC,OAAO,CAAC,CAAC;IAC9C,IAAM,mBAAmB,GAAG,YAAK,WAAW,eAAY,CAAC;IACzD,IAAM,mBAAmB,GAAG,YAAK,WAAW,eAAY,CAAC;IACzD,IAAM,oBAAoB,GAAG,YAAK,WAAW,gBAAa,CAAC;IAC3D,IAAM,oBAAoB,GAAG,YAAK,WAAW,gBAAa,CAAC;IAO3D,IAAI,YAAY,GAAG,KAAK,CAAC;IAEzB;QAAsB,2BAAsB;QAI1C,iBAAY,KAAY;YACtB,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;YACb,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;gBACpC,KAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC1C,CAAC;YACD,KAAI,CAAC,aAAa,GAAG,KAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;;QACrD,CAAC;QAED,sBAAW,sBAAW;iBAAtB;gBACE,OAAO,WAAW,CAAC;YACrB,CAAC;;;WAAA;QAED,mCAAiB,GAAjB;YACE,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;gBACtB,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,CAAC;QACH,CAAC;QAED,sCAAoB,GAApB;YACE,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;YACzB,CAAC;QACH,CAAC;QAED,+BAAa,GAAb,UAAc,KAA2C;YACvD,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC5B,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YACjC,CAAC;YACD,IAAA,cAAM,EAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QACxC,CAAC;QAED,uCAAqB,GAArB,UAAsB,SAAgB;YACpC,qDAAqD;YACrD,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,SAAS,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;gBACzF,YAAY,GAAG,IAAI,CAAC;YACtB,CAAC;YAED,OAAO,IAAI,CAAC;QACd,CAAC;QAEK,oCAAkB,GAAxB,UAAyB,SAAgB;;;;;4BACvC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gCACjB,IAAA,mBAAW,EAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;4BACnD,CAAC;4BAED,IAAI,SAAS,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;gCACzE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;4BAC1B,CAAC;iCACG,CAAA,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,KAAK,CAAA,EAArF,wBAAqF;4BACvF,qBAAM,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,EAAA;;4BAA5B,SAA4B,CAAC;4BAC7B,YAAY,GAAG,KAAK,CAAC;4BAErB;;;;+BAIG;4BACH,IAAI,CAAC,WAAW,EAAE,CAAC;;;;;;SAEtB;QAEK,yBAAO,GAAb,UAAc,SAAiB;;;;;;;;4BACvB,KAA4F,IAAI,CAAC,KAAK,EAApG,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,YAAY,kBAAA,EAAE,YAAY,kBAAA,EAAE,aAAa,mBAAA,EAAE,aAAa,mBAAA,EAAK,MAAM,cAAvF,wFAAyF,CAAF,CAAgB;4BACvG,YAAY,yBACb,MAAM,WACT,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,OAC3B,mBAAmB,IAAG,IAAI,CAAC,aAAa,KACxC,mBAAmB,IAAG,UAAC,CAAc,IAAK,OAAA,KAAI,CAAC,KAAK,CAAC,YAAY,IAAI,KAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,EAArD,CAAqD,KAC/F,oBAAoB,IAAG,UAAC,CAAc,IAAK,OAAA,KAAI,CAAC,KAAK,CAAC,aAAa,IAAI,KAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EAAvD,CAAuD,KAClG,oBAAoB,IAAG,UAAC,CAAc,IAAK,OAAA,KAAI,CAAC,KAAK,CAAC,aAAa,IAAI,KAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EAAvD,CAAuD,MACpG,CAAC;4BAEF,KAAA,IAAI,CAAA;4BAAW,qBAAM,UAAU,CAAC,MAAM,uBACjC,YAAY,KACf,SAAS,EAAE,IAAI,CAAC,EAAE,EAClB,cAAc,EAAE,EAAE,IAClB,EAAA;;4BAJF,GAAK,OAAO,GAAG,SAIb,CAAC;4BAEH,IAAA,cAAM,EAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;4BAC9C,IAAA,mBAAW,EAAC,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;4BAEnD,qBAAM,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,EAAA;;4BAA5B,SAA4B,CAAC;;;;;SAC9B;QAED,wBAAM,GAAN;YACE;;;;eAIG;YACH,OAAO,mBAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QACxG,CAAC;QACH,cAAC;IAAD,CAAC,AAhGD,CAAsB,eAAK,CAAC,SAAS,GAgGpC;IAED,OAAO,eAAK,CAAC,UAAU,CAAqB,UAAC,KAAK,EAAE,GAAG;QACrD,OAAO,8BAAC,OAAO,eAAK,KAAK,IAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IACnD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAzHW,QAAA,sBAAsB,0BAyHjC"}
|
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom';
|
|
3
|
-
|
|
4
|
-
import { OverlayEventDetail } from './interfaces';
|
|
5
|
-
import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
|
|
6
|
-
|
|
7
|
-
interface OverlayElement extends HTMLElement {
|
|
8
|
-
present: () => Promise<void>;
|
|
9
|
-
dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export interface ReactOverlayProps {
|
|
13
|
-
children?: React.ReactNode;
|
|
14
|
-
isOpen: boolean;
|
|
15
|
-
onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
16
|
-
onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
17
|
-
onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
18
|
-
onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export const createOverlayComponent = <OverlayComponent extends object, OverlayType extends OverlayElement>(
|
|
22
|
-
tagName: string,
|
|
23
|
-
controller: { create: (options: any) => Promise<OverlayType> },
|
|
24
|
-
customElement?: any
|
|
25
|
-
) => {
|
|
26
|
-
defineCustomElement(tagName, customElement);
|
|
27
|
-
|
|
28
|
-
const displayName = dashToPascalCase(tagName);
|
|
29
|
-
const didDismissEventName = `on${displayName}DidDismiss`;
|
|
30
|
-
const didPresentEventName = `on${displayName}DidPresent`;
|
|
31
|
-
const willDismissEventName = `on${displayName}WillDismiss`;
|
|
32
|
-
const willPresentEventName = `on${displayName}WillPresent`;
|
|
33
|
-
|
|
34
|
-
type Props = OverlayComponent &
|
|
35
|
-
ReactOverlayProps & {
|
|
36
|
-
forwardedRef?: StencilReactForwardedRef<OverlayType>;
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
let isDismissing = false;
|
|
40
|
-
|
|
41
|
-
class Overlay extends React.Component<Props> {
|
|
42
|
-
overlay?: OverlayType;
|
|
43
|
-
el!: HTMLDivElement;
|
|
44
|
-
|
|
45
|
-
constructor(props: Props) {
|
|
46
|
-
super(props);
|
|
47
|
-
if (typeof document !== 'undefined') {
|
|
48
|
-
this.el = document.createElement('div');
|
|
49
|
-
}
|
|
50
|
-
this.handleDismiss = this.handleDismiss.bind(this);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
static get displayName() {
|
|
54
|
-
return displayName;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
componentDidMount() {
|
|
58
|
-
if (this.props.isOpen) {
|
|
59
|
-
this.present();
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
componentWillUnmount() {
|
|
64
|
-
if (this.overlay) {
|
|
65
|
-
this.overlay.dismiss();
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
handleDismiss(event: CustomEvent<OverlayEventDetail<any>>) {
|
|
70
|
-
if (this.props.onDidDismiss) {
|
|
71
|
-
this.props.onDidDismiss(event);
|
|
72
|
-
}
|
|
73
|
-
setRef(this.props.forwardedRef, null);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
shouldComponentUpdate(nextProps: Props) {
|
|
77
|
-
// Check if the overlay component is about to dismiss
|
|
78
|
-
if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
|
|
79
|
-
isDismissing = true;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
return true;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
async componentDidUpdate(prevProps: Props) {
|
|
86
|
-
if (this.overlay) {
|
|
87
|
-
attachProps(this.overlay, this.props, prevProps);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
|
|
91
|
-
this.present(prevProps);
|
|
92
|
-
}
|
|
93
|
-
if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
|
|
94
|
-
await this.overlay.dismiss();
|
|
95
|
-
isDismissing = false;
|
|
96
|
-
|
|
97
|
-
/**
|
|
98
|
-
* Now that the overlay is dismissed
|
|
99
|
-
* we need to render again so that any
|
|
100
|
-
* inner components will be unmounted
|
|
101
|
-
*/
|
|
102
|
-
this.forceUpdate();
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
async present(prevProps?: Props) {
|
|
107
|
-
const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
|
|
108
|
-
const elementProps = {
|
|
109
|
-
...cProps,
|
|
110
|
-
ref: this.props.forwardedRef,
|
|
111
|
-
[didDismissEventName]: this.handleDismiss,
|
|
112
|
-
[didPresentEventName]: (e: CustomEvent) => this.props.onDidPresent && this.props.onDidPresent(e),
|
|
113
|
-
[willDismissEventName]: (e: CustomEvent) => this.props.onWillDismiss && this.props.onWillDismiss(e),
|
|
114
|
-
[willPresentEventName]: (e: CustomEvent) => this.props.onWillPresent && this.props.onWillPresent(e),
|
|
115
|
-
};
|
|
116
|
-
|
|
117
|
-
this.overlay = await controller.create({
|
|
118
|
-
...elementProps,
|
|
119
|
-
component: this.el,
|
|
120
|
-
componentProps: {},
|
|
121
|
-
});
|
|
122
|
-
|
|
123
|
-
setRef(this.props.forwardedRef, this.overlay);
|
|
124
|
-
attachProps(this.overlay, elementProps, prevProps);
|
|
125
|
-
|
|
126
|
-
await this.overlay.present();
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
render() {
|
|
130
|
-
/**
|
|
131
|
-
* Continue to render the component even when
|
|
132
|
-
* overlay is dismissing otherwise component
|
|
133
|
-
* will be hidden before animation is done.
|
|
134
|
-
*/
|
|
135
|
-
return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
return React.forwardRef<OverlayType, Props>((props, ref) => {
|
|
140
|
-
return <Overlay {...props} forwardedRef={ref} />;
|
|
141
|
-
});
|
|
142
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createOverlayComponent=exports.createReactComponent=void 0;var createComponent_1=require("./createComponent");Object.defineProperty(exports,"createReactComponent",{enumerable:!0,get:function(){return createComponent_1.createReactComponent}});var createOverlayComponent_1=require("./createOverlayComponent");Object.defineProperty(exports,"createOverlayComponent",{enumerable:!0,get:function(){return createOverlayComponent_1.createOverlayComponent}});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,qDAAyD;AAAhD,uHAAA,oBAAoB,OAAA;AAC7B,mEAAkE;AAAzD,gIAAA,sBAAsB,OAAA"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
export interface EventEmitter<T = any> {
|
|
2
|
-
emit: (data?: T) => CustomEvent<T>;
|
|
3
|
-
}
|
|
4
|
-
export interface StyleReactProps {
|
|
5
|
-
class?: string;
|
|
6
|
-
className?: string;
|
|
7
|
-
style?: {
|
|
8
|
-
[key: string]: any;
|
|
9
|
-
};
|
|
10
|
-
}
|
|
11
|
-
export interface OverlayEventDetail<T = any> {
|
|
12
|
-
data?: T;
|
|
13
|
-
role?: string;
|
|
14
|
-
}
|
|
15
|
-
export interface OverlayInterface {
|
|
16
|
-
el: HTMLElement;
|
|
17
|
-
animated: boolean;
|
|
18
|
-
keyboardClose: boolean;
|
|
19
|
-
overlayIndex: number;
|
|
20
|
-
presented: boolean;
|
|
21
|
-
enterAnimation?: any;
|
|
22
|
-
leaveAnimation?: any;
|
|
23
|
-
didPresent: EventEmitter<void>;
|
|
24
|
-
willPresent: EventEmitter<void>;
|
|
25
|
-
willDismiss: EventEmitter<OverlayEventDetail>;
|
|
26
|
-
didDismiss: EventEmitter<OverlayEventDetail>;
|
|
27
|
-
present(): Promise<void>;
|
|
28
|
-
dismiss(data?: any, role?: string): Promise<boolean>;
|
|
29
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["interfaces.ts"],"names":[],"mappings":""}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
// General types important to applications using stencil built components
|
|
2
|
-
export interface EventEmitter<T = any> {
|
|
3
|
-
emit: (data?: T) => CustomEvent<T>;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
export interface StyleReactProps {
|
|
7
|
-
class?: string;
|
|
8
|
-
className?: string;
|
|
9
|
-
style?: { [key: string]: any };
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export interface OverlayEventDetail<T = any> {
|
|
13
|
-
data?: T;
|
|
14
|
-
role?: string;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export interface OverlayInterface {
|
|
18
|
-
el: HTMLElement;
|
|
19
|
-
animated: boolean;
|
|
20
|
-
keyboardClose: boolean;
|
|
21
|
-
overlayIndex: number;
|
|
22
|
-
presented: boolean;
|
|
23
|
-
|
|
24
|
-
enterAnimation?: any;
|
|
25
|
-
leaveAnimation?: any;
|
|
26
|
-
|
|
27
|
-
didPresent: EventEmitter<void>;
|
|
28
|
-
willPresent: EventEmitter<void>;
|
|
29
|
-
willDismiss: EventEmitter<OverlayEventDetail>;
|
|
30
|
-
didDismiss: EventEmitter<OverlayEventDetail>;
|
|
31
|
-
|
|
32
|
-
present(): Promise<void>;
|
|
33
|
-
dismiss(data?: any, role?: string): Promise<boolean>;
|
|
34
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
|
|
2
|
-
export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
|
|
3
|
-
/**
|
|
4
|
-
* Transforms a React event name to a browser event name.
|
|
5
|
-
*/
|
|
6
|
-
export declare const transformReactEventName: (eventNameSuffix: string) => string;
|
|
7
|
-
/**
|
|
8
|
-
* Checks if an event is supported in the current execution environment.
|
|
9
|
-
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
|
10
|
-
*/
|
|
11
|
-
export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
|
|
12
|
-
export declare const syncEvent: (node: Element & {
|
|
13
|
-
__events?: {
|
|
14
|
-
[key: string]: ((e: Event) => any) | undefined;
|
|
15
|
-
};
|
|
16
|
-
}, eventName: string, newEventHandler?: (e: Event) => any) => void;
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
/*! For license information please see attachProps.js.LICENSE.txt */
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.syncEvent=exports.isCoveredByReact=exports.transformReactEventName=exports.getClassName=exports.attachProps=void 0;var case_1=require("./case"),attachProps=function(e,t,a){if(void 0===a&&(a={}),e instanceof Element){var r=(0,exports.getClassName)(e.classList,t,a);""!==r&&(e.className=r),Object.keys(t).forEach((function(a){if("children"!==a&&"style"!==a&&"ref"!==a&&"class"!==a&&"className"!==a&&"forwardedRef"!==a)if(0===a.indexOf("on")&&a[2]===a[2].toUpperCase()){var r=a.substring(2),s=r[0].toLowerCase()+r.substring(1);(0,exports.isCoveredByReact)(s)||(0,exports.syncEvent)(e,s,t[a])}else e[a]=t[a],"string"==typeof t[a]&&e.setAttribute((0,case_1.camelToDashCase)(a),t[a])}))}};exports.attachProps=attachProps;var getClassName=function(e,t,a){var r=t.className||t.class,s=a.className||a.class,n=arrayToMap(e),o=arrayToMap(r?r.split(" "):[]),c=arrayToMap(s?s.split(" "):[]),i=[];return n.forEach((function(e){o.has(e)?(i.push(e),o.delete(e)):c.has(e)||i.push(e)})),o.forEach((function(e){return i.push(e)})),i.join(" ")};exports.getClassName=getClassName;var transformReactEventName=function(e){return"doubleclick"===e?"dblclick":e};exports.transformReactEventName=transformReactEventName;var isCoveredByReact=function(e){if("undefined"==typeof document)return!0;var t="on"+(0,exports.transformReactEventName)(e),a=t in document;if(!a){var r=document.createElement("div");r.setAttribute(t,"return;"),a="function"==typeof r[t]}return a};exports.isCoveredByReact=isCoveredByReact;var syncEvent=function(e,t,a){var r=e.__events||(e.__events={}),s=r[t];s&&e.removeEventListener(t,s),e.addEventListener(t,r[t]=function(e){a&&a.call(this,e)})};exports.syncEvent=syncEvent;var arrayToMap=function(e){var t=new Map;return e.forEach((function(e){return t.set(e,e)})),t};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"attachProps.js","sourceRoot":"","sources":["attachProps.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
import { camelToDashCase } from './case';
|
|
2
|
-
|
|
3
|
-
export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {
|
|
4
|
-
// some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
|
|
5
|
-
if (node instanceof Element) {
|
|
6
|
-
// add any classes in className to the class list
|
|
7
|
-
const className = getClassName(node.classList, newProps, oldProps);
|
|
8
|
-
if (className !== '') {
|
|
9
|
-
node.className = className;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
Object.keys(newProps).forEach((name) => {
|
|
13
|
-
if (
|
|
14
|
-
name === 'children' ||
|
|
15
|
-
name === 'style' ||
|
|
16
|
-
name === 'ref' ||
|
|
17
|
-
name === 'class' ||
|
|
18
|
-
name === 'className' ||
|
|
19
|
-
name === 'forwardedRef'
|
|
20
|
-
) {
|
|
21
|
-
return;
|
|
22
|
-
}
|
|
23
|
-
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
24
|
-
const eventName = name.substring(2);
|
|
25
|
-
const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
|
|
26
|
-
|
|
27
|
-
if (!isCoveredByReact(eventNameLc)) {
|
|
28
|
-
syncEvent(node, eventNameLc, newProps[name]);
|
|
29
|
-
}
|
|
30
|
-
} else {
|
|
31
|
-
(node as any)[name] = newProps[name];
|
|
32
|
-
const propType = typeof newProps[name];
|
|
33
|
-
if (propType === 'string') {
|
|
34
|
-
node.setAttribute(camelToDashCase(name), newProps[name]);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: any) => {
|
|
42
|
-
const newClassProp: string = newProps.className || newProps.class;
|
|
43
|
-
const oldClassProp: string = oldProps.className || oldProps.class;
|
|
44
|
-
// map the classes to Maps for performance
|
|
45
|
-
const currentClasses = arrayToMap(classList);
|
|
46
|
-
const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
|
|
47
|
-
const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
|
|
48
|
-
const finalClassNames: string[] = [];
|
|
49
|
-
// loop through each of the current classes on the component
|
|
50
|
-
// to see if it should be a part of the classNames added
|
|
51
|
-
currentClasses.forEach((currentClass) => {
|
|
52
|
-
if (incomingPropClasses.has(currentClass)) {
|
|
53
|
-
// add it as its already included in classnames coming in from newProps
|
|
54
|
-
finalClassNames.push(currentClass);
|
|
55
|
-
incomingPropClasses.delete(currentClass);
|
|
56
|
-
} else if (!oldPropClasses.has(currentClass)) {
|
|
57
|
-
// add it as it has NOT been removed by user
|
|
58
|
-
finalClassNames.push(currentClass);
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
incomingPropClasses.forEach((s) => finalClassNames.push(s));
|
|
62
|
-
return finalClassNames.join(' ');
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* Transforms a React event name to a browser event name.
|
|
67
|
-
*/
|
|
68
|
-
export const transformReactEventName = (eventNameSuffix: string) => {
|
|
69
|
-
switch (eventNameSuffix) {
|
|
70
|
-
case 'doubleclick':
|
|
71
|
-
return 'dblclick';
|
|
72
|
-
}
|
|
73
|
-
return eventNameSuffix;
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* Checks if an event is supported in the current execution environment.
|
|
78
|
-
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
|
79
|
-
*/
|
|
80
|
-
export const isCoveredByReact = (eventNameSuffix: string) => {
|
|
81
|
-
if (typeof document === 'undefined') {
|
|
82
|
-
return true;
|
|
83
|
-
} else {
|
|
84
|
-
const eventName = 'on' + transformReactEventName(eventNameSuffix);
|
|
85
|
-
let isSupported = eventName in document;
|
|
86
|
-
|
|
87
|
-
if (!isSupported) {
|
|
88
|
-
const element = document.createElement('div');
|
|
89
|
-
element.setAttribute(eventName, 'return;');
|
|
90
|
-
isSupported = typeof (element as any)[eventName] === 'function';
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
return isSupported;
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
export const syncEvent = (
|
|
98
|
-
node: Element & { __events?: { [key: string]: ((e: Event) => any) | undefined } },
|
|
99
|
-
eventName: string,
|
|
100
|
-
newEventHandler?: (e: Event) => any
|
|
101
|
-
) => {
|
|
102
|
-
const eventStore = node.__events || (node.__events = {});
|
|
103
|
-
const oldEventHandler = eventStore[eventName];
|
|
104
|
-
|
|
105
|
-
// Remove old listener so they don't double up.
|
|
106
|
-
if (oldEventHandler) {
|
|
107
|
-
node.removeEventListener(eventName, oldEventHandler);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
// Bind new listener.
|
|
111
|
-
node.addEventListener(
|
|
112
|
-
eventName,
|
|
113
|
-
(eventStore[eventName] = function handler(e: Event) {
|
|
114
|
-
if (newEventHandler) {
|
|
115
|
-
newEventHandler.call(this, e);
|
|
116
|
-
}
|
|
117
|
-
})
|
|
118
|
-
);
|
|
119
|
-
};
|
|
120
|
-
|
|
121
|
-
const arrayToMap = (arr: string[] | DOMTokenList) => {
|
|
122
|
-
const map = new Map<string, string>();
|
|
123
|
-
(arr as string[]).forEach((s: string) => map.set(s, s));
|
|
124
|
-
return map;
|
|
125
|
-
};
|