@momentum-ui/web-components 2.14.24 → 2.14.26

package/dist/chunks/md-80.js

@@ -1,4 +1,4 @@
-(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[80],{128:function(t,e,o){"use strict";o.r(e),o.d(e,"PhoneInput",(function(){return i}));o(55),o(29);var i,r=o(5),n=o(6),a=o(84),l=o(85),d=o(69),p=o(0),s=o(2),h=o(86),c=p.css`.md-phone-input__container{--combo-box-contaier-width:100px;display:flex;position:relative}.md-phone-input__container span.flag-box{align-items:center;border:1px solid var(--input-default-border-color,#ccc);border-bottom-left-radius:.25rem;border-right:none;border-top-left-radius:.25rem;display:flex;height:2.125rem;justify-content:center;position:relative;width:2.25rem}.md-phone-input__container span.flag-box .flag-svg-wrapper{justify-content:center}.md-phone-input__container .flag-svg-wrapper{align-items:center;display:flex;width:2rem}.md-phone-input__container .flag-svg-wrapper img{max-height:.7rem}.md-phone-input__container md-combobox{width:var(--combo-box-contaier-width)}.md-phone-input__container md-combobox::part(combobox){position:initial}.md-phone-input__container md-combobox::part(group){border-bottom-right-radius:0;border-right-width:0;border-top-right-radius:0}.md-phone-input__container md-combobox::part(multiwrap){overflow-x:hidden}.md-phone-input__container md-combobox::part(multiwrap-input){padding-left:0;padding-right:0;width:100%}.md-phone-input__container md-combobox::part(combobox-options){top:2.5rem}.md-phone-input__container md-combobox::part(label){width:100%}.md-phone-input__container md-input::part(input){border-bottom-left-radius:0;border-top-left-radius:0;padding-right:2.125rem}.md-phone-input__container md-input::part(message){margin-left:calc(var(--combo-box-contaier-width)*-1);width:calc(100% + var(--combo-box-contaier-width))}.md-phone-input__container .md-phone-input__option{align-items:center;display:flex;justify-content:start}.md-phone-input__container .md-phone-input__option :nth-child(3){margin-left:1rem}.md-phone-input__container md-input[disabled]::part(input){background:var(--phone-input-disabled-bg-color);border:1px solid var(--phone-input-default-border-color);color:var(--md-disabled-text-color)}.md-phone-input__container md-input[disabled]::part(input)::placeholder{border:none}`,u=function(t,e,o,i){var r,n=arguments.length,a=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(a=(n<3?r(a):n>3?r(e,o,a):r(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};!function(t){let e=class extends p.LitElement{constructor(){super(...arguments),this.codePlaceholder="+1",this.numberPlaceholder="Enter Phone Number",this.countryCallingCode="",this.showFlags=!1,this.pill=!1,this.disabled=!1,this.value="",this.errorMessage="",this.showErrorMessage=!1,this.clearIconHeight="auto",this.countryCodeAriaLabel="",this.dialNumberAriaLabel="",this.clearAriaLabel="Clear Input",this.clearCountryCodeAriaLabel="Clear Country Code",this.id="",this.countryCode="US",this.codeList=[],this.formattedValue="",this.isValid=!0}connectedCallback(){super.connectedCallback(),this.codeList=Object(a.customArray)({name:"{countryNameEn}",value:"{countryCallingCode}",code:"{countryCode}"}),""===this.id&&(this.id="md-phone-input-"+Math.random().toString(36).substr(2,4)),this.validateInput(this.value)}getCountryFlag(t){return p.html`
+(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[80],{128:function(t,e,o){"use strict";o.r(e),o.d(e,"PhoneInput",(function(){return i}));o(55),o(29);var i,r=o(5),n=o(6),a=o(84),l=o(85),d=o(69),p=o(0),s=o(2),h=o(4),c=o(86),u=p.css`.md-phone-input__container{--combo-box-contaier-width:100px;display:flex;position:relative}.md-phone-input__container span.flag-box{align-items:center;border:1px solid var(--input-default-border-color,#ccc);border-bottom-left-radius:.25rem;border-top-left-radius:.25rem;border-right:none;display:flex;height:2.125rem;justify-content:center;position:relative;width:2.25rem}.md-phone-input__container span.flag-box.new-momentum{border:1px solid var(--input-default-new-border-color,#ccc);height:2rem;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;border-right:none}.md-phone-input__container span.flag-box .flag-svg-wrapper{justify-content:center}.md-phone-input__container .flag-svg-wrapper{align-items:center;display:flex;width:2rem}.md-phone-input__container .flag-svg-wrapper img{max-height:.7rem}.md-phone-input__container md-combobox{width:var(--combo-box-contaier-width)}.md-phone-input__container md-combobox::part(combobox){position:initial}.md-phone-input__container md-combobox::part(group){border-bottom-right-radius:0;border-right-width:0;border-top-right-radius:0}.md-phone-input__container md-combobox::part(multiwrap){overflow-x:hidden}.md-phone-input__container md-combobox::part(multiwrap-input){padding-left:0;padding-right:0;width:100%}.md-phone-input__container md-combobox::part(combobox-options){top:2.5rem}.md-phone-input__container md-combobox::part(label){width:100%}.md-phone-input__container md-input::part(input){border-bottom-left-radius:0;border-top-left-radius:0;padding-right:2.125rem}.md-phone-input__container md-input::part(message){margin-left:calc(var(--combo-box-contaier-width)*-1);width:calc(100% + var(--combo-box-contaier-width))}.md-phone-input__container .md-phone-input__option{align-items:center;display:flex;justify-content:start}.md-phone-input__container .md-phone-input__option :nth-child(3){margin-left:1rem}.md-phone-input__container md-input[disabled]::part(input){background:var(--phone-input-disabled-bg-color);border:1px solid var(--phone-input-default-border-color);color:var(--md-disabled-text-color)}.md-phone-input__container md-input[disabled]::part(input)::placeholder{border:none}`,m=function(t,e,o,i){var r,n=arguments.length,a=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(a=(n<3?r(a):n>3?r(e,o,a):r(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};!function(t){let e=class extends p.LitElement{constructor(){super(...arguments),this.codePlaceholder="+1",this.numberPlaceholder="Enter Phone Number",this.countryCallingCode="",this.showFlags=!1,this.pill=!1,this.disabled=!1,this.value="",this.errorMessage="",this.showErrorMessage=!1,this.clearIconHeight="auto",this.countryCodeAriaLabel="",this.dialNumberAriaLabel="",this.clearAriaLabel="Clear Input",this.clearCountryCodeAriaLabel="Clear Country Code",this.id="",this.newMomentum=!1,this.countryCode="US",this.codeList=[],this.formattedValue="",this.isValid=!0}connectedCallback(){super.connectedCallback(),this.codeList=Object(a.customArray)({name:"{countryNameEn}",value:"{countryCallingCode}",code:"{countryCode}"}),""===this.id&&(this.id="md-phone-input-"+Math.random().toString(36).substr(2,4)),this.validateInput(this.value)}getCountryFlag(t){return p.html`
         <span class="flag-svg-wrapper">
           <img src="${Object(l.findFlagUrlByIso2Code)(t)}" />
         </span>
@@ -14,7 +14,7 @@
           <span>${t.name}</span>
           <span>+${t.value}</span>
         </div>
-      `}validateNumber(){this.isValid=!this.value||Object(d.isValidNumberForRegion)(this.value,this.countryCode)}handleCountryChange(t){var e,o;t.detail.value&&(null===(e=t.detail.value)||void 0===e?void 0:e.id)?(this.countryCallingCode=t.detail.value.id,this.countryCode=null===(o=t.detail.value.id.split(",")[2])||void 0===o?void 0:o.trim()):(this.countryCode="US",this.countryCallingCode=""),this.validateNumber(),this.dispatchEvent(new CustomEvent("countrycode-change",{bubbles:!0,composed:!0,detail:{srcEvent:t,isValid:this.isValid}}))}handlePhoneChange(t){this.value=t.detail.value,t.stopPropagation(),this.dispatchEvent(new CustomEvent("phoneinput-change",{bubbles:!0,composed:!0,detail:{srcEvent:t,value:`${this.countryCallingCode}${this.value}`,isValid:this.isValid,phoneNumber:this.value}}))}handleKeydown(t){this.isValid=!0,t.stopPropagation(),this.dispatchEvent(new CustomEvent("phoneinput-keydown",{bubbles:!0,composed:!0,detail:{srcEvent:t,value:`${this.countryCallingCode}${this.value}`,isValid:this.isValid,phoneNumber:this.value}}))}handleBlur(t){this.validateInput(this.value),this.validateNumber(),t.stopPropagation(),this.removeCountryCode(),this.dispatchEvent(new CustomEvent("phoneinput-blur",{bubbles:!0,composed:!0,detail:{srcEvent:t,value:`${this.countryCallingCode}${this.value}`,isValid:this.isValid,phoneNumber:this.value}}))}removeCountryCode(){var t;const e=null===(t=this.countryCallingCode.split(",")[0])||void 0===t?void 0:t.trim();if(this.value.startsWith(e)){const t=this.value.slice(e.length).replace(/^-/,"");this.value=t}}validateInput(t){this.formattedValue=new d.AsYouType(this.countryCode).input(t)}getFormatedCountryCallingCode(){var t;return{id:this.countryCallingCode,value:null===(t=this.countryCallingCode.split(",")[0])||void 0===t?void 0:t.trim()}}getModStyle(){return p.html`
+      `}validateNumber(){this.isValid=!this.value||Object(d.isValidNumberForRegion)(this.value,this.countryCode)}handleCountryChange(t){var e,o;t.detail.value&&(null===(e=t.detail.value)||void 0===e?void 0:e.id)?(this.countryCallingCode=t.detail.value.id,this.countryCode=null===(o=t.detail.value.id.split(",")[2])||void 0===o?void 0:o.trim()):(this.countryCode="US",this.countryCallingCode=""),this.validateNumber(),this.dispatchEvent(new CustomEvent("countrycode-change",{bubbles:!0,composed:!0,detail:{srcEvent:t,isValid:this.isValid}}))}handlePhoneChange(t){this.value=t.detail.value,t.stopPropagation(),this.dispatchEvent(new CustomEvent("phoneinput-change",{bubbles:!0,composed:!0,detail:{srcEvent:t,value:`${this.countryCallingCode}${this.value}`,isValid:this.isValid,phoneNumber:this.value}}))}handleKeydown(t){this.isValid=!0,t.stopPropagation(),this.dispatchEvent(new CustomEvent("phoneinput-keydown",{bubbles:!0,composed:!0,detail:{srcEvent:t,value:`${this.countryCallingCode}${this.value}`,isValid:this.isValid,phoneNumber:this.value}}))}handleBlur(t){this.validateInput(this.value),this.validateNumber(),t.stopPropagation(),this.removeCountryCode(),this.dispatchEvent(new CustomEvent("phoneinput-blur",{bubbles:!0,composed:!0,detail:{srcEvent:t,value:`${this.countryCallingCode}${this.value}`,isValid:this.isValid,phoneNumber:this.value}}))}removeCountryCode(){var t;const e=null===(t=this.countryCallingCode.split(",")[0])||void 0===t?void 0:t.trim();if(this.value.startsWith(e)){const t=this.value.slice(e.length).replace(/^-/,"");this.value=t}}validateInput(t){this.formattedValue=new d.AsYouType(this.countryCode).input(t)}get flagClassMap(){return{"new-momentum":this.newMomentum}}getFormatedCountryCallingCode(){var t;return{id:this.countryCallingCode,value:null===(t=this.countryCallingCode.split(",")[0])||void 0===t?void 0:t.trim()}}getModStyle(){return p.html`
         <style>
           .md-phone-input__container md-combobox {
             width: 5.625rem;
@@ -27,10 +27,12 @@
             padding-left: 0;
           }
         </style>
-      `}static get styles(){return[n.a,c]}render(){return p.html`
+      `}static get styles(){return[n.a,u]}render(){return p.html`
         ${this.showFlags?this.getModStyle():s.nothing}
         <div class="md-phone-input__container">
-          ${this.showFlags?p.html` <span class="flag-box">${this.getCountryFlag(this.countryCode)}</span> `:s.nothing}
+          ${this.showFlags?p.html`
+                <span class="flag-box ${Object(h.classMap)(this.flagClassMap)}">${this.getCountryFlag(this.countryCode)}</span>
+              `:s.nothing}
           <md-combobox
             part="combobox"
             ?disabled=${this.disabled}
@@ -41,9 +43,11 @@
             @change-selected="${t=>this.handleCountryChange(t)}"
             clear-icon-height="${this.clearIconHeight}"
             with-custom-content
+            ?newMomentum=${this.newMomentum}
+            is-dropdown-arrow
             .clearAriaLabel="${this.clearCountryCodeAriaLabel}"
           >
-            ${Object(h.repeat)(this.codeList,t=>t.name,(t,e)=>this.countryCodeOptionTemplate(t,e))}
+            ${Object(c.repeat)(this.codeList,t=>t.name,(t,e)=>this.countryCodeOptionTemplate(t,e))}
           </md-combobox>
           <md-input
             part="md-input"
@@ -57,10 +61,11 @@
             shape="${this.pill?"pill":"none"}"
             .ariaControls=${this.id}
             clear
+            ?newMomentum=${this.newMomentum}
             clearAriaLabel="${this.clearAriaLabel}"
             type="tel"
             value="${this.formattedValue}"
             .messageArr="${!this.isValid||this.showErrorMessage?[{type:"error",id:this.id,ariaLive:"polite",message:this.errorMessage}]:[]}"
           ></md-input>
         </div>
-      `}};u([Object(p.property)({type:String,reflect:!0})],e.prototype,"codePlaceholder",void 0),u([Object(p.property)({type:String})],e.prototype,"numberPlaceholder",void 0),u([Object(p.property)({type:String,attribute:"country-calling-code"})],e.prototype,"countryCallingCode",void 0),u([Object(p.property)({type:Boolean,attribute:"show-flags"})],e.prototype,"showFlags",void 0),u([Object(p.property)({type:Boolean})],e.prototype,"pill",void 0),u([Object(p.property)({type:Boolean})],e.prototype,"disabled",void 0),u([Object(p.property)({type:String})],e.prototype,"value",void 0),u([Object(p.property)({type:String})],e.prototype,"errorMessage",void 0),u([Object(p.property)({type:Boolean})],e.prototype,"showErrorMessage",void 0),u([Object(p.property)({type:String,attribute:"clear-icon-height"})],e.prototype,"clearIconHeight",void 0),u([Object(p.property)({type:String})],e.prototype,"countryCodeAriaLabel",void 0),u([Object(p.property)({type:String})],e.prototype,"dialNumberAriaLabel",void 0),u([Object(p.property)({type:String})],e.prototype,"clearAriaLabel",void 0),u([Object(p.property)({type:String})],e.prototype,"clearCountryCodeAriaLabel",void 0),u([Object(p.property)({type:String})],e.prototype,"id",void 0),u([Object(p.internalProperty)()],e.prototype,"countryCode",void 0),u([Object(p.internalProperty)()],e.prototype,"codeList",void 0),u([Object(p.internalProperty)()],e.prototype,"formattedValue",void 0),u([Object(p.internalProperty)()],e.prototype,"isValid",void 0),u([Object(p.query)("md-combobox")],e.prototype,"combobox",void 0),e=u([Object(r.a)("md-phone-input")],e),t.ELEMENT=e}(i||(i={}))}}]);
+      `}};m([Object(p.property)({type:String,reflect:!0})],e.prototype,"codePlaceholder",void 0),m([Object(p.property)({type:String})],e.prototype,"numberPlaceholder",void 0),m([Object(p.property)({type:String,attribute:"country-calling-code"})],e.prototype,"countryCallingCode",void 0),m([Object(p.property)({type:Boolean,attribute:"show-flags"})],e.prototype,"showFlags",void 0),m([Object(p.property)({type:Boolean})],e.prototype,"pill",void 0),m([Object(p.property)({type:Boolean})],e.prototype,"disabled",void 0),m([Object(p.property)({type:String})],e.prototype,"value",void 0),m([Object(p.property)({type:String})],e.prototype,"errorMessage",void 0),m([Object(p.property)({type:Boolean})],e.prototype,"showErrorMessage",void 0),m([Object(p.property)({type:String,attribute:"clear-icon-height"})],e.prototype,"clearIconHeight",void 0),m([Object(p.property)({type:String})],e.prototype,"countryCodeAriaLabel",void 0),m([Object(p.property)({type:String})],e.prototype,"dialNumberAriaLabel",void 0),m([Object(p.property)({type:String})],e.prototype,"clearAriaLabel",void 0),m([Object(p.property)({type:String})],e.prototype,"clearCountryCodeAriaLabel",void 0),m([Object(p.property)({type:String})],e.prototype,"id",void 0),m([Object(p.property)({type:Boolean})],e.prototype,"newMomentum",void 0),m([Object(p.internalProperty)()],e.prototype,"countryCode",void 0),m([Object(p.internalProperty)()],e.prototype,"codeList",void 0),m([Object(p.internalProperty)()],e.prototype,"formattedValue",void 0),m([Object(p.internalProperty)()],e.prototype,"isValid",void 0),m([Object(p.query)("md-combobox")],e.prototype,"combobox",void 0),e=m([Object(r.a)("md-phone-input")],e),t.ELEMENT=e}(i||(i={}))}}]);