@orcden/od-smart-list/dist/index.js

OrcDen List Component

(()=>{"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(t,e,r,n,o,i,a){try{var s=t[i](a),u=s.value}catch(t){return void r(t)}s.done?e(u):Promise.resolve(u).then(n,o)}function r(t){return function(){var r=this,n=arguments;return new Promise((function(o,i){var a=t.apply(r,n);function s(t){e(a,o,i,s,u,"next",t)}function u(t){e(a,o,i,s,u,"throw",t)}s(void 0)}))}}function n(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function o(e,r){return!r||"object"!==t(r)&&"function"!=typeof r?i(e):r}function i(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function a(t){var e="function"==typeof Map?new Map:void 0;return(a=function(t){if(null===t||(r=t,-1===Function.toString.call(r).indexOf("[native code]")))return t;var r;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,n)}function n(){return s(t,arguments,l(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),c(n,t)})(t)}function s(t,e,r){return(s=u()?Reflect.construct:function(t,e,r){var n=[null];n.push.apply(n,e);var o=new(Function.bind.apply(t,n));return r&&c(o,r.prototype),o}).apply(null,arguments)}function u(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function l(t){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}require("regenerator-runtime");var h=document.createElement("template");h.innerHTML="\n     <style>\n        :host{\n            display: flex;\n            justify-content: center;\n            width: 100%;\n        }\n\n        :host( [empty] ) table#list-table {\n            display: none\n        }\n\n        :host( [empty] ) label#empty {\n            display: block;\n        }\n\n        table#list-table {            \n            width: 100%;\n\n            border: 1px solid black;\n            border-spacing: 0;\n            border-collapse: collapse;\n        }\n\n        tr[has-click-listener]:hover {\n            cursor: pointer;\n            background-color: #ececec;\n        }\n\n        th {\n            background-color: darkgrey;\n        }\n\n        th[sort='1']::after {\n            content: '\\02C5';\n        }\n\n        th[sort='-1']::after {\n            content: '\\02C4';\n        }\n\n        th::after {\n            display: inline-block;\n            font-size: .85rem;\n            margin-left: .5rem;\n            font-weight: bold;\n        }\n\n        td, th {\n            border: 1px solid black;\n        }\n\n        th:hover {\n            background-color: grey;\n            cursor: pointer;\n        }\n\n        label#empty {\n            display: none;\n        }\n\n    </style>\n    \n    <slot id=\"header-slot\"></slot>\n    \n    <table id=\"list-table\" part='list-table'></table>\n    <label id='empty' part='empty-label'>No Results to Show</label>\n",window.ShadyCSS&&window.ShadyCSS.prepareTemplate(h,"od-smart-list");var d=function(e){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&c(t,e)}(g,e);var a,s,d,f,p,y,b,m,v,_,w,k=(a=g,s=u(),function(){var t,e=l(a);if(s){var r=l(this).constructor;t=Reflect.construct(e,arguments,r)}else t=e.apply(this,arguments);return o(this,t)});function g(){var t;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,g),t=k.call(this),window.ShadyCSS&&window.ShadyCSS.styleElement(i(t)),t.shadowRoot||(t.attachShadow({mode:"open"}),t.shadowRoot.appendChild(h.content.cloneNode(!0))),t}return d=g,p=[{key:"observedAttributes",get:function(){return["route"]}}],(f=[{key:"connectedCallback",value:function(){var t=this;this._upgradeProperty("row-id"),this._upgradeProperty("route"),this._upgradeProperty("data"),this._observer=new MutationObserver((function(e,r){t._mutationObserverCallback(e,r)})),this._observer.observe(this.shadowRoot.querySelector("#header-slot"),{attributes:!1,childList:!0,subtree:!0}),this._rows=[],this._sortKey="",this._sortDir=0,this._init()}},{key:"disconnectedCallback",value:function(){this._observer.disconnect()}},{key:"_init",value:(w=r(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,this._awaitHeaders();case 2:this._headers=t.sent,this._fieldNames=this._getFieldNames(),this.shadowRoot.querySelector("#list-table").appendChild(this._buildHeaderRow()),this.route?this._getList():this._buildList();case 6:case"end":return t.stop()}}),t,this)}))),function(){return w.apply(this,arguments)})},{key:"_upgradeProperty",value:function(t){if(Object.prototype.hasOwnProperty.call(this,t)){var e=this[t];delete this[t],this[t]=e}}},{key:"attributeChangedCallback",value:function(t,e,r){switch(t){case"route":r!==e&&(this._setRouteAttribute(r),this._getList())}}},{key:"_mutationObserverCallback",value:function(t,e){this.dispatchEvent(new CustomEvent("od-smart-list-mutation",{bubbles:!0,detail:{mutationsList:t,observer:e}}))}},{key:"_mutationPromise",value:(_=r(regeneratorRuntime.mark((function t(){var e=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.abrupt("return",new Promise((function(t){e.addEventListener("od-smart-list-mutation",(function(r){e._mutationPromiseCallback(r,t)}))})));case 1:case"end":return t.stop()}}),t)}))),function(){return _.apply(this,arguments)})},{key:"_mutationPromiseCallback",value:function(t,e){var r=this;t.stopPropagation(),this.removeEventListener("od-smart-list-mutation",(function(t){r._mutationPromiseCallback(t,e)})),e(t.detail)}},{key:"_awaitHeaders",value:(v=r(regeneratorRuntime.mark((function t(){var e;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:e=this._getHeaders();case 1:if(e&&e.length&&!(e.length<1)){t.next=7;break}return t.next=4,this._mutationPromise();case 4:e=this._getHeaders(),t.next=1;break;case 7:return t.abrupt("return",e);case 8:case"end":return t.stop()}}),t,this)}))),function(){return v.apply(this,arguments)})},{key:"_getHeaders",value:function(){return this.shadowRoot.querySelector("#header-slot").assignedNodes().filter((function(t){return t.nodeType===Node.ELEMENT_NODE}))}},{key:"_getFieldNames",value:function(){return this._headers.map((function(t){return t.getAttribute("name")}))}},{key:"_buildHeaderRow",value:function(){var t=document.createElement("tr");t.classList.add("header-row"),t.setAttribute("part","header-row");for(var e=0;e<this._headers.length;e++)t.appendChild(this._createHeader(this._headers[e]));return t}},{key:"_createHeader",value:function(t){var e=this,r=t.getAttribute("name"),n=document.createElement("th");return n.classList.add("header-cell"),n.setAttribute("part","header-cell "+r),n.setAttribute("name",r),n.appendChild(t.header),n.addEventListener("click",(function(t){return e._orderByClickListener(t)})),n}},{key:"_getList",value:(m=r(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!this.route){t.next=5;break}return this._httpGetAsync(this.route),t.next=4,this._httpPromise();case 4:this._data=t.sent;case 5:this.refresh();case 6:case"end":return t.stop()}}),t,this)}))),function(){return m.apply(this,arguments)})},{key:"_buildList",value:(b=r(regeneratorRuntime.mark((function t(){var e,r,n,o;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(this._fieldNames&&this.data&&this.data.length&&!(this.data.length<1)){t.next=3;break}return this.setAttribute("empty",!0),t.abrupt("return");case 3:for(this.removeAttribute("empty"),this._orderList(),e=this.shadowRoot.querySelector("#list-table"),r=0;r<this.data.length;r++)n=this.data[r],o=this._buildRow(n),this._rows.push(o),e.appendChild(o);case 7:case"end":return t.stop()}}),t,this)}))),function(){return b.apply(this,arguments)})},{key:"_buildRow",value:function(t){var e=document.createElement("tr");e.classList.add("data-row"),e.setAttribute("part","data-row"),this.rowId&&e.setAttribute("id",t[this.rowId]);for(var r=0;r<this._fieldNames.length;r++){var n=this._fieldNames[r];t&&Object.keys(t).includes(n)&&e.appendChild(this._createDataCell(n,t[n]))}return this._rowOnClick&&this._addRowListener(e),e}},{key:"_createDataCell",value:function(t,e){var r=document.createElement("td");return r.classList.add("data-cell"),r.setAttribute("part","data-cell "+t),r.setAttribute("name",t),r.innerText=e,r}},{key:"_deleteDataRows",value:function(){for(var t=this.shadowRoot.querySelectorAll("#list-table > .data-row"),e=this.shadowRoot.querySelector("#list-table"),r=0;r<t.length;r++){var n=t[r];e.removeChild(n)}}},{key:"_httpGetAsync",value:function(t){var e=this,r=new XMLHttpRequest;r.onreadystatechange=function(){4==r.readyState&&200==r.status&&e.dispatchEvent(new CustomEvent("od-smart-list-request-done",{bubbles:!0,detail:{response:JSON.parse(r.responseText)}}))},r.open("GET",t,!0),r.send(null)}},{key:"_httpPromise",value:(y=r(regeneratorRuntime.mark((function t(){var e=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.abrupt("return",new Promise((function(t){e.addEventListener("od-smart-list-request-done",(function(r){e._httpPromiseCallback(r,t)}))})));case 1:case"end":return t.stop()}}),t)}))),function(){return y.apply(this,arguments)})},{key:"_httpPromiseCallback",value:function(t,e){var r=this;t.stopPropagation(),this.removeEventListener("od-smart-list-request-done",(function(t){r._httpPromiseCallback(t,e)})),e(t.detail.response)}},{key:"_orderList",value:function(){var t=this;if(""!==this._sortKey)for(var e=0;e<this._headers.length;e++)if(this._headers[e].getAttribute("name")===this._sortKey){-1===this._sortDir?this._data.sort((function(e,r){return t._compare(r,e,t._sortKey)})):this._data.sort((function(e,r){return t._compare(e,r,t._sortKey)}));break}}},{key:"_compare",value:function(t,e,r){if(t[r]&&e[r]){if(t[r]<e[r])return-1;if(t[r]>e[r])return 1}else{if(t[r])return 1;if(e[r])return-1}return 0}},{key:"_orderBy",value:function(t){this._sortElem&&this._sortElem.removeAttribute("sort"),this._sortElem=t,this._sortElem.setAttribute("sort",this._sortDir),this.refresh()}},{key:"_orderByClickListener",value:function(t){var e=t.target,r=e.getAttribute("name");r===this._sortKey&&1===this._sortDir?this._sortDir=-1:(this._sortDir=1,this._sortKey=r),this._orderBy(e)}},{key:"_addRowListener",value:function(t){var e=this;t.addEventListener("click",(function(r){e._rowOnClick(r,t)})),t.setAttribute("has-click-listener",!0)}},{key:"_setClosedAttribute",value:function(t){t&&""!==t?this.setAttribute("route",t):this.removeAttribute("route")}},{key:"_setRowIdAttribute",value:function(t){t&&""!==t?this.setAttribute("row-id",t):this.removeAttribute("row-id")}},{key:"refresh",value:function(){this._deleteDataRows(),this._buildList()}},{key:"addRowClickListener",value:function(t){if(t&&(this._rowOnClick=t,this._rows.length>0))for(var e=0;e<this._rows.length;e++)this._addRowListener(this._rows[e])}},{key:"orderBy",value:function(t,e){var r=this.shadowRoot.querySelector('th[name="'+t+'"]');this._sortKey=t,this._sortDir=e,this._orderBy(r)}},{key:"route",get:function(){return this.getAttribute("route")},set:function(t){this._setClosedAttribute(t)}},{key:"rowId",get:function(){return this.getAttribute("row-id")},set:function(t){this._setRowIdAttribute(t)}},{key:"data",get:function(){return this._data},set:function(e){"object"===t(e)&&(this._data=e,this.refresh())}}])&&n(d.prototype,f),p&&n(d,p),g}(a(HTMLElement));function f(t){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function p(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function y(t,e){return!e||"object"!==f(e)&&"function"!=typeof e?b(t):e}function b(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function m(t){var e="function"==typeof Map?new Map:void 0;return(m=function(t){if(null===t||(r=t,-1===Function.toString.call(r).indexOf("[native code]")))return t;var r;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,n)}function n(){return v(t,arguments,k(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),w(n,t)})(t)}function v(t,e,r){return(v=_()?Reflect.construct:function(t,e,r){var n=[null];n.push.apply(n,e);var o=new(Function.bind.apply(t,n));return r&&w(o,r.prototype),o}).apply(null,arguments)}function _(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}function w(t,e){return(w=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function k(t){return(k=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}customElements.get("od-smart-list")||window.customElements.define("od-smart-list",d);var g=document.createElement("template");g.innerHTML="\n    <style>\n       \n        :host {\n            display: none;\n        }\n\n    </style>\n\n    <slot id='header-slot'></slot>\n",window.ShadyCSS&&window.ShadyCSS.prepareTemplate(g,"od-smart-list-header");var S=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&w(t,e)}(s,t);var e,r,n,o,i,a=(e=s,r=_(),function(){var t,n=k(e);if(r){var o=k(this).constructor;t=Reflect.construct(n,arguments,o)}else t=n.apply(this,arguments);return y(this,t)});function s(){var t;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,s),t=a.call(this),window.ShadyCSS&&window.ShadyCSS.styleElement(b(t)),t.shadowRoot||(t.attachShadow({mode:"open"}),t.shadowRoot.appendChild(g.content.cloneNode(!0))),t}return n=s,i=[{key:"observedAttributes",get:function(){}}],(o=[{key:"connectedCallback",value:function(){this._header=this.shadowRoot.querySelector("#header-slot").assignedNodes()[0]}},{key:"disconnectedCallback",value:function(){}},{key:"attributeChangedCallback",value:function(t,e,r){}},{key:"header",get:function(){return this._header}}])&&p(n.prototype,o),i&&p(n,i),s}(m(HTMLElement));customElements.get("od-smart-list-header")||window.customElements.define("od-smart-list-header",S)})();