plcc-table
Version:
Plcc table element for PatternFly Elements
699 lines (618 loc) • 29.7 kB
JavaScript
import PFElement from '../../@patternfly/pfelement/dist/pfelement.js';
import '../../@patternfly/pfe-progress-indicator/dist/pfe-progress-indicator.js';
import '../../@patternfly/pfe-datetime/dist/pfe-datetime.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 PlccTable extends PFElement {
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}
/*# sourceMappingURL=plcc-table.min.css.map */
</style><div id="loading" hidden>
<pfe-progress-indicator></pfe-progress-indicator>
</div>
<article class="product-lifecycle__wrapper" id="product-lifecycle__wrapper--listing">
<button class="product-lifecycle__close icon-close application" id="close-btn" aria-label="Closes Red Hat OpenStack Platform Table" hidden>
<div class="icon-close__inner1"></div>
</button>
<h2 class="product-lifecycle-info__product-name sr-only"></h2>
<table border="0" cellspacing="0" cellpadding="0" class="product-lifecycle-info__table-headers" aria-hidden>
<thead>
<tr class="product-phases"></tr>
</thead>
</table>
<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">
<caption>
<h3 class="lifecycle-table__product-name">
Full support <span class="sr-only"></span>
</h3>
</caption>
<thead>
<tr class="product-phases"></tr>
</thead>
<tbody></tbody>
</table>
<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">
<caption>
<h3 class="lifecycle-table__product-name">
Maintenance support <span class="sr-only"></span>
</h3>
</caption>
<thead>
<tr class="product-phases"></tr>
</thead>
<tbody></tbody>
</table>
<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">
<caption>
<h3 class="lifecycle-table__product-name">
Extended support <span class="sr-only"></span>
</h3>
</caption>
<thead>
<tr class="product-phases"></tr>
</thead>
<tbody></tbody>
</table>
<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 ">
<caption>
<h3 class="lifecycle-table__product-name">
End of maintenance <span class="sr-only"></span>
</h3>
</caption>
<thead>
<tr class="product-phases"></tr>
</thead>
<tbody></tbody>
</table>
<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 ">
<caption>
<h3 class="lifecycle-table__product-name">
End of life <span class="sr-only"></span>
</h3>
</caption>
<thead>
<tr class="product-phases"></tr>
</thead>
<tbody></tbody>
</table>
<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 ">
<caption>
<h3 class="lifecycle-table__product-name">
Uncategorized <span class="sr-only"></span>
</h3>
</caption>
<thead>
<tr class="product-phases"></tr>
</thead>
<tbody></tbody>
</table>
</article>`;
}
static get properties() {
return {};
}
static get slots() {
return {"default":{"title":"Default slot","type":"array","namedSlot":false,"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 type() {
// return this.getAttribute("type");
// }
get hideEOL() {
return this.getAttribute("hide-eol");
}
get loading() {
return this.hasAttribute("loading");
}
set loading(val) {
if (val) {
this._loadingIndicator.removeAttribute("hidden");
this._loadingIndicator.classList.add("loading");
this.setAttribute("loading", true);
} else {
this._loadingIndicator.setAttribute("hidden", true);
this._loadingIndicator.classList.remove("loading");
this.removeAttribute("loading");
}
}
get tableData() {
return this._data;
}
set tableData(data) {
if (!data) {
return;
}
this.loading = true;
this._data = data;
let displayHeaders = this._getDisplayHeaders(this._data);
let headers = this._getHeaders(this._data);
this._construct(this._data, displayHeaders, headers);
this.loading = false;
}
static get observedAttributes() {
return ["product-name", "hide-eol"];
}
// Declare the type of this component
static get PfeType() {
return PFElement.PfeTypes.Component;
}
constructor() {
super(PlccTable, { type: PlccTable.PfeType });
// this._handleToggle = this._handleToggle.bind(this);
this._handleBtnClick = this._handleBtnClick.bind(this);
this._data = null;
this._fullSupport = false;
this._maintenanceSupport = false;
this._extendedSupport = false;
this._uncategorized = false;
this._endOfMaintenance = false;
this._endOfLife = false;
this._plccApplication = false;
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._versionToggle.addEventListener("change", this._handleToggle);
// this._closeBtn.addEventListener("click", this._handleBtnClick);
this.loading = false;
}
disconnectedCallback() {
// this._versionToggle.removeEventListener("change", this._handleToggle);
this._closeBtn.removeEventListener("click", this._handleBtnClick);
}
attributeChangedCallback(attr, oldValue, newValue) {
super.attributeChangedCallback(attr, oldValue, newValue);
if (attr === "product-name") {
this._requestProduct(newValue)
.then(data => {
this.tableData = data;
})
.catch(err => {
console.error(err);
});
}
if (attr === "hide-eol") {
this._handleHideEOL(this.hasAttribute("hide-eol"));
}
// if (attr === "type") {
// if (this.type === "app") {
// this._plccApplication = true;
// this._article.classList.add("product-lifecycle__wrapper--listing");
// // this._header.classList.replace(
// // "product-lifecycle__header--less-info",
// // "product-lifecycle__header--more-info"
// // );
// this._appMarkup.forEach(item => item.removeAttribute("hidden"));
// } else {
// this._article.classList.remove("product-lifecycle__wrapper--listing");
// // this._header.classList.replace(
// // "product-lifecycle__header--more-info",
// // "product-lifecycle__header--less-info"
// // );
// this._appMarkup.forEach(item => item.setAttribute("hidden", true));
// }
// }
}
//
_requestProduct(product) {
this.loading = true;
const promise = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(
"GET",
"https://access.redhat.com/product-life-cycles/api/v1/products?name=" +
product
);
xhr.responseType = "json";
xhr.onload = () => {
if (xhr.status >= 400) {
reject(xhr.response);
} else {
resolve(xhr.response);
}
this.loading = false;
};
xhr.onerror = err => {
reject(err, "Something went wrong.");
this.loading = false;
};
xhr.send();
});
return promise;
}
//get products phases for table headers
_getDisplayHeaders(data) {
let displayHeaders = [];
data.data[0].all_phases.forEach(item => {
displayHeaders.push(item.display_name);
});
return displayHeaders;
}
_getHeaders(data) {
let headers = [];
data.data[0].all_phases.forEach(item => {
headers.push(item.name);
});
return headers;
}
//construct table headers and rows based on data and append to html
_construct(data, displayHeaders, headers) {
let allFullSupportRows = "";
let allMaintenanceSupportRows = "";
let allExtendedSupportRows = "";
let allEndOfLifeRows = "";
let allEndOfMaintenanceRows = "";
let allUncategorizedRows = "";
let allHeaders = '<th scope="col">Version</th>';
let versions = data.data[0].versions;
let showMinor = data.data[0].show_last_minor_release;
//set product name
this.shadowRoot.querySelector(
".product-lifecycle-info__product-name"
).innerText = data.data[0].name;
this.shadowRoot
.querySelectorAll(".sr-only")
.forEach(item => (item.innerText = `${data.data[0].name}`));
//create table headers
displayHeaders.forEach(item => {
let theader = `<th scope="col">${item}</th>`;
allHeaders += theader;
});
//check if minor version column should display
if (showMinor) {
allHeaders += '<th scope="col">Last minor release</th>';
}
versions.forEach((item, index) => {
let fullSupportRow = "";
let maintenanceSupportRow = "";
let extendedSupportRow = "";
let endOfLifeRow = "";
let endOfMaintenanceRow = "";
let uncategorizedRow = "";
//if version is tagged latest, create row for full support
if (item.type === "Full Support") {
this._fullSupport = true;
fullSupportRow = `
<tr>
<th scope="row" data-label="Version">${item.name}</th>
${item.phases
.map(phase => {
if (headers.includes(phase.name)) {
return `<td data-label="${phase.name}">${this._parseDate(
phase.date, phase.date_format
)}</td>`;
} else {
return `<td data-label="${phase.name}">N/A</td>`;
}
})
.join("")}
${
showMinor
? item.last_minor_release !== null
? '<td data-label="Last minor release">' +
item.last_minor_release +
"</td>"
: '<td data-label="Last minor release">N/A</td>'
: ""
}
</tr>
`;
}
//if version is tagged supported, create row for maintenance support
if (item.type === "Maintenance Support") {
this._maintenanceSupport = true;
maintenanceSupportRow = `
<tr>
<th scope="row" data-label="Version">${item.name}</th>
${item.phases
.map(phase => {
if (headers.includes(phase.name)) {
return `<td data-label="${phase.name}">${this._parseDate(
phase.date, phase.date_format
)}</td>`;
} else {
return `<td data-label="${phase.name}">N/A</td>`;
}
})
.join("")}
${
showMinor
? item.last_minor_release !== null
? '<td data-label="Last minor release">' +
item.last_minor_release +
"</td>"
: '<td data-label="Last minor release">N/A</td>'
: ""
}
</tr>
`;
}
//if version is tagged extended support, create row for extended support
if (item.type === "Extended Support") {
this._extendedSupport = true;
extendedSupportRow = `
<tr>
<th scope="row" data-label="Version">${item.name}</th>
${item.phases
.map(phase => {
if (headers.includes(phase.name)) {
return `<td data-label="${phase.name}">${this._parseDate(
phase.date, phase.date_format
)}</td>`;
} else {
return `<td data-label="${phase.name}">N/A</td>`;
}
})
.join("")}
${
showMinor
? item.last_minor_release !== null
? '<td data-label="Last minor release">' +
item.last_minor_release +
"</td>"
: '<td data-label="Last minor release">N/A</td>'
: ""
}
</tr>
`;
}
if (item.type === "End of Maintenance") {
this._endOfMaintenance = true;
endOfMaintenanceRow = `
<tr>
<th scope="row" data-label="Version">${item.name}</th>
${item.phases
.map(phase => {
if (headers.includes(phase.name)) {
return `<td data-label="${phase.name}">${this._parseDate(
phase.date, phase.date_format
)}</td>`;
} else {
return `<td data-label="${phase.name}">N/A</td>`;
}
})
.join("")}
${
showMinor
? item.last_minor_release !== null
? '<td data-label="Last minor release">' +
item.last_minor_release +
"</td>"
: '<td data-label="Last minor release">N/A</td>'
: ""
}
</tr>
`;
}
//if version is tagged old, create row for end of life
if (item.type === "End of life") {
this._endOfLife = true;
endOfLifeRow = `
<tr>
<th scope="row" data-label="Version">${item.name}</th>
${item.phases
.map(phase => {
if (headers.includes(phase.name)) {
return `<td data-label="${phase.name}">${this._parseDate(
phase.date, phase.date_format
)}</td>`;
} else {
return `<td data-label="${phase.name}">N/A</td>`;
}
})
.join("")}
${
showMinor
? item.last_minor_release !== null
? '<td data-label="Last minor release">' +
item.last_minor_release +
"</td>"
: '<td data-label="Last minor release">N/A</td>'
: ""
}
</tr>
`;
}
//if version is tagged latest, create row for full support
if (item.type === "" || item.type === null) {
this._uncategorized = true;
uncategorizedRow = `
<tr>
<th scope="row" data-label="Version">${item.name}</th>
${item.phases
.map(phase => {
if (headers.includes(phase.name)) {
return `<td data-label="${phase.name}">${this._parseDate(
phase.date, phase.date_format
)}</td>`;
} else {
return `<td data-label="${phase.name}">N/A</td>`;
}
})
.join("")}
${
showMinor
? item.last_minor_release !== null
? '<td data-label="Last minor release">' +
item.last_minor_release +
"</td>"
: '<td data-label="Last minor release">N/A</td>'
: ""
}
</tr>
`;
}
allFullSupportRows += fullSupportRow;
allMaintenanceSupportRows += maintenanceSupportRow;
allExtendedSupportRows += extendedSupportRow;
allEndOfLifeRows += endOfLifeRow;
allEndOfMaintenanceRows += endOfMaintenanceRow;
allUncategorizedRows += uncategorizedRow;
});
if (!this._fullSupport) {
this._fullSupportTable.setAttribute("hidden", true);
} else {
this._fullSupportTable.removeAttribute("hidden");
}
if (!this._maintenanceSupport) {
this._maintenanceSupportTable.setAttribute("hidden", true);
} else {
this._maintenanceSupportTable.removeAttribute("hidden");
}
if (!this._extendedSupport) {
this._extendedSupportTable.setAttribute("hidden", true);
} else {
this._extendedSupportTable.removeAttribute("hidden");
}
if (!this._endOfMaintenance) {
this._endOfMaintenanceTable.setAttribute("hidden", true);
} else {
this._endOfMaintenanceTable.removeAttribute("hidden");
}
//if there are 0 of type "old" hide the end of life table
//if they exist but were in app, hide the table by default (toggle with checkbox)
if (!this._endOfLife) {
this._endOfLifeTable.setAttribute("hidden", true);
// this.shadowRoot.querySelector(".u-no-break").setAttribute("hidden", true);
} else if (this._endOfLife && this._plccApplication) {
this._endOfLifeTable.setAttribute("hidden", true);
}
if (!this._uncategorized) {
this._uncategorizedTable.setAttribute("hidden", true);
} else {
this._uncategorizedTable.removeAttribute("hidden");
}
//append headers to all <thead>s
this._phaseRow.forEach(item => {
item.innerHTML = allHeaders;
});
//append rows to all <tbody>s
this._fullSupportBody.innerHTML = allFullSupportRows;
this._maintenanceSupportBody.innerHTML = allMaintenanceSupportRows;
this._extendedSupportBody.innerHTML = allExtendedSupportRows;
this._endOfLifeBody.innerHTML = allEndOfLifeRows;
this._endOfMaintenanceBody.innerHTML = allEndOfMaintenanceRows;
this._uncategorizedBody.innerHTML = allUncategorizedRows;
}
//check for valid date
_parseDate(date, format) {
if (format === 'string') {
return date;
} else {
return `<pfe-datetime datetime=${date} day="numeric" month="long" year="numeric" time-zone="UTC"></pfe-datetime>`;
}
}
//handle checkbox event
// _handleToggle(event) {
// if (!event.target.checked) {
// this._endOfLifeTable.setAttribute("hidden", true);
// } else {
// this._endOfLifeTable.removeAttribute("hidden");
// }
// }
//handle toggle attr
_handleHideEOL(val) {
if (val) {
this._endOfLifeTable.setAttribute("hidden", true);
} else {
this._endOfLifeTable.removeAttribute("hidden");
}
}
//emit close button event
_handleBtnClick(event) {
this.emitEvent(PlccTable.events.close);
}
}
PFElement.create(PlccTable);
export default PlccTable;
//# sourceMappingURL=plcc-table.js.map