@momentum-ui/web-components 2.16.12 → 2.16.14
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-10.js +1 -1
- package/dist/chunks/md-11.js +1 -1
- package/dist/chunks/md-14.js +2 -2
- package/dist/chunks/md-15.js +1 -1
- package/dist/chunks/md-17.js +1 -1
- package/dist/chunks/md-18.js +1 -1
- package/dist/chunks/md-19.js +1 -1
- package/dist/chunks/md-20.js +1 -1
- package/dist/chunks/md-21.js +1 -1
- package/dist/chunks/md-22.js +1 -1
- package/dist/chunks/md-25.js +1 -1
- package/dist/chunks/md-27.js +1 -1
- package/dist/chunks/md-28.js +1 -1
- package/dist/chunks/md-29.js +1 -1
- package/dist/chunks/md-30.js +1 -1
- package/dist/chunks/md-31.js +1 -1
- package/dist/chunks/md-32.js +1 -1
- package/dist/chunks/md-33.js +1 -1
- package/dist/chunks/md-34.js +9 -9
- package/dist/chunks/md-35.js +3 -3
- package/dist/chunks/md-37.js +1 -1
- package/dist/chunks/md-38.js +1 -1
- package/dist/chunks/md-39.js +1 -1
- package/dist/chunks/md-41.js +1 -1
- package/dist/chunks/md-42.js +1 -1
- package/dist/chunks/md-43.js +1 -1
- package/dist/chunks/md-44.js +1 -1
- package/dist/chunks/md-45.js +2 -2
- package/dist/chunks/md-46.js +1 -1
- package/dist/chunks/md-47.js +1 -27
- package/dist/chunks/md-48.js +26 -4
- package/dist/chunks/md-49.js +4 -37
- package/dist/chunks/md-5.js +1 -1
- package/dist/chunks/md-50.js +38 -13
- package/dist/chunks/md-51.js +12 -33
- package/dist/chunks/md-52.js +34 -20
- package/dist/chunks/md-53.js +18 -119
- package/dist/chunks/md-54.js +114 -91
- package/dist/chunks/md-55.js +98 -11
- package/dist/chunks/md-56.js +11 -5
- package/dist/chunks/md-57.js +4 -76
- package/dist/chunks/md-58.js +68 -59
- package/dist/chunks/md-59.js +64 -18
- package/dist/chunks/md-6.js +2 -2
- package/dist/chunks/md-60.js +22 -14
- package/dist/chunks/md-61.js +14 -5
- package/dist/chunks/md-62.js +5 -51
- package/dist/chunks/md-63.js +51 -22
- package/dist/chunks/md-64.js +19 -44
- package/dist/chunks/md-65.js +46 -4
- package/dist/chunks/md-66.js +5 -1
- package/dist/chunks/md-67.js +1 -23
- package/dist/chunks/md-68.js +23 -5
- package/dist/chunks/md-69.js +4 -10
- package/dist/chunks/md-70.js +9 -136
- package/dist/chunks/md-71.js +135 -27
- package/dist/chunks/md-72.js +29 -69
- package/dist/chunks/md-73.js +70 -19
- package/dist/chunks/md-74.js +19 -22
- package/dist/chunks/md-75.js +21 -16
- package/dist/chunks/md-76.js +17 -76
- package/dist/chunks/md-77.js +76 -7
- package/dist/chunks/md-78.js +7 -72
- package/dist/chunks/md-79.js +72 -77
- package/dist/chunks/md-80.js +78 -71
- package/dist/chunks/md-81.js +69 -15
- package/dist/chunks/md-82.js +16 -4
- package/dist/chunks/md-83.js +4 -18
- package/dist/chunks/md-84.js +19 -1
- package/dist/chunks/md-85.js +1 -168
- package/dist/chunks/md-86.js +167 -42
- package/dist/chunks/md-87.js +41 -99
- package/dist/chunks/md-88.js +94 -75
- package/dist/chunks/md-89.js +81 -11
- package/dist/chunks/md-90.js +11 -42
- package/dist/chunks/md-91.js +41 -32
- package/dist/chunks/md-92.js +34 -1
- package/dist/comp/md-accordion-entry.js +1 -1
- package/dist/comp/md-accordion-item-entry.js +1 -1
- package/dist/comp/md-accordion-item.js +1 -1
- package/dist/comp/md-accordion.js +1 -1
- package/dist/comp/md-activity-button-entry.js +1 -1
- package/dist/comp/md-activity-button.js +1 -1
- package/dist/comp/md-advance-list-entry.js +1 -1
- package/dist/comp/md-advance-list.js +1 -1
- package/dist/comp/md-alert-banner-entry.js +1 -1
- package/dist/comp/md-alert-banner.js +1 -1
- package/dist/comp/md-alert-entry.js +1 -1
- package/dist/comp/md-alert.js +1 -1
- package/dist/comp/md-audio-player-entry.js +1 -1
- package/dist/comp/md-audio-player.js +1 -1
- package/dist/comp/md-avatar-entry.js +1 -1
- package/dist/comp/md-badge-entry.js +1 -1
- package/dist/comp/md-breadcrumb-entry.js +1 -1
- package/dist/comp/md-breadcrumb.js +1 -1
- package/dist/comp/md-button-group-entry.js +1 -1
- package/dist/comp/md-button-group.js +1 -1
- package/dist/comp/md-card-ai-entry.js +1 -1
- package/dist/comp/md-card-ai.js +1 -1
- package/dist/comp/md-card-entry.js +1 -1
- package/dist/comp/md-card.js +1 -1
- package/dist/comp/md-chat-message-entry.js +1 -1
- package/dist/comp/md-chat-message.js +1 -1
- package/dist/comp/md-checkbox-entry.js +1 -1
- package/dist/comp/md-checkbox.js +1 -1
- package/dist/comp/md-checkboxgroup-entry.js +1 -1
- package/dist/comp/md-checkboxgroup.js +1 -1
- package/dist/comp/md-chip-entry.js +1 -1
- package/dist/comp/md-chip.js +1 -1
- package/dist/comp/md-coachmark-entry.js +1 -1
- package/dist/comp/md-coachmark-popover-entry.js +1 -1
- package/dist/comp/md-coachmark-popover.js +1 -1
- package/dist/comp/md-coachmark.js +1 -1
- package/dist/comp/md-combobox-entry.js +1 -1
- package/dist/comp/md-composite-avatar-entry.js +1 -1
- package/dist/comp/md-composite-avatar.js +1 -1
- package/dist/comp/md-date-range-picker-entry.js +1 -1
- package/dist/comp/md-date-range-picker.js +1 -1
- package/dist/comp/md-date-time-picker-entry.js +1 -1
- package/dist/comp/md-date-time-picker.js +1 -1
- package/dist/comp/md-datepicker-calendar-entry.js +1 -1
- package/dist/comp/md-datepicker-day-entry.js +1 -1
- package/dist/comp/md-datepicker-entry.js +1 -1
- package/dist/comp/md-datepicker-month-entry.js +1 -1
- package/dist/comp/md-datepicker-week-entry.js +1 -1
- package/dist/comp/md-draggable-entry.js +1 -1
- package/dist/comp/md-draggable-item-entry.js +1 -1
- package/dist/comp/md-draggable-item.js +1 -1
- package/dist/comp/md-draggable.js +1 -1
- package/dist/comp/md-dropdown-entry.js +1 -1
- package/dist/comp/md-dropdown.js +1 -1
- package/dist/comp/md-editable-field-entry.js +1 -1
- package/dist/comp/md-editable-field.js +1 -1
- package/dist/comp/md-favorite-entry.js +1 -1
- package/dist/comp/md-floating-minimize-entry.js +1 -1
- package/dist/comp/md-floating-modal-entry.js +1 -1
- package/dist/comp/md-floating-modal.js +1 -1
- package/dist/comp/md-form-entry.js +1 -1
- package/dist/comp/md-form.js +1 -1
- package/dist/comp/md-grabber-entry.js +1 -1
- package/dist/comp/md-grabber.js +1 -1
- package/dist/comp/md-help-text-entry.js +1 -1
- package/dist/comp/md-icon-entry.js +1 -1
- package/dist/comp/md-inpu.js +1 -1
- package/dist/comp/md-input-entry.js +1 -1
- package/dist/comp/md-input-file.js +1 -1
- package/dist/comp/md-label-entry.js +1 -1
- package/dist/comp/md-list-entry.js +1 -1
- package/dist/comp/md-list-item-entry.js +1 -1
- package/dist/comp/md-meeting-alert-entry.js +1 -1
- package/dist/comp/md-meeting-alert.js +1 -1
- package/dist/comp/md-menu-entry.js +1 -1
- package/dist/comp/md-menu-item-entry.js +1 -1
- package/dist/comp/md-menu.js +1 -1
- package/dist/comp/md-modal-entry.js +1 -1
- package/dist/comp/md-modal.js +2 -1
- package/dist/comp/md-pagination-entry.js +1 -1
- package/dist/comp/md-pagination.js +1 -1
- package/dist/comp/md-phone-input-entry.js +1 -1
- package/dist/comp/md-phone-input.js +1 -1
- package/dist/comp/md-popover-entry.js +1 -1
- package/dist/comp/md-radio-entry.js +1 -1
- package/dist/comp/md-radio.js +2 -2
- package/dist/comp/md-radiogroup-entry.js +1 -1
- package/dist/comp/md-radiogroup.js +2 -2
- package/dist/comp/md-slider-entry.js +1 -1
- package/dist/comp/md-slider.js +1 -1
- package/dist/comp/md-spinner-entry.js +1 -1
- package/dist/comp/md-tab-entry.js +1 -1
- package/dist/comp/md-tab-panel-entry.js +1 -1
- package/dist/comp/md-tab-panel.js +1 -1
- package/dist/comp/md-tab.js +1 -1
- package/dist/comp/md-table-advanced-entry.js +1 -1
- package/dist/comp/md-table-advanced.js +1 -1
- package/dist/comp/md-table-entry.js +1 -1
- package/dist/comp/md-table.js +1 -1
- package/dist/comp/md-tabs-entry.js +1 -1
- package/dist/comp/md-tabs.js +2 -2
- package/dist/comp/md-task-item-entry.js +1 -1
- package/dist/comp/md-task-item.js +1 -1
- package/dist/comp/md-theme-entry.js +1 -1
- package/dist/comp/md-theme.js +1 -1
- package/dist/comp/md-timepicker-entry.js +1 -1
- package/dist/comp/md-timepicker.js +1 -1
- package/dist/comp/md-toggle-switch-entry.js +1 -1
- package/dist/comp/md-toggle-switch.js +1 -1
- package/dist/index-entry.js +2 -2
- package/dist/index.js +36 -36
- package/dist/managers/thememanager-entry.js +1 -1
- package/dist/managers/thememanager.js +1 -1
- package/dist/types/components/grabber/Grabber.d.ts +1 -0
- package/dist/types/components/link/Link.d.ts +7 -0
- package/dist/types/components/modal/Modal.d.ts +4 -0
- package/package.json +2 -2
package/dist/chunks/md-70.js
CHANGED
|
@@ -1,138 +1,11 @@
|
|
|
1
|
-
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[70],{124: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)}: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{height:2rem}: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.pill=!1,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,"md-dropdown--pill":!0===this.pill}}handleInput(e){const o=e.target.value;this.inputValue=o.trim(),this.notifyInputValueChanged(o.trim())}helpTextTemplate(){return this.helpText?a.html`
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
></md-help-text>
|
|
7
|
-
`:a.nothing}messagesTemplate(){return this.messages&&this.messages.length?a.html`
|
|
8
|
-
<div id="${this.htmlId}-message" part="message" class="md-dropbox__messages">
|
|
9
|
-
${Object(c.repeat)(this.messages,(e,o)=>a.html`
|
|
10
|
-
<md-help-text
|
|
11
|
-
.message=${e}
|
|
12
|
-
.id=${this.messageArr[o].id||""}
|
|
13
|
-
.ariaLive=${this.messageArr[o].ariaLive||"polite"}
|
|
14
|
-
.messageType=${this.messageType}
|
|
15
|
-
></md-help-text>
|
|
16
|
-
`)}
|
|
17
|
-
</div>
|
|
18
|
-
`:a.nothing}iconTemplate(){return a.html`
|
|
19
|
-
<md-icon
|
|
20
|
-
class="md-dropdown-left-icon"
|
|
21
|
-
name="${this.leftIcon}"
|
|
22
|
-
size="16"
|
|
23
|
-
iconSet="momentumDesign"
|
|
24
|
-
@click=${this.toggleVisualListBox}
|
|
25
|
-
></md-icon>
|
|
26
|
-
`}clearButtonTemplate(){return a.html`
|
|
27
|
-
<button
|
|
28
|
-
type="button"
|
|
29
|
-
class="md-dropdown-button clear"
|
|
30
|
-
aria-label=${this.clearAriaLabel}
|
|
31
|
-
aria-controls="md-dropdown-input"
|
|
32
|
-
tabindex="0"
|
|
33
|
-
?readonly=${this.readOnly}
|
|
34
|
-
?disabled=${this.disabled}
|
|
35
|
-
@click=${this.handleRemoveAll}
|
|
1
|
+
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[70],{100:function(e,t,d){"use strict";d.r(t),d.d(t,"DraggableItem",(function(){return n}));var n,o=d(7),i=d(5),r=d(6),a=d(0),l=d(2),s=d(4),c=d(68),p=function(e,t,d,n){var o,i=arguments.length,r=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,d):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,d,n);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(r=(i<3?o(r):i>3?o(t,d,r):o(t,d))||r);return i>3&&r&&Object.defineProperty(t,d,r),r};!function(e){let t=class extends(Object(o.a)(a.LitElement)){constructor(){super(...arguments),this.disabled=!1,this.extended=!1,this.editable=!1}static get styles(){return[r.a,c.a]}get draggableItemClassMap(){return{extended:this.extended,default:!this.extended,disabled:this.disabled}}render(){return a.html`
|
|
2
|
+
<div
|
|
3
|
+
class="md-draggable-item ${Object(s.classMap)(this.draggableItemClassMap)}"
|
|
4
|
+
part="draggable-item"
|
|
5
|
+
aria-disabled=${this.disabled}
|
|
36
6
|
>
|
|
37
|
-
<md-icon
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
size="16"
|
|
41
|
-
iconSet="momentumDesign"
|
|
42
|
-
style="height: ${this.clearIconHeight};"
|
|
43
|
-
></md-icon>
|
|
44
|
-
</button>
|
|
45
|
-
`}arrowButtonTemplate(){return a.html`
|
|
46
|
-
<button
|
|
47
|
-
type="button"
|
|
48
|
-
class="md-dropdown-button arrow-down"
|
|
49
|
-
aria-expanded=${this.expanded}
|
|
50
|
-
aria-label=${Object(p.ifDefined)("true"===this.popupChevronAriaHidden?void 0:this.arrowAriaLabel)}
|
|
51
|
-
aria-controls="md-dropdown-input"
|
|
52
|
-
tabindex="-1"
|
|
53
|
-
aria-hidden=${Object(p.ifDefined)("true"===this.popupChevronAriaHidden?"true":void 0)}
|
|
54
|
-
?readonly=${this.readOnly}
|
|
55
|
-
?disabled=${this.disabled}
|
|
56
|
-
@click=${this.toggleVisualListBox}
|
|
57
|
-
>
|
|
58
|
-
<md-icon name="arrow-down-bold" size="16" iconSet="momentumDesign"></md-icon>
|
|
59
|
-
</button>
|
|
60
|
-
`}render(){return a.html`
|
|
61
|
-
<div class="md-dropdown ${Object(l.classMap)(this.dropDownClassMap)}" part="dropdown">
|
|
62
|
-
${this.searchable?a.html`
|
|
63
|
-
<div part="group" class="group" ?readonly=${this.readOnly}>
|
|
64
|
-
${this.leftIcon?this.iconTemplate():a.nothing}
|
|
65
|
-
<input
|
|
66
|
-
class="md-dropdown-input"
|
|
67
|
-
type="text"
|
|
68
|
-
role="combobox"
|
|
69
|
-
aria-autocomplete="both"
|
|
70
|
-
aria-label=${this.title}
|
|
71
|
-
part="dropdown-input"
|
|
72
|
-
aria-expanded=${this.expanded}
|
|
73
|
-
placeholder=${this.placeholder}
|
|
74
|
-
aria-controls="md-dropdown-list"
|
|
75
|
-
?readonly=${this.readOnly}
|
|
76
|
-
?disabled=${this.disabled}
|
|
77
|
-
?autofocus=${this.autofocus}
|
|
78
|
-
title=${this.title}
|
|
79
|
-
tabindex="0"
|
|
80
|
-
.value=${this.inputValue}
|
|
81
|
-
@click=${this.toggleVisualListBox}
|
|
82
|
-
@input=${this.handleInput}
|
|
83
|
-
/>
|
|
84
|
-
${this.compact||!this.searchable?a.nothing:this.shouldChangeButton()?this.clearButtonTemplate():this.arrowButtonTemplate()}
|
|
85
|
-
</div>
|
|
86
|
-
`:a.html`
|
|
87
|
-
<label
|
|
88
|
-
class="md-dropdown-label ${Object(l.classMap)({"md-new-dropdown-label":this.newMomentum})}"
|
|
89
|
-
aria-expanded="${this.expanded}"
|
|
90
|
-
aria-label="${this.title}"
|
|
91
|
-
aria-controls="md-dropdown-list"
|
|
92
|
-
aria-haspopup="listbox"
|
|
93
|
-
?disabled="${this.disabled}"
|
|
94
|
-
@click="${()=>this.onLabelClick()}"
|
|
95
|
-
part="dropdown-header"
|
|
96
|
-
role="combobox"
|
|
97
|
-
tabindex="0"
|
|
98
|
-
>
|
|
99
|
-
<span class="md-dropdown-label--text ${Object(l.classMap)({"md-new-dropdown-label--text":this.newMomentum})}"
|
|
100
|
-
>${this.labelTitle}</span
|
|
101
|
-
>
|
|
102
|
-
<span class="md-dropdown-label--icon">
|
|
103
|
-
<md-icon name="arrow-down-bold" size="16" iconSet="momentumDesign"></md-icon>
|
|
104
|
-
</span>
|
|
105
|
-
</label>
|
|
106
|
-
`}
|
|
107
|
-
<ul
|
|
108
|
-
id="md-dropdown-list"
|
|
109
|
-
class="md-dropdown-list"
|
|
110
|
-
role="listbox"
|
|
111
|
-
aria-label="${this.labelTitle}"
|
|
112
|
-
aria-hidden="${!this.expanded}"
|
|
113
|
-
part="dropdown-options"
|
|
114
|
-
tabindex=${Object(p.ifDefined)(-1===this.customTabIndex?void 0:this.customTabIndex)}
|
|
115
|
-
>
|
|
116
|
-
${this.filteredOptions.map((e,o)=>a.html`
|
|
117
|
-
<li
|
|
118
|
-
id="combo-${o}"
|
|
119
|
-
class="md-dropdown-option"
|
|
120
|
-
role="option"
|
|
121
|
-
tabindex=${Object(p.ifDefined)(-1===this.customTabIndex?void 0:this.customTabIndex)}
|
|
122
|
-
aria-label="${e.value}"
|
|
123
|
-
label="${e.value}"
|
|
124
|
-
aria-selected="${e.key===this.selectedKey}"
|
|
125
|
-
part="dropdown-option"
|
|
126
|
-
?focused="${o===this.focusedIndex}"
|
|
127
|
-
?selected="${e.key===this.selectedKey}"
|
|
128
|
-
@click="${()=>{this.focusToIndexWithOption(e),this.select(),this.collapse()}}"
|
|
129
|
-
>
|
|
130
|
-
<span class="select-label" part="label">
|
|
131
|
-
<span>${e.value}</span>
|
|
132
|
-
</span>
|
|
133
|
-
</li>
|
|
134
|
-
`)}
|
|
135
|
-
</ul>
|
|
7
|
+
${this.extended&&this.editable?a.html` <md-icon name="dragger-vertical-bold" size="16" iconSet="momentumDesign"></md-icon> `:l.nothing}
|
|
8
|
+
<slot></slot>
|
|
9
|
+
${this.extended?a.html` <slot name="extended"></slot> `:l.nothing}
|
|
136
10
|
</div>
|
|
137
|
-
|
|
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:Boolean})],t.prototype,"pill",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={}))}}]);
|
|
11
|
+
`}};p([Object(a.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",void 0),p([Object(a.property)({type:Boolean,reflect:!0})],t.prototype,"extended",void 0),p([Object(a.property)({type:Boolean,reflect:!0})],t.prototype,"editable",void 0),t=p([Object(i.a)("md-draggable-item")],t),e.ELEMENT=t}(n||(n={}))}}]);
|
package/dist/chunks/md-71.js
CHANGED
|
@@ -1,30 +1,138 @@
|
|
|
1
|
-
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[71],{125:function(e,t,i){"use strict";i.r(t),i.d(t,"alignment",(function(){return f})),i.d(t,"EditableTextfield",(function(){return g}));var d=i(20),l=i(6),r=i(48),a=i.n(r),s=i(5),o=i(0),n=i(2),c=i(4),h=i(3),b=i(30),p=o.css`:focus{outline:0}.md-editable-textfield{border-radius:.25rem;line-height:1.3571428571 rem;min-height:2rem;overflow-y:auto;padding:0 .375rem 0 .375rem}.md-editable-textfield:hover{background-color:var(--editable-textfield-default-hover-bg-color,#ededed)}.md-editable-textfield:active{background-color:var(--editable-textfield-default-pressed-bg-color,#dedede)}.md-editable-textfield:focus{box-shadow:0 0 0 .0625rem var(--md-default-focus-outline-color,#007aa3)}.md-editable-textfield--left .md-input{text-align:left}.md-editable-textfield--center .md-input{text-align:center}.md-editable-textfield--center ::slotted(*){text-align:center}.md-editable-textfield--right .md-input{text-align:right}.md-editable-textfield--right ::slotted(*){text-align:right}.md-editable-textfield--disabled{background-color:rgba(0,0,0,0);color:var(--md-secondary-text-color,#545454);cursor:default}.md-editable-textfield--disabled:hover{background-color:rgba(0,0,0,0)}.md-editable-textfield--disabled:focus{box-shadow:none;outline:0}.md-editable-textfield--error{background-color:var(--md-alert-error-bg-color,#ffe8e3);border:1px solid var(--editable-textfield-error-border-color,#a12512);color:var(--md-alert-error-text-color,#a12512)}.md-editable-textfield--error:focus{box-shadow:none;outline:0}.md-editable-textfield--warning{background-color:var(--md-alert-warning-bg-color,#ffecc2);border:1px solid var(--editable-textfield-warning-border-color,#d97f00);color:var(--md-alert-warning-text-color,#7d4705)}.md-editable-textfield--warning:focus{box-shadow:none;outline:0}.md-editable-textfield--success{background-color:var(--md-alert-success-bg-color,#befade);border:1px solid var(--editable-textfield-success-border-color,#00ab50);color:var(--md-alert-success-text-color,#03612c)}.md-editable-textfield--success:focus{box-shadow:none;outline:0}.md-editable-textfield--textoverflow{-webkit-box-orient:vertical;display:-webkit-box;overflow-y:hidden;text-overflow:ellipsis}.md-editable-textfield__messages{padding:.375rem 0 0 1rem}@media(forced-colors:active){.md-editable-textfield:focus{outline:1px solid Highlight;box-shadow:none}.md-editable-textfield--disabled{color:GrayText;cursor:default}.md-editable-textfield--disabled:focus{box-shadow:none;outline:0}}`,m=function(e,t,i,d){var l,r=arguments.length,a=r<3?t:null===d?d=Object.getOwnPropertyDescriptor(t,i):d;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,d);else for(var s=e.length-1;s>=0;s--)(l=e[s])&&(a=(r<3?l(a):r>3?l(t,i,a):l(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};const f=["left","right","center"];var g;!function(e){let t=class extends o.LitElement{constructor(){super(...arguments),this.alignment="left",this.disabled=!1,this.isEditing=!1,this.maxLines="",this.content="Click to edit text",this.message={type:"error",message:"That is not a valid input."},this.alert=!1,this.hideMessage=!1,this.pattern="",this.type=null,this.ariaLabel="editable field",this.ariaDescribedBy="",this.messageController=new b.Input.MessageController,this.reportValidity=()=>{this.dispatchEvent(new Event("invalid",{bubbles:!1,cancelable:!0,composed:!0}))},this.checkValidity=e=>{let t=!0;const i=i=>{null===e.match(i)&&(t=!1)};if(this.pattern){i(new RegExp(this.pattern))}else if(e&&this.type)switch(this.type){case"integer":i(new RegExp(d.a.integerString));break;case"decimal":i(new RegExp(d.a.decimalString))}return t},this.handleFocus=()=>{this.disabled||(this.isEditing=!0,this.setRange())},this.handleKeydown=e=>{var t;const{key:i,code:d}=e;if(["Tab","Meta","Shift","Delete","Backspace","Arrow"].some(e=>d.includes(e)))return;("integer"===this.type&&i.includes(".")||("integer"===this.type||"decimal"===this.type)&&d.match("Space"))&&e.preventDefault();const l=(null===(t=this.editableField)||void 0===t?void 0:t.innerText.trim())+i;if(this.type)if(isNaN(Number(l)))e.preventDefault();else{if("integer"!==this.type||Number.isInteger(Number(l)))return;e.preventDefault()}},this.handleBlur=()=>{var e;this.isEditing=!1,this.maxLines.length>0&&this.editableField&&this.editableField.scrollTo(0,0),this.content=(null===(e=this.editableField)||void 0===e?void 0:e.innerText.trim())||"",this.alert=!1,this.handleValidation()}}connectedCallback(){super.connectedCallback(),this.addEventListener("focus",this.handleFocus)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this.handleFocus)}firstUpdated(e){super.firstUpdated(e),this.innerText&&this.innerText.length>0?this.content=this.innerText.trim():this.innerText=a.a.sanitize(this.content)}updated(e){super.updated(e),e.has("content")&&this.editableField&&(this.editableField.innerText=a.a.sanitize(this.content))}setRange(){var e;if(this.editableField){const t=document.createRange(),i=window.getSelection(),d=null===(e=this.editableField.childNodes[0].nodeValue)||void 0===e?void 0:e.length;if(t.setStart(this.editableField.childNodes[0],d||0),t.collapse(!0),!i||0!==i.toString().length)return;i.removeAllRanges(),i.addRange(t),this.maxLines.length>0&&(this.editableField.scrollTop=this.editableField.scrollHeight)}}handleValidation(){if(this.type||this.pattern){this.checkValidity&&this.checkValidity(this.content)||(this.reportValidity(),this.showAlert())}}showAlert(){this.alert=!0}static get styles(){return[l.a,p]}get overflowStyles(){return this.maxLines.length&&this.maxLines.length>0&&`max-height: ${2*parseInt(this.maxLines)}rem; -webkit-line-clamp: ${this.maxLines}; word-break: break-all;`}messagesTemplate(){var e,t,i;return this.alert?o.html`
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[71],{124: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)}: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{height:2rem}: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.pill=!1,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,"md-dropdown--pill":!0===this.pill}}handleInput(e){const o=e.target.value;this.inputValue=o.trim(),this.notifyInputValueChanged(o.trim())}helpTextTemplate(){return this.helpText?a.html`
|
|
2
|
+
<md-help-text
|
|
3
|
+
class="help-text ${Object(l.classMap)({disabled:this.disabled,newMomentum:this.newMomentum})}"
|
|
4
|
+
.message=${this.helpText}
|
|
5
|
+
style=${Object(h.styleMap)({width:"100%"})}
|
|
6
|
+
></md-help-text>
|
|
7
|
+
`:a.nothing}messagesTemplate(){return this.messages&&this.messages.length?a.html`
|
|
8
|
+
<div id="${this.htmlId}-message" part="message" class="md-dropbox__messages">
|
|
9
|
+
${Object(c.repeat)(this.messages,(e,o)=>a.html`
|
|
10
|
+
<md-help-text
|
|
11
|
+
.message=${e}
|
|
12
|
+
.id=${this.messageArr[o].id||""}
|
|
13
|
+
.ariaLive=${this.messageArr[o].ariaLive||"polite"}
|
|
14
|
+
.messageType=${this.messageType}
|
|
15
|
+
></md-help-text>
|
|
16
|
+
`)}
|
|
12
17
|
</div>
|
|
13
|
-
`:
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
aria-
|
|
18
|
+
`:a.nothing}iconTemplate(){return a.html`
|
|
19
|
+
<md-icon
|
|
20
|
+
class="md-dropdown-left-icon"
|
|
21
|
+
name="${this.leftIcon}"
|
|
22
|
+
size="16"
|
|
23
|
+
iconSet="momentumDesign"
|
|
24
|
+
@click=${this.toggleVisualListBox}
|
|
25
|
+
></md-icon>
|
|
26
|
+
`}clearButtonTemplate(){return a.html`
|
|
27
|
+
<button
|
|
28
|
+
type="button"
|
|
29
|
+
class="md-dropdown-button clear"
|
|
30
|
+
aria-label=${this.clearAriaLabel}
|
|
31
|
+
aria-controls="md-dropdown-input"
|
|
32
|
+
tabindex="0"
|
|
33
|
+
?readonly=${this.readOnly}
|
|
34
|
+
?disabled=${this.disabled}
|
|
35
|
+
@click=${this.handleRemoveAll}
|
|
26
36
|
>
|
|
27
|
-
|
|
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>
|
|
44
|
+
</button>
|
|
45
|
+
`}arrowButtonTemplate(){return a.html`
|
|
46
|
+
<button
|
|
47
|
+
type="button"
|
|
48
|
+
class="md-dropdown-button arrow-down"
|
|
49
|
+
aria-expanded=${this.expanded}
|
|
50
|
+
aria-label=${Object(p.ifDefined)("true"===this.popupChevronAriaHidden?void 0:this.arrowAriaLabel)}
|
|
51
|
+
aria-controls="md-dropdown-input"
|
|
52
|
+
tabindex="-1"
|
|
53
|
+
aria-hidden=${Object(p.ifDefined)("true"===this.popupChevronAriaHidden?"true":void 0)}
|
|
54
|
+
?readonly=${this.readOnly}
|
|
55
|
+
?disabled=${this.disabled}
|
|
56
|
+
@click=${this.toggleVisualListBox}
|
|
57
|
+
>
|
|
58
|
+
<md-icon name="arrow-down-bold" size="16" iconSet="momentumDesign"></md-icon>
|
|
59
|
+
</button>
|
|
60
|
+
`}render(){return a.html`
|
|
61
|
+
<div class="md-dropdown ${Object(l.classMap)(this.dropDownClassMap)}" part="dropdown">
|
|
62
|
+
${this.searchable?a.html`
|
|
63
|
+
<div part="group" class="group" ?readonly=${this.readOnly}>
|
|
64
|
+
${this.leftIcon?this.iconTemplate():a.nothing}
|
|
65
|
+
<input
|
|
66
|
+
class="md-dropdown-input"
|
|
67
|
+
type="text"
|
|
68
|
+
role="combobox"
|
|
69
|
+
aria-autocomplete="both"
|
|
70
|
+
aria-label=${this.title}
|
|
71
|
+
part="dropdown-input"
|
|
72
|
+
aria-expanded=${this.expanded}
|
|
73
|
+
placeholder=${this.placeholder}
|
|
74
|
+
aria-controls="md-dropdown-list"
|
|
75
|
+
?readonly=${this.readOnly}
|
|
76
|
+
?disabled=${this.disabled}
|
|
77
|
+
?autofocus=${this.autofocus}
|
|
78
|
+
title=${this.title}
|
|
79
|
+
tabindex="0"
|
|
80
|
+
.value=${this.inputValue}
|
|
81
|
+
@click=${this.toggleVisualListBox}
|
|
82
|
+
@input=${this.handleInput}
|
|
83
|
+
/>
|
|
84
|
+
${this.compact||!this.searchable?a.nothing:this.shouldChangeButton()?this.clearButtonTemplate():this.arrowButtonTemplate()}
|
|
85
|
+
</div>
|
|
86
|
+
`:a.html`
|
|
87
|
+
<label
|
|
88
|
+
class="md-dropdown-label ${Object(l.classMap)({"md-new-dropdown-label":this.newMomentum})}"
|
|
89
|
+
aria-expanded="${this.expanded}"
|
|
90
|
+
aria-label="${this.title}"
|
|
91
|
+
aria-controls="md-dropdown-list"
|
|
92
|
+
aria-haspopup="listbox"
|
|
93
|
+
?disabled="${this.disabled}"
|
|
94
|
+
@click="${()=>this.onLabelClick()}"
|
|
95
|
+
part="dropdown-header"
|
|
96
|
+
role="combobox"
|
|
97
|
+
tabindex="0"
|
|
98
|
+
>
|
|
99
|
+
<span class="md-dropdown-label--text ${Object(l.classMap)({"md-new-dropdown-label--text":this.newMomentum})}"
|
|
100
|
+
>${this.labelTitle}</span
|
|
101
|
+
>
|
|
102
|
+
<span class="md-dropdown-label--icon">
|
|
103
|
+
<md-icon name="arrow-down-bold" size="16" iconSet="momentumDesign"></md-icon>
|
|
104
|
+
</span>
|
|
105
|
+
</label>
|
|
106
|
+
`}
|
|
107
|
+
<ul
|
|
108
|
+
id="md-dropdown-list"
|
|
109
|
+
class="md-dropdown-list"
|
|
110
|
+
role="listbox"
|
|
111
|
+
aria-label="${this.labelTitle}"
|
|
112
|
+
aria-hidden="${!this.expanded}"
|
|
113
|
+
part="dropdown-options"
|
|
114
|
+
tabindex=${Object(p.ifDefined)(-1===this.customTabIndex?void 0:this.customTabIndex)}
|
|
115
|
+
>
|
|
116
|
+
${this.filteredOptions.map((e,o)=>a.html`
|
|
117
|
+
<li
|
|
118
|
+
id="combo-${o}"
|
|
119
|
+
class="md-dropdown-option"
|
|
120
|
+
role="option"
|
|
121
|
+
tabindex=${Object(p.ifDefined)(-1===this.customTabIndex?void 0:this.customTabIndex)}
|
|
122
|
+
aria-label="${e.value}"
|
|
123
|
+
label="${e.value}"
|
|
124
|
+
aria-selected="${e.key===this.selectedKey}"
|
|
125
|
+
part="dropdown-option"
|
|
126
|
+
?focused="${o===this.focusedIndex}"
|
|
127
|
+
?selected="${e.key===this.selectedKey}"
|
|
128
|
+
@click="${()=>{this.focusToIndexWithOption(e),this.select(),this.collapse()}}"
|
|
129
|
+
>
|
|
130
|
+
<span class="select-label" part="label">
|
|
131
|
+
<span>${e.value}</span>
|
|
132
|
+
</span>
|
|
133
|
+
</li>
|
|
134
|
+
`)}
|
|
135
|
+
</ul>
|
|
28
136
|
</div>
|
|
29
|
-
${this.messagesTemplate()}
|
|
30
|
-
`}};
|
|
137
|
+
${this.messagesTemplate()} ${this.helpTextTemplate()}
|
|
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:Boolean})],t.prototype,"pill",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-72.js
CHANGED
|
@@ -1,70 +1,30 @@
|
|
|
1
|
-
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[72],{
|
|
2
|
-
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
aria-
|
|
9
|
-
style=${Object(h.ifDefined)(this.containerRect?`width: ${this.full?"100% !important":this.containerRect.width+"px !important"};\n height: ${this.full?"100% !important":this.containerRect.height+"px !important"};\n top: ${this.full?"0 !important":""};\n left: ${this.full?"0 !important":""};\n bottom: ${this.full?"0 !important":""};\n right: ${this.full?"0 !important":""};\n ${this.full?"transform: none !important":""};\n ${this.full?"":`transform: ${this.position?`translate(${this.position.x}px, ${this.position.y}px)`:this.containerTransform} !important`};`:void 0)}
|
|
1
|
+
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[72],{125:function(e,t,i){"use strict";i.r(t),i.d(t,"alignment",(function(){return f})),i.d(t,"EditableTextfield",(function(){return g}));var d=i(20),l=i(6),r=i(49),a=i.n(r),s=i(5),o=i(0),n=i(2),c=i(4),h=i(3),b=i(30),p=o.css`:focus{outline:0}.md-editable-textfield{border-radius:.25rem;line-height:1.3571428571 rem;min-height:2rem;overflow-y:auto;padding:0 .375rem 0 .375rem}.md-editable-textfield:hover{background-color:var(--editable-textfield-default-hover-bg-color,#ededed)}.md-editable-textfield:active{background-color:var(--editable-textfield-default-pressed-bg-color,#dedede)}.md-editable-textfield:focus{box-shadow:0 0 0 .0625rem var(--md-default-focus-outline-color,#007aa3)}.md-editable-textfield--left .md-input{text-align:left}.md-editable-textfield--center .md-input{text-align:center}.md-editable-textfield--center ::slotted(*){text-align:center}.md-editable-textfield--right .md-input{text-align:right}.md-editable-textfield--right ::slotted(*){text-align:right}.md-editable-textfield--disabled{background-color:rgba(0,0,0,0);color:var(--md-secondary-text-color,#545454);cursor:default}.md-editable-textfield--disabled:hover{background-color:rgba(0,0,0,0)}.md-editable-textfield--disabled:focus{box-shadow:none;outline:0}.md-editable-textfield--error{background-color:var(--md-alert-error-bg-color,#ffe8e3);border:1px solid var(--editable-textfield-error-border-color,#a12512);color:var(--md-alert-error-text-color,#a12512)}.md-editable-textfield--error:focus{box-shadow:none;outline:0}.md-editable-textfield--warning{background-color:var(--md-alert-warning-bg-color,#ffecc2);border:1px solid var(--editable-textfield-warning-border-color,#d97f00);color:var(--md-alert-warning-text-color,#7d4705)}.md-editable-textfield--warning:focus{box-shadow:none;outline:0}.md-editable-textfield--success{background-color:var(--md-alert-success-bg-color,#befade);border:1px solid var(--editable-textfield-success-border-color,#00ab50);color:var(--md-alert-success-text-color,#03612c)}.md-editable-textfield--success:focus{box-shadow:none;outline:0}.md-editable-textfield--textoverflow{-webkit-box-orient:vertical;display:-webkit-box;overflow-y:hidden;text-overflow:ellipsis}.md-editable-textfield__messages{padding:.375rem 0 0 1rem}@media(forced-colors:active){.md-editable-textfield:focus{outline:1px solid Highlight;box-shadow:none}.md-editable-textfield--disabled{color:GrayText;cursor:default}.md-editable-textfield--disabled:focus{box-shadow:none;outline:0}}`,m=function(e,t,i,d){var l,r=arguments.length,a=r<3?t:null===d?d=Object.getOwnPropertyDescriptor(t,i):d;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,d);else for(var s=e.length-1;s>=0;s--)(l=e[s])&&(a=(r<3?l(a):r>3?l(t,i,a):l(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};const f=["left","right","center"];var g;!function(e){let t=class extends o.LitElement{constructor(){super(...arguments),this.alignment="left",this.disabled=!1,this.isEditing=!1,this.maxLines="",this.content="Click to edit text",this.message={type:"error",message:"That is not a valid input."},this.alert=!1,this.hideMessage=!1,this.pattern="",this.type=null,this.ariaLabel="editable field",this.ariaDescribedBy="",this.messageController=new b.Input.MessageController,this.reportValidity=()=>{this.dispatchEvent(new Event("invalid",{bubbles:!1,cancelable:!0,composed:!0}))},this.checkValidity=e=>{let t=!0;const i=i=>{null===e.match(i)&&(t=!1)};if(this.pattern){i(new RegExp(this.pattern))}else if(e&&this.type)switch(this.type){case"integer":i(new RegExp(d.a.integerString));break;case"decimal":i(new RegExp(d.a.decimalString))}return t},this.handleFocus=()=>{this.disabled||(this.isEditing=!0,this.setRange())},this.handleKeydown=e=>{var t;const{key:i,code:d}=e;if(["Tab","Meta","Shift","Delete","Backspace","Arrow"].some(e=>d.includes(e)))return;("integer"===this.type&&i.includes(".")||("integer"===this.type||"decimal"===this.type)&&d.match("Space"))&&e.preventDefault();const l=(null===(t=this.editableField)||void 0===t?void 0:t.innerText.trim())+i;if(this.type)if(isNaN(Number(l)))e.preventDefault();else{if("integer"!==this.type||Number.isInteger(Number(l)))return;e.preventDefault()}},this.handleBlur=()=>{var e;this.isEditing=!1,this.maxLines.length>0&&this.editableField&&this.editableField.scrollTo(0,0),this.content=(null===(e=this.editableField)||void 0===e?void 0:e.innerText.trim())||"",this.alert=!1,this.handleValidation()}}connectedCallback(){super.connectedCallback(),this.addEventListener("focus",this.handleFocus)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this.handleFocus)}firstUpdated(e){super.firstUpdated(e),this.innerText&&this.innerText.length>0?this.content=this.innerText.trim():this.innerText=a.a.sanitize(this.content)}updated(e){super.updated(e),e.has("content")&&this.editableField&&(this.editableField.innerText=a.a.sanitize(this.content))}setRange(){var e;if(this.editableField){const t=document.createRange(),i=window.getSelection(),d=null===(e=this.editableField.childNodes[0].nodeValue)||void 0===e?void 0:e.length;if(t.setStart(this.editableField.childNodes[0],d||0),t.collapse(!0),!i||0!==i.toString().length)return;i.removeAllRanges(),i.addRange(t),this.maxLines.length>0&&(this.editableField.scrollTop=this.editableField.scrollHeight)}}handleValidation(){if(this.type||this.pattern){this.checkValidity&&this.checkValidity(this.content)||(this.reportValidity(),this.showAlert())}}showAlert(){this.alert=!0}static get styles(){return[l.a,p]}get overflowStyles(){return this.maxLines.length&&this.maxLines.length>0&&`max-height: ${2*parseInt(this.maxLines)}rem; -webkit-line-clamp: ${this.maxLines}; word-break: break-all;`}messagesTemplate(){var e,t,i;return this.alert?o.html`
|
|
2
|
+
<div class="md-editable-textfield__messages" style="display: ${this.hideMessage?"none":"block"}">
|
|
3
|
+
<md-help-text
|
|
4
|
+
id="alert-message"
|
|
5
|
+
role="alert"
|
|
6
|
+
aria-live="assertive"
|
|
7
|
+
.messageType=${null===(e=this.message)||void 0===e?void 0:e.type}
|
|
8
|
+
aria-errormessage=${Object(h.ifDefined)(null===(t=this.message)||void 0===t?void 0:t.message)}
|
|
10
9
|
>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
@click=${this.handleToggleExpandCollapse}
|
|
33
|
-
>
|
|
34
|
-
<md-icon
|
|
35
|
-
name=${this.full?"minimize-bold":"maximize-bold"}
|
|
36
|
-
size="16"
|
|
37
|
-
iconSet="momentumDesign"
|
|
38
|
-
></md-icon>
|
|
39
|
-
</md-button>`}
|
|
40
|
-
|
|
41
|
-
<md-button
|
|
42
|
-
color="color-none"
|
|
43
|
-
class="md-floating__close"
|
|
44
|
-
ariaLabel="${this.closeAriaLabel}"
|
|
45
|
-
circle
|
|
46
|
-
@click=${this.handleClose}
|
|
47
|
-
>
|
|
48
|
-
<md-icon name="cancel-bold" size="16" iconSet="momentumDesign"></md-icon>
|
|
49
|
-
</md-button>
|
|
50
|
-
</div>
|
|
51
|
-
<div class="md-floating__body" part="floating-body">
|
|
52
|
-
<slot></slot>
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
${this.minimizable?d.html` <div class="md-floating-min-parent" part="minimize-floating" tabindex="-1">
|
|
56
|
-
<md-floating-modal-minimized
|
|
57
|
-
class="float-modal-min"
|
|
58
|
-
part="floating-minimized"
|
|
59
|
-
heading=${this.heading}
|
|
60
|
-
.minimize=${this.minimize}
|
|
61
|
-
.minPosition=${this.minPosition}
|
|
62
|
-
@floating-min-modal-minimize=${()=>this.handleMinimize()}
|
|
63
|
-
@floating-modal-close=${this.handleClose}
|
|
64
|
-
?show=${this.show}
|
|
65
|
-
>
|
|
66
|
-
${this.minimize&&this.headerSlot}
|
|
67
|
-
</md-floating-modal-minimized>
|
|
68
|
-
</div>`:c.nothing}
|
|
69
|
-
`:c.nothing}
|
|
70
|
-
`}};p([Object(d.property)({type:String})],i.prototype,"heading",void 0),p([Object(d.property)({type:String})],i.prototype,"label",void 0),p([Object(d.property)({type:Boolean,reflect:!0})],i.prototype,"show",void 0),p([Object(d.property)({type:Boolean,reflect:!0,attribute:"aspect-ratio"})],i.prototype,"aspectRatio",void 0),p([Object(d.property)({type:Boolean,reflect:!0,attribute:"fixed-strategy"})],i.prototype,"fixed",void 0),p([Object(d.property)({type:Boolean,reflect:!0,attribute:"full-screen"})],i.prototype,"full",void 0),p([Object(d.property)({type:String,attribute:"close-aria-label"})],i.prototype,"closeAriaLabel",void 0),p([Object(d.property)({type:String,attribute:"resize-aria-label"})],i.prototype,"resizeAriaLabel",void 0),p([Object(d.property)({type:String,attribute:"maximize-aria-label"})],i.prototype,"maximizeScreenLabel",void 0),p([Object(d.property)({type:String,attribute:"minimize-aria-label"})],i.prototype,"minimizeAriaLabel",void 0),p([Object(d.property)({type:Boolean,reflect:!0})],i.prototype,"minimize",void 0),p([Object(d.property)({type:Object})],i.prototype,"position",void 0),p([Object(d.property)({type:Object})],i.prototype,"minPosition",void 0),p([Object(d.property)({type:Boolean,reflect:!0})],i.prototype,"minimizable",void 0),p([Object(d.property)({type:Object})],i.prototype,"containerRect",void 0),p([Object(d.internalProperty)()],i.prototype,"dragOccured",void 0),p([Object(d.query)(".md-floating")],i.prototype,"container",void 0),p([Object(d.query)(".md-floating__body")],i.prototype,"body",void 0),p([Object(d.query)(".md-floating__header")],i.prototype,"header",void 0),p([Object(d.query)(".md-floating-min-parent")],i.prototype,"minimizedHeader",void 0),p([Object(d.query)('slot[name="header"]')],i.prototype,"headerSlot",void 0),i=p([Object(a.a)("md-floating-modal")],i),t.ELEMENT=i}(o||(o={}))}}]);
|
|
10
|
+
${null===(i=this.message)||void 0===i?void 0:i.message}
|
|
11
|
+
</md-help-text>
|
|
12
|
+
</div>
|
|
13
|
+
`:n.nothing}render(){var e;const t={["md-editable-textfield--"+this.alignment]:this.alignment,"md-editable-textfield--disabled":this.disabled,["md-editable-textfield--"+(null===(e=this.message)||void 0===e?void 0:e.type)]:this.alert&&!!this.message,"md-editable-textfield--textoverflow":this.maxLines.length>0&&!this.isEditing};return o.html`
|
|
14
|
+
<div
|
|
15
|
+
style="${this.overflowStyles}"
|
|
16
|
+
class="md-editable-textfield ${Object(c.classMap)(t)}"
|
|
17
|
+
role=${Object(h.ifDefined)(this.disabled?void 0:"textbox")}
|
|
18
|
+
tabindex=${this.disabled?"-1":"0"}
|
|
19
|
+
?contenteditable=${this.isEditing}
|
|
20
|
+
@focus=${this.handleFocus}
|
|
21
|
+
@blur=${this.handleBlur}
|
|
22
|
+
@keydown=${e=>{this.handleKeydown(e)}}
|
|
23
|
+
aria-invalid=${Object(h.ifDefined)(this.disabled?void 0:this.alert?"true":"false")}
|
|
24
|
+
aria-label=${Object(h.ifDefined)(this.disabled?void 0:this.ariaLabel)}
|
|
25
|
+
aria-describedby=${Object(h.ifDefined)(this.disabled?void 0:this.ariaDescribedBy)}
|
|
26
|
+
>
|
|
27
|
+
${a.a.sanitize(this.content)}
|
|
28
|
+
</div>
|
|
29
|
+
${this.messagesTemplate()}
|
|
30
|
+
`}};m([Object(o.property)({type:String})],t.prototype,"alignment",void 0),m([Object(o.property)({type:Boolean})],t.prototype,"disabled",void 0),m([Object(o.property)({type:Boolean})],t.prototype,"isEditing",void 0),m([Object(o.property)({type:String,attribute:"max-lines",reflect:!0})],t.prototype,"maxLines",void 0),m([Object(o.property)({type:String,reflect:!0})],t.prototype,"content",void 0),m([Object(o.property)({type:Object})],t.prototype,"message",void 0),m([Object(o.property)({type:Boolean,reflect:!0})],t.prototype,"alert",void 0),m([Object(o.property)({type:Boolean})],t.prototype,"hideMessage",void 0),m([Object(o.property)({type:String})],t.prototype,"pattern",void 0),m([Object(o.property)({type:String})],t.prototype,"type",void 0),m([Object(o.property)({type:String})],t.prototype,"ariaLabel",void 0),m([Object(o.property)({type:String,attribute:"aria-described-by"})],t.prototype,"ariaDescribedBy",void 0),m([Object(o.query)(".md-editable-textfield")],t.prototype,"editableField",void 0),t=m([Object(s.a)("md-editable-field")],t),e.ELEMENT=t}(g||(g={}))}}]);
|