@momentum-ui/web-components 2.14.26 → 2.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/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)}:host .md-dropdown .group:active{background-color:var(--dropdown-bg-color-active)}: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)}:host .md-new-dropdown-label:active{background-color:var(--dropdown-bg-color-active)}:host .md-new-dropdown-label:focus{background-color:var(--dropdown-bg-color-focus)}: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);box-shadow:none;outline:0}:host([focus-visible]) .group{border-color:var(--dropdown-border-color-focus);background-color:var(--dropdown-bg-color-focus)}: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={}))}}]);
|