plcc-table/dist/plcc-table.min.js

Plcc table element for PatternFly Elements

import t from"../../@patternfly/pfelement/dist/pfelement.min.js";import"../../@patternfly/pfe-progress-indicator/dist/pfe-progress-indicator.min.js";import"../../@patternfly/pfe-datetime/dist/pfe-datetime.min.js";
/*!
 * PatternFly Elements: PlccTable 0.0.14
 * @license
 * Copyright 2020 Red Hat, Inc.
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 * 
*/class e extends t{static get version(){return"0.0.14"}get html(){return'<style>.product-lifecycle-info__table thead,.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}:host{display:block}:host([hidden]){display:none}:host([loading]) article{display:none}article{display:block;font-size:16px;line-height:1.5;color:#151515}#loading{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;min-height:100px}#loading.loading{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.u-no-break{white-space:nowrap}*{-webkit-box-sizing:border-box;box-sizing:border-box}.icon-close{position:relative;width:1.5em;height:1.5em;margin:0;padding:0;border:0;font-size:2rem;background:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.icon-close__inner1{position:absolute;top:50%;left:50%;width:0;height:0;font-size:4rem;-webkit-transform:translate(-50%,-50%) scale(.125);transform:translate(-50%,-50%) scale(.125)}.icon-close__inner1:after,.icon-close__inner1:before{content:"";position:absolute;top:0;left:0;display:block;width:.3em;height:2em;background:#000}.icon-close:focus .icon-close__inner1:after,.icon-close:focus .icon-close__inner1:before,.icon-close:hover .icon-close__inner1:after,.icon-close:hover .icon-close__inner1:before{background:#06c}.icon-close__inner1:before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-close__inner1:after{-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}article{font-size:1rem;line-height:1.5;color:#151515}.product-lifecycle__wrapper{position:relative}.product-lifecycle__wrapper--listing{border:1px solid #d2d2d2}.product-lifecycle__header{padding:1.125rem}@media (min-width:650px){.product-lifecycle__header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:1rem}}.product-lifecycle__header--more-info{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}@media (min-width:1080px){.product-lifecycle__header--more-info{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}}.product-lifecycle__header--more-info>*{margin-bottom:.5em}@media (min-width:1080px){.product-lifecycle__header--more-info>*{margin-right:1.5rem}}.product-lifecycle__header--more-info>:last-child{margin-right:0}.product-lifecycle-info__product-name{font-size:1.25em;font-weight:400;width:100%}.product-lifecycle__header--less-info .product-lifecycle-info__product-name{margin-right:auto;width:auto}.product-lifecycle-info__detailed-info{margin-right:auto}.product-lifecycle__header--more-info .product-lifecycle-info__detailed-info{margin-bottom:1em}[type=checkbox]{margin-right:.25em}.product-lifecycle__close{position:absolute;top:0;right:0;cursor:pointer}table{min-width:100%;border:0}@media (min-width:650px){table{position:relative;margin-left:0;margin-right:0}}.product-lifecycle-info__table-headers{position:-webkit-sticky;position:sticky;top:0;z-index:999;display:none;background:#fff}@media (min-width:1000px){.product-lifecycle-info__table-headers{display:table}}.product-lifecycle-info__table{border-top:0}caption,td,th{padding:1.125rem;border:0;text-align:left}caption *,td *,th *{margin:0;padding:0}th{font-weight:700;vertical-align:bottom}@media (min-width:1000px){td:nth-last-child(2):first-child~td,td:nth-last-child(2):first-child~th,th:nth-last-child(2):first-child~td,th:nth-last-child(2):first-child~th{width:50%}}@media (min-width:1000px){td:nth-last-child(3):first-child~td,td:nth-last-child(3):first-child~th,th:nth-last-child(3):first-child~td,th:nth-last-child(3):first-child~th{width:33.33333%}}@media (min-width:1000px){td:nth-last-child(4):first-child~td,td:nth-last-child(4):first-child~th,th:nth-last-child(4):first-child~td,th:nth-last-child(4):first-child~th{width:25%}}@media (min-width:1000px){td:nth-last-child(5):first-child~td,td:nth-last-child(5):first-child~th,th:nth-last-child(5):first-child~td,th:nth-last-child(5):first-child~th{width:20%}}@media (min-width:1000px){td:nth-last-child(6):first-child~td,td:nth-last-child(6):first-child~th,th:nth-last-child(6):first-child~td,th:nth-last-child(6):first-child~th{width:16.66667%}}@media (min-width:1000px){td:nth-last-child(7):first-child~td,td:nth-last-child(7):first-child~th,th:nth-last-child(7):first-child~td,th:nth-last-child(7):first-child~th{width:14.28571%}}@media (min-width:1000px){td:nth-last-child(8):first-child~td,td:nth-last-child(8):first-child~th,th:nth-last-child(8):first-child~td,th:nth-last-child(8):first-child~th{width:12.5%}}@media (min-width:1000px){td:nth-last-child(9):first-child~td,td:nth-last-child(9):first-child~th,th:nth-last-child(9):first-child~td,th:nth-last-child(9):first-child~th{width:11.11111%}}th{margin-top:1rem;border-top:4px solid #d2d2d2;border-bottom:1px solid #d2d2d2}tbody tr:first-child th{border-top:0;margin-top:0}@media (min-width:1000px){th{margin-top:0;border-top:0}}th[scope=row]{font-weight:inherit}td{padding:.5rem 1.125rem;border:0}@media (min-width:1000px){td{border-bottom:1px solid #d2d2d2}}@media (min-width:1000px){td,th{padding:1rem}}caption{padding:16px 24px;border-bottom:3px solid #d2d2d2}.responsive-table--row-strategy thead{display:none}@media (min-width:1000px){.responsive-table--row-strategy thead{display:table-header-group}}.responsive-table--row-strategy td,.responsive-table--row-strategy th{display:block}@media (min-width:1000px){.responsive-table--row-strategy td,.responsive-table--row-strategy th{display:table-cell}}.responsive-table--row-strategy td:before,.responsive-table--row-strategy th:before{content:attr(data-label) ": ";font-weight:700}@media (min-width:1000px){.responsive-table--row-strategy td:before,.responsive-table--row-strategy th:before{content:none}}.responsive-table--column-strategy{display:none}@media (min-width:1000px){.responsive-table--column-strategy{display:table}}@media (min-width:1000px){.responsive-table__wrapper--column-strategy .responsive-table__mobile-alternative{display:none}}.responsive-table__wrapper--scroll-strategy{overflow-x:auto}@media (min-width:1000px){.responsive-table__wrapper--scroll-strategy{overflow:hidden}}:host([pfe-c-style=compact]) .lifecycle-table__product-name,:host([pfe-c-style=compact]) table{font-size:.875rem;line-height:1.5}:host([pfe-c-style=compact]) .product-lifecycle-info__table-headers{border:0}:host([pfe-c-style=compact]) caption,:host([pfe-c-style=compact]) td,:host([pfe-c-style=compact]) th{padding:.57143em}:host([pfe-c-style=compact]) caption:first-child,:host([pfe-c-style=compact]) td:first-child,:host([pfe-c-style=compact]) th:first-child{padding-left:1.14286em}:host([pfe-c-style=compact]) caption:last-child,:host([pfe-c-style=compact]) td:last-child,:host([pfe-c-style=compact]) th:last-child{padding-right:1.14286em}:host([pfe-c-style=compact]) th{border-top-width:2px;padding-top:.85714em}:host([pfe-c-style=compact]) caption{padding-top:1.14286em;border-bottom-width:1px}\n/*# sourceMappingURL=plcc-table.min.css.map */\n</style><div id="loading" hidden>\n  <pfe-progress-indicator></pfe-progress-indicator>\n</div>\n<article class="product-lifecycle__wrapper" id="product-lifecycle__wrapper--listing">\n  <button class="product-lifecycle__close icon-close application" id="close-btn" aria-label="Closes Red Hat OpenStack Platform Table" hidden>\n    <div class="icon-close__inner1"></div>\n  </button>\n    <h2 class="product-lifecycle-info__product-name sr-only"></h2>\n\n    <table border="0" cellspacing="0" cellpadding="0" class="product-lifecycle-info__table-headers" aria-hidden>\n      <thead>\n        <tr class="product-phases"></tr>\n      </thead>\n    </table>\n\n    <table id="product-lifecycle-full-support" border="0" cellspacing="0" cellpadding="0" class="product-lifecycle-info__table product-lifecycle-info__table--supported responsive-table responsive-table--row-strategy">\n      <caption>\n        <h3 class="lifecycle-table__product-name">\n          Full support <span class="sr-only"></span>\n        </h3>\n      </caption>\n      <thead>\n        <tr class="product-phases"></tr>\n      </thead>\n      <tbody></tbody>\n    </table>\n\n    <table id="product-lifecycle-maintenance-support" border="0" cellspacing="0" cellpadding="0" class="product-lifecycle-info__table product-lifecycle-info__table--purgatory responsive-table responsive-table--row-strategy">\n      <caption>\n        <h3 class="lifecycle-table__product-name">\n          Maintenance support <span class="sr-only"></span>\n        </h3>\n      </caption>\n      <thead>\n        <tr class="product-phases"></tr>\n      </thead>\n      <tbody></tbody>\n    </table>\n\n    <table id="product-lifecycle-extended-support" border="0" cellspacing="0" cellpadding="0" class="product-lifecycle-info__table product-lifecycle-info__table--purgatory responsive-table responsive-table--row-strategy">\n        <caption>\n          <h3 class="lifecycle-table__product-name">\n            Extended support <span class="sr-only"></span>\n          </h3>\n        </caption>\n        <thead>\n          <tr class="product-phases"></tr>\n        </thead>\n        <tbody></tbody>\n      </table>\n      <table id="product-lifecycle-end-of-maintenance" border="0" cellspacing="0" cellpadding="0" class="product-lifecycle-info__table product-lifecycle-info__table--unsupported responsive-table responsive-table--row-strategy ">\n        <caption>\n          <h3 class="lifecycle-table__product-name">\n            End of maintenance <span class="sr-only"></span>\n          </h3>\n        </caption>\n        <thead>\n          <tr class="product-phases"></tr>\n        </thead>\n        <tbody></tbody>\n      </table>\n\n    <table id="product-lifecycle-end-of-life" border="0" cellspacing="0" cellpadding="0" class="product-lifecycle-info__table product-lifecycle-info__table--unsupported responsive-table responsive-table--row-strategy ">\n      <caption>\n        <h3 class="lifecycle-table__product-name">\n          End of life <span class="sr-only"></span>\n        </h3>\n      </caption>\n      <thead>\n        <tr class="product-phases"></tr>\n      </thead>\n      <tbody></tbody>\n    </table>\n    <table id="product-lifecycle-uncategorized" border="0" cellspacing="0" cellpadding="0" class="product-lifecycle-info__table product-lifecycle-info__table--uncatagorized responsive-table responsive-table--row-strategy ">\n      <caption>\n        <h3 class="lifecycle-table__product-name">\n          Uncategorized <span class="sr-only"></span>\n        </h3>\n      </caption>\n      <thead>\n        <tr class="product-phases"></tr>\n      </thead>\n      <tbody></tbody>\n    </table>\n</article>'}static get properties(){return{}}static get slots(){return{default:{title:"Default slot",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"raw"}]}}}}static get tag(){return"plcc-table"}static get events(){return{close:this.tag+":close"}}get schemaUrl(){return"plcc-table.json"}get templateUrl(){return"plcc-table.html"}get styleUrl(){return"plcc-table.scss"}get productName(){return this.getAttribute("product-name")}get hideEOL(){return this.getAttribute("hide-eol")}get loading(){return this.hasAttribute("loading")}set loading(t){t?(this._loadingIndicator.removeAttribute("hidden"),this._loadingIndicator.classList.add("loading"),this.setAttribute("loading",!0)):(this._loadingIndicator.setAttribute("hidden",!0),this._loadingIndicator.classList.remove("loading"),this.removeAttribute("loading"))}get tableData(){return this._data}set tableData(t){if(!t)return;this.loading=!0,this._data=t;let e=this._getDisplayHeaders(this._data),i=this._getHeaders(this._data);this._construct(this._data,e,i),this.loading=!1}static get observedAttributes(){return["product-name","hide-eol"]}static get PfeType(){return t.PfeTypes.Component}constructor(){super(e,{type:e.PfeType}),this._handleBtnClick=this._handleBtnClick.bind(this),this._data=null,this._fullSupport=!1,this._maintenanceSupport=!1,this._extendedSupport=!1,this._uncategorized=!1,this._endOfMaintenance=!1,this._endOfLife=!1,this._plccApplication=!1,this._article=this.shadowRoot.querySelector("article"),this._header=this.shadowRoot.querySelector("header"),this._links=this.shadowRoot.querySelectorAll("a"),this._appMarkup=this.shadowRoot.querySelectorAll(".application"),this._fullSupportTable=this.shadowRoot.querySelector("#product-lifecycle-full-support"),this._maintenanceSupportTable=this.shadowRoot.querySelector("#product-lifecycle-maintenance-support"),this._extendedSupportTable=this.shadowRoot.querySelector("#product-lifecycle-extended-support"),this._endOfMaintenanceTable=this.shadowRoot.querySelector("#product-lifecycle-end-of-maintenance"),this._endOfLifeTable=this.shadowRoot.querySelector("#product-lifecycle-end-of-life"),this._uncategorizedTable=this.shadowRoot.querySelector("#product-lifecycle-uncategorized"),this._fullSupportBody=this.shadowRoot.querySelector("#product-lifecycle-full-support tbody"),this._maintenanceSupportBody=this.shadowRoot.querySelector("#product-lifecycle-maintenance-support tbody"),this._extendedSupportBody=this.shadowRoot.querySelector("#product-lifecycle-extended-support tbody"),this._endOfMaintenanceBody=this.shadowRoot.querySelector("#product-lifecycle-end-of-maintenance tbody"),this._endOfLifeBody=this.shadowRoot.querySelector("#product-lifecycle-end-of-life tbody"),this._uncategorizedBody=this.shadowRoot.querySelector("#product-lifecycle-uncategorized tbody"),this._caption=this.shadowRoot.querySelector("caption"),this._phaseRow=this.shadowRoot.querySelectorAll(".product-phases"),this._versionToggleRow=this.shadowRoot.querySelectorAll("version-toggle-row"),this._versionToggle=this.shadowRoot.querySelector("#unsupported-versions"),this._closeBtn=this.shadowRoot.querySelector("#close-btn"),this._loadingIndicator=this.shadowRoot.querySelector("#loading"),this.loading=!1}disconnectedCallback(){this._closeBtn.removeEventListener("click",this._handleBtnClick)}attributeChangedCallback(t,e,i){super.attributeChangedCallback(t,e,i),"product-name"===t&&this._requestProduct(i).then(t=>{this.tableData=t}).catch(t=>{console.error(t)}),"hide-eol"===t&&this._handleHideEOL(this.hasAttribute("hide-eol"))}_requestProduct(t){this.loading=!0;return new Promise((e,i)=>{const a=new XMLHttpRequest;a.open("GET","https://access.redhat.com/product-life-cycles/api/v1/products?name="+t),a.responseType="json",a.onload=()=>{a.status>=400?i(a.response):e(a.response),this.loading=!1},a.onerror=t=>{i(t,"Something went wrong."),this.loading=!1},a.send()})}_getDisplayHeaders(t){let e=[];return t.data[0].all_phases.forEach(t=>{e.push(t.display_name)}),e}_getHeaders(t){let e=[];return t.data[0].all_phases.forEach(t=>{e.push(t.name)}),e}_construct(t,e,i){let a="",n="",l="",o="",r="",d="",s='<th scope="col">Version</th>',c=t.data[0].versions,h=t.data[0].show_last_minor_release;this.shadowRoot.querySelector(".product-lifecycle-info__product-name").innerText=t.data[0].name,this.shadowRoot.querySelectorAll(".sr-only").forEach(e=>e.innerText=""+t.data[0].name),e.forEach(t=>{s+=`<th scope="col">${t}</th>`}),h&&(s+='<th scope="col">Last minor release</th>'),c.forEach((t,e)=>{let s="",c="",p="",f="",b="",u="";"Full Support"===t.type&&(this._fullSupport=!0,s=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${t.phases.map(t=>i.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}</td>`:`<td data-label="${t.name}">N/A</td>`).join("")}\n          ${h?null!==t.last_minor_release?'<td data-label="Last minor release">'+t.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':""}\n        </tr>\n        `),"Maintenance Support"===t.type&&(this._maintenanceSupport=!0,c=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${t.phases.map(t=>i.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}</td>`:`<td data-label="${t.name}">N/A</td>`).join("")}\n          ${h?null!==t.last_minor_release?'<td data-label="Last minor release">'+t.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':""}\n        </tr>\n        `),"Extended Support"===t.type&&(this._extendedSupport=!0,p=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${t.phases.map(t=>i.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}</td>`:`<td data-label="${t.name}">N/A</td>`).join("")}\n          ${h?null!==t.last_minor_release?'<td data-label="Last minor release">'+t.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':""}\n        </tr>\n        `),"End of Maintenance"===t.type&&(this._endOfMaintenance=!0,b=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${t.phases.map(t=>i.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}</td>`:`<td data-label="${t.name}">N/A</td>`).join("")}\n          ${h?null!==t.last_minor_release?'<td data-label="Last minor release">'+t.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':""}\n        </tr>\n        `),"End of life"===t.type&&(this._endOfLife=!0,f=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${t.phases.map(t=>i.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}</td>`:`<td data-label="${t.name}">N/A</td>`).join("")}\n          ${h?null!==t.last_minor_release?'<td data-label="Last minor release">'+t.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':""}\n        </tr>\n        `),""!==t.type&&null!==t.type||(this._uncategorized=!0,u=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${t.phases.map(t=>i.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}</td>`:`<td data-label="${t.name}">N/A</td>`).join("")}\n          ${h?null!==t.last_minor_release?'<td data-label="Last minor release">'+t.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':""}\n        </tr>\n        `),a+=s,n+=c,l+=p,o+=f,r+=b,d+=u}),this._fullSupport?this._fullSupportTable.removeAttribute("hidden"):this._fullSupportTable.setAttribute("hidden",!0),this._maintenanceSupport?this._maintenanceSupportTable.removeAttribute("hidden"):this._maintenanceSupportTable.setAttribute("hidden",!0),this._extendedSupport?this._extendedSupportTable.removeAttribute("hidden"):this._extendedSupportTable.setAttribute("hidden",!0),this._endOfMaintenance?this._endOfMaintenanceTable.removeAttribute("hidden"):this._endOfMaintenanceTable.setAttribute("hidden",!0),this._endOfLife?this._endOfLife&&this._plccApplication&&this._endOfLifeTable.setAttribute("hidden",!0):this._endOfLifeTable.setAttribute("hidden",!0),this._uncategorized?this._uncategorizedTable.removeAttribute("hidden"):this._uncategorizedTable.setAttribute("hidden",!0),this._phaseRow.forEach(t=>{t.innerHTML=s}),this._fullSupportBody.innerHTML=a,this._maintenanceSupportBody.innerHTML=n,this._extendedSupportBody.innerHTML=l,this._endOfLifeBody.innerHTML=o,this._endOfMaintenanceBody.innerHTML=r,this._uncategorizedBody.innerHTML=d}_parseDate(t,e){return"string"===e?t:`<pfe-datetime datetime=${t} day="numeric" month="long" year="numeric" time-zone="UTC"></pfe-datetime>`}_handleHideEOL(t){t?this._endOfLifeTable.setAttribute("hidden",!0):this._endOfLifeTable.removeAttribute("hidden")}_handleBtnClick(t){this.emitEvent(e.events.close)}}t.create(e);export default e;
//# sourceMappingURL=plcc-table.min.js.map