@momentum-ui/web-components 2.13.9 → 2.13.11

package/dist/chunks/md-81.js

@@ -1,112 +1,33 @@
-(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[81],{123:function(t,e,i){"use strict";i.r(e),i.d(e,"TaskItem",(function(){return a}));i(51),i(15);var a,o=i(6),s=i(5),n=i(0),r=i(3),c=i(4),m=n.css`:host{width:100%}.md-taskitem{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:stretch;border-radius:.5rem;color:var(--md-secondary-text-color);cursor:pointer;margin-bottom:4px;min-height:5rem;padding:.75rem;position:relative;width:auto;z-index:0}.md-taskitem.selected{background-color:var(--taskitem-pressed-bg-color,#fff);box-shadow:0 .125rem .25rem rgba(0,0,0,.16)}.md-taskitem.selected .md-taskitem__content_chat,.md-taskitem.selected .md-taskitem__content_popover_title,.md-taskitem.selected .md-taskitem__content_queue{color:var(--taskitem-selected-text-color,#121212)}.md-taskitem.selected .md-taskitem__content_title.mainTitle{color:var(--taskitem-selected-text-color,#121212)}.md-taskitem:hover{background-color:var(--taskitem-hover-bg-color,#fff)}.md-taskitem:hover .md-taskitem__content_chat,.md-taskitem:hover .md-taskitem__content_popover_title,.md-taskitem:hover .md-taskitem__content_queue{color:var(--taskitem-selected-text-color,#121212)}.md-taskitem:hover .md-taskitem__content_title.mainTitle{color:var(--taskitem-selected-text-color,#121212)}.md-taskitem:active{background-color:var(--taskitem-pressed-bg-color,#fff)}.md-taskitem:active .md-taskitem__content_chat,.md-taskitem:active .md-taskitem__content_popover_title,.md-taskitem:active .md-taskitem__content_queue{color:var(--taskitem-selected-text-color,#121212)}.md-taskitem:active .md-taskitem__content_title.mainTitle{color:var(--taskitem-selected-text-color,#121212)}.md-taskitem:focus{background:var(--taskitem-focus-bg-color,#fff);box-shadow:none;outline:0}.md-taskitem:focus::after{box-shadow:0 0 0 .125rem var(--taskitem-focus-border-color,#007aa3)}.md-taskitem::after{bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0;z-index:-1;border-radius:.5rem;margin:-.125rem}.md-taskitem__mediatype{margin-right:.5rem;position:relative;width:2.625rem}.md-taskitem__mediatype img{max-width:fit-content}.md-taskitem__mediatype .md-taskitem__status{align-items:center;display:inline-flex;justify-content:space-around;position:absolute;background:var(--taskitem-status-bg-color,#dedede);border-radius:50%;bottom:-4px;color:var(--taskitem-status-text-color,#121212);height:1.25rem;right:-4px;width:1.25rem}.md-taskitem__mediatype .md-taskitem__status md-icon{height:.75rem}.md-taskitem__mediatype .md-taskitem__status md-icon::part(icon){line-height:.75rem;vertical-align:top}.md-taskitem__mediatype .md-taskitem__status.hold{background:var(--taskitem-status-pause-bg-color,#ffd98c)}.md-taskitem__content{align-content:stretch;align-items:flex-start;align-self:stretch;display:flex;flex:0 1 auto;flex-direction:column;justify-content:center;width:calc(100% - (2.625rem + 6.25rem))}.md-taskitem__content_popover_title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--taskitem-text-color,#545454);font-family:var(--brand-font-bold, "CiscoSansTT Bold", "Helvetica Neue", Helvetica, Arial, sans-serif);font-size:14px;line-height:.9375rem;margin-bottom:.5rem;width:100%}.md-taskitem__content_title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;line-height:1.1875rem;margin-bottom:.5rem;width:100%}.md-taskitem__content_title.mainTitle{color:var(--taskitem-text-color,#545454);font-family:var(--brand-font-bold, "CiscoSansTT Bold", "Helvetica Neue", Helvetica, Arial, sans-serif)}.md-taskitem__content_inner{display:flex;flex:0 1 auto;width:100%}.md-taskitem__content_queue{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:.875rem;width:100%}.md-taskitem__content_chat{color:var(--taskitem-chat-text-color,#545454);display:flex;font-size:12px;line-height:.875rem;margin-top:.5rem;position:relative;width:100%}.md-taskitem__content_chat .new-chat_massages{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:2.5rem;width:calc(100% - .5rem)}.md-taskitem__addition{align-items:flex-end;display:flex;flex-direction:column;margin-left:.5rem;text-align:right;width:6.25rem}.md-taskitem__addition .new-chat-quantity{background:var(--taskitem-chat-quantity-bg-color,#9df);border-radius:9px;color:var(--taskitem-chat-quantity-text-color,#103c62);display:inline-block;font-size:10px;line-height:.875rem;min-width:18px;padding:.125rem .25rem;text-align:center}@media(forced-colors:active){.md-taskitem:focus{outline:1px solid Highlight}.md-taskitem.selected,.md-taskitem:hover{forced-color-adjust:none;outline:1px solid Highlight;background-color:Highlight;color:HighlightText;box-shadow:none}.md-taskitem:active{forced-color-adjust:none;outline:1px solid HighlightText;background-color:Highlight;color:HighlightText;box-shadow:none}.md-taskitem__addition .new-chat-quantity{forced-color-adjust:auto}}`,d=function(t,e,i,a){var o,s=arguments.length,n=s<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,a);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(n=(s<3?o(n):s>3?o(e,i,n):o(e,i))||n);return s>3&&n&&Object.defineProperty(e,i,n),n};!function(t){let e=class extends n.LitElement{constructor(){super(...arguments),this.mediaType="call",this.status="",this.popovertitle="",this.title="",this.queue="",this.accepted=!1,this.quantity=0,this.lastmessage="",this.selected=!1,this.customAriaLabel="",this.iconSrc="",this.tabIndexForContainer="0",this.renderTaskType=()=>{switch(this.mediaType.toLowerCase()){case"telephony":return n.html`
-            <md-badge color="green" circle>
-              <md-icon name="handset-active_16"></md-icon>
-            </md-badge>
-          `;case"outbound telephony":return n.html`
-            <md-badge color="green" circle>
-              <md-icon name="outgoing-call-active_16"></md-icon>
-            </md-badge>
-          `;case"inbound telephony":return n.html`
-            <md-badge color="green" circle>
-              <md-icon name="incoming-call-active_16"></md-icon>
-            </md-badge>
-          `;case"applemessages":case"midcall telephony":case"icon src":return n.html`
-            <md-badge circle>
-              <img src="${this.iconSrc}" />
-            </md-badge>
-          `;case"callback":return n.html`
-            <md-badge color="lime" circle>
-              <md-icon name="icon-icon-callback_18"></md-icon>
-            </md-badge>
-          `;case"progressive_campaign":return n.html`
-              <md-badge color="green" circle>
-                <md-icon name="icon-icon-campaign_18"></md-icon>
-              </md-badge>
-            `;case"chat":return n.html`
-            <md-badge color="blue" circle>
-              <md-icon name="chat-active_16"></md-icon>
-            </md-badge>
-          `;case"email":return n.html`
-            <md-badge color="violet" circle>
-              <md-icon name="email-active_16"></md-icon>
-            </md-badge>
-          `;case"sms":return n.html`
-            <md-badge color="darkmint" circle>
-              <md-icon name="sms_16" color="white-100"></md-icon>
-            </md-badge>
-          `;case"facebook":return n.html`
-            <md-badge bgColor="#0078FF" circle>
-              <md-icon name="messenger_16" color="white-100"></md-icon>
-            </md-badge>
-          `;case"whatsapp":return n.html`
-            <md-badge bgColor="#25D366" circle>
-              <md-icon name="whatsApp_16" color="white-100"></md-icon>
-            </md-badge>
-          `;default:return n.html`
-            <slot name="task-type"></slot>
-          `}},this.renderStatus=()=>{switch(this.status){case"consulting":return n.html`
-            <md-icon name="headset_12"></md-icon>
-          `;case"play":return n.html`
-            <md-icon name="play_12"></md-icon>
-          `;case"hold":return n.html`
-            <md-icon name="pause_12"></md-icon>
-          `;case"conference":return n.html`
-            <md-icon name="meet_12"></md-icon>
-          `;case"transfered":return n.html`
-            <md-icon name="assign-privilege_12"></md-icon>
-          `;case"courtesy_callback":return n.html`
-            <md-icon name="call-log_12"></md-icon>
-          `;case"campaign":return n.html`
-            <md-icon name="announcement_12"></md-icon>
-          `;default:return n.html`
-            <slot name="task-status"></slot>
-          `}}}handleClick(t){this.dispatchEvent(new CustomEvent("taskitem-click",{composed:!0,bubbles:!0,detail:{srcEvent:t}})),this.blur()}handleKeyDown(t){this.dispatchEvent(new CustomEvent("taskitem-keydown",{detail:{key:t.code},bubbles:!0,composed:!0}))}renderChatCount(){return this.quantity>0?this.quantity>99?n.html`
-              <span class="new-chat-quantity">99+</span>
-            `:n.html`
-              <span class="new-chat-quantity">${this.quantity}</span>
-            `:r.nothing}getAriaLabel(){var t;if(this.customAriaLabel)return this.customAriaLabel;let e=this.queue;if(!e){const i=this.querySelector('[slot="queue"]');if(i){e=(null===(t=i.textContent)||void 0===t?void 0:t.trim())||i.innerText.trim();const a=e.match(/(?:([01]?\d|2[0-3]):)?([0-5]?\d):([0-5]?\d)/);if(a){const[,t=0,i,o]=a.map(Number);(new Date).setHours(t,i,o),e=e.replace(/(?:([01]?\d|2[0-3]):)?([0-5]?\d):([0-5]?\d)/,`${t?t+" hours ":""}${i} minutes ${o} seconds`)}}}return`${this.mediaType} ${this.status} ${this.title} ${e} ${this.quantity?this.quantity:""} ${this.lastmessage}`}static get styles(){return[s.a,m]}render(){return n.html`
-        <div
-          part="task-item-container"
-          class="md-taskitem ${Object(c.classMap)({selected:this.selected})}"
-          tabindex=${this.tabIndexForContainer}
-          aria-selected="${this.selected}"
-          @click=${t=>this.handleClick(t)}
-          @keydown=${t=>this.handleKeyDown(t)}
-          aria-label=${this.getAriaLabel()}
-        >
-          <div class="md-taskitem__mediatype">
-            ${this.renderTaskType()}
-            ${this.status?n.html`
-                  <span class=${"md-taskitem__status "+this.status}>
-                    ${this.renderStatus()}
-                  </span>
-                `:r.nothing}
-          </div>
-          <div class="md-taskitem__content" part="task-item-content">
-            ${this.popovertitle?n.html`
-                  <span class="md-taskitem__content_popover_title">${this.popovertitle}</span>
-                `:r.nothing}
-            ${this.title?n.html`
-                  <span class="md-taskitem__content_title ${Object(c.classMap)({mainTitle:!this.popovertitle})}"
-                    >${this.title}</span
-                  >
-                `:r.nothing}
-            <div class="md-taskitem__content_inner">
-              <span class="md-taskitem__content_queue">
-                ${this.queue.length>0?this.queue:n.html`
-                      <slot name="queue"></slot>
-                    `}
-              </span>
-            </div>
-            ${this.lastmessage?n.html`
-                  <span class="md-taskitem__content_chat">
-                    <span class="new-chat_massages">${this.lastmessage}</span>
-                  </span>
-                `:r.nothing}
-          </div>
-          <div class="md-taskitem__addition">
-            <slot></slot>
-            ${this.renderChatCount()}
-          </div>
+(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[81],{124:function(t,e,r){"use strict";r.r(e),r.d(e,"formatType",(function(){return h})),r.d(e,"Table",(function(){return m}));var o=r(6),a=r(5),l=r(0),d=r(3),i=r(14),s=r(32),n=r.n(s),c=l.css`.md-table-container{width:100%}.md-table-container_stickly{height:100%;overflow-y:auto;position:relative}.md-table-container_stickly .md-table__header tr{background-color:rgba(0,0,0,0)}.md-table-container_stickly .md-table__header th{background-color:var(--table-header-bg-color,#f7f7f7);position:sticky;top:0}.md-table-container_stickly .md-table__header th:hover{background-color:var(--table-hover-bg-color,#ededed)}.md-table{border:1px solid var(--table-border-color,#dedede);border-collapse:collapse;width:100%}.md-table .md-table__header tr{background-color:var(--table-header-bg-color,#f7f7f7)}.md-table .md-table__header th{border-bottom:1px solid var(--table-border-color,#dedede);border-right:1px solid var(--table-border-color,#dedede);color:var(--table-text-color,#545454);font-size:12px;font-weight:700;padding-left:calc(.25rem*3);text-align:left}.md-table .md-table__header th:hover{background-color:var(--table-hover-bg-color,#ededed)}.md-table .md-table__header th:active{background-color:var(--table-pressed-bg-color,#dedede)}.md-table .md-table__header th a{color:var(--table-text-color,#545454)}.md-table .md-table__header th a.sortedAbc:after{content:"\\f1cc";display:inline-block;font-family:momentum-ui-icons;padding-left:.25rem;vertical-align:bottom}.md-table .md-table__header th a.sortedZyx:after{content:"\\f1cf";display:inline-block;font-family:momentum-ui-icons;padding-left:.25rem;vertical-align:bottom}.md-table .md-table__body tr{height:2.5rem}.md-table .md-table__body tr:hover{background-color:var(--table-hover-bg-color,#ededed)}.md-table .md-table__body tr:active{background-color:var(--table-pressed-bg-color,#dedede)}.md-table .md-table__body td{font-size:14px;min-width:calc(2.5rem*3.2);padding-left:calc(.25rem*3);vertical-align:middle}.md-table .md-table__body td span{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:calc(.25rem*6);width:calc(100% - .25rem)}.md-table .md-table__body td md-icon{padding-left:.25rem;vertical-align:bottom}.md-table .md-table__body td:last-child span{width:auto}.md-table tr{height:2.5rem}.md-table tr td{border-bottom:1px solid var(--table-border-color,#dedede);border-right:1px solid var(--table-border-color,#dedede);vertical-align:top}.md-table--stripped .md-table__body tr:nth-child(even){background-color:var(--table-stripped-bg-color,#ededed)}.md-table--stripped .md-table__body tr:nth-child(even):hover{background-color:var(--table-hover-bg-color,#ededed)}.md-table--clean tr td{border-right:unset}.md-table--no-borders{border:unset}.md-table--no-borders .md-table__header th,.md-table--no-borders tr td{border-bottom:unset;border-right:unset}`,b=function(t,e,r,o){var a,l=arguments.length,d=l<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(t,e,r,o);else for(var i=t.length-1;i>=0;i--)(a=t[i])&&(d=(l<3?a(d):l>3?a(e,r,d):a(e,r))||d);return l>3&&d&&Object.defineProperty(e,r,d),d};const h=["number","default"];var m;!function(t){let e=class extends l.LitElement{constructor(){super(...arguments),this.tabledata="",this.zebra=!1,this.clean=!1,this.sorting=!1,this.nodata="No data Loaded",this.stickheader=!1,this.label="Table",this.noBorders=!1,this.format="default",this.warning=[],this.errors=[],this.sort={columnName:"",sortting:!1},this.csvData=void 0,this.config={quoteChar:'"',escapeChar:'""',header:!1,preview:0,comments:!1,step:void 0,complete:void 0,download:!1}}connectedCallback(){super.connectedCallback(),this.results=n.a.parse(this.tabledata,this.config),this.headerRow=this.results.data[0],this.csvData=this.results.data.slice(1,this.results.data.length),this.requestUpdate("tabledata"),this.linkCellItems()}get rowItem(){return this.rowTable}linkCellItems(){const t=this.rowTable;null==t||t.forEach((t,e)=>{this.warning.forEach(r=>{if(e+1===r.row){t.querySelectorAll('td[role="cell"').forEach((t,e)=>{e+1===r.col&&(t.classList.add("warning"),t.insertAdjacentHTML("beforeend",'<md-icon name="warning-regular" size="24" iconSet="momentumDesign" color="var(--md-alert-warning-text-color)"></md-icon>'))})}}),this.errors.forEach(r=>{if(e+1===r.row){t.querySelectorAll('td[role="cell"').forEach((t,e)=>{e+1===r.col&&(t.classList.add("error"),t.insertAdjacentHTML("beforeend",'<md-icon name="clear-bold" size="24" iconSet="momentumDesign" color="var(--md-alert-error-text-color)"></md-icon>'))})}})})}sortTab(t,e){const r=t.target,o=Array.from(this.csvData),a=this.headerRow.indexOf(e);e!==this.sort.columnName||!0!==this.sort.sortting?(o.sort((function(t,e){const r=t[a].toLowerCase(),o=e[a].toLowerCase();return r>o?1:r<o?-1:0})),this.sort.sortting=!0,r.classList.remove("sortedZyx"),r.classList.add("sortedAbc")):(o.reverse(),this.sort.sortting=!1,r.classList.remove("sortedAbc"),r.classList.add("sortedZyx")),this.sort.columnName=e,this.csvData=o,this.requestUpdate("csvData")}update(t){super.update(t),t.has("tabledata")&&(this.results=n.a.parse(this.tabledata,this.config),this.headerRow=this.results.data[0],this.csvData=this.results.data.slice(1,this.results.data.length),this.linkCellItems())}static get styles(){return[a.a,c]}get tableClassMap(){return{"md-table--clean":this.clean,"md-table--no-borders":this.noBorders,"md-table--stripped":this.zebra,"md-table--sorting":this.sorting}}render(){return l.html`
+        <div class=${"md-table-container "+(this.stickheader?"md-table-container_stickly":d.nothing)}>
+          ${0!=this.csvData.length?l.html`
+                <table
+                  class="md-table ${Object(i.classMap)(this.tableClassMap)}"
+                  tabindex="0"
+                  role="table"
+                  aria-label="${this.label}"
+                >
+                  <thead class="md-table__header" role="rowgroup" tabindex="0">
+                    <tr role="row">
+                      ${this.headerRow.map(t=>l.html`
+                          <th role="columnheader">
+                            ${this.sorting?l.html` <a @click=${e=>this.sortTab(e,t)}>${t}</a> `:l.html` ${t} `}
+                          </th>
+                        `)}
+                    </tr>
+                  </thead>
+                  <tbody class="md-table__body" role="rowgroup">
+                    ${this.csvData.map((t,e)=>l.html`
+                        <tr tabindex="0" role="row" part=${0===e?"first-row":"row"}>
+                          ${t.map((t,e)=>{const r="number"===this.format&&0!==e?Number(t).toLocaleString():t;return l.html`
+                              <td part=${0===e?"left-cell":"cell"} role="cell">
+                                <span>${r}</span>
+                              </td>
+                            `})}
+                        </tr>
+                      `)}
+                  </tbody>
+                </table>
+              `:l.html` <p>${this.nodata}</p> `}
         </div>
-      `}};d([Object(n.property)({type:String})],e.prototype,"mediaType",void 0),d([Object(n.property)({type:String})],e.prototype,"status",void 0),d([Object(n.property)({type:String})],e.prototype,"popovertitle",void 0),d([Object(n.property)({type:String})],e.prototype,"title",void 0),d([Object(n.property)({type:String})],e.prototype,"queue",void 0),d([Object(n.property)({type:Boolean})],e.prototype,"accepted",void 0),d([Object(n.property)({type:Number})],e.prototype,"quantity",void 0),d([Object(n.property)({type:String})],e.prototype,"lastmessage",void 0),d([Object(n.property)({type:Boolean})],e.prototype,"selected",void 0),d([Object(n.property)({type:String})],e.prototype,"customAriaLabel",void 0),d([Object(n.property)({type:String})],e.prototype,"iconSrc",void 0),d([Object(n.property)({type:String})],e.prototype,"tabIndexForContainer",void 0),e=d([Object(o.a)("md-task-item")],e),t.ELEMENT=e}(a||(a={}))}}]);
+      `}};b([Object(l.property)({type:String})],e.prototype,"tabledata",void 0),b([Object(l.property)({type:Boolean})],e.prototype,"zebra",void 0),b([Object(l.property)({type:Boolean})],e.prototype,"clean",void 0),b([Object(l.property)({type:Boolean})],e.prototype,"sorting",void 0),b([Object(l.property)({type:String})],e.prototype,"nodata",void 0),b([Object(l.property)({type:Boolean})],e.prototype,"stickheader",void 0),b([Object(l.property)({type:String})],e.prototype,"label",void 0),b([Object(l.property)({type:Boolean,attribute:"no-borders"})],e.prototype,"noBorders",void 0),b([Object(l.property)({type:String})],e.prototype,"format",void 0),b([Object(l.property)({type:Array})],e.prototype,"warning",void 0),b([Object(l.property)({type:Array})],e.prototype,"errors",void 0),b([Object(l.internalProperty)()],e.prototype,"sort",void 0),b([Object(l.internalProperty)()],e.prototype,"csvData",void 0),b([Object(l.queryAll)('.md-table__body tr[role="row"]')],e.prototype,"rowTable",void 0),e=b([Object(o.a)("md-table")],e),t.ELEMENT=e}(m||(m={}))}}]);