@momentum-ui/web-components 2.17.0 → 2.17.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/md-52.js +6 -5
- package/dist/chunks/md-53.js +17 -15
- package/dist/chunks/md-90.js +1 -1
- package/dist/index-entry.js +1 -1
- package/dist/index.js +2 -2
- package/dist/types/components/advance-list/AdvanceList.d.ts +10 -3
- package/dist/types/components/alert-banner/AlertBanner.d.ts +4 -1
- package/dist/types/components/grabber/Grabber.d.ts +1 -1
- package/dist/types/components/timepicker/TimePicker.d.ts +1 -1
- package/package.json +1 -1
package/dist/chunks/md-52.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[52],{111:function(t,e,i){"use strict";i.r(e),i.d(e,"AdvanceList",(function(){return
|
|
1
|
+
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[52],{111:function(t,e,i){"use strict";i.r(e),i.d(e,"AdvanceList",(function(){return s}));var s,r=i(1),d=i(5),l=i(32),o=i(6),a=i(0),n=i(31),c=a.css`:host(md-advance-list){list-style:none;margin:0;padding:2px;overflow:auto;position:relative;line-height:1.125rem;display:flex;flex-direction:column}.virtual-scroll{width:100%;overflow-y:auto;overflow-x:hidden;position:relative;padding:1px}.virtual-scroll:focus-visible{outline:2px solid var(--md-default-focus-outline-color)}.default-wrapper:focus,.default-wrapper:focus-visible{outline:2px solid var(--md-default-focus-outline-color);outline-offset:-2px}.default-wrapper:has([disabled]),.default-wrapper:has([disabled]):hover,.default-wrapper[aria-disabled=true]{color:var(--advance-list-disabled-text-color);background-color:rgba(0,0,0,0)}.spin-loader{display:flex;justify-content:center;width:100%}.default-wrapper.selected{background-color:var(--list-active-background);color:var(--list-active-text-color)}.default-wrapper.focused{outline:2px solid var(--md-default-focus-outline-color);outline-offset:-2px}.default-wrapper{padding:11px 12px;color:var(--advance-list-text-color);cursor:pointer;width:calc(100% - 2px);box-sizing:border-box;position:relative;border-radius:var(--advance-list-border-radius-rounded,0);display:flex;gap:.5rem}.default-wrapper-status-indicator{padding:5px;color:var(--advance-list-text-color);cursor:pointer;width:calc(100% - 2px);box-sizing:border-box;position:relative;border-radius:var(--advance-list-border-radius-rounded,0)}.default-wrapper:hover{background-color:var(--list-hover-background);color:var(--list-hover-text-color)}.default-wrapper.selected:hover{background-color:var(--list-active-background);color:var(--list-active-text-color)}.selected-border-bottom{border-bottom:1px solid var(--md-gray-20)}`,h=function(t,e,i,s){var r,d=arguments.length,l=d<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,i,s);else for(var o=t.length-1;o>=0;o--)(r=t[o])&&(l=(d<3?r(l):d>3?r(e,i,l):r(e,i))||l);return d>3&&l&&Object.defineProperty(e,i,l),l};!function(t){t.prefixId="item-";let e=class extends(Object(l.a)(a.LitElement)){constructor(){super(...arguments),this.items=[],this.isLoading=!1,this.isMulti=!1,this.groupOnMultiSelect=!1,this.value=[],this.ariaRoleList="listbox",this.ariaRoleListItem="option",this.ariaLabelList="",this.isError=!1,this.containerHeight="292px",this.lastSelectedIdByOrder="",this.selectAllItems=!1,this.disabledItems=[],this.totalRecords=0,this.scrollIndex=-1,this.activeId="",this.selectedItemsIds=[],this.isUserNavigated=!1,this.handleKeyDown=e=>{var i;const{ArrowDown:s,ArrowUp:d,Tab:l,Space:o,Enter:a}=r.b,{code:n}=e,c=n===s,h=n===d,p=n===l,u=n===o,v=n===a;if(c||h){if(e.preventDefault(),this.isUserNavigated=!0,""===this.activeId&&this.value.length>0)return void(this.activeId=this.value[0]);if(""===this.activeId&&!h&&this.items.length>0)return void(this.activeId=this.items[0].id);const t=this.items.findIndex(t=>t.id===this.activeId);c?t<this.items.length-1&&!this.isNextElemenentStatusIndicator(t)&&(this.scrollIndex=t+1,this.activeId=this.items[this.scrollIndex].id):t>0&&(this.scrollIndex=t-1,this.activeId=this.items[this.scrollIndex].id)}else if(p)""===this.activeId&&this.value.length>0&&(this.activeId=this.value[0]);else if((u||v)&&(e.preventDefault(),this.activeId)){const e=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(`#${t.prefixId}${this.activeId}`);if(e){"true"===e.getAttribute("aria-disabled")||e.hasAttribute("disabled")||this.updateItemSelection(e)}}},this.handleRangeChange=t=>{const{last:e}=t;this.updateSelectedState(),this.items.length<this.totalRecords&&e>=this.items.length-1&&!this.isLoading&&!this.isError&&this.dispatchEvent(new CustomEvent("load-more",{bubbles:!0,composed:!0})),this.isUserNavigated=!1}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick)}static get styles(){return[o.a,c]}getStyles(){return a.html`
|
|
2
2
|
<style>
|
|
3
3
|
:host .virtual-scroll {
|
|
4
4
|
height: ${this.containerHeight};
|
|
5
5
|
}
|
|
6
6
|
</style>
|
|
7
|
-
`}disconnectedCallback(){var t;super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),null===(t=this.listContainer)||void 0===t||t.addEventListener("keydown",this.handleKeyDown)}firstUpdated(t){var e;null===(e=this.listContainer)||void 0===e||e.addEventListener("keydown",this.handleKeyDown)}updated(t){t.has("value")&&this.requestUpdate().then(()=>{this.
|
|
7
|
+
`}disconnectedCallback(){var t;super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),null===(t=this.listContainer)||void 0===t||t.addEventListener("keydown",this.handleKeyDown)}firstUpdated(t){var e;null===(e=this.listContainer)||void 0===e||e.addEventListener("keydown",this.handleKeyDown)}updated(t){t.has("value")&&this.requestUpdate().then(()=>{this.selectedItemsIds=this.value,this.updateSelectedState()}),t.has("selectAllItems")&&this.selectAllItems&&(this.selectedItemsIds=this.items.filter(t=>!this.disabledItems.includes(t.id)).map(t=>t.id),this.updateSelectedState(),this.notifySelectedChange())}setCheckboxAttributes(t,e){var i,s,r,d;!t||(null===(i=e.firstElementChild)||void 0===i?void 0:i.hasAttribute("disabled"))&&"true"===(null===(s=e.firstElementChild)||void 0===s?void 0:s.getAttribute("aria-disabled"))?null===(d=e.querySelector("md-checkbox"))||void 0===d||d.removeAttribute("checked"):null===(r=e.querySelector("md-checkbox"))||void 0===r||r.setAttribute("checked","true")}updateWrapperAttributes(t,e){this.isMulti?this.setCheckboxAttributes(e,t):t.classList.toggle("selected",e),t.setAttribute("selected",e.toString()),t.setAttribute("aria-selected",e.toString()),t.setAttribute("tabindex",e?"0":"-1")}updateSelectedState(){var e;Array.from((null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelectorAll(".default-wrapper"))||[]).forEach(e=>{var i,s;const r=this.selectedItemsIds.some(i=>e.id===`${t.prefixId}${i}`);this.updateWrapperAttributes(e,r),this.groupOnMultiSelect&&this.value.length>0&&this.items.length!==this.value.length&&e.id===`${t.prefixId}${this.lastSelectedIdByOrder}`?e.classList.add("selected-border-bottom"):e.classList.remove("selected-border-bottom"),e.id===`${t.prefixId}${this.activeId}`?(e.setAttribute("tabindex","0"),e.focus()):e.setAttribute("tabindex","-1"),""==this.activeId&&e.id===`${t.prefixId}${this.value[0]}`&&e.setAttribute("tabindex","0");(null===(i=e.firstElementChild)||void 0===i?void 0:i.hasAttribute("disabled"))||"true"===(null===(s=e.firstElementChild)||void 0===s?void 0:s.getAttribute("aria-disabled"))?(e.setAttribute("disabled",""),e.setAttribute("aria-disabled","true")):(e.removeAttribute("disabled"),e.removeAttribute("aria-disabled"))})}findClickedItem(t){var e;const i=Array.from((null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelectorAll(".default-wrapper"))||[]),s=t.composedPath(),r=i.find(t=>s.includes(t));if(r){return(null==r?void 0:r.hasAttribute("disabled"))||"true"===(null==r?void 0:r.getAttribute("aria-disabled"))?0:r}}isNextElemenentStatusIndicator(t){return(this.isLoading||this.isError)&&t===this.items.length-2}updateItemForMultiSelect(t){const e=this.selectedItemsIds.indexOf(t);-1===e?(this.selectedItemsIds.push(this.activeId),this.selectedItemsIds.length===this.items.length-this.disabledItems.length&&(this.selectAllItems=!0)):(this.selectedItemsIds.splice(e,1),this.selectAllItems=!1)}updateItemSelection(t){t&&(this.activeId=t.id.substring(t.id.indexOf("-")+1),this.isMulti?this.updateItemForMultiSelect(this.activeId):this.selectedItemsIds=[this.activeId],this.updateSelectedState(),this.notifySelectedChange())}handleClick(t){t.preventDefault(),this.isUserNavigated=!1;const e=this.findClickedItem(t);e&&(this.scrollIndex=parseInt(e.getAttribute("index")||"0"),this.updateItemSelection(e))}notifySelectedChange(){this.dispatchEvent(new CustomEvent("list-item-change",{detail:{selected:this.selectedItemsIds},bubbles:!0,composed:!0}))}renderItem(e,i){return"status-indicator"===e.id?a.html`
|
|
8
8
|
<div class="default-wrapper-status-indicator" id="status-indicator">${e.template(e,i)}</div>
|
|
9
|
-
`:
|
|
9
|
+
`:a.html`
|
|
10
10
|
<div
|
|
11
11
|
class="default-wrapper ${e.id}"
|
|
12
12
|
part="advance-list-item-wrapper"
|
|
@@ -19,16 +19,17 @@
|
|
|
19
19
|
>
|
|
20
20
|
${e.template(e,i)}
|
|
21
21
|
</div>
|
|
22
|
-
`}getActiveDescendant(){return this.activeId?`${t.prefixId}${this.activeId}`:this.value?`${t.prefixId}${this.value}`:""}render(){return
|
|
22
|
+
`}getActiveDescendant(){return this.activeId?`${t.prefixId}${this.activeId}`:this.value?`${t.prefixId}${this.value[0]}`:""}render(){return a.html`
|
|
23
23
|
${this.getStyles()}
|
|
24
24
|
<div
|
|
25
25
|
class="md-advance-list-wrapper virtual-scroll"
|
|
26
26
|
tabindex="0"
|
|
27
27
|
aria-activedescendant=${this.getActiveDescendant()}
|
|
28
|
+
aria-multiselectable=${this.isMulti}
|
|
28
29
|
aria-label=${this.ariaLabelList}
|
|
29
30
|
role=${this.ariaRoleList}
|
|
30
31
|
@rangechange=${this.handleRangeChange}
|
|
31
32
|
>
|
|
32
33
|
${Object(n.scroll)({items:this.items,renderItem:(t,e)=>this.renderItem(t,e||0),useShadowDOM:!0,scrollToIndex:this.isUserNavigated?{index:this.scrollIndex,position:0===this.scrollIndex?"start":"center"}:void 0})}
|
|
33
34
|
</div>
|
|
34
|
-
`}};
|
|
35
|
+
`}};h([Object(a.property)({type:Array})],e.prototype,"items",void 0),h([Object(a.property)({type:Boolean})],e.prototype,"isLoading",void 0),h([Object(a.property)({type:Boolean,attribute:"is-multi"})],e.prototype,"isMulti",void 0),h([Object(a.property)({type:Boolean})],e.prototype,"groupOnMultiSelect",void 0),h([Object(a.property)({type:Array})],e.prototype,"value",void 0),h([Object(a.property)({type:String})],e.prototype,"ariaRoleList",void 0),h([Object(a.property)({type:String})],e.prototype,"ariaRoleListItem",void 0),h([Object(a.property)({type:String})],e.prototype,"ariaLabelList",void 0),h([Object(a.property)({type:Boolean})],e.prototype,"isError",void 0),h([Object(a.property)({type:String})],e.prototype,"containerHeight",void 0),h([Object(a.property)({type:String})],e.prototype,"lastSelectedIdByOrder",void 0),h([Object(a.property)({type:Boolean})],e.prototype,"selectAllItems",void 0),h([Object(a.property)({type:Array})],e.prototype,"disabledItems",void 0),h([Object(a.queryAll)("div.default-wrapper")],e.prototype,"lists",void 0),h([Object(a.query)(".virtual-scroll")],e.prototype,"listContainer",void 0),h([Object(a.property)({type:Number})],e.prototype,"totalRecords",void 0),h([Object(a.internalProperty)()],e.prototype,"scrollIndex",void 0),h([Object(a.internalProperty)()],e.prototype,"activeId",void 0),h([Object(a.internalProperty)()],e.prototype,"selectedItemsIds",void 0),h([Object(a.internalProperty)()],e.prototype,"isUserNavigated",void 0),e=h([Object(d.a)("md-advance-list")],e),t.ELEMENT=e}(s||(s={}))}}]);
|
package/dist/chunks/md-53.js
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[53],{112:function(e,t,
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[53],{112:function(e,t,r){"use strict";r.r(t),r.d(t,"alertBannerType",(function(){return m})),r.d(t,"alertBannerAlignment",(function(){return b})),r.d(t,"AlertBanner",(function(){return u}));r(17),r(14);var n=r(5),a=r(28),o=r(6),l=r(0),i=r(2),s=r(12),c=l.css`.md-alert-banner{display:flex;padding:.75rem;position:relative;text-align:center;border-radius:var(--alert-banner-border-radius);font-family:var(--brand-font-regular, "CiscoSansTT Regular", "Helvetica Neue", Helvetica, Arial, sans-serif);font-weight:var(--brand-font-weight-regular);line-height:1.25rem;gap:12px;align-items:center;justify-content:center}.md-alert-banner.closable{padding-right:calc(1.75rem + 12px)}.md-alert-banner.md-alert-banner--default{background-color:var(--alert-banner-default-bg-color);color:var(--alert-banner-default-text-color)}.md-alert-banner.md-alert-banner--default md-icon{color:var(--alert-banner-default-text-color)}.md-alert-banner.md-alert-banner--default-momentum{background-color:var(--alert-banner-default-momentum-bg-color);color:var(--alert-banner-default-momentum-text-color)}.md-alert-banner.md-alert-banner--default-momentum md-icon{color:var(--alert-banner-default-momentum-text-color)}.md-alert-banner.md-alert-banner--accent{background-color:var(--alert-banner-default-bg-color);color:var(--alert-banner-default-text-color)}.md-alert-banner.md-alert-banner--accent md-icon{color:var(--alert-banner-default-text-color)}.md-alert-banner.md-alert-banner--warning{background-color:var(--alert-banner-warning-bg-color);color:var(--alert-banner-warning-text-color)}.md-alert-banner.md-alert-banner--warning md-icon{color:var(--alert-banner-warning-text-color)}.md-alert-banner.md-alert-banner--error{background-color:var(--alert-banner-error-bg-color);color:var(--alert-banner-error-text-color)}.md-alert-banner.md-alert-banner--error md-icon{color:var(--alert-banner-error-text-color)}.md-alert-banner.md-alert-banner--success{background-color:var(--alert-banner-success-bg-color);color:var(--alert-banner-success-text-color)}.md-alert-banner.md-alert-banner--success md-icon{color:var(--alert-banner-success-text-color)}.md-alert-banner.md-alert-banner--promotional{background:var(--alert-banner-promotional-bg);color:var(--alert-banner-promotional-text-color)}.md-alert-banner.md-alert-banner--promotional md-icon{color:var(--alert-banner-promotional-text-color)}.md-alert-banner--leading{text-align:left;justify-content:space-between}.md-alert-banner__text{font-size:.875rem;display:inline-flex;justify-content:center;align-items:center;gap:12px}.md-alert-banner__text a{color:inherit;text-decoration:underline}.md-alert-banner__text .refresh-button{display:inline-flex}.md-alert-banner__text.leading{justify-content:flex-start}.md-alert-banner__right{display:inline-flex;align-items:center;justify-content:center}.md-alert-banner__right.trailing{justify-content:flex-end}.md-alert-banner .close-div{position:absolute;display:flex;align-items:center;right:.75rem;top:.75rem;bottom:.75rem;width:1rem}.md-alert-banner .close-div .md-alert-banner__close{cursor:pointer;display:inline-flex;align-items:center;justify-content:center}@media(forced-colors:active){.md-alert-banner{box-shadow:none;outline:2px solid CanvasText}}`,d=function(e,t,r,n){var a,o=arguments.length,l=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,r,n);else for(var i=e.length-1;i>=0;i--)(a=e[i])&&(l=(o<3?a(l):o>3?a(t,r,l):a(t,r))||l);return o>3&&l&&Object.defineProperty(t,r,l),l};const m=["default","accent","warning","error","success","default-momentum","promotional"],b=["center","leading"];var u;!function(e){let t=class extends l.LitElement{constructor(){super(...arguments),this.type="",this.message="",this.closable=!1,this.show=!1,this.closeAriaLabel="Close Banner",this.showBannerTypeIcon=!1,this.showRefreshButton=!1,this.alignment="center"}connectedCallback(){super.connectedCallback(),this.requestUpdate("show")}onHide(){this.show=!this.show,this.dispatchEvent(new CustomEvent("alertBanner-hide")),this.requestUpdate("show")}handleKeyDown(e){const{code:t}=e;Object(a.a)(t)&&this.onHide()}get isLeadingAlignment(){return"leading"===this.alignment}static get styles(){return[o.a,c]}getIconForType(){switch(this.type){case"error":return"error-legacy-badge-filled";case"warning":return"warning-filled";case"success":return"check-circle-badge-filled";default:return"info-badge-filled"}}get alertBannerClassMap(){return{"md-alert-banner":!0,["md-alert-banner--"+this.type]:this.type,["md-alert-banner--"+this.alignment]:this.isLeadingAlignment,closable:this.closable}}get alertBannerTextClassMap(){return{"md-alert-banner__text":!0,leading:this.isLeadingAlignment}}get alertBannerRightClassMap(){return{trailing:this.isLeadingAlignment}}get closeButtonTemplate(){return l.html`
|
|
2
|
+
<div class="close-div">
|
|
3
|
+
<md-button
|
|
4
|
+
class="md-alert-banner__close"
|
|
5
|
+
hasRemoveStyle
|
|
6
|
+
circle
|
|
7
|
+
ariaLabel=${this.closeAriaLabel}
|
|
8
|
+
@click="${this.onHide}"
|
|
9
|
+
@keydown="${this.handleKeyDown}"
|
|
10
|
+
>
|
|
11
|
+
<md-icon name="cancel-bold" size="16" iconSet="momentumDesign"></md-icon>
|
|
12
|
+
</md-button>
|
|
13
|
+
</div>
|
|
14
|
+
`}render(){const e=this.closable?l.html` ${this.closeButtonTemplate} `:null,t=this.showBannerTypeIcon?l.html` <md-icon name="${this.getIconForType()}" iconSet="momentumDesign" size="16"> </md-icon> `:l.html`<slot name="left"></slot>`,r=this.showRefreshButton?l.html` <md-button
|
|
13
15
|
class="refresh-button"
|
|
14
16
|
@click="${()=>this.dispatchEvent(new CustomEvent("alertBanner-refresh-button-click"))}"
|
|
15
17
|
variant="ghostInheritTextColor"
|
|
@@ -23,12 +25,12 @@
|
|
|
23
25
|
<div class="${Object(s.classMap)(this.alertBannerTextClassMap)}">
|
|
24
26
|
${t}
|
|
25
27
|
<slot><span>${this.message}</span></slot>
|
|
26
|
-
${
|
|
28
|
+
${r}
|
|
27
29
|
</div>
|
|
28
30
|
<div class="md-alert-banner__right ${Object(s.classMap)(this.alertBannerRightClassMap)}">
|
|
29
31
|
<slot name="right"></slot>
|
|
30
32
|
</div>
|
|
31
|
-
|
|
33
|
+
${e}
|
|
32
34
|
</div>
|
|
33
35
|
`:null}
|
|
34
|
-
`}};d([Object(l.property)({type:String})],t.prototype,"type",void 0),d([Object(l.property)({type:String})],t.prototype,"message",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"closable",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"show",void 0),d([Object(l.property)({type:String,attribute:"close-aria-label"})],t.prototype,"closeAriaLabel",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"showBannerTypeIcon",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"showRefreshButton",void 0),d([Object(l.property)({type:String})],t.prototype,"alignment",void 0),t=d([Object(
|
|
36
|
+
`}};d([Object(l.property)({type:String})],t.prototype,"type",void 0),d([Object(l.property)({type:String})],t.prototype,"message",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"closable",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"show",void 0),d([Object(l.property)({type:String,attribute:"close-aria-label"})],t.prototype,"closeAriaLabel",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"showBannerTypeIcon",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"showRefreshButton",void 0),d([Object(l.property)({type:String})],t.prototype,"alignment",void 0),t=d([Object(n.a)("md-alert-banner")],t),e.ELEMENT=t}(u||(u={}))}}]);
|