@momentum-ui/web-components 2.14.25 → 2.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/md-18.js +16 -16
- package/dist/chunks/md-30.js +30 -33
- package/dist/chunks/md-70.js +29 -33
- package/dist/chunks/md-80.js +11 -6
- package/dist/chunks/md-89.js +1 -1
- package/dist/index-entry.js +1 -1
- package/dist/index.js +1 -1
- package/dist/types/components/combobox/ComboBox.d.ts +4 -1
- package/dist/types/components/grabber/Grabber.d.ts +1 -1
- package/dist/types/components/phone-input/PhoneInput.d.ts +4 -0
- package/package.json +1 -1
package/dist/chunks/md-70.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[70],{122:function(e,o,t){"use strict";t.r(o),t.d(o,"Dropdown",(function(){return g}));t(14);var r=t(1),i=t(7),d=t(6),s=t(0),n=t(2),a=t(12),l=t(3),p=t(13),c=t(16),h=t(8),u=s.css`:host(:focus){box-shadow:none!important;outline:0!important}:host .md-dropdown{display:flex;flex-direction:column;position:relative}:host .md-dropdown-select{display:none}:host .md-dropdown-label{align-content:center;align-items:center;display:flex;flex-flow:row nowrap;justify-content:center;background-color:var(--md-primary-bg-color);border:1px solid var(--dropdown-border-color,var(--md-secondary-seperator-color));border-radius:var(--dropdown-group-radius,.25rem);min-height:2rem;padding:0 .75rem}:host .md-dropdown-label--text{align-content:center;align-items:center;display:flex;flex-flow:row nowrap;justify-content:flex-start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--md-secondary-text-color);line-height:2rem;outline:0;width:6.25rem;flex:1 0 auto}:host .md-dropdown-label--icon{transition:all .15s linear;align-self:center;background:rgba(0,0,0,0);border:0;cursor:pointer;margin:0;margin-left:calc(.25rem*2);outline:0;padding:0;padding-top:calc(.25rem/2);position:relative;vertical-align:bottom;height:inherit;display:flex}:host .md-dropdown-label--icon md-icon{color:var(--md-primary-text-color,#f7f7f7)}:host .md-dropdown-label:hover{background-color:var(--dropdown-bg-color-hover,#dedede)}:host .md-dropdown-label:active{background-color:var(--dropdown-bg-color-active,#ccc)}:host .md-dropdown-list{list-style:none;margin:0;padding:0;display:none;background-color:var(--md-primary-bg-color);border:1px solid var(--dropdown-list-border-color);border-radius:.5rem;box-shadow:0 4px 8px rgba(0,0,0,.16),0 0 1px rgba(0,0,0,.16);left:0;overflow:auto;overflow-x:hidden;position:absolute;top:calc(100% + .25rem);width:100%;z-index:99;padding:calc(var(--dropdown-list-padding)/16*1rem);font-size:var(--body-primary-font-size,inherit)}:host .md-dropdown-option{align-content:center;align-items:center;display:flex;flex-flow:row nowrap;justify-content:flex-start;color:var(--md-primary-text-color,#f7f7f7);padding:.4375rem .75rem .5rem;border-radius:calc(var(--dropdown-list-item-border-radius)/16*1rem);height:calc(var(--dropdown-list-item-height)/16*1rem)}:host .md-dropdown-option .select-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;width:calc(100% - 1rem);display:block}:host .md-dropdown-option:hover{background-color:var(--dropdown-list-item-bg-color-hover,#91ebff)}:host .md-dropdown-option[focused]{background-color:var(--dropdown-list-item-bg-color-hover,#91ebff);box-shadow:none;outline:0;box-shadow:0 0 0 .09375rem var(--dropdown-list-item-border-focus)}:host .md-dropdown-option[selected]{background-color:var(--dropdown-list-item-bg-color-focus,#00a0d1);box-shadow:none;outline:0;box-shadow:0 0 0 .09375rem var(--dropdown-list-item-border-focus)}:host .md-dropdown__expanded .md-dropdown-list{display:block}:host .md-dropdown__expanded .md-dropdown-label--icon{transform:rotate(180deg)}:host .md-dropdown__expanded .md-dropdown-button.arrow-down{transform:rotate(180deg)}:host .md-dropdown--pill .group,:host .md-dropdown--pill .md-dropdown-label{border-radius:18px}:host .md-dropdown .group{align-items:start;background-color:var(--md-primary-bg-color);border:1px solid var(--dropdown-border-color,var(--md-secondary-seperator-color));border-radius:var(--dropdown-group-radius,.25rem);display:flex;min-height:2rem;padding:0 .75rem;height:2.125rem}:host .md-dropdown .group md-icon{color:var(--md-primary-text-color,#545454);cursor:pointer;fill:var(--md-secondary-text-color,#545454);height:100%}:host .md-dropdown .group md-icon:focus{box-shadow:none;outline:0;box-shadow:0 0 0 .125rem var(--md-focus-border-color,#545454)}:host .md-dropdown .group:hover{background-color:var(--dropdown-bg-color-hover,#dedede)}:host .md-dropdown .group:active{background-color:var(--dropdown-bg-color-active,#ccc)}:host .md-dropdown .group input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(0,0,0,0);border:0;color:var(--md-primary-text-color);display:inline-block;flex:1 1 auto;height:2rem;outline:0}:host .md-dropdown .group ::input-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;width:100%}:host .md-dropdown .group .md-dropdown-left-icon{margin-right:.25rem}:host .md-dropdown .md-dropdown-button[disabled] md-icon{color:var(--md-disabled-text-color,#b2b2b2)}:host .md-dropdown .md-dropdown-input[readonly]{pointer-events:none}:host .md-dropdown.md-error .group,:host .md-dropdown.md-error .group:active{border-color:var(--input-error-border-color)!important}:host .md-dropdown.md-warning .group,:host .md-dropdown.md-warning .group:active{border-color:var(--input-warning-border-color)!important}:host .md-dropdown.md-success .group,:host .md-dropdown.md-success .group:active{border-color:var(--input-success-border-color)!important}:host .help-text,:host .md-dropbox__messages{padding-top:.375rem}:host .group[readonly]{border-color:var(--dropdown-bg-color-disabled)!important}:host .group[readonly] md-icon{color:var(--dropdown-bg-color-disabled)!important}:host .md-dropdown-button{transition:all .15s linear;align-self:center;background:rgba(0,0,0,0);border:0;cursor:pointer;margin:0;margin-left:calc(.25rem*2);outline:0;padding:0;padding-top:calc(.25rem*1.5);position:relative;vertical-align:bottom;height:inherit;display:flex;align-items:center}:host .md-dropdown-button.clear{align-items:center;padding-top:.25rem;display:flex}:host .md-dropdown-button md-icon{color:var(--combobox-dropdown-item-icon-color)}:host .md-combobox-button.clear{height:auto;padding:.115rem}:host .md-combobox-button.arrow-down:focus,:host .md-combobox-button.clear:focus{outline:2px solid var(--button-focus-ring-color,#007aa3)}:host .md-new-dropdown-label{background-color:var(--dropdown-bg-color-default);border-radius:8px}:host .md-new-dropdown-label--text{color:var(--md-primary-text-color)}:host .md-new-dropdown-label:hover{background-color:var(--dropdown-bg-color-hover,#dedede)}:host .md-new-dropdown-label:active{background-color:var(--dropdown-bg-color-active,#ccc)}:host .md-new-dropdown .group{border-radius:8px;background-color:rgba(0,0,0,0)}:host(:active) .md-new-dropdown .group,:host(:active) .md-new-dropdown-label{outline:2px solid var(--input-default-outline-color);outline-offset:.125rem;box-shadow:none;border:1px solid var(--dropdown-border-color,var(--md-secondary-seperator-color))!important}:host([focus-visible]) .md-dropdown-label{border-color:var(--dropdown-border-color-focus,#005e7d);box-shadow:none;outline:0}:host([focus-visible]) .group{border-color:var(--dropdown-border-color-focus,#005e7d)}:host([focus-visible]) .md-new-dropdown .group,:host([focus-visible]) .md-new-dropdown-label{outline:2px solid var(--dropdown-border-color-focus)!important;outline-offset:.125rem!important;box-shadow:none;border-color:var(--combobox-focus-new-border-color)}:host([disabled]) .md-dropdown-label{background-color:var(--md-tertiary-bg-color)}:host([disabled]) .md-dropdown-label:active,:host([disabled]) .md-dropdown-label:hover{background-color:var(--md-tertiary-bg-color);pointer-events:none}:host([disabled]) .md-dropdown-label:active>md-icon,:host([disabled]) .md-dropdown-label:hover>md-icon{opacity:.3}:host([disabled]) .md-dropdown-label:focus-visible{border-color:var(--dropdown-border-color-focus,#005e7d);outline:0}:host([disabled]) .group{background-color:var(--md-tertiary-bg-color)}:host([disabled]) .group md-icon{opacity:.3}:host([disabled]) .group:active,:host([disabled]) .group:hover{background-color:var(--md-tertiary-bg-color);pointer-events:none}:host([disabled]) .group:focus-visible{border-color:var(--dropdown-border-color-focus,#005e7d);outline:0}:host([disabled]) md-help-text{color:var(--dropdown-bg-color-disabled,#b2b2b2)}:host([disabled]) .md-new-dropdown-label{background-color:rgba(0,0,0,0);border-color:var(--dropdown-bg-color-disabled,#b2b2b2)!important;outline:0!important;box-shadow:none}:host([disabled]) .md-new-dropdown-label--text{color:var(--dropdown-bg-color-disabled,#b2b2b2)}:host([disabled]) .md-new-dropdown-label .md-dropdown-label--icon md-icon{color:var(--dropdown-bg-color-disabled,#b2b2b2)}:host([disabled]) .md-new-dropdown-label:active,:host([disabled]) .md-new-dropdown-label:hover{background-color:rgba(0,0,0,0);pointer-events:none;outline:0!important;box-shadow:none;border-color:var(--dropdown-bg-color-disabled,#b2b2b2)!important}:host([disabled]) .md-new-dropdown-label:focus-visible{border-color:var(--dropdown-bg-color-disabled,#b2b2b2)!important;outline:0!important;box-shadow:none}:host([disabled]) .md-new-dropdown .group{background:rgba(0,0,0,0);border-color:var(--dropdown-bg-color-disabled,#b2b2b2)!important;pointer-events:none;outline:0!important}:host([disabled]) .md-new-dropdown .group input{color:var(--dropdown-bg-color-disabled,#b2b2b2)}:host([disabled]) .md-new-dropdown .group:active,:host([disabled]) .md-new-dropdown .group:hover{border-color:var(--dropdown-bg-color-disabled,#b2b2b2)!important}:host([disabled]) .md-new-dropdown .group:focus-visible{border-color:var(--dropdown-bg-color-disabled,#b2b2b2)!important}@media(forced-colors:active){:host([focus-visible]) .md-dropdown .md-dropdown-label{border:2px solid Highlight}:host([focus-visible]) .md-dropdown .md-dropdown-label--text{forced-color-adjust:none;background-color:Canvas;color:CanvasText}:host([focus-visible]) .md-dropdown-list{border:1px solid CanvasText}:host .md-dropdown-option[focused]{forced-color-adjust:none;background-color:Highlight;color:HighlightText}:host .group input{color:HighlightText}:host .group ::input-placeholder{color:GrayText}:host([disabled]) .md-dropdown .md-dropdown-label{border:1px solid GrayText!important}:host([disabled]) .group,:host([disabled]) .group:active{border:1px solid GrayText!important;outline:0!important}:host([disabled]) .group input,:host([disabled]) .group:active input{color:GrayText}:host([disabled]) .group ::input-placeholder,:host([disabled]) .group:active ::input-placeholder{color:HighlightText!important}}`,b=function(e,o,t,r){var i,d=arguments.length,s=d<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,t):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,o,t,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(d<3?i(s):d>3?i(o,t,s):i(o,t))||s);return d>3&&s&&Object.defineProperty(o,t,s),s},m=function(e,o,t,r){return new(t||(t=Promise))((function(i,d){function s(e){try{a(r.next(e))}catch(e){d(e)}}function n(e){try{a(r.throw(e))}catch(e){d(e)}}function a(e){var o;e.done?i(e.value):(o=e.value,o instanceof t?o:new t((function(e){e(o)}))).then(s,n)}a((r=r.apply(e,o||[])).next())}))};var g;!function(e){class o{determineMessageType(e){return e.reduce((e,o)=>"error"===o?e:o.type,"")}filterMessagesByType(e,o){return e.reduce((e,t)=>t.type===o?e.concat(t.message):e,[])}}e.MessageController=o;let t=class extends(Object(i.a)(s.LitElement)){constructor(){super(...arguments),this.title="Select...",this.options=[],this.optionId="",this.optionValue="",this.defaultOption="",this.disabled=!1,this.customTabIndex=0,this.allowUnselected=!1,this.visibleOptions=8,this.newMomentum=!1,this.compact=!1,this.searchable=!1,this.searchItem=!1,this.inputValue="",this.placeholder="Select...",this.readOnly=!1,this.autofocus=!1,this.leftIcon="",this.trimSpace=!1,this.resultsTextLocalization="No Results",this.helpText="",this.messageArr=[],this.htmlId="",this.clearAriaLabel="Clear",this.clearIconHeight="auto",this.arrowAriaLabel="Expand",this.popupChevronAriaHidden="true",this.ariaLabel="",this.searchResultAriaLabel="",this.ariaLabelForDropdown="",this.renderOptions=[],this.selectedKey="",this.expanded=!1,this.focusedIndex=-1,this.messageController=new o,this.lastMaxHeight="",this.onOutsideClick=e=>{let o=!1;const t=e.composedPath();t.length&&(o=!!t.find(e=>e===this),o||this.expanded&&this.collapse())},this.onKeyDown=e=>{switch(e.code){case r.b.Tab:this.expanded&&(e.stopPropagation(),this.collapse());break;case r.b.Space:case r.b.Enter:this.expanded?(this.select(),this.collapse()):this.expand();break;case r.b.ArrowDown:this.expanded?this.focusNext():this.expand();break;case r.b.ArrowUp:this.expanded?this.focusPrev():this.expand();break;case r.b.Home:this.expanded?this.focusFirst():this.expand();break;case r.b.End:this.expanded?this.focusLast():this.expand();break;case r.b.Escape||r.b.Backspace:this.expanded&&(e.stopPropagation(),this.collapse())}},this.notifyInputValueChanged=Object(c.b)(e=>{this.dispatchEvent(new CustomEvent("dropdown-input",{composed:!0,bubbles:!0,detail:{value:e}})),this.notifySearchResultCount(),requestAnimationFrame(()=>{this.input.focus()})},250)}connectedCallback(){super.connectedCallback(),this.setupEvents()}disconnectedCallback(){super.disconnectedCallback(),this.teardownEvents()}firstUpdated(e){super.firstUpdated(e),e.forEach((e,o)=>{if("defaultOption"===o&&this.defaultOption){const{key:e}=this.getOptionKeyValuePair(this.defaultOption);this.selectedKey=e}}),this.searchable&&this.setInitialValue()}updated(e){super.updated(e),e.forEach((e,o)=>{if("options"===o&&this.updateRenderOptions(),"selectedKey"===o){const e=this.renderOptions.findIndex(e=>e.key===this.selectedKey);-1!==e&&(this.focusToIndex(e),this.searchable&&this.setInitialValue())}if("expanded"===o&&this.updateListDOM(),"focusedIndex"===o&&this.updateListDOM(),"defaultOption"===o&&this.defaultOption){const{key:e}=this.getOptionKeyValuePair(this.defaultOption);this.selectedKey=e}})}notifySearchResultCount(){if(this.searchResultAriaLabel){const e=/{{.*?}}/g;this.ariaLabelForDropdown=this.searchResultAriaLabel.replace(e,this.filteredOptions.length.toString())}else this.ariaLabel?this.ariaLabelForDropdown=`${this.ariaLabel}, ${this.filteredOptions.length} results found.`:this.ariaLabelForDropdown=`Dropdown Element, ${this.filteredOptions.length} results found.`}setInitialValue(){var e;if(this.options.length){const o=this.renderOptions.find(e=>e.key===this.selectedKey),t=null==o?void 0:o.option;t&&(this.setInputValue(this.getOptionValue(t)),null===(e=this.input)||void 0===e||e.setAttribute(r.a.AriaActivedescendant,this.getOptionId(t)),this.notifyInputValueChanged(this.getOptionValue(t)),this.requestUpdate())}}getOptionValue(e){return this.isOptionObject(e)&&!this.optionValue?Object.values(e)[0]:this.isOptionObject(e)?e[this.optionValue]:e}getOptionId(e){return this.isOptionObject(e)?e[this.optionId]:e}isOptionObject(e){return"object"==typeof e&&null!==e}updateRenderOptions(){const e=[];this.focusReset();const o=this.options.reduce((o,t)=>{const{key:r,value:i}=this.getOptionKeyValuePair(t);return-1!==e.indexOf(r)?console.error(`Dropdown already have option key: "${r}". Ignoring `):r?(e.push(r),o.push({key:r,value:i,option:t})):console.error(`Dropdown key is not defined: "${r}". (value: "${i}"). Ignoring `),o},[]);this.allowUnselected&&o.unshift({key:"",value:this.title}),this.renderOptions=o}updateListDOM(){return m(this,void 0,void 0,(function*(){this.expanded&&(yield this.resizeDropdownList(),yield this.scrollToIndex(this.focusedIndex))}))}resizeDropdownList(){return m(this,void 0,void 0,(function*(){yield new Promise(e=>requestAnimationFrame(()=>{if(this.optionsListItems)if(this.optionsListItems.length>this.visibleOptions){const e=[...this.optionsListItems].slice(0,this.visibleOptions).reduce((e,o)=>e+o.offsetHeight,0)+"px";this.lastMaxHeight!==e&&(this.optionsList.style.maxHeight=e,this.lastMaxHeight=e)}else{const e="auto";this.lastMaxHeight!==e&&(this.optionsList.style.maxHeight=e,this.lastMaxHeight=e)}e()}))}))}handleFocusIn(e){this.disabled&&this.readOnly||super.handleFocusIn&&super.handleFocusIn(e),this.dispatchEvent(new CustomEvent("dropdown-focus-in",{composed:!0,bubbles:!0}))}handleFocusOut(e){super.handleFocusOut&&super.handleFocusOut(e),this.dispatchEvent(new CustomEvent("dropdown-focus-out",{composed:!0,bubbles:!0}))}static get styles(){return[d.a,u]}get filteredOptions(){const e=this.trimSpace?this.inputValue.replace(/\s+/g,""):this.inputValue;if(!e.trim())return this.renderOptions;const o=this.renderOptions.filter(o=>o.value.toLowerCase().includes(e.toLowerCase()));return 0===o.length?[{key:"no-result",value:"No Result",disabled:!0}]:o}get messageType(){return this.messageArr.length>0?this.messageController.determineMessageType(this.messageArr):null}get messages(){return this.messageType?this.messageController.filterMessagesByType(this.messageArr,this.messageType):null}setVisualListbox(e){this.expanded=e}updateOnNextFrame(e){requestAnimationFrame(e)}setInputValue(e=""){this.input.value=e}shouldChangeButton(){const e=this.input&&this.input.value.length>0;return e&&document.dispatchEvent(new CustomEvent("on-widget-update")),e}toggleVisualListBox(e){var o,t;if(!this.readOnly){if(e.target.classList.contains("md-dropdown-input"))e.target.focus();else if("md-icon"===e.target.localName){const r=null===(t=null===(o=e.target.parentElement)||void 0===o?void 0:o.parentElement)||void 0===t?void 0:t.parentElement;if(r){const e=r.querySelector(".md-dropdown-input");setTimeout(()=>{e.focus()},10)}}this.expanded?this.setVisualListbox(!1):(this.dispatchEvent(new CustomEvent("combobox-on-expand",{composed:!0,bubbles:!0})),this.notifySearchResultCount(),this.setVisualListbox(!0)),this.input.focus()}}handleRemoveAll(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("remove-all-selected"))}removeAllSelected(){var e;this.focusReset(),this.selectedKey="",this.inputValue="",this.setInputValue(),null===(e=this.input)||void 0===e||e.setAttribute(r.a.AriaActivedescendant,""),this.setVisualListbox(!1),this.updateOnNextFrame(()=>{this.input.focus()}),this.dispatchEvent(new CustomEvent("dropdown-selection-removed",{composed:!0,bubbles:!0,detail:{}}))}setupEvents(){document.addEventListener("click",this.onOutsideClick),this.addEventListener("keydown",this.onKeyDown),this.addEventListener("remove-all-selected",this.removeAllSelected)}teardownEvents(){document.removeEventListener("click",this.onOutsideClick),this.removeEventListener("keydown",this.onKeyDown),this.removeEventListener("remove-all-selected",this.removeAllSelected)}expand(){this.expanded=!0;const e=-1!==this.focusedIndex?"combo-"+this.focusedIndex:"";document.dispatchEvent(new CustomEvent("on-widget-update")),this.label.setAttribute("aria-activedescendant",e),this.optionsList&&this.optionsList.focus(),-1===this.focusedIndex&&this.focusNext()}collapse(){this.expanded=!1,this.searchable||this.label.setAttribute("aria-activedescendant","")}toggle(){this.expanded?this.collapse():this.expand()}select(){if(-1!==this.focusedIndex){const e=this.renderOptions[this.focusedIndex],o=e.key;o!==this.selectedKey&&(this.selectedKey=o,this.dispatchEvent(new CustomEvent("dropdown-selected",{composed:!0,bubbles:!0,detail:{option:e.option?e.option:e.key}})))}}onLabelClick(){this.label.focus(),this.toggle()}focusFirst(){this.renderOptions.length&&(this.focusedIndex=0)}focusLast(){this.renderOptions.length&&(this.focusedIndex=this.renderOptions.length-1)}focusNext(){this.renderOptions.length&&(-1!==this.focusedIndex&&this.focusedIndex<this.renderOptions.length-1?this.focusedIndex++:this.focusFirst())}focusPrev(){this.renderOptions.length&&(this.focusedIndex>0?this.focusedIndex--:this.focusLast())}focusToIndex(e){this.renderOptions.length&&e>=0&&e<=this.renderOptions.length-1&&(this.focusedIndex=e)}focusToIndexWithOption(e){const o=this.renderOptions.findIndex(o=>o.key===e.key);this.renderOptions.length&&o>=0&&o<=this.renderOptions.length-1&&(this.focusedIndex=o)}focusReset(){this.focusedIndex=-1}scrollToIndex(e){return m(this,void 0,void 0,(function*(){yield new Promise(o=>{requestAnimationFrame(()=>{if(this.optionsListItems&&this.optionsListItems.length>this.visibleOptions&&e>=0&&this.optionsListItems.length>e){let o=0;const{top:t,bottom:r}=this.optionsList.getBoundingClientRect(),i=this.optionsListItems[e],d=this.optionsListItems[e+1]||i,s=this.optionsListItems[e-1]||i,n=d.getBoundingClientRect(),a=s.getBoundingClientRect();n.bottom>r?o=n.bottom-r+2:a.top<t&&(o=a.top-t-2),this.optionsList.scrollTop+=o}o()})})}))}getOptionKeyValuePair(e){if("string"==typeof e)return{key:e.trim(),value:e};if(e&&"object"==typeof e){const o=Object.keys(e),t=Object.values(e);if(o.length){if(1===o.length||!this.optionId)return{key:o[0],value:t[0]};if(this.optionId)return{key:e[this.optionId],value:e[this.optionValue||this.optionId]}}}return{key:"undefined",value:"undefined"}}get labelTitle(){if(this.selectedKey){const e=this.renderOptions.find(e=>e.key===this.selectedKey);if(e)return e.value}return this.title}get dropDownClassMap(){return{"md-dropdown__expanded":this.expanded,["md-"+this.messageType]:!!this.messageType,"md-new-dropdown":this.newMomentum}}handleInput(e){const o=e.target.value;this.inputValue=o.trim(),this.notifyInputValueChanged(o.trim())}helpTextTemplate(){return this.helpText?n.html`
|
|
1
|
+
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[70],{122:function(e,o,t){"use strict";t.r(o),t.d(o,"Dropdown",(function(){return g}));t(14);var r=t(1),i=t(7),d=t(16),s=t(6),n=t(0),a=t(2),l=t(12),p=t(3),c=t(13),h=t(8),u=n.css`:host(:focus){box-shadow:none!important;outline:0!important}:host .md-dropdown{display:flex;flex-direction:column;position:relative}:host .md-dropdown-select{display:none}:host .md-dropdown-label{align-content:center;align-items:center;display:flex;flex-flow:row nowrap;justify-content:center;background-color:var(--md-primary-bg-color);border:1px solid var(--dropdown-border-color,var(--md-secondary-seperator-color));border-radius:var(--dropdown-group-radius,.25rem);min-height:2rem;padding:0 .75rem}:host .md-dropdown-label--text{align-content:center;align-items:center;display:flex;flex-flow:row nowrap;justify-content:flex-start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--md-secondary-text-color);line-height:2rem;outline:0;width:6.25rem;flex:1 0 auto}:host .md-dropdown-label--icon{transition:all .15s linear;align-self:center;background:rgba(0,0,0,0);border:0;cursor:pointer;margin:0;margin-left:calc(.25rem*2);outline:0;padding:0;padding-top:calc(.25rem/2);position:relative;vertical-align:bottom;height:inherit;display:flex}:host .md-dropdown-label--icon md-icon{color:var(--md-primary-text-color,#f7f7f7)}:host .md-dropdown-label:hover{background-color:var(--dropdown-bg-color-hover,#dedede)}:host .md-dropdown-label:active{background-color:var(--dropdown-bg-color-active,#ccc)}:host .md-dropdown-list{list-style:none;margin:0;padding:0;display:none;background-color:var(--md-primary-bg-color);border:1px solid var(--dropdown-list-border-color);border-radius:.5rem;box-shadow:0 4px 8px rgba(0,0,0,.16),0 0 1px rgba(0,0,0,.16);left:0;overflow:auto;overflow-x:hidden;position:absolute;top:calc(100% + .25rem);width:100%;z-index:99;padding:calc(var(--dropdown-list-padding)/16*1rem);font-size:var(--body-primary-font-size,inherit)}:host .md-dropdown-option{align-content:center;align-items:center;display:flex;flex-flow:row nowrap;justify-content:flex-start;color:var(--md-primary-text-color,#f7f7f7);padding:.4375rem .75rem .5rem;border-radius:calc(var(--dropdown-list-item-border-radius)/16*1rem);height:calc(var(--dropdown-list-item-height)/16*1rem)}:host .md-dropdown-option .select-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;width:calc(100% - 1rem);display:block}:host .md-dropdown-option:hover{background-color:var(--dropdown-list-item-bg-color-hover,#91ebff)}:host .md-dropdown-option[focused]{background-color:var(--dropdown-list-item-bg-color-hover,#91ebff);box-shadow:none;outline:0;box-shadow:0 0 0 .09375rem var(--dropdown-list-item-border-focus)}:host .md-dropdown-option[selected]{background-color:var(--dropdown-list-item-bg-color-focus,#00a0d1);box-shadow:none;outline:0;box-shadow:0 0 0 .09375rem var(--dropdown-list-item-border-focus)}:host .md-dropdown__expanded .md-dropdown-list{display:block}:host .md-dropdown__expanded .md-dropdown-label--icon{transform:rotate(180deg)}:host .md-dropdown__expanded .md-dropdown-button.arrow-down{transform:rotate(180deg)}:host .md-dropdown--pill .group,:host .md-dropdown--pill .md-dropdown-label{border-radius:18px}:host .md-dropdown .group{align-items:start;background-color:var(--md-primary-bg-color);border:1px solid var(--dropdown-border-color,var(--md-secondary-seperator-color));border-radius:var(--dropdown-group-radius,.25rem);display:flex;min-height:2rem;padding:0 .75rem;height:2.125rem}:host .md-dropdown .group md-icon{color:var(--md-primary-text-color,#545454);cursor:pointer;fill:var(--md-secondary-text-color,#545454);height:100%}:host .md-dropdown .group md-icon:focus{box-shadow:none;outline:0;box-shadow:0 0 0 .125rem var(--md-focus-border-color,#545454)}:host .md-dropdown .group:hover{background-color:var(--dropdown-bg-color-hover,#dedede)}:host .md-dropdown .group:active{background-color:var(--dropdown-bg-color-active,#ccc)}:host .md-dropdown .group input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(0,0,0,0);border:0;color:var(--md-primary-text-color);display:inline-block;flex:1 1 auto;height:2rem;outline:0}:host .md-dropdown .group input::placeholder{color:var(--md-secondary-text-color)}:host .md-dropdown .group ::input-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;width:100%}:host .md-dropdown .group .md-dropdown-left-icon{margin-right:.25rem}:host .md-dropdown .md-dropdown-button[disabled] md-icon{color:var(--md-disabled-text-color,#b2b2b2)}:host .md-dropdown .md-dropdown-input[readonly]{pointer-events:none}:host .md-dropdown.md-error .group,:host .md-dropdown.md-error .group:active{border-color:var(--input-error-border-color)!important}:host .md-dropdown.md-warning .group,:host .md-dropdown.md-warning .group:active{border-color:var(--input-warning-border-color)!important}:host .md-dropdown.md-success .group,:host .md-dropdown.md-success .group:active{border-color:var(--input-success-border-color)!important}:host .help-text,:host .md-dropbox__messages{padding-top:.375rem}:host .group[readonly]{border-color:var(--dropdown-border-color-disabled)!important}:host .group[readonly] md-icon{color:var(--dropdown-bg-color-disabled)!important}:host .md-dropdown-button{transition:all .15s linear;align-self:center;background:rgba(0,0,0,0);border:0;cursor:pointer;margin:0;margin-left:calc(.25rem*2);outline:0;padding:0;position:relative;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}:host .md-dropdown-button md-icon{color:var(--combobox-dropdown-item-icon-color)}:host .md-combobox-button.clear{height:auto;padding:.115rem}:host .md-combobox-button.arrow-down:focus,:host .md-combobox-button.clear:focus{outline:2px solid var(--button-focus-ring-color,#007aa3)}:host .md-new-dropdown-label{background-color:var(--dropdown-bg-color-default);border-radius:8px}:host .md-new-dropdown-label--text{color:var(--md-primary-text-color)}:host .md-new-dropdown-label:hover{background-color:var(--dropdown-bg-color-hover,#dedede)}:host .md-new-dropdown-label:active{background-color:var(--dropdown-bg-color-active,#ccc)}:host .md-new-dropdown .group{height:2rem;border-radius:.5rem;background-color:rgba(0,0,0,0);padding-right:.5rem}:host(:active) .md-new-dropdown .group,:host(:active) .md-new-dropdown-label{outline:2px solid var(--input-default-outline-color);outline-offset:.125rem;box-shadow:none;border:1px solid var(--dropdown-border-color,var(--md-secondary-seperator-color))!important}:host([focus-visible]) .md-dropdown-label{border-color:var(--dropdown-border-color-focus,#005e7d);box-shadow:none;outline:0}:host([focus-visible]) .group{border-color:var(--dropdown-border-color-focus,#005e7d)}:host([focus-visible]) .md-new-dropdown .group,:host([focus-visible]) .md-new-dropdown-label{outline:2px solid var(--dropdown-border-color-focus)!important;outline-offset:.125rem!important;box-shadow:none;border-color:var(--combobox-focus-new-border-color)}:host([disabled]) .md-dropdown-label{background-color:var(--md-tertiary-bg-color)}:host([disabled]) .md-dropdown-label:active,:host([disabled]) .md-dropdown-label:hover{background-color:var(--md-tertiary-bg-color);pointer-events:none}:host([disabled]) .md-dropdown-label:active>md-icon,:host([disabled]) .md-dropdown-label:hover>md-icon{opacity:.3}:host([disabled]) .md-dropdown-label:focus-visible{border-color:var(--dropdown-border-color-focus,#005e7d);outline:0}:host([disabled]) .group{background-color:var(--md-tertiary-bg-color)}:host([disabled]) .group md-icon{opacity:.3}:host([disabled]) .group:active,:host([disabled]) .group:hover{background-color:var(--md-tertiary-bg-color);pointer-events:none}:host([disabled]) .group:focus-visible{border-color:var(--dropdown-border-color-focus,#005e7d);outline:0}:host([disabled]) md-help-text{color:var(--md-disabled-text-color,#b2b2b2)}:host([disabled]) .md-new-dropdown-label{background-color:rgba(0,0,0,0);border-color:var(--dropdown-border-color-disabled,#b2b2b2);outline:0!important;box-shadow:none}:host([disabled]) .md-new-dropdown-label--text{color:var(--md-disabled-text-color)}:host([disabled]) .md-new-dropdown-label .md-dropdown-label--icon md-icon{color:var(--md-disabled-text-color)}:host([disabled]) .md-new-dropdown-label:active,:host([disabled]) .md-new-dropdown-label:hover{background-color:rgba(0,0,0,0);pointer-events:none;outline:0!important;box-shadow:none;border-color:var(--dropdown-border-color-disabled,#b2b2b2)}:host([disabled]) .md-new-dropdown-label:focus-visible{border-color:var(--dropdown-border-color-disabled);outline:0!important;box-shadow:none}:host([disabled]) .md-new-dropdown .group{background:rgba(0,0,0,0);border-color:var(--dropdown-border-color-disabled);pointer-events:none;outline:0!important}:host([disabled]) .md-new-dropdown .group input{color:var(--md-disabled-text-color)}:host([disabled]) .md-new-dropdown .group input::placeholder{color:var(--md-disabled-text-color)}:host([disabled]) .md-new-dropdown .group:active,:host([disabled]) .md-new-dropdown .group:hover{border-color:var(--dropdown-border-color-disabled)}:host([disabled]) .md-new-dropdown .group:focus-visible{border-color:var(--dropdown-border-color-disabled)}@media(forced-colors:active){:host([focus-visible]) .md-dropdown .md-dropdown-label{border:2px solid Highlight}:host([focus-visible]) .md-dropdown .md-dropdown-label--text{forced-color-adjust:none;background-color:Canvas;color:CanvasText}:host([focus-visible]) .md-dropdown-list{border:1px solid CanvasText}:host .md-dropdown-option[focused]{forced-color-adjust:none;background-color:Highlight;color:HighlightText}:host .group input{color:HighlightText}:host .group ::input-placeholder{color:GrayText}:host([disabled]) .md-dropdown .md-dropdown-label{border:1px solid GrayText!important}:host([disabled]) .group,:host([disabled]) .group:active{border:1px solid GrayText!important;outline:0!important}:host([disabled]) .group input,:host([disabled]) .group:active input{color:GrayText}:host([disabled]) .group ::input-placeholder,:host([disabled]) .group:active ::input-placeholder{color:HighlightText!important}}`,b=function(e,o,t,r){var i,d=arguments.length,s=d<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,t):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,o,t,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(d<3?i(s):d>3?i(o,t,s):i(o,t))||s);return d>3&&s&&Object.defineProperty(o,t,s),s},m=function(e,o,t,r){return new(t||(t=Promise))((function(i,d){function s(e){try{a(r.next(e))}catch(e){d(e)}}function n(e){try{a(r.throw(e))}catch(e){d(e)}}function a(e){var o;e.done?i(e.value):(o=e.value,o instanceof t?o:new t((function(e){e(o)}))).then(s,n)}a((r=r.apply(e,o||[])).next())}))};var g;!function(e){class o{determineMessageType(e){return e.reduce((e,o)=>"error"===o?e:o.type,"")}filterMessagesByType(e,o){return e.reduce((e,t)=>t.type===o?e.concat(t.message):e,[])}}e.MessageController=o;let t=class extends(Object(i.a)(n.LitElement)){constructor(){super(...arguments),this.title="Select...",this.options=[],this.optionId="",this.optionValue="",this.defaultOption="",this.disabled=!1,this.customTabIndex=0,this.allowUnselected=!1,this.visibleOptions=8,this.newMomentum=!1,this.compact=!1,this.searchable=!1,this.searchItem=!1,this.inputValue="",this.placeholder="Select...",this.readOnly=!1,this.autofocus=!1,this.leftIcon="",this.trimSpace=!1,this.resultsTextLocalization="No Results",this.helpText="",this.messageArr=[],this.htmlId="",this.clearAriaLabel="Clear",this.clearIconHeight="auto",this.arrowAriaLabel="Expand",this.popupChevronAriaHidden="true",this.ariaLabel="",this.searchResultAriaLabel="",this.ariaLabelForDropdown="",this.renderOptions=[],this.selectedKey="",this.expanded=!1,this.focusedIndex=-1,this.messageController=new o,this.lastMaxHeight="",this.onOutsideClick=e=>{let o=!1;const t=e.composedPath();t.length&&(o=!!t.find(e=>e===this),o||this.expanded&&this.collapse())},this.onKeyDown=e=>{switch(e.code){case r.b.Tab:this.expanded&&(e.stopPropagation(),this.collapse());break;case r.b.Space:case r.b.Enter:this.expanded?(this.select(),this.collapse()):this.expand();break;case r.b.ArrowDown:this.expanded?this.focusNext():this.expand();break;case r.b.ArrowUp:this.expanded?this.focusPrev():this.expand();break;case r.b.Home:this.expanded?this.focusFirst():this.expand();break;case r.b.End:this.expanded?this.focusLast():this.expand();break;case r.b.Escape||r.b.Backspace:this.expanded&&(e.stopPropagation(),this.collapse())}},this.notifyInputValueChanged=Object(d.b)(e=>{this.dispatchEvent(new CustomEvent("dropdown-input",{composed:!0,bubbles:!0,detail:{value:e}})),this.notifySearchResultCount(),requestAnimationFrame(()=>{this.input.focus()})},250)}connectedCallback(){super.connectedCallback(),this.setupEvents()}disconnectedCallback(){super.disconnectedCallback(),this.teardownEvents()}firstUpdated(e){super.firstUpdated(e),e.forEach((e,o)=>{if("defaultOption"===o&&this.defaultOption){const{key:e}=this.getOptionKeyValuePair(this.defaultOption);this.selectedKey=e}}),this.searchable&&this.setInitialValue()}updated(e){super.updated(e),e.forEach((e,o)=>{if("options"===o&&this.updateRenderOptions(),"selectedKey"===o){const e=this.renderOptions.findIndex(e=>e.key===this.selectedKey);-1!==e&&(this.focusToIndex(e),this.searchable&&this.setInitialValue())}if("expanded"===o&&this.updateListDOM(),"focusedIndex"===o&&this.updateListDOM(),"defaultOption"===o&&this.defaultOption){const{key:e}=this.getOptionKeyValuePair(this.defaultOption);this.selectedKey=e}})}notifySearchResultCount(){if(this.searchResultAriaLabel){const e=/{{.*?}}/g;this.ariaLabelForDropdown=this.searchResultAriaLabel.replace(e,this.filteredOptions.length.toString())}else this.ariaLabel?this.ariaLabelForDropdown=`${this.ariaLabel}, ${this.filteredOptions.length} results found.`:this.ariaLabelForDropdown=`Dropdown Element, ${this.filteredOptions.length} results found.`}setInitialValue(){var e;if(this.options.length){const o=this.renderOptions.find(e=>e.key===this.selectedKey),t=null==o?void 0:o.option;t&&(this.setInputValue(this.getOptionValue(t)),null===(e=this.input)||void 0===e||e.setAttribute(r.a.AriaActivedescendant,this.getOptionId(t)),this.notifyInputValueChanged(this.getOptionValue(t)),this.requestUpdate())}}getOptionValue(e){return this.isOptionObject(e)&&!this.optionValue?Object.values(e)[0]:this.isOptionObject(e)?e[this.optionValue]:e}getOptionId(e){return this.isOptionObject(e)?e[this.optionId]:e}isOptionObject(e){return"object"==typeof e&&null!==e}updateRenderOptions(){const e=[];this.focusReset();const o=this.options.reduce((o,t)=>{const{key:r,value:i}=this.getOptionKeyValuePair(t);return-1!==e.indexOf(r)?console.error(`Dropdown already have option key: "${r}". Ignoring `):r?(e.push(r),o.push({key:r,value:i,option:t})):console.error(`Dropdown key is not defined: "${r}". (value: "${i}"). Ignoring `),o},[]);this.allowUnselected&&o.unshift({key:"",value:this.title}),this.renderOptions=o}updateListDOM(){return m(this,void 0,void 0,(function*(){this.expanded&&(yield this.resizeDropdownList(),yield this.scrollToIndex(this.focusedIndex))}))}resizeDropdownList(){return m(this,void 0,void 0,(function*(){yield new Promise(e=>requestAnimationFrame(()=>{if(this.optionsListItems)if(this.optionsListItems.length>this.visibleOptions){const e=[...this.optionsListItems].slice(0,this.visibleOptions).reduce((e,o)=>e+o.offsetHeight,0)+"px";this.lastMaxHeight!==e&&(this.optionsList.style.maxHeight=e,this.lastMaxHeight=e)}else{const e="auto";this.lastMaxHeight!==e&&(this.optionsList.style.maxHeight=e,this.lastMaxHeight=e)}e()}))}))}handleFocusIn(e){this.disabled&&this.readOnly||super.handleFocusIn&&super.handleFocusIn(e),this.dispatchEvent(new CustomEvent("dropdown-focus-in",{composed:!0,bubbles:!0}))}handleFocusOut(e){super.handleFocusOut&&super.handleFocusOut(e),this.dispatchEvent(new CustomEvent("dropdown-focus-out",{composed:!0,bubbles:!0}))}static get styles(){return[s.a,u]}get filteredOptions(){const e=this.trimSpace?this.inputValue.replace(/\s+/g,""):this.inputValue;if(!e.trim())return this.renderOptions;const o=this.renderOptions.filter(o=>o.value.toLowerCase().includes(e.toLowerCase()));return 0===o.length?[{key:"no-result",value:"No Result",disabled:!0}]:o}get messageType(){return this.messageArr.length>0?this.messageController.determineMessageType(this.messageArr):null}get messages(){return this.messageType?this.messageController.filterMessagesByType(this.messageArr,this.messageType):null}setVisualListbox(e){this.expanded=e}updateOnNextFrame(e){requestAnimationFrame(e)}setInputValue(e=""){this.input.value=e}shouldChangeButton(){const e=this.input&&this.input.value.length>0;return e&&document.dispatchEvent(new CustomEvent("on-widget-update")),e}toggleVisualListBox(e){var o,t;if(!this.readOnly){if(e.target.classList.contains("md-dropdown-input"))e.target.focus();else if("md-icon"===e.target.localName){const r=null===(t=null===(o=e.target.parentElement)||void 0===o?void 0:o.parentElement)||void 0===t?void 0:t.parentElement;if(r){const e=r.querySelector(".md-dropdown-input");setTimeout(()=>{e.focus()},10)}}this.expanded?this.setVisualListbox(!1):(this.dispatchEvent(new CustomEvent("combobox-on-expand",{composed:!0,bubbles:!0})),this.notifySearchResultCount(),this.setVisualListbox(!0)),this.input.focus()}}handleRemoveAll(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("remove-all-selected"))}removeAllSelected(){var e;this.focusReset(),this.selectedKey="",this.inputValue="",this.setInputValue(),null===(e=this.input)||void 0===e||e.setAttribute(r.a.AriaActivedescendant,""),this.setVisualListbox(!1),this.updateOnNextFrame(()=>{this.input.focus()}),this.dispatchEvent(new CustomEvent("dropdown-selection-removed",{composed:!0,bubbles:!0,detail:{}}))}setupEvents(){document.addEventListener("click",this.onOutsideClick),this.addEventListener("keydown",this.onKeyDown),this.addEventListener("remove-all-selected",this.removeAllSelected)}teardownEvents(){document.removeEventListener("click",this.onOutsideClick),this.removeEventListener("keydown",this.onKeyDown),this.removeEventListener("remove-all-selected",this.removeAllSelected)}expand(){this.expanded=!0;const e=-1!==this.focusedIndex?"combo-"+this.focusedIndex:"";document.dispatchEvent(new CustomEvent("on-widget-update")),this.label.setAttribute("aria-activedescendant",e),this.optionsList&&this.optionsList.focus(),-1===this.focusedIndex&&this.focusNext()}collapse(){this.expanded=!1,this.searchable||this.label.setAttribute("aria-activedescendant","")}toggle(){this.expanded?this.collapse():this.expand()}select(){if(-1!==this.focusedIndex){const e=this.renderOptions[this.focusedIndex],o=e.key;o!==this.selectedKey&&(this.selectedKey=o,this.dispatchEvent(new CustomEvent("dropdown-selected",{composed:!0,bubbles:!0,detail:{option:e.option?e.option:e.key}})))}}onLabelClick(){this.label.focus(),this.toggle()}focusFirst(){this.renderOptions.length&&(this.focusedIndex=0)}focusLast(){this.renderOptions.length&&(this.focusedIndex=this.renderOptions.length-1)}focusNext(){this.renderOptions.length&&(-1!==this.focusedIndex&&this.focusedIndex<this.renderOptions.length-1?this.focusedIndex++:this.focusFirst())}focusPrev(){this.renderOptions.length&&(this.focusedIndex>0?this.focusedIndex--:this.focusLast())}focusToIndex(e){this.renderOptions.length&&e>=0&&e<=this.renderOptions.length-1&&(this.focusedIndex=e)}focusToIndexWithOption(e){const o=this.renderOptions.findIndex(o=>o.key===e.key);this.renderOptions.length&&o>=0&&o<=this.renderOptions.length-1&&(this.focusedIndex=o)}focusReset(){this.focusedIndex=-1}scrollToIndex(e){return m(this,void 0,void 0,(function*(){yield new Promise(o=>{requestAnimationFrame(()=>{if(this.optionsListItems&&this.optionsListItems.length>this.visibleOptions&&e>=0&&this.optionsListItems.length>e){let o=0;const{top:t,bottom:r}=this.optionsList.getBoundingClientRect(),i=this.optionsListItems[e],d=this.optionsListItems[e+1]||i,s=this.optionsListItems[e-1]||i,n=d.getBoundingClientRect(),a=s.getBoundingClientRect();n.bottom>r?o=n.bottom-r+2:a.top<t&&(o=a.top-t-2),this.optionsList.scrollTop+=o}o()})})}))}getOptionKeyValuePair(e){if("string"==typeof e)return{key:e.trim(),value:e};if(e&&"object"==typeof e){const o=Object.keys(e),t=Object.values(e);if(o.length){if(1===o.length||!this.optionId)return{key:o[0],value:t[0]};if(this.optionId)return{key:e[this.optionId],value:e[this.optionValue||this.optionId]}}}return{key:"undefined",value:"undefined"}}get labelTitle(){if(this.selectedKey){const e=this.renderOptions.find(e=>e.key===this.selectedKey);if(e)return e.value}return this.title}get dropDownClassMap(){return{"md-dropdown__expanded":this.expanded,["md-"+this.messageType]:!!this.messageType,"md-new-dropdown":this.newMomentum}}handleInput(e){const o=e.target.value;this.inputValue=o.trim(),this.notifyInputValueChanged(o.trim())}helpTextTemplate(){return this.helpText?a.html`
|
|
2
2
|
<md-help-text
|
|
3
|
-
class="help-text ${Object(
|
|
3
|
+
class="help-text ${Object(l.classMap)({disabled:this.disabled,newMomentum:this.newMomentum})}"
|
|
4
4
|
.message=${this.helpText}
|
|
5
5
|
style=${Object(h.styleMap)({width:"100%"})}
|
|
6
6
|
></md-help-text>
|
|
7
|
-
`:
|
|
7
|
+
`:a.nothing}messagesTemplate(){return this.messages&&this.messages.length?a.html`
|
|
8
8
|
<div id="${this.htmlId}-message" part="message" class="md-dropbox__messages">
|
|
9
|
-
${Object(
|
|
9
|
+
${Object(c.repeat)(this.messages,(e,o)=>a.html`
|
|
10
10
|
<md-help-text
|
|
11
11
|
.message=${e}
|
|
12
12
|
.id=${this.messageArr[o].id||""}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
></md-help-text>
|
|
16
16
|
`)}
|
|
17
17
|
</div>
|
|
18
|
-
`:
|
|
18
|
+
`:a.nothing}iconTemplate(){return a.html`
|
|
19
19
|
<md-icon
|
|
20
20
|
class="md-dropdown-left-icon"
|
|
21
21
|
name="${this.leftIcon}"
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
iconSet="momentumDesign"
|
|
24
24
|
@click=${this.toggleVisualListBox}
|
|
25
25
|
></md-icon>
|
|
26
|
-
`}clearButtonTemplate(){return
|
|
26
|
+
`}clearButtonTemplate(){return a.html`
|
|
27
27
|
<button
|
|
28
28
|
type="button"
|
|
29
29
|
class="md-dropdown-button clear"
|
|
@@ -34,38 +34,34 @@
|
|
|
34
34
|
?disabled=${this.disabled}
|
|
35
35
|
@click=${this.handleRemoveAll}
|
|
36
36
|
>
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
></md-icon
|
|
45
|
-
></span>
|
|
37
|
+
<md-icon
|
|
38
|
+
class="md-input__icon-clear"
|
|
39
|
+
name="cancel-bold"
|
|
40
|
+
size="16"
|
|
41
|
+
iconSet="momentumDesign"
|
|
42
|
+
style="height: ${this.clearIconHeight};"
|
|
43
|
+
></md-icon>
|
|
46
44
|
</button>
|
|
47
|
-
`}arrowButtonTemplate(){return
|
|
45
|
+
`}arrowButtonTemplate(){return a.html`
|
|
48
46
|
<button
|
|
49
47
|
type="button"
|
|
50
48
|
class="md-dropdown-button arrow-down"
|
|
51
49
|
aria-expanded=${this.expanded}
|
|
52
|
-
aria-label=${Object(
|
|
50
|
+
aria-label=${Object(p.ifDefined)("true"===this.popupChevronAriaHidden?void 0:this.arrowAriaLabel)}
|
|
53
51
|
aria-controls="md-dropdown-input"
|
|
54
52
|
tabindex="-1"
|
|
55
|
-
aria-hidden=${this.popupChevronAriaHidden}
|
|
53
|
+
aria-hidden=${Object(p.ifDefined)("true"===this.popupChevronAriaHidden?"true":void 0)}
|
|
56
54
|
?readonly=${this.readOnly}
|
|
57
55
|
?disabled=${this.disabled}
|
|
58
56
|
@click=${this.toggleVisualListBox}
|
|
59
57
|
>
|
|
60
|
-
<
|
|
61
|
-
<md-icon name="arrow-down-bold" size="16" iconSet="momentumDesign"></md-icon>
|
|
62
|
-
</span>
|
|
58
|
+
<md-icon name="arrow-down-bold" size="16" iconSet="momentumDesign"></md-icon>
|
|
63
59
|
</button>
|
|
64
|
-
`}render(){return
|
|
65
|
-
<div class="md-dropdown ${Object(
|
|
66
|
-
${this.searchable?
|
|
60
|
+
`}render(){return a.html`
|
|
61
|
+
<div class="md-dropdown ${Object(l.classMap)(this.dropDownClassMap)}" part="dropdown">
|
|
62
|
+
${this.searchable?a.html`
|
|
67
63
|
<div part="group" class="group" ?readonly=${this.readOnly}>
|
|
68
|
-
${this.leftIcon?this.iconTemplate():
|
|
64
|
+
${this.leftIcon?this.iconTemplate():a.nothing}
|
|
69
65
|
<input
|
|
70
66
|
class="md-dropdown-input"
|
|
71
67
|
type="text"
|
|
@@ -85,11 +81,11 @@
|
|
|
85
81
|
@click=${this.toggleVisualListBox}
|
|
86
82
|
@input=${this.handleInput}
|
|
87
83
|
/>
|
|
88
|
-
${this.compact||!this.searchable?
|
|
84
|
+
${this.compact||!this.searchable?a.nothing:this.shouldChangeButton()?this.clearButtonTemplate():this.arrowButtonTemplate()}
|
|
89
85
|
</div>
|
|
90
|
-
`:
|
|
86
|
+
`:a.html`
|
|
91
87
|
<label
|
|
92
|
-
class="md-dropdown-label ${Object(
|
|
88
|
+
class="md-dropdown-label ${Object(l.classMap)({"md-new-dropdown-label":this.newMomentum})}"
|
|
93
89
|
aria-expanded="${this.expanded}"
|
|
94
90
|
aria-label="${this.title}"
|
|
95
91
|
aria-controls="md-dropdown-list"
|
|
@@ -100,7 +96,7 @@
|
|
|
100
96
|
role="combobox"
|
|
101
97
|
tabindex="0"
|
|
102
98
|
>
|
|
103
|
-
<span class="md-dropdown-label--text ${Object(
|
|
99
|
+
<span class="md-dropdown-label--text ${Object(l.classMap)({"md-new-dropdown-label--text":this.newMomentum})}"
|
|
104
100
|
>${this.labelTitle}</span
|
|
105
101
|
>
|
|
106
102
|
<span class="md-dropdown-label--icon">
|
|
@@ -115,14 +111,14 @@
|
|
|
115
111
|
aria-label="${this.labelTitle}"
|
|
116
112
|
aria-hidden="${!this.expanded}"
|
|
117
113
|
part="dropdown-options"
|
|
118
|
-
tabindex=${Object(
|
|
114
|
+
tabindex=${Object(p.ifDefined)(-1===this.customTabIndex?void 0:this.customTabIndex)}
|
|
119
115
|
>
|
|
120
|
-
${this.filteredOptions.map((e,o)=>
|
|
116
|
+
${this.filteredOptions.map((e,o)=>a.html`
|
|
121
117
|
<li
|
|
122
118
|
id="combo-${o}"
|
|
123
119
|
class="md-dropdown-option"
|
|
124
120
|
role="option"
|
|
125
|
-
tabindex=${Object(
|
|
121
|
+
tabindex=${Object(p.ifDefined)(-1===this.customTabIndex?void 0:this.customTabIndex)}
|
|
126
122
|
aria-label="${e.value}"
|
|
127
123
|
label="${e.value}"
|
|
128
124
|
aria-selected="${e.key===this.selectedKey}"
|
|
@@ -139,4 +135,4 @@
|
|
|
139
135
|
</ul>
|
|
140
136
|
</div>
|
|
141
137
|
${this.messagesTemplate()} ${this.helpTextTemplate()}
|
|
142
|
-
`}};b([Object(
|
|
138
|
+
`}};b([Object(n.property)({type:String,attribute:"title"})],t.prototype,"title",void 0),b([Object(n.property)({type:Array})],t.prototype,"options",void 0),b([Object(n.property)({type:String,attribute:"option-id"})],t.prototype,"optionId",void 0),b([Object(n.property)({type:String,attribute:"option-value"})],t.prototype,"optionValue",void 0),b([Object(n.property)({type:Object})],t.prototype,"defaultOption",void 0),b([Object(n.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",void 0),b([Object(n.property)({type:Number,attribute:"custom-tab-index",reflect:!0})],t.prototype,"customTabIndex",void 0),b([Object(n.property)({type:Boolean,attribute:"allow-unselected",reflect:!0})],t.prototype,"allowUnselected",void 0),b([Object(n.property)({type:Number,attribute:"visible-option",reflect:!0})],t.prototype,"visibleOptions",void 0),b([Object(n.property)({type:Boolean})],t.prototype,"newMomentum",void 0),b([Object(n.property)({type:Boolean,reflect:!0})],t.prototype,"compact",void 0),b([Object(n.property)({type:Boolean,reflect:!0})],t.prototype,"searchable",void 0),b([Object(n.property)({type:Boolean,reflect:!0})],t.prototype,"searchItem",void 0),b([Object(n.property)({type:String,attribute:"input-value",reflect:!0})],t.prototype,"inputValue",void 0),b([Object(n.property)({type:String})],t.prototype,"placeholder",void 0),b([Object(n.property)({type:Boolean,reflect:!0})],t.prototype,"readOnly",void 0),b([Object(n.property)({type:Boolean,reflect:!0})],t.prototype,"autofocus",void 0),b([Object(n.property)({type:String,attribute:"left-icon",reflect:!0})],t.prototype,"leftIcon",void 0),b([Object(n.property)({type:Boolean,reflect:!0,attribute:"search-trim-space"})],t.prototype,"trimSpace",void 0),b([Object(n.property)({type:String,attribute:"no-results-i18n"})],t.prototype,"resultsTextLocalization",void 0),b([Object(n.property)({type:String})],t.prototype,"helpText",void 0),b([Object(n.property)({type:Array})],t.prototype,"messageArr",void 0),b([Object(n.property)({type:String})],t.prototype,"htmlId",void 0),b([Object(n.property)({type:String,attribute:"clear-aria-label"})],t.prototype,"clearAriaLabel",void 0),b([Object(n.property)({type:String,attribute:"clear-icon-height"})],t.prototype,"clearIconHeight",void 0),b([Object(n.property)({type:String,attribute:"arrow-aria-label"})],t.prototype,"arrowAriaLabel",void 0),b([Object(n.property)({type:String,attribute:"popup-chevron-aria-hidden"})],t.prototype,"popupChevronAriaHidden",void 0),b([Object(n.property)({type:String,reflect:!0})],t.prototype,"ariaLabel",void 0),b([Object(n.property)({type:String,attribute:"search-result-aria-label"})],t.prototype,"searchResultAriaLabel",void 0),b([Object(n.internalProperty)()],t.prototype,"ariaLabelForDropdown",void 0),b([Object(n.internalProperty)()],t.prototype,"renderOptions",void 0),b([Object(n.internalProperty)()],t.prototype,"selectedKey",void 0),b([Object(n.internalProperty)()],t.prototype,"expanded",void 0),b([Object(n.internalProperty)()],t.prototype,"focusedIndex",void 0),b([Object(n.query)("label")],t.prototype,"label",void 0),b([Object(n.query)(".md-dropdown-input")],t.prototype,"input",void 0),b([Object(n.query)("ul.md-dropdown-list")],t.prototype,"optionsList",void 0),b([Object(n.queryAll)("li.md-dropdown-option")],t.prototype,"optionsListItems",void 0),t=b([Object(i.f)("md-dropdown")],t),e.ELEMENT=t}(g||(g={}))}}]);
|
package/dist/chunks/md-80.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(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(
|
|
1
|
+
(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`
|
|
2
2
|
<span class="flag-svg-wrapper">
|
|
3
3
|
<img src="${Object(l.findFlagUrlByIso2Code)(t)}" />
|
|
4
4
|
</span>
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
<span>${t.name}</span>
|
|
15
15
|
<span>+${t.value}</span>
|
|
16
16
|
</div>
|
|
17
|
-
`}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`
|
|
17
|
+
`}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`
|
|
18
18
|
<style>
|
|
19
19
|
.md-phone-input__container md-combobox {
|
|
20
20
|
width: 5.625rem;
|
|
@@ -27,10 +27,12 @@
|
|
|
27
27
|
padding-left: 0;
|
|
28
28
|
}
|
|
29
29
|
</style>
|
|
30
|
-
`}static get styles(){return[n.a,
|
|
30
|
+
`}static get styles(){return[n.a,u]}render(){return p.html`
|
|
31
31
|
${this.showFlags?this.getModStyle():s.nothing}
|
|
32
32
|
<div class="md-phone-input__container">
|
|
33
|
-
${this.showFlags?p.html`
|
|
33
|
+
${this.showFlags?p.html`
|
|
34
|
+
<span class="flag-box ${Object(h.classMap)(this.flagClassMap)}">${this.getCountryFlag(this.countryCode)}</span>
|
|
35
|
+
`:s.nothing}
|
|
34
36
|
<md-combobox
|
|
35
37
|
part="combobox"
|
|
36
38
|
?disabled=${this.disabled}
|
|
@@ -41,9 +43,11 @@
|
|
|
41
43
|
@change-selected="${t=>this.handleCountryChange(t)}"
|
|
42
44
|
clear-icon-height="${this.clearIconHeight}"
|
|
43
45
|
with-custom-content
|
|
46
|
+
?newMomentum=${this.newMomentum}
|
|
47
|
+
is-dropdown-arrow
|
|
44
48
|
.clearAriaLabel="${this.clearCountryCodeAriaLabel}"
|
|
45
49
|
>
|
|
46
|
-
${Object(
|
|
50
|
+
${Object(c.repeat)(this.codeList,t=>t.name,(t,e)=>this.countryCodeOptionTemplate(t,e))}
|
|
47
51
|
</md-combobox>
|
|
48
52
|
<md-input
|
|
49
53
|
part="md-input"
|
|
@@ -57,10 +61,11 @@
|
|
|
57
61
|
shape="${this.pill?"pill":"none"}"
|
|
58
62
|
.ariaControls=${this.id}
|
|
59
63
|
clear
|
|
64
|
+
?newMomentum=${this.newMomentum}
|
|
60
65
|
clearAriaLabel="${this.clearAriaLabel}"
|
|
61
66
|
type="tel"
|
|
62
67
|
value="${this.formattedValue}"
|
|
63
68
|
.messageArr="${!this.isValid||this.showErrorMessage?[{type:"error",id:this.id,ariaLive:"polite",message:this.errorMessage}]:[]}"
|
|
64
69
|
></md-input>
|
|
65
70
|
</div>
|
|
66
|
-
`}};
|
|
71
|
+
`}};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={}))}}]);
|