@cpelements/plcc-table - npm Package Compare versions

Comparing version 1.2.2 to 2.0.0

dist/plcc-table.js

@@ -6,3 +6,3 @@ import PFElement from '../../../@patternfly/pfelement/dist/pfelement.js';
 /*!
- * PatternFly Elements: PlccTable 1.2.1
+ * PatternFly Elements: PlccTable 1.2.2
  * @license
@@ -33,3 +33,3 @@ * Copyright 2020 Red Hat, Inc.
   static get version() {
-    return "1.2.1";
+    return "1.2.2";
   }
@@ -138,3 +138,27 @@
   static get properties() {
-    return {};
+    return {
+      _lang: {
+        title: "Language support",
+        attr: "lang",
+        default: "en",
+        type: String
+      },
+      productName: {
+        title: "Name of product required for api",
+        attr: "product-name",
+        type: String,
+        observer: "_requestProduct"
+      },
+      hideEol: {
+        title: "Hide end-of-life section",
+        attr: "hide-eol",
+        type: Boolean,
+        observer: "_hideEolChange"
+      },
+      app: {
+        title: "Toggle application version",
+        attr: "app",
+        type: String
+      }
+    };
   }
@@ -154,6 +178,2 @@
 
-  get productName() {
-    return this.getAttribute("product-name");
-  }
-
   get app() {
@@ -200,5 +220,5 @@ return this.getAttribute("app");
 
-  static get observedAttributes() {
-    return ["product-name", "hide-eol", "app"];
-  }
+  // static get observedAttributes() {
+  //   return ["product-name", "hide-eol", "app"];
+  // }
 
@@ -280,2 +300,7 @@ // Declare the type of this component
 
+    //check for lang attribute on html tag
+    if (document.querySelector("html").hasAttribute("lang")) {
+      this._lang = document.querySelector("html").getAttribute("lang");
+    }
+
     this.loading = false;
@@ -289,38 +314,27 @@ }
 
-  attributeChangedCallback(attr, oldValue, newValue) {
-    super.attributeChangedCallback(attr, oldValue, newValue);
+  _hideEolChange() {
+    this._handleHideEOL(this.hasAttribute("hide-eol"));
+  }
 
-    if (attr === "product-name") {
-      this._requestProduct(newValue)
-        .then(data => {
-          this.tableData = data;
-        })
-        .catch(err => {
-          console.error(err);
-        });
-    }
+  _requestProduct() {
+    this.loading = true;
+    let query = "";
+    let product = this.productName;
+    let lang = this._lang;
 
-    if (attr === "hide-eol") {
-      this._handleHideEOL(this.hasAttribute("hide-eol"));
+    if (this.lang === "en") {
+      query =
+        "https://access.redhat.com/product-life-cycles/api/v1/products?name=" +
+        product;
+    } else {
+      query =
+        "https://access.qa.redhat.com/product-life-cycles/api/v1/products?name=" +
+        product +
+        "&lng=" +
+        lang;
     }
 
-    if (attr === "app") {
-      if (this.hasAttribute("app")) {
-        this._disclaimer.setAttribute("hidden", true);
-      } else {
-        this._disclaimer.removeAttribute("hidden");
-      }
-    }
-  }
-
-  _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.open("GET", query);
       xhr.responseType = "json";
@@ -344,5 +358,13 @@
       xhr.send();
-    });
+    })
+      .then(data => {
+        this.tableData = data;
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }
 
-    return promise;
+  _translateStrings() {
+    this._requestProduct();
   }
@@ -713,3 +735,5 @@
     } else {
-      return `<pfe-datetime datetime=${date} day="numeric" month="long" year="numeric" time-zone="UTC"></pfe-datetime>`;
+      return `<pfe-datetime datetime=${date} day="numeric" month="long" year="numeric" locale="${
+        this._lang !== "zh_CN" ? this._lang : "zh-Hans-CN"
+      }"></pfe-datetime>`;
     }
@@ -716,0 +740,0 @@ }

dist/plcc-table.min.js

 import e 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 1.2.1
+ * PatternFly Elements: PlccTable 1.2.2
  * @license
@@ -25,3 +25,3 @@ * Copyright 2020 Red Hat, Inc.
  * 
-*/class t extends e{static get version(){return"1.2.1"}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  <p id="plcc-disclaimer">All future dates mentioned are close approximations, non definitive, and subject to change.</p>\n</article>'}static get tag(){return"plcc-table"}static get events(){return{close:`${this.tag}:close`}}static get properties(){return{}}static get slots(){return{}}get templateUrl(){return"plcc-table.html"}get styleUrl(){return"plcc-table.scss"}get productName(){return this.getAttribute("product-name")}get app(){return this.getAttribute("app")}get hideEOL(){return this.getAttribute("hide-eol")}get loading(){return this.hasAttribute("loading")}set loading(e){e?(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(e){if(!e)return;this.loading=!0,this._data=e;let t=this._getDisplayHeaders(this._data),a=this._getHeaders(this._data);this._construct(this._data,t,a),this.loading=!1}static get observedAttributes(){return["product-name","hide-eol","app"]}static get PfeType(){return e.PfeTypes.Component}constructor(){super(t,{type:t.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._disclaimer=this.shadowRoot.querySelector("#plcc-disclaimer"),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(e,t,a){super.attributeChangedCallback(e,t,a),"product-name"===e&&this._requestProduct(a).then(e=>{this.tableData=e}).catch(e=>{console.error(e)}),"hide-eol"===e&&this._handleHideEOL(this.hasAttribute("hide-eol")),"app"===e&&(this.hasAttribute("app")?this._disclaimer.setAttribute("hidden",!0):this._disclaimer.removeAttribute("hidden"))}_requestProduct(e){return this.loading=!0,new Promise((t,a)=>{const i=new XMLHttpRequest;i.open("GET","https://access.redhat.com/product-life-cycles/api/v1/products?name="+e),i.responseType="json",i.onload=(()=>{i.status>=400?a(i.response):t(i.response),this.loading=!1}),i.onerror=(e=>{a(e,"Something went wrong."),this.loading=!1}),i.send()})}_getDisplayHeaders(e){let t=[];return e.data[0].is_layered_product&&t.push(e.data[0].extra_header),e.data[0].all_phases.forEach(e=>{t.push(e.display_name)}),t}_getHeaders(e){let t=[];return e.data[0].is_layered_product&&t.push(e.data[0].extra_header),e.data[0].all_phases.forEach(e=>{t.push(e.name)}),t}_construct(e,t,a){let i="",l="",n="",d="",r="",o="",s='<th scope="col">Version</th>',c=e.data[0].versions,h=e.data[0].show_last_minor_release,p=e.data[0].is_layered_product;this.shadowRoot.querySelector(".product-lifecycle-info__product-name").innerText=e.data[0].name,this.shadowRoot.querySelectorAll(".sr-only").forEach(t=>t.innerText=`${e.data[0].name}`),t.forEach(e=>{s+=`<th scope="col">${e}</th>`}),h&&(s+='<th scope="col">Last minor release</th>'),c.forEach((t,s)=>{let c="",u="",b="",f="",_="",m="";"Full Support"===t.type&&(this._fullSupport=!0,c=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${p?null!==t.extra_header_value?`<td data-label="${e.data[0].extra_header}">${t.extra_header_value}</td>`:`<td data-label="${e.data[0].extra_header}">N/A</td>`:""}\n          ${t.phases.map(e=>a.includes(e.name)?`<td data-label="${e.name}">${this._parseDate(e.date,e.date_format)}</td>`:`<td data-label="${e.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,u=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${p?null!==t.extra_header_value?`<td data-label="${e.data[0].extra_header}">${t.extra_header_value}</td>`:`<td data-label="${e.data[0].extra_header}">N/A</td>`:""}\n          ${t.phases.map(e=>a.includes(e.name)?`<td data-label="${e.name}">${this._parseDate(e.date,e.date_format)}</td>`:`<td data-label="${e.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,b=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${p?null!==t.extra_header_value?`<td data-label="${e.data[0].extra_header}">${t.extra_header_value}</td>`:`<td data-label="${e.data[0].extra_header}">N/A</td>`:""}\n          ${t.phases.map(e=>a.includes(e.name)?`<td data-label="${e.name}">${this._parseDate(e.date,e.date_format)}</td>`:`<td data-label="${e.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,_=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${p?null!==t.extra_header_value?`<td data-label="${e.data[0].extra_header}">${t.extra_header_value}</td>`:`<td data-label="${e.data[0].extra_header}">N/A</td>`:""}\n          ${t.phases.map(e=>a.includes(e.name)?`<td data-label="${e.name}">${this._parseDate(e.date,e.date_format)}</td>`:`<td data-label="${e.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          ${p?null!==t.extra_header_value?`<td data-label="${e.data[0].extra_header}">${t.extra_header_value}</td>`:`<td data-label="${e.data[0].extra_header}">N/A</td>`:""}\n          ${t.phases.map(e=>a.includes(e.name)?`<td data-label="${e.name}">${this._parseDate(e.date,e.date_format)}</td>`:`<td data-label="${e.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,m=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${p?null!==t.extra_header_value?`<td data-label="${e.data[0].extra_header}">${t.extra_header_value}</td>`:`<td data-label="${e.data[0].extra_header}">N/A</td>`:""}\n          ${t.phases.map(e=>a.includes(e.name)?`<td data-label="${e.name}">${this._parseDate(e.date,e.date_format)}</td>`:`<td data-label="${e.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        `),i+=c,l+=u,n+=b,d+=f,r+=_,o+=m}),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(e=>{e.innerHTML=s}),this._fullSupportBody.innerHTML=i,this._maintenanceSupportBody.innerHTML=l,this._extendedSupportBody.innerHTML=n,this._endOfLifeBody.innerHTML=d,this._endOfMaintenanceBody.innerHTML=r,this._uncategorizedBody.innerHTML=o}_parseDate(e,t){return"string"===t?e:`<pfe-datetime datetime=${e} day="numeric" month="long" year="numeric" time-zone="UTC"></pfe-datetime>`}_handleHideEOL(e){e?this._endOfLifeTable.setAttribute("hidden",!0):this._endOfLifeTable.removeAttribute("hidden")}_handleBtnClick(e){this.emitEvent(t.events.close)}}e.create(t);export default t;
+*/class t extends e{static get version(){return"1.2.2"}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  <p id="plcc-disclaimer">All future dates mentioned are close approximations, non definitive, and subject to change.</p>\n</article>'}static get tag(){return"plcc-table"}static get events(){return{close:`${this.tag}:close`}}static get properties(){return{_lang:{title:"Language support",attr:"lang",default:"en",type:String},productName:{title:"Name of product required for api",attr:"product-name",type:String,observer:"_requestProduct"},hideEol:{title:"Hide end-of-life section",attr:"hide-eol",type:Boolean,observer:"_hideEolChange"},app:{title:"Toggle application version",attr:"app",type:String}}}static get slots(){return{}}get templateUrl(){return"plcc-table.html"}get styleUrl(){return"plcc-table.scss"}get app(){return this.getAttribute("app")}get hideEOL(){return this.getAttribute("hide-eol")}get loading(){return this.hasAttribute("loading")}set loading(e){e?(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(e){if(!e)return;this.loading=!0,this._data=e;let t=this._getDisplayHeaders(this._data),a=this._getHeaders(this._data);this._construct(this._data,t,a),this.loading=!1}static get PfeType(){return e.PfeTypes.Component}constructor(){super(t,{type:t.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._disclaimer=this.shadowRoot.querySelector("#plcc-disclaimer"),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"),document.querySelector("html").hasAttribute("lang")&&(this._lang=document.querySelector("html").getAttribute("lang")),this.loading=!1}disconnectedCallback(){this._closeBtn.removeEventListener("click",this._handleBtnClick)}_hideEolChange(){this._handleHideEOL(this.hasAttribute("hide-eol"))}_requestProduct(){this.loading=!0;let e="",t=this.productName,a=this._lang;e="en"===this.lang?"https://access.redhat.com/product-life-cycles/api/v1/products?name="+t:"https://access.qa.redhat.com/product-life-cycles/api/v1/products?name="+t+"&lng="+a;new Promise((t,a)=>{const i=new XMLHttpRequest;i.open("GET",e),i.responseType="json",i.onload=(()=>{i.status>=400?a(i.response):t(i.response),this.loading=!1}),i.onerror=(e=>{a(e,"Something went wrong."),this.loading=!1}),i.send()}).then(e=>{this.tableData=e}).catch(e=>{console.error(e)})}_translateStrings(){this._requestProduct()}_getDisplayHeaders(e){let t=[];return e.data[0].is_layered_product&&t.push(e.data[0].extra_header),e.data[0].all_phases.forEach(e=>{t.push(e.display_name)}),t}_getHeaders(e){let t=[];return e.data[0].is_layered_product&&t.push(e.data[0].extra_header),e.data[0].all_phases.forEach(e=>{t.push(e.name)}),t}_construct(e,t,a){let i="",l="",n="",d="",r="",o="",s='<th scope="col">Version</th>',c=e.data[0].versions,h=e.data[0].show_last_minor_release,p=e.data[0].is_layered_product;this.shadowRoot.querySelector(".product-lifecycle-info__product-name").innerText=e.data[0].name,this.shadowRoot.querySelectorAll(".sr-only").forEach(t=>t.innerText=`${e.data[0].name}`),t.forEach(e=>{s+=`<th scope="col">${e}</th>`}),h&&(s+='<th scope="col">Last minor release</th>'),c.forEach((t,s)=>{let c="",u="",f="",_="",b="",m="";"Full Support"===t.type&&(this._fullSupport=!0,c=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${p?null!==t.extra_header_value?`<td data-label="${e.data[0].extra_header}">${t.extra_header_value}</td>`:`<td data-label="${e.data[0].extra_header}">N/A</td>`:""}\n          ${t.phases.map(e=>a.includes(e.name)?`<td data-label="${e.name}">${this._parseDate(e.date,e.date_format)}</td>`:`<td data-label="${e.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,u=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${p?null!==t.extra_header_value?`<td data-label="${e.data[0].extra_header}">${t.extra_header_value}</td>`:`<td data-label="${e.data[0].extra_header}">N/A</td>`:""}\n          ${t.phases.map(e=>a.includes(e.name)?`<td data-label="${e.name}">${this._parseDate(e.date,e.date_format)}</td>`:`<td data-label="${e.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,f=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${p?null!==t.extra_header_value?`<td data-label="${e.data[0].extra_header}">${t.extra_header_value}</td>`:`<td data-label="${e.data[0].extra_header}">N/A</td>`:""}\n          ${t.phases.map(e=>a.includes(e.name)?`<td data-label="${e.name}">${this._parseDate(e.date,e.date_format)}</td>`:`<td data-label="${e.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          ${p?null!==t.extra_header_value?`<td data-label="${e.data[0].extra_header}">${t.extra_header_value}</td>`:`<td data-label="${e.data[0].extra_header}">N/A</td>`:""}\n          ${t.phases.map(e=>a.includes(e.name)?`<td data-label="${e.name}">${this._parseDate(e.date,e.date_format)}</td>`:`<td data-label="${e.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,_=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${p?null!==t.extra_header_value?`<td data-label="${e.data[0].extra_header}">${t.extra_header_value}</td>`:`<td data-label="${e.data[0].extra_header}">N/A</td>`:""}\n          ${t.phases.map(e=>a.includes(e.name)?`<td data-label="${e.name}">${this._parseDate(e.date,e.date_format)}</td>`:`<td data-label="${e.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,m=`\n        <tr>\n          <th scope="row" data-label="Version">${t.name}</th>\n          ${p?null!==t.extra_header_value?`<td data-label="${e.data[0].extra_header}">${t.extra_header_value}</td>`:`<td data-label="${e.data[0].extra_header}">N/A</td>`:""}\n          ${t.phases.map(e=>a.includes(e.name)?`<td data-label="${e.name}">${this._parseDate(e.date,e.date_format)}</td>`:`<td data-label="${e.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        `),i+=c,l+=u,n+=f,d+=_,r+=b,o+=m}),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(e=>{e.innerHTML=s}),this._fullSupportBody.innerHTML=i,this._maintenanceSupportBody.innerHTML=l,this._extendedSupportBody.innerHTML=n,this._endOfLifeBody.innerHTML=d,this._endOfMaintenanceBody.innerHTML=r,this._uncategorizedBody.innerHTML=o}_parseDate(e,t){return"string"===t?e:`<pfe-datetime datetime=${e} day="numeric" month="long" year="numeric" locale="${"zh_CN"!==this._lang?this._lang:"zh-Hans-CN"}"></pfe-datetime>`}_handleHideEOL(e){e?this._endOfLifeTable.setAttribute("hidden",!0):this._endOfLifeTable.removeAttribute("hidden")}_handleBtnClick(e){this.emitEvent(t.events.close)}}e.create(t);export default t;
 //# sourceMappingURL=plcc-table.min.js.map

dist/plcc-table.umd.js

@@ -33,27 +33,2 @@ (function (global, factory) {
 
-  var get = function get(object, property, receiver) {
-    if (object === null) object = Function.prototype;
-    var desc = Object.getOwnPropertyDescriptor(object, property);
-
-    if (desc === undefined) {
-      var parent = Object.getPrototypeOf(object);
-
-      if (parent === null) {
-        return undefined;
-      } else {
-        return get(parent, property, receiver);
-      }
-    } else if ("value" in desc) {
-      return desc.value;
-    } else {
-      var getter = desc.get;
-
-      if (getter === undefined) {
-        return undefined;
-      }
-
-      return getter.call(receiver);
-    }
-  };
-
   var inherits = function (subClass, superClass) {
@@ -84,3 +59,3 @@ if (typeof superClass !== "function" && superClass !== null) {
   /*!
-   * PatternFly Elements: PlccTable 1.2.1
+   * PatternFly Elements: PlccTable 1.2.2
    * @license
@@ -127,7 +102,2 @@ * Copyright 2020 Red Hat, Inc.
     }, {
-      key: "productName",
-      get: function get$$1() {
-        return this.getAttribute("product-name");
-      }
-    }, {
       key: "app",
@@ -175,6 +145,13 @@ get: function get$$1() {
       }
+
+      // static get observedAttributes() {
+      //   return ["product-name", "hide-eol", "app"];
+      // }
+
+      // Declare the type of this component
+
     }], [{
       key: "version",
       get: function get$$1() {
-        return "1.2.1";
+        return "1.2.2";
       }
@@ -196,3 +173,27 @@ }, {
       get: function get$$1() {
-        return {};
+        return {
+          _lang: {
+            title: "Language support",
+            attr: "lang",
+            default: "en",
+            type: String
+          },
+          productName: {
+            title: "Name of product required for api",
+            attr: "product-name",
+            type: String,
+            observer: "_requestProduct"
+          },
+          hideEol: {
+            title: "Hide end-of-life section",
+            attr: "hide-eol",
+            type: Boolean,
+            observer: "_hideEolChange"
+          },
+          app: {
+            title: "Toggle application version",
+            attr: "app",
+            type: String
+          }
+        };
       }
@@ -205,10 +206,2 @@ }, {
     }, {
-      key: "observedAttributes",
-      get: function get$$1() {
-        return ["product-name", "hide-eol", "app"];
-      }
-
-      // Declare the type of this component
-
-    }, {
       key: "PfeType",
@@ -264,2 +257,7 @@ get: function get$$1() {
 
+      //check for lang attribute on html tag
+      if (document.querySelector("html").hasAttribute("lang")) {
+        _this._lang = document.querySelector("html").getAttribute("lang");
+      }
+
       _this.loading = false;
@@ -276,38 +274,25 @@ return _this;
     }, {
-      key: "attributeChangedCallback",
-      value: function attributeChangedCallback(attr, oldValue, newValue) {
-        var _this2 = this;
-
-        get(PlccTable.prototype.__proto__ || Object.getPrototypeOf(PlccTable.prototype), "attributeChangedCallback", this).call(this, attr, oldValue, newValue);
-
-        if (attr === "product-name") {
-          this._requestProduct(newValue).then(function (data) {
-            _this2.tableData = data;
-          }).catch(function (err) {
-            console.error(err);
-          });
-        }
-
-        if (attr === "hide-eol") {
-          this._handleHideEOL(this.hasAttribute("hide-eol"));
-        }
-
-        if (attr === "app") {
-          if (this.hasAttribute("app")) {
-            this._disclaimer.setAttribute("hidden", true);
-          } else {
-            this._disclaimer.removeAttribute("hidden");
-          }
-        }
+      key: "_hideEolChange",
+      value: function _hideEolChange() {
+        this._handleHideEOL(this.hasAttribute("hide-eol"));
       }
     }, {
       key: "_requestProduct",
-      value: function _requestProduct(product) {
-        var _this3 = this;
+      value: function _requestProduct() {
+        var _this2 = this;
 
         this.loading = true;
+        var query = "";
+        var product = this.productName;
+        var lang = this._lang;
 
+        if (this.lang === "en") {
+          query = "https://access.redhat.com/product-life-cycles/api/v1/products?name=" + product;
+        } else {
+          query = "https://access.qa.redhat.com/product-life-cycles/api/v1/products?name=" + product + "&lng=" + lang;
+        }
+
         var promise = new Promise(function (resolve, reject) {
           var xhr = new XMLHttpRequest();
-          xhr.open("GET", "https://access.redhat.com/product-life-cycles/api/v1/products?name=" + product);
+          xhr.open("GET", query);
           xhr.responseType = "json";
@@ -322,3 +307,3 @@
 
-            _this3.loading = false;
+            _this2.loading = false;
           };
@@ -328,10 +313,17 @@
             reject(err, "Something went wrong.");
-            _this3.loading = false;
+            _this2.loading = false;
           };
 
           xhr.send();
+        }).then(function (data) {
+          _this2.tableData = data;
+        }).catch(function (err) {
+          console.error(err);
         });
-
-        return promise;
       }
+    }, {
+      key: "_translateStrings",
+      value: function _translateStrings() {
+        this._requestProduct();
+      }
 
@@ -372,3 +364,3 @@ //get products phases for table headers
       value: function _construct(data, displayHeaders, headers) {
-        var _this4 = this;
+        var _this3 = this;
 
@@ -413,6 +405,6 @@ var allFullSupportRows = "";
           if (item.type === "Full Support") {
-            _this4._fullSupport = true;
+            _this3._fullSupport = true;
             fullSupportRow = "\n        <tr>\n          <th scope=\"row\" data-label=\"Version\">" + item.name + "</th>\n          " + (layeredProduct ? item.extra_header_value !== null ? "<td data-label=\"" + data.data[0].extra_header + "\">" + item.extra_header_value + "</td>" : "<td data-label=\"" + data.data[0].extra_header + "\">N/A</td>" : "") + "\n          " + item.phases.map(function (phase) {
               if (headers.includes(phase.name)) {
-                return "<td data-label=\"" + phase.name + "\">" + _this4._parseDate(phase.date, phase.date_format) + "</td>";
+                return "<td data-label=\"" + phase.name + "\">" + _this3._parseDate(phase.date, phase.date_format) + "</td>";
               } else {
@@ -426,7 +418,7 @@ return "<td data-label=\"" + phase.name + "\">N/A</td>";
           if (item.type === "Maintenance Support") {
-            _this4._maintenanceSupport = true;
+            _this3._maintenanceSupport = true;
 
             maintenanceSupportRow = "\n        <tr>\n          <th scope=\"row\" data-label=\"Version\">" + item.name + "</th>\n          " + (layeredProduct ? item.extra_header_value !== null ? "<td data-label=\"" + data.data[0].extra_header + "\">" + item.extra_header_value + "</td>" : "<td data-label=\"" + data.data[0].extra_header + "\">N/A</td>" : "") + "\n          " + item.phases.map(function (phase) {
               if (headers.includes(phase.name)) {
-                return "<td data-label=\"" + phase.name + "\">" + _this4._parseDate(phase.date, phase.date_format) + "</td>";
+                return "<td data-label=\"" + phase.name + "\">" + _this3._parseDate(phase.date, phase.date_format) + "</td>";
               } else {
@@ -440,7 +432,7 @@ return "<td data-label=\"" + phase.name + "\">N/A</td>";
           if (item.type === "Extended Support") {
-            _this4._extendedSupport = true;
+            _this3._extendedSupport = true;
 
             extendedSupportRow = "\n        <tr>\n          <th scope=\"row\" data-label=\"Version\">" + item.name + "</th>\n          " + (layeredProduct ? item.extra_header_value !== null ? "<td data-label=\"" + data.data[0].extra_header + "\">" + item.extra_header_value + "</td>" : "<td data-label=\"" + data.data[0].extra_header + "\">N/A</td>" : "") + "\n          " + item.phases.map(function (phase) {
               if (headers.includes(phase.name)) {
-                return "<td data-label=\"" + phase.name + "\">" + _this4._parseDate(phase.date, phase.date_format) + "</td>";
+                return "<td data-label=\"" + phase.name + "\">" + _this3._parseDate(phase.date, phase.date_format) + "</td>";
               } else {
@@ -453,7 +445,7 @@ return "<td data-label=\"" + phase.name + "\">N/A</td>";
           if (item.type === "End of Maintenance") {
-            _this4._endOfMaintenance = true;
+            _this3._endOfMaintenance = true;
 
             endOfMaintenanceRow = "\n        <tr>\n          <th scope=\"row\" data-label=\"Version\">" + item.name + "</th>\n          " + (layeredProduct ? item.extra_header_value !== null ? "<td data-label=\"" + data.data[0].extra_header + "\">" + item.extra_header_value + "</td>" : "<td data-label=\"" + data.data[0].extra_header + "\">N/A</td>" : "") + "\n          " + item.phases.map(function (phase) {
               if (headers.includes(phase.name)) {
-                return "<td data-label=\"" + phase.name + "\">" + _this4._parseDate(phase.date, phase.date_format) + "</td>";
+                return "<td data-label=\"" + phase.name + "\">" + _this3._parseDate(phase.date, phase.date_format) + "</td>";
               } else {
@@ -467,7 +459,7 @@ return "<td data-label=\"" + phase.name + "\">N/A</td>";
           if (item.type === "End of life") {
-            _this4._endOfLife = true;
+            _this3._endOfLife = true;
 
             endOfLifeRow = "\n        <tr>\n          <th scope=\"row\" data-label=\"Version\">" + item.name + "</th>\n          " + (layeredProduct ? item.extra_header_value !== null ? "<td data-label=\"" + data.data[0].extra_header + "\">" + item.extra_header_value + "</td>" : "<td data-label=\"" + data.data[0].extra_header + "\">N/A</td>" : "") + "\n          " + item.phases.map(function (phase) {
               if (headers.includes(phase.name)) {
-                return "<td data-label=\"" + phase.name + "\">" + _this4._parseDate(phase.date, phase.date_format) + "</td>";
+                return "<td data-label=\"" + phase.name + "\">" + _this3._parseDate(phase.date, phase.date_format) + "</td>";
               } else {
@@ -481,7 +473,7 @@ return "<td data-label=\"" + phase.name + "\">N/A</td>";
           if (item.type === "" || item.type === null) {
-            _this4._uncategorized = true;
+            _this3._uncategorized = true;
 
             uncategorizedRow = "\n        <tr>\n          <th scope=\"row\" data-label=\"Version\">" + item.name + "</th>\n          " + (layeredProduct ? item.extra_header_value !== null ? "<td data-label=\"" + data.data[0].extra_header + "\">" + item.extra_header_value + "</td>" : "<td data-label=\"" + data.data[0].extra_header + "\">N/A</td>" : "") + "\n          " + item.phases.map(function (phase) {
               if (headers.includes(phase.name)) {
-                return "<td data-label=\"" + phase.name + "\">" + _this4._parseDate(phase.date, phase.date_format) + "</td>";
+                return "<td data-label=\"" + phase.name + "\">" + _this3._parseDate(phase.date, phase.date_format) + "</td>";
               } else {
@@ -562,3 +554,3 @@ return "<td data-label=\"" + phase.name + "\">N/A</td>";
         } else {
-          return "<pfe-datetime datetime=" + date + " day=\"numeric\" month=\"long\" year=\"numeric\" time-zone=\"UTC\"></pfe-datetime>";
+          return "<pfe-datetime datetime=" + date + " day=\"numeric\" month=\"long\" year=\"numeric\" locale=\"" + (this._lang !== "zh_CN" ? this._lang : "zh-Hans-CN") + "\"></pfe-datetime>";
         }
@@ -565,0 +557,0 @@ }

dist/plcc-table.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../../../@patternfly/pfelement/dist/pfelement.umd.min"),require("../../../@patternfly/pfe-progress-indicator/dist/pfe-progress-indicator.umd.min"),require("../../../@patternfly/pfe-datetime/dist/pfe-datetime.umd.min")):"function"==typeof define&&define.amd?define(["../../../@patternfly/pfelement/dist/pfelement.umd.min","../../../@patternfly/pfe-progress-indicator/dist/pfe-progress-indicator.umd.min","../../../@patternfly/pfe-datetime/dist/pfe-datetime.umd.min"],t):e.PlccTable=t(e.PFElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var t=function(e,t,a){return t&&n(e.prototype,t),a&&n(e,a),e};function n(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var a=(function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(i,e),t(i,[{key:"html",get:function(){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  <p id="plcc-disclaimer">All future dates mentioned are close approximations, non definitive, and subject to change.</p>\n</article>'}},{key:"templateUrl",get:function(){return"plcc-table.html"}},{key:"styleUrl",get:function(){return"plcc-table.scss"}},{key:"productName",get:function(){return this.getAttribute("product-name")}},{key:"app",get:function(){return this.getAttribute("app")}},{key:"hideEOL",get:function(){return this.getAttribute("hide-eol")}},{key:"loading",get:function(){return this.hasAttribute("loading")},set:function(e){e?(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"))}},{key:"tableData",get:function(){return this._data},set:function(e){if(e){this.loading=!0,this._data=e;var t=this._getDisplayHeaders(this._data),a=this._getHeaders(this._data);this._construct(this._data,t,a),this.loading=!1}}}],[{key:"version",get:function(){return"1.2.1"}},{key:"tag",get:function(){return"plcc-table"}},{key:"events",get:function(){return{close:this.tag+":close"}}},{key:"properties",get:function(){return{}}},{key:"slots",get:function(){return{}}},{key:"observedAttributes",get:function(){return["product-name","hide-eol","app"]}},{key:"PfeType",get:function(){return e.PfeTypes.Component}}]),t(i,[{key:"disconnectedCallback",value:function(){this._closeBtn.removeEventListener("click",this._handleBtnClick)}},{key:"attributeChangedCallback",value:function(e,t,a){var n=this;(function e(t,a,n){null===t&&(t=Function.prototype);var i=Object.getOwnPropertyDescriptor(t,a);if(void 0===i){var r=Object.getPrototypeOf(t);return null===r?void 0:e(r,a,n)}if("value"in i)return i.value;var o=i.get;return void 0!==o?o.call(n):void 0})(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"attributeChangedCallback",this).call(this,e,t,a),"product-name"===e&&this._requestProduct(a).then(function(e){n.tableData=e}).catch(function(e){console.error(e)}),"hide-eol"===e&&this._handleHideEOL(this.hasAttribute("hide-eol")),"app"===e&&(this.hasAttribute("app")?this._disclaimer.setAttribute("hidden",!0):this._disclaimer.removeAttribute("hidden"))}},{key:"_requestProduct",value:function(n){var i=this;return this.loading=!0,new Promise(function(e,t){var a=new XMLHttpRequest;a.open("GET","https://access.redhat.com/product-life-cycles/api/v1/products?name="+n),a.responseType="json",a.onload=function(){400<=a.status?t(a.response):e(a.response),i.loading=!1},a.onerror=function(e){t(e,"Something went wrong."),i.loading=!1},a.send()})}},{key:"_getDisplayHeaders",value:function(e){var t=[];return e.data[0].is_layered_product&&t.push(e.data[0].extra_header),e.data[0].all_phases.forEach(function(e){t.push(e.display_name)}),t}},{key:"_getHeaders",value:function(e){var t=[];return e.data[0].is_layered_product&&t.push(e.data[0].extra_header),e.data[0].all_phases.forEach(function(e){t.push(e.name)}),t}},{key:"_construct",value:function(d,e,s){var c=this,p="",h="",u="",f="",b="",_="",t='<th scope="col">Version</th>',a=d.data[0].versions,m=d.data[0].show_last_minor_release,y=d.data[0].is_layered_product;this.shadowRoot.querySelector(".product-lifecycle-info__product-name").innerText=d.data[0].name,this.shadowRoot.querySelectorAll(".sr-only").forEach(function(e){return e.innerText=""+d.data[0].name}),e.forEach(function(e){t+='<th scope="col">'+e+"</th>"}),m&&(t+='<th scope="col">Last minor release</th>'),a.forEach(function(e,t){var a="",n="",i="",r="",o="",l="";"Full Support"===e.type&&(c._fullSupport=!0,a='\n        <tr>\n          <th scope="row" data-label="Version">'+e.name+"</th>\n          "+(y?null!==e.extra_header_value?'<td data-label="'+d.data[0].extra_header+'">'+e.extra_header_value+"</td>":'<td data-label="'+d.data[0].extra_header+'">N/A</td>':"")+"\n          "+e.phases.map(function(e){return s.includes(e.name)?'<td data-label="'+e.name+'">'+c._parseDate(e.date,e.date_format)+"</td>":'<td data-label="'+e.name+'">N/A</td>'}).join("")+"\n          "+(m?null!==e.last_minor_release?'<td data-label="Last minor release">'+e.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':"")+"\n        </tr>\n        "),"Maintenance Support"===e.type&&(c._maintenanceSupport=!0,n='\n        <tr>\n          <th scope="row" data-label="Version">'+e.name+"</th>\n          "+(y?null!==e.extra_header_value?'<td data-label="'+d.data[0].extra_header+'">'+e.extra_header_value+"</td>":'<td data-label="'+d.data[0].extra_header+'">N/A</td>':"")+"\n          "+e.phases.map(function(e){return s.includes(e.name)?'<td data-label="'+e.name+'">'+c._parseDate(e.date,e.date_format)+"</td>":'<td data-label="'+e.name+'">N/A</td>'}).join("")+"\n          "+(m?null!==e.last_minor_release?'<td data-label="Last minor release">'+e.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':"")+"\n        </tr>\n        "),"Extended Support"===e.type&&(c._extendedSupport=!0,i='\n        <tr>\n          <th scope="row" data-label="Version">'+e.name+"</th>\n          "+(y?null!==e.extra_header_value?'<td data-label="'+d.data[0].extra_header+'">'+e.extra_header_value+"</td>":'<td data-label="'+d.data[0].extra_header+'">N/A</td>':"")+"\n          "+e.phases.map(function(e){return s.includes(e.name)?'<td data-label="'+e.name+'">'+c._parseDate(e.date,e.date_format)+"</td>":'<td data-label="'+e.name+'">N/A</td>'}).join("")+"\n          "+(m?null!==e.last_minor_release?'<td data-label="Last minor release">'+e.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':"")+"\n        </tr>\n        "),"End of Maintenance"===e.type&&(c._endOfMaintenance=!0,o='\n        <tr>\n          <th scope="row" data-label="Version">'+e.name+"</th>\n          "+(y?null!==e.extra_header_value?'<td data-label="'+d.data[0].extra_header+'">'+e.extra_header_value+"</td>":'<td data-label="'+d.data[0].extra_header+'">N/A</td>':"")+"\n          "+e.phases.map(function(e){return s.includes(e.name)?'<td data-label="'+e.name+'">'+c._parseDate(e.date,e.date_format)+"</td>":'<td data-label="'+e.name+'">N/A</td>'}).join("")+"\n          "+(m?null!==e.last_minor_release?'<td data-label="Last minor release">'+e.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':"")+"\n        </tr>\n        "),"End of life"===e.type&&(c._endOfLife=!0,r='\n        <tr>\n          <th scope="row" data-label="Version">'+e.name+"</th>\n          "+(y?null!==e.extra_header_value?'<td data-label="'+d.data[0].extra_header+'">'+e.extra_header_value+"</td>":'<td data-label="'+d.data[0].extra_header+'">N/A</td>':"")+"\n          "+e.phases.map(function(e){return s.includes(e.name)?'<td data-label="'+e.name+'">'+c._parseDate(e.date,e.date_format)+"</td>":'<td data-label="'+e.name+'">N/A</td>'}).join("")+"\n          "+(m?null!==e.last_minor_release?'<td data-label="Last minor release">'+e.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':"")+"\n        </tr>\n        "),""!==e.type&&null!==e.type||(c._uncategorized=!0,l='\n        <tr>\n          <th scope="row" data-label="Version">'+e.name+"</th>\n          "+(y?null!==e.extra_header_value?'<td data-label="'+d.data[0].extra_header+'">'+e.extra_header_value+"</td>":'<td data-label="'+d.data[0].extra_header+'">N/A</td>':"")+"\n          "+e.phases.map(function(e){return s.includes(e.name)?'<td data-label="'+e.name+'">'+c._parseDate(e.date,e.date_format)+"</td>":'<td data-label="'+e.name+'">N/A</td>'}).join("")+"\n          "+(m?null!==e.last_minor_release?'<td data-label="Last minor release">'+e.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':"")+"\n        </tr>\n        "),p+=a,h+=n,u+=i,f+=r,b+=o,_+=l}),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(function(e){e.innerHTML=t}),this._fullSupportBody.innerHTML=p,this._maintenanceSupportBody.innerHTML=h,this._extendedSupportBody.innerHTML=u,this._endOfLifeBody.innerHTML=f,this._endOfMaintenanceBody.innerHTML=b,this._uncategorizedBody.innerHTML=_}},{key:"_parseDate",value:function(e,t){return"string"===t?e:"<pfe-datetime datetime="+e+' day="numeric" month="long" year="numeric" time-zone="UTC"></pfe-datetime>'}},{key:"_handleHideEOL",value:function(e){e?this._endOfLifeTable.setAttribute("hidden",!0):this._endOfLifeTable.removeAttribute("hidden")}},{key:"_handleBtnClick",value:function(e){this.emitEvent(i.events.close)}}]),i);function i(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i);var e=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,i,{type:i.PfeType}));return e._handleBtnClick=e._handleBtnClick.bind(e),e._data=null,e._fullSupport=!1,e._maintenanceSupport=!1,e._extendedSupport=!1,e._uncategorized=!1,e._endOfMaintenance=!1,e._endOfLife=!1,e._plccApplication=!1,e._disclaimer=e.shadowRoot.querySelector("#plcc-disclaimer"),e._article=e.shadowRoot.querySelector("article"),e._header=e.shadowRoot.querySelector("header"),e._links=e.shadowRoot.querySelectorAll("a"),e._appMarkup=e.shadowRoot.querySelectorAll(".application"),e._fullSupportTable=e.shadowRoot.querySelector("#product-lifecycle-full-support"),e._maintenanceSupportTable=e.shadowRoot.querySelector("#product-lifecycle-maintenance-support"),e._extendedSupportTable=e.shadowRoot.querySelector("#product-lifecycle-extended-support"),e._endOfMaintenanceTable=e.shadowRoot.querySelector("#product-lifecycle-end-of-maintenance"),e._endOfLifeTable=e.shadowRoot.querySelector("#product-lifecycle-end-of-life"),e._uncategorizedTable=e.shadowRoot.querySelector("#product-lifecycle-uncategorized"),e._fullSupportBody=e.shadowRoot.querySelector("#product-lifecycle-full-support tbody"),e._maintenanceSupportBody=e.shadowRoot.querySelector("#product-lifecycle-maintenance-support tbody"),e._extendedSupportBody=e.shadowRoot.querySelector("#product-lifecycle-extended-support tbody"),e._endOfMaintenanceBody=e.shadowRoot.querySelector("#product-lifecycle-end-of-maintenance tbody"),e._endOfLifeBody=e.shadowRoot.querySelector("#product-lifecycle-end-of-life tbody"),e._uncategorizedBody=e.shadowRoot.querySelector("#product-lifecycle-uncategorized tbody"),e._caption=e.shadowRoot.querySelector("caption"),e._phaseRow=e.shadowRoot.querySelectorAll(".product-phases"),e._versionToggleRow=e.shadowRoot.querySelectorAll("version-toggle-row"),e._versionToggle=e.shadowRoot.querySelector("#unsupported-versions"),e._closeBtn=e.shadowRoot.querySelector("#close-btn"),e._loadingIndicator=e.shadowRoot.querySelector("#loading"),e.loading=!1,e}return e.create(a),a});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../../../@patternfly/pfelement/dist/pfelement.umd.min"),require("../../../@patternfly/pfe-progress-indicator/dist/pfe-progress-indicator.umd.min"),require("../../../@patternfly/pfe-datetime/dist/pfe-datetime.umd.min")):"function"==typeof define&&define.amd?define(["../../../@patternfly/pfelement/dist/pfelement.umd.min","../../../@patternfly/pfe-progress-indicator/dist/pfe-progress-indicator.umd.min","../../../@patternfly/pfe-datetime/dist/pfe-datetime.umd.min"],t):e.PlccTable=t(e.PFElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var t=function(e,t,a){return t&&n(e.prototype,t),a&&n(e,a),e};function n(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var a=(function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(i,e),t(i,[{key:"html",get:function(){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  <p id="plcc-disclaimer">All future dates mentioned are close approximations, non definitive, and subject to change.</p>\n</article>'}},{key:"templateUrl",get:function(){return"plcc-table.html"}},{key:"styleUrl",get:function(){return"plcc-table.scss"}},{key:"app",get:function(){return this.getAttribute("app")}},{key:"hideEOL",get:function(){return this.getAttribute("hide-eol")}},{key:"loading",get:function(){return this.hasAttribute("loading")},set:function(e){e?(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"))}},{key:"tableData",get:function(){return this._data},set:function(e){if(e){this.loading=!0,this._data=e;var t=this._getDisplayHeaders(this._data),a=this._getHeaders(this._data);this._construct(this._data,t,a),this.loading=!1}}}],[{key:"version",get:function(){return"1.2.2"}},{key:"tag",get:function(){return"plcc-table"}},{key:"events",get:function(){return{close:this.tag+":close"}}},{key:"properties",get:function(){return{_lang:{title:"Language support",attr:"lang",default:"en",type:String},productName:{title:"Name of product required for api",attr:"product-name",type:String,observer:"_requestProduct"},hideEol:{title:"Hide end-of-life section",attr:"hide-eol",type:Boolean,observer:"_hideEolChange"},app:{title:"Toggle application version",attr:"app",type:String}}}},{key:"slots",get:function(){return{}}},{key:"PfeType",get:function(){return e.PfeTypes.Component}}]),t(i,[{key:"disconnectedCallback",value:function(){this._closeBtn.removeEventListener("click",this._handleBtnClick)}},{key:"_hideEolChange",value:function(){this._handleHideEOL(this.hasAttribute("hide-eol"))}},{key:"_requestProduct",value:function(){var n=this;this.loading=!0;var i="",e=this.productName,t=this._lang;i="en"===this.lang?"https://access.redhat.com/product-life-cycles/api/v1/products?name="+e:"https://access.qa.redhat.com/product-life-cycles/api/v1/products?name="+e+"&lng="+t,new Promise(function(e,t){var a=new XMLHttpRequest;a.open("GET",i),a.responseType="json",a.onload=function(){400<=a.status?t(a.response):e(a.response),n.loading=!1},a.onerror=function(e){t(e,"Something went wrong."),n.loading=!1},a.send()}).then(function(e){n.tableData=e}).catch(function(e){console.error(e)})}},{key:"_translateStrings",value:function(){this._requestProduct()}},{key:"_getDisplayHeaders",value:function(e){var t=[];return e.data[0].is_layered_product&&t.push(e.data[0].extra_header),e.data[0].all_phases.forEach(function(e){t.push(e.display_name)}),t}},{key:"_getHeaders",value:function(e){var t=[];return e.data[0].is_layered_product&&t.push(e.data[0].extra_header),e.data[0].all_phases.forEach(function(e){t.push(e.name)}),t}},{key:"_construct",value:function(d,e,s){var c=this,p="",h="",u="",f="",b="",_="",t='<th scope="col">Version</th>',a=d.data[0].versions,m=d.data[0].show_last_minor_release,y=d.data[0].is_layered_product;this.shadowRoot.querySelector(".product-lifecycle-info__product-name").innerText=d.data[0].name,this.shadowRoot.querySelectorAll(".sr-only").forEach(function(e){return e.innerText=""+d.data[0].name}),e.forEach(function(e){t+='<th scope="col">'+e+"</th>"}),m&&(t+='<th scope="col">Last minor release</th>'),a.forEach(function(e,t){var a="",n="",i="",l="",o="",r="";"Full Support"===e.type&&(c._fullSupport=!0,a='\n        <tr>\n          <th scope="row" data-label="Version">'+e.name+"</th>\n          "+(y?null!==e.extra_header_value?'<td data-label="'+d.data[0].extra_header+'">'+e.extra_header_value+"</td>":'<td data-label="'+d.data[0].extra_header+'">N/A</td>':"")+"\n          "+e.phases.map(function(e){return s.includes(e.name)?'<td data-label="'+e.name+'">'+c._parseDate(e.date,e.date_format)+"</td>":'<td data-label="'+e.name+'">N/A</td>'}).join("")+"\n          "+(m?null!==e.last_minor_release?'<td data-label="Last minor release">'+e.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':"")+"\n        </tr>\n        "),"Maintenance Support"===e.type&&(c._maintenanceSupport=!0,n='\n        <tr>\n          <th scope="row" data-label="Version">'+e.name+"</th>\n          "+(y?null!==e.extra_header_value?'<td data-label="'+d.data[0].extra_header+'">'+e.extra_header_value+"</td>":'<td data-label="'+d.data[0].extra_header+'">N/A</td>':"")+"\n          "+e.phases.map(function(e){return s.includes(e.name)?'<td data-label="'+e.name+'">'+c._parseDate(e.date,e.date_format)+"</td>":'<td data-label="'+e.name+'">N/A</td>'}).join("")+"\n          "+(m?null!==e.last_minor_release?'<td data-label="Last minor release">'+e.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':"")+"\n        </tr>\n        "),"Extended Support"===e.type&&(c._extendedSupport=!0,i='\n        <tr>\n          <th scope="row" data-label="Version">'+e.name+"</th>\n          "+(y?null!==e.extra_header_value?'<td data-label="'+d.data[0].extra_header+'">'+e.extra_header_value+"</td>":'<td data-label="'+d.data[0].extra_header+'">N/A</td>':"")+"\n          "+e.phases.map(function(e){return s.includes(e.name)?'<td data-label="'+e.name+'">'+c._parseDate(e.date,e.date_format)+"</td>":'<td data-label="'+e.name+'">N/A</td>'}).join("")+"\n          "+(m?null!==e.last_minor_release?'<td data-label="Last minor release">'+e.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':"")+"\n        </tr>\n        "),"End of Maintenance"===e.type&&(c._endOfMaintenance=!0,o='\n        <tr>\n          <th scope="row" data-label="Version">'+e.name+"</th>\n          "+(y?null!==e.extra_header_value?'<td data-label="'+d.data[0].extra_header+'">'+e.extra_header_value+"</td>":'<td data-label="'+d.data[0].extra_header+'">N/A</td>':"")+"\n          "+e.phases.map(function(e){return s.includes(e.name)?'<td data-label="'+e.name+'">'+c._parseDate(e.date,e.date_format)+"</td>":'<td data-label="'+e.name+'">N/A</td>'}).join("")+"\n          "+(m?null!==e.last_minor_release?'<td data-label="Last minor release">'+e.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':"")+"\n        </tr>\n        "),"End of life"===e.type&&(c._endOfLife=!0,l='\n        <tr>\n          <th scope="row" data-label="Version">'+e.name+"</th>\n          "+(y?null!==e.extra_header_value?'<td data-label="'+d.data[0].extra_header+'">'+e.extra_header_value+"</td>":'<td data-label="'+d.data[0].extra_header+'">N/A</td>':"")+"\n          "+e.phases.map(function(e){return s.includes(e.name)?'<td data-label="'+e.name+'">'+c._parseDate(e.date,e.date_format)+"</td>":'<td data-label="'+e.name+'">N/A</td>'}).join("")+"\n          "+(m?null!==e.last_minor_release?'<td data-label="Last minor release">'+e.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':"")+"\n        </tr>\n        "),""!==e.type&&null!==e.type||(c._uncategorized=!0,r='\n        <tr>\n          <th scope="row" data-label="Version">'+e.name+"</th>\n          "+(y?null!==e.extra_header_value?'<td data-label="'+d.data[0].extra_header+'">'+e.extra_header_value+"</td>":'<td data-label="'+d.data[0].extra_header+'">N/A</td>':"")+"\n          "+e.phases.map(function(e){return s.includes(e.name)?'<td data-label="'+e.name+'">'+c._parseDate(e.date,e.date_format)+"</td>":'<td data-label="'+e.name+'">N/A</td>'}).join("")+"\n          "+(m?null!==e.last_minor_release?'<td data-label="Last minor release">'+e.last_minor_release+"</td>":'<td data-label="Last minor release">N/A</td>':"")+"\n        </tr>\n        "),p+=a,h+=n,u+=i,f+=l,b+=o,_+=r}),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(function(e){e.innerHTML=t}),this._fullSupportBody.innerHTML=p,this._maintenanceSupportBody.innerHTML=h,this._extendedSupportBody.innerHTML=u,this._endOfLifeBody.innerHTML=f,this._endOfMaintenanceBody.innerHTML=b,this._uncategorizedBody.innerHTML=_}},{key:"_parseDate",value:function(e,t){return"string"===t?e:"<pfe-datetime datetime="+e+' day="numeric" month="long" year="numeric" locale="'+("zh_CN"!==this._lang?this._lang:"zh-Hans-CN")+'"></pfe-datetime>'}},{key:"_handleHideEOL",value:function(e){e?this._endOfLifeTable.setAttribute("hidden",!0):this._endOfLifeTable.removeAttribute("hidden")}},{key:"_handleBtnClick",value:function(e){this.emitEvent(i.events.close)}}]),i);function i(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i);var e=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,i,{type:i.PfeType}));return e._handleBtnClick=e._handleBtnClick.bind(e),e._data=null,e._fullSupport=!1,e._maintenanceSupport=!1,e._extendedSupport=!1,e._uncategorized=!1,e._endOfMaintenance=!1,e._endOfLife=!1,e._plccApplication=!1,e._disclaimer=e.shadowRoot.querySelector("#plcc-disclaimer"),e._article=e.shadowRoot.querySelector("article"),e._header=e.shadowRoot.querySelector("header"),e._links=e.shadowRoot.querySelectorAll("a"),e._appMarkup=e.shadowRoot.querySelectorAll(".application"),e._fullSupportTable=e.shadowRoot.querySelector("#product-lifecycle-full-support"),e._maintenanceSupportTable=e.shadowRoot.querySelector("#product-lifecycle-maintenance-support"),e._extendedSupportTable=e.shadowRoot.querySelector("#product-lifecycle-extended-support"),e._endOfMaintenanceTable=e.shadowRoot.querySelector("#product-lifecycle-end-of-maintenance"),e._endOfLifeTable=e.shadowRoot.querySelector("#product-lifecycle-end-of-life"),e._uncategorizedTable=e.shadowRoot.querySelector("#product-lifecycle-uncategorized"),e._fullSupportBody=e.shadowRoot.querySelector("#product-lifecycle-full-support tbody"),e._maintenanceSupportBody=e.shadowRoot.querySelector("#product-lifecycle-maintenance-support tbody"),e._extendedSupportBody=e.shadowRoot.querySelector("#product-lifecycle-extended-support tbody"),e._endOfMaintenanceBody=e.shadowRoot.querySelector("#product-lifecycle-end-of-maintenance tbody"),e._endOfLifeBody=e.shadowRoot.querySelector("#product-lifecycle-end-of-life tbody"),e._uncategorizedBody=e.shadowRoot.querySelector("#product-lifecycle-uncategorized tbody"),e._caption=e.shadowRoot.querySelector("caption"),e._phaseRow=e.shadowRoot.querySelectorAll(".product-phases"),e._versionToggleRow=e.shadowRoot.querySelectorAll("version-toggle-row"),e._versionToggle=e.shadowRoot.querySelector("#unsupported-versions"),e._closeBtn=e.shadowRoot.querySelector("#close-btn"),e._loadingIndicator=e.shadowRoot.querySelector("#loading"),document.querySelector("html").hasAttribute("lang")&&(e._lang=document.querySelector("html").getAttribute("lang")),e.loading=!1,e}return e.create(a),a});
 //# sourceMappingURL=plcc-table.umd.min.js.map

package.json

@@ -15,3 +15,3 @@ {
   },
-  "version": "1.2.2",
+  "version": "2.0.0",
   "keywords": [
@@ -18,0 +18,0 @@ "web-components",

No alert changes

Improved metrics

Total package byte prevSize

298395

increased by1.6%

Lines of code

1488

increased by1.78%

No dependency changes