@cpelements/plcc-table - npm Package Compare versions

Comparing version 2.1.3 to 2.1.4

dist/plcc-table.js

@@ -6,3 +6,3 @@ import PFElement from '../../../@patternfly/pfelement/dist/pfelement.js';
 /*!
- * PatternFly Elements: PlccTable 2.1.3
+ * PatternFly Elements: PlccTable 2.1.4
  * @license
@@ -33,7 +33,7 @@ * Copyright 2020 Red Hat, Inc.
   static get version() {
-    return "2.1.3";
+    return "2.1.4";
   }
 
   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:middle}@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}
+    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:middle}@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{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}.toggle-arrow-default{float:left;cursor:pointer;margin-right:1rem}.toggle-arrow-composable{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.product-content-hidden{display:none}
 /*# sourceMappingURL=plcc-table.min.css.map */
@@ -56,3 +56,8 @@ </style><div id="loading" hidden>
   <h2 class="product-lifecycle-info__product-name sr-only"></h2>
+  <div id="product-lifecycle-toggle-eol-checkbox">
+    <input type="checkbox" name="toggle-eol" id="toggle-eol">
+    <label for="toggle-eol">Include unsupported versions</label>
+  </div>
 
+
   <table
@@ -81,2 +86,5 @@ border="0"
     <caption>
+      <div class="toggle-arrow-default toggle-arrow-expandable">
+        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>
+      </div>
       <h3 class="lifecycle-table__product-name">
@@ -89,3 +97,3 @@ Full support <span class="sr-only"></span>
     </thead>
-    <tbody></tbody>
+    <tbody class="product-lifecycle-info__table_content"></tbody>
   </table>
@@ -104,2 +112,5 @@
     <caption>
+      <div class="toggle-arrow-default toggle-arrow-expandable">
+        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>
+      </div>
       <h3 class="lifecycle-table__product-name">
@@ -112,3 +123,3 @@ Maintenance support <span class="sr-only"></span>
     </thead>
-    <tbody></tbody>
+    <tbody class="product-lifecycle-info__table_content"></tbody>
   </table>
@@ -127,2 +138,5 @@
     <caption>
+      <div class="toggle-arrow-default toggle-arrow-expandable">
+        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>
+      </div>
       <h3 class="lifecycle-table__product-name">
@@ -135,4 +149,5 @@ Extended support <span class="sr-only"></span>
     </thead>
-    <tbody></tbody>
+    <tbody class="product-lifecycle-info__table_content"></tbody>
   </table>
+
   <table
@@ -149,2 +164,5 @@ id="product-lifecycle-end-of-maintenance"
     <caption>
+      <div class="toggle-arrow-default toggle-arrow-expandable">
+        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>
+      </div>
       <h3 class="lifecycle-table__product-name">
@@ -157,3 +175,3 @@ End of maintenance <span class="sr-only"></span>
     </thead>
-    <tbody></tbody>
+    <tbody class="product-lifecycle-info__table_content"></tbody>
   </table>
@@ -172,2 +190,5 @@
     <caption>
+      <div class="toggle-arrow-default toggle-arrow-expandable">
+        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>
+      </div>
       <h3 class="lifecycle-table__product-name">
@@ -180,3 +201,3 @@ End of life <span class="sr-only"></span>
     </thead>
-    <tbody></tbody>
+    <tbody class="product-lifecycle-info__table_content"></tbody>
   </table>
@@ -224,2 +245,14 @@ <p id="plcc-former-names"></p>
       },
+      expandable: {
+        title: "Toggle version category",
+        attr: "expandable",
+        default: false,
+        type: Boolean
+      },
+      toggleEOL: {
+        title: "Toggle end-of-life checkbox",
+        attr: "toggle-eol",
+        type: Boolean,
+        observer: "_toggleEolChange",
+      }
     };
@@ -248,2 +281,10 @@ }
 
+  get expandable() {
+    return this.getAttribute("expandable")
+  }
+
+  get toggleEOL() {
+    return this.getAttribute("toggle-eol")
+  }
+
   get loading() {
@@ -291,2 +332,3 @@ return this.hasAttribute("loading");
     this._handleBtnClick = this._handleBtnClick.bind(this);
+    this._handleToggleArrowClick = this._handleToggleArrowClick.bind(this);
 
@@ -412,4 +454,10 @@ this._data = null;
 
+    this._toggleArrowBtnList = this.shadowRoot.querySelectorAll(".toggle-arrow-default");
+    this._productTableContentList = this.shadowRoot.querySelectorAll(".product-lifecycle-info__table_content");
+
+    this._toggleEolCheckboxWrap = this.shadowRoot.querySelector("#product-lifecycle-toggle-eol-checkbox");
     // this._closeBtn.addEventListener("click", this._handleBtnClick);
 
+    this._toggleEolCheckbox = this.shadowRoot.querySelector("#toggle-eol");
+    this._toggleEolCheckbox.addEventListener("change", (event) => this._handleToggleEolCheckboxChange(event));
     this.loading = false;
@@ -428,2 +476,4 @@ }
     this._requestProduct();
+    this._handleVersionCategoryExpandable();
+    this._handleToggleEolCheckboxShow();
   }
@@ -439,2 +489,6 @@
 
+  _toggleEolChange() {
+    this._handleToggleEOL(this.hasAttribute("toggle-eol"));
+  }
+
   _requestProduct(oldVal, newVal) {
@@ -1040,2 +1094,29 @@ this.loading = true;
 
+  _handleToggleEolCheckboxChange(event) {
+    if (event.currentTarget.checked) {
+       this._endOfLifeTable.removeAttribute("hidden");
+    } else {
+      this._endOfLifeTable.setAttribute("hidden", true);
+    }
+  }
+
+  _handleToggleEOL(val) {
+    if (val) {
+      this._toggleEolCheckboxWrap.removeAttribute("hidden");
+    } else {
+      this._toggleEolCheckboxWrap.setAttribute("hidden", true);
+    }
+  }
+
+  _handleToggleEolCheckboxShow() {
+    if (this.hasAttribute('toggle-eol')) {
+      this._toggleEolCheckboxWrap.removeAttribute("hidden");
+      if (!this.hasAttribute('hide-eol')) {
+        this._toggleEolCheckbox.setAttribute("checked", true);
+      }
+    } else {
+      this._toggleEolCheckboxWrap.setAttribute("hidden", true);
+    }
+  }
+
   //emit close button event
@@ -1045,2 +1126,31 @@ _handleBtnClick(event) {
   }
+
+  _handleVersionCategoryExpandable() {
+    if (this.hasAttribute("expandable")) {
+      this._toggleArrowBtnList.forEach((btnItem, index) => {
+        btnItem.setAttribute("index",index);
+        btnItem.addEventListener("click", this._handleToggleArrowClick);
+      });
+      this._productTableContentList.forEach((contentItem, index) => {
+        contentItem.setAttribute("index",index);
+      });
+    } else {
+      this._toggleArrowBtnList.forEach((arrowBtn) => {
+        arrowBtn.setAttribute("hidden", true);
+      });
+    }
+  }
+
+  _handleToggleArrowClick(event) {
+    const index = event.currentTarget.getAttribute("index");
+    const eleClassList = this._toggleArrowBtnList[index].classList.value;
+    if(!eleClassList.includes("toggle-arrow-composable")) {
+      this._toggleArrowBtnList[index].classList.add('toggle-arrow-composable');
+      this._productTableContentList[index].classList.add('product-content-hidden');
+    } else {
+      this._toggleArrowBtnList[index].classList.remove('toggle-arrow-composable');
+      this._productTableContentList[index].classList.remove('product-content-hidden');
+    }
+    console.log(index,event.currentTarget, this._toggleArrowBtnList,this._productTableContentList);
+  }
 }
@@ -1047,0 +1157,0 @@

dist/plcc-table.min.js

 import t from"../../../@patternfly/pfelement/dist/pfelement.min.js";import"../../../@patternfly/pfe-progress-indicator/dist/pfe-progress-indicator.min.js";import"../../../@patternfly/pfe-datetime/dist/pfe-datetime.min.js";
 /*!
- * PatternFly Elements: PlccTable 2.1.3
+ * PatternFly Elements: PlccTable 2.1.4
  * @license
@@ -25,3 +25,3 @@ * Copyright 2020 Red Hat, Inc.
  * 
-*/class e extends t{static get version(){return"2.1.3"}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:middle}@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\n  class="product-lifecycle__wrapper"\n  id="product-lifecycle__wrapper--listing"\n>\n  <button\n    class="product-lifecycle__close icon-close application"\n    id="close-btn"\n    aria-label="Closes Red Hat OpenStack Platform Table"\n    hidden\n  >\n    <div class="icon-close__inner1"></div>\n  </button>\n  <h2 class="product-lifecycle-info__product-name sr-only"></h2>\n\n  <table\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="product-lifecycle-info__table-headers"\n    aria-hidden\n  >\n    <thead>\n      <tr class="product-phases"></tr>\n    </thead>\n  </table>\n\n  <table\n    id="product-lifecycle-full-support"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--supported\n      responsive-table responsive-table--row-strategy\n    "\n  >\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\n    id="product-lifecycle-maintenance-support"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--purgatory\n      responsive-table responsive-table--row-strategy\n    "\n  >\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\n    id="product-lifecycle-extended-support"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--purgatory\n      responsive-table responsive-table--row-strategy\n    "\n  >\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\n    id="product-lifecycle-end-of-maintenance"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--unsupported\n      responsive-table responsive-table--row-strategy\n    "\n  >\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\n    id="product-lifecycle-end-of-life"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--unsupported\n      responsive-table responsive-table--row-strategy\n    "\n  >\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  <p id="plcc-former-names"></p>\n  <p id="plcc-disclaimer">\n    All future dates mentioned are close approximations, non definitive, and\n    subject to change.\n  </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},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(t){t?(this._loadingIndicator.removeAttribute("hidden"),this._loadingIndicator.classList.add("loading"),this.setAttribute("loading",!0)):(this._loadingIndicator.setAttribute("hidden",!0),this._loadingIndicator.classList.remove("loading"),this.removeAttribute("loading"))}get tableData(){return this._data}set tableData(t){if(!t)return;this.loading=!0,this._data=t;let e=this._getDisplayHeaders(this._data),a=this._getHeaders(this._data);this._construct(this._data,e,a),this.loading=!1}static get PfeType(){return t.PfeTypes.Component}constructor(){super(e,{type:e.PfeType}),this._handleBtnClick=this._handleBtnClick.bind(this),this._data=null,this._fullSupport=!1,this._maintenanceSupport=!1,this._extendedSupport=!1,this._uncategorized=!1,this._endOfMaintenance=!1,this._endOfLife=!1,this._plccApplication=!1,this._hasFormerNames=!1,this._translations={en:{full_support:"Full Support",maint_support:"Maintenance Support",ext_support:"Extended Support",uncategorized:"Uncategorized",end_maintenance:"End of maintenance",end_life:"End of life",version:"Version",final_minor:"Final minor release",not_applicable:"N/A",disclaimer:"All future dates mentioned are close approximations, non definitive, and subject to change."},ja:{full_support:"フルサポート",maint_support:"メンテナンスサポート",ext_support:"延長サポート",uncategorized:"未分類",end_maintenance:"メンテナンスサポートの終了日",end_life:"ライフサイクルの終了日",version:"バージョン",final_minor:"最終マイナーリリース",not_applicable:"該当なし",disclaimer:"記載されている将来の日付はすべて概算であり、決定的なものではなく、変更される可能性があります。"},ko:{full_support:"완전 지원",maint_support:"유지 관리 지원",ext_support:"연장 지원",uncategorized:"범주화되지 않음",end_maintenance:"유지 관리 지원 종료",end_life:"종료일",version:"버전",final_minor:"마지막 마이너 릴리스",not_applicable:"해당 없음",disclaimer:"언급된 모든 향후 날짜는 확정되지 않은 예상 날짜이며 변경될 수 있습니다."},zh_CN:{full_support:"完全支持",maint_support:"维护支持",ext_support:"延长的支持",uncategorized:"未分类",end_maintenance:"维护结束",end_life:"生命周期结束",version:"版本",final_minor:"最后的次发行版本",not_applicable:"不适用",disclaimer:"所有提到的未来日期均为近似日期，未完全确定，可能随时更改。"}},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._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._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._formerNames=this.shadowRoot.querySelector("#plcc-former-names"),this.loading=!1}connectedCallback(){super.connectedCallback(),document.querySelector("html").hasAttribute("lang")&&(this._lang=document.querySelector("html").getAttribute("lang")),this._translateStrings(),this._requestProduct()}disconnectedCallback(){this._closeBtn.removeEventListener("click",this._handleBtnClick)}_hideEolChange(){this._handleHideEOL(this.hasAttribute("hide-eol"))}_requestProduct(t,e){this.loading=!0;let a="",i=this.productName,n=this._lang;i&&""!==i&&(a="en"===this.lang?"https://access.redhat.com/product-life-cycles/api/v1/products?name="+i:"https://access.redhat.com/product-life-cycles/api/v1/products?name="+i+"&lng="+n);new Promise((t,e)=>{const i=new XMLHttpRequest;i.open("GET",a),i.responseType="json",i.onload=(()=>{i.status>=400?e(i.response):t(i.response),this.loading=!1}),i.onerror=(t=>{e(t,"Something went wrong."),this.loading=!1}),i.send()}).then(t=>{this.tableData=t}).catch(t=>{console.error(t)})}_translateStrings(){this.shadowRoot.querySelector("#product-lifecycle-full-support h3").firstChild.nodeValue=this._translations[this._lang].full_support,this.shadowRoot.querySelector("#product-lifecycle-maintenance-support h3").firstChild.nodeValue=this._translations[this._lang].maint_support,this.shadowRoot.querySelector("#product-lifecycle-extended-support h3").firstChild.nodeValue=this._translations[this._lang].ext_support,this.shadowRoot.querySelector("#product-lifecycle-end-of-maintenance h3").firstChild.nodeValue=this._translations[this._lang].end_maintenance,this.shadowRoot.querySelector("#product-lifecycle-end-of-life h3").firstChild.nodeValue=this._translations[this._lang].end_life,this.shadowRoot.querySelector("#plcc-disclaimer").textContent=this._translations[this._lang].disclaimer}_getDisplayHeaders(t){let e=[];return t.data[0].is_layered_product&&(e=e.concat(t.data[0].product_extra_headers)),t.data[0].all_phases.forEach(t=>{e.push(t.display_name)}),e}_getHeaders(t){let e=[];return t.data[0].is_layered_product&&(e=e.concat(t.data[0].product_extra_headers)),t.data[0].all_phases.forEach(t=>{e.push(t.name)}),e}_getFormerNames(t){let e="";return t.data[0].former_names&&t.data[0].former_names.length>0&&(e=t.data[0].former_names.join(", ")),e}_construct(t,e,a){let i="",n="",l="",s="",o="",r=`<th scope="col">${this._translations[this._lang].version}</th>`,d=t.data[0].versions,c=t.data[0].show_final_minor_release,p=t.data[0].is_layered_product,h=this._getFormerNames(t);""!==h&&(this._hasFormerNames=!0,this.shadowRoot.querySelector("#plcc-former-names").textContent="The former names of this products are: "+h),this.shadowRoot.querySelector(".product-lifecycle-info__product-name").innerText=t.data[0].name,this.shadowRoot.querySelectorAll(".sr-only").forEach(e=>e.innerText=`${t.data[0].name}`),e.forEach(t=>{r+=`<th scope="col">${t}</th>`}),c&&(r+=`<th scope="col">${this._translations[this._lang].final_minor}</th>`),d.forEach((e,r)=>{let d="",h="",_="",f="",u="",m="";"Full Support"===e.type&&(this._fullSupport=!0,d=`\n        <tr>\n          <th scope="row" data-label="${this._translations[this._lang].version}">${e.name}</th>\n          ${p?e.extra_dependences.map((e,a)=>null!==e?`<td data-label="${t.data[0].product_extra_headers[a]}">${e}</td>`:`<td data-label="${t.data[0].product_extra_headers[a]}">${this._translations[this._lang].not_applicable}</td>`).join(""):""}\n          ${e.phases.map(t=>a.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}\n                ${this._parseSuperscript(t.superscript)}\n                </td>`:`<td data-label="${t.name}">${this._translations[this._lang].not_applicable}</td>`).join("")}\n          ${c?null!==e.final_minor_release?`<td data-label="${this._translations[this._lang].final_minor}">`+e.final_minor_release+"</td>":`<td data-label="${this._translations[this._lang].final_minor}">${this._translations[this._lang].not_applicable}</td>`:""}\n        </tr>\n        `),"Maintenance Support"===e.type&&(this._maintenanceSupport=!0,h=`\n        <tr>\n          <th scope="row" data-label="${this._translations[this._lang].version}">${e.name}</th>\n          ${p?e.extra_dependences.map((e,a)=>null!==e?`<td data-label="${t.data[0].product_extra_headers[a]}">${e}</td>`:`<td data-label="${t.data[0].product_extra_headers[a]}">${this._translations[this._lang].not_applicable}</td>`).join(""):""}\n          ${e.phases.map(t=>a.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}\n                ${this._parseSuperscript(t.superscript)}\n                </td>`:`<td data-label="${t.name}">${this._translations[this._lang].not_applicable}</td>`).join("")}\n          ${c?null!==e.final_minor_release?`<td data-label="${this._translations[this._lang].final_minor}">`+e.final_minor_release+"</td>":`<td data-label="${this._translations[this._lang].final_minor}">${this._translations[this._lang].not_applicable}</td>`:""}\n        </tr>\n        `),"Extended Support"===e.type&&(this._extendedSupport=!0,_=`\n        <tr>\n          <th scope="row" data-label="${this._translations[this._lang].version}">${e.name}</th>\n          ${p?e.extra_dependences.map((e,a)=>null!==e?`<td data-label="${t.data[0].product_extra_headers[a]}">${e}</td>`:`<td data-label="${t.data[0].product_extra_headers[a]}">${this._translations[this._lang].not_applicable}</td>`).join(""):""}\n          ${e.phases.map(t=>a.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}\n                ${this._parseSuperscript(t.superscript)}\n                </td>`:`<td data-label="${t.name}">${this._translations[this._lang].not_applicable}</td>`).join("")}\n          ${c?null!==e.final_minor_release?`<td data-label="${this._translations[this._lang].final_minor}">`+e.final_minor_release+"</td>":`<td data-label="${this._translations[this._lang].final_minor}">${this._translations[this._lang].not_applicable}</td>`:""}\n        </tr>\n        `),"End of Maintenance"===e.type&&(this._endOfMaintenance=!0,u=`\n        <tr>\n          <th scope="row" data-label="${this._translations[this._lang].version}">${e.name}</th>\n          ${p?e.extra_dependences.map((e,a)=>null!==e?`<td data-label="${t.data[0].product_extra_headers[a]}">${e}</td>`:`<td data-label="${t.data[0].product_extra_headers[a]}">${this._translations[this._lang].not_applicable}</td>`).join(""):""}\n          ${e.phases.map(t=>a.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}\n                ${this._parseSuperscript(t.superscript)}\n                </td>`:`<td data-label="${t.name}">${this._translations[this._lang].not_applicable}</td>`).join("")}\n          ${c?null!==e.final_minor_release?`<td data-label="${this._translations[this._lang].final_minor}">`+e.final_minor_release+"</td>":`<td data-label="${this._translations[this._lang].final_minor}">${this._translations[this._lang].not_applicable}</td>`:""}\n        </tr>\n        `),"End of life"===e.type&&(this._endOfLife=!0,f=`\n        <tr>\n          <th scope="row" data-label="${this._translations[this._lang].version}">${e.name}</th>\n          ${p?e.extra_dependences.map((e,a)=>null!==e?`<td data-label="${t.data[0].product_extra_headers[a]}">${e}</td>`:`<td data-label="${t.data[0].product_extra_headers[a]}">${this._translations[this._lang].not_applicable}</td>`).join(""):""}\n          ${e.phases.map(t=>a.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}\n                ${this._parseSuperscript(t.superscript)}\n                </td>`:`<td data-label="${t.name}">${this._translations[this._lang].not_applicable}</td>`).join("")}\n          ${c?null!==e.final_minor_release?`<td data-label="${this._translations[this._lang].final_minor}">`+e.final_minor_release+"</td>":`<td data-label="${this._translations[this._lang].final_minor}">${this._translations[this._lang].not_applicable}</td>`:""}\n        </tr>\n        `),""!==e.type&&null!==e.type||(this._uncategorized=!0,m=`\n        <tr>\n          <th scope="row" data-label="${this._translations[this._lang].version}">${e.name}</th>\n          ${p?e.extra_dependences.map((e,a)=>null!==e?`<td data-label="${t.data[0].product_extra_headers[a]}">${e}</td>`:`<td data-label="${t.data[0].product_extra_headers[a]}">N/A</td>`).join(""):""}\n          ${e.phases.map(t=>a.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}\n                ${this._parseSuperscript(t.superscript)}\n                </td>`:`<td data-label="${t.name}">${this._translations[this._lang].not_applicable}</td>`).join("")}\n          ${c?null!==e.final_minor_release?`<td data-label="${this._translations[this._lang].final_minor}">`+e.final_minor_release+"</td>":`<td data-label="${this._translations[this._lang].final_minor}">${this._translations[this._lang].not_applicable}</td>`:""}\n        </tr>\n        `),i+=d,n+=h,l+=_,s+=f,o+=u}),this._fullSupport?this._fullSupportTable.removeAttribute("hidden"):this._fullSupportTable.setAttribute("hidden",!0),this._maintenanceSupport?this._maintenanceSupportTable.removeAttribute("hidden"):this._maintenanceSupportTable.setAttribute("hidden",!0),this._extendedSupport?this._extendedSupportTable.removeAttribute("hidden"):this._extendedSupportTable.setAttribute("hidden",!0),this._endOfMaintenance?this._endOfMaintenanceTable.removeAttribute("hidden"):this._endOfMaintenanceTable.setAttribute("hidden",!0),this._endOfLife?this._endOfLife&&this._plccApplication&&this._endOfLifeTable.setAttribute("hidden",!0):this._endOfLifeTable.setAttribute("hidden",!0),this._hasFormerNames?this._formerNames.removeAttribute("hidden"):this._formerNames.setAttribute("hidden",!0),this._phaseRow.forEach(t=>{t.innerHTML=r}),this._fullSupportBody.innerHTML=i,this._maintenanceSupportBody.innerHTML=n,this._extendedSupportBody.innerHTML=l,this._endOfLifeBody.innerHTML=s,this._endOfMaintenanceBody.innerHTML=o}_parseDate(t,e){return"string"===e?t:`<pfe-datetime datetime=${t} day="numeric" month="long" year="numeric" time-zone="UTC" locale="${"zh_CN"!==this._lang?this._lang:"zh-Hans-CN"}"></pfe-datetime>`}_parseSuperscript(t){return this.hasAttribute("app")||void 0===t?"":`<sup>${t}</sup>`}_handleHideEOL(t){t?this._endOfLifeTable.setAttribute("hidden",!0):this._endOfLifeTable.removeAttribute("hidden")}_handleBtnClick(t){this.emitEvent(e.events.close)}}t.create(e);export default e;
+*/class e extends t{static get version(){return"2.1.4"}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:middle}@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{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}.toggle-arrow-default{float:left;cursor:pointer;margin-right:1rem}.toggle-arrow-composable{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.product-content-hidden{display:none}\n/*# sourceMappingURL=plcc-table.min.css.map */\n</style><div id="loading" hidden>\n  <pfe-progress-indicator></pfe-progress-indicator>\n</div>\n<article\n  class="product-lifecycle__wrapper"\n  id="product-lifecycle__wrapper--listing"\n>\n  <button\n    class="product-lifecycle__close icon-close application"\n    id="close-btn"\n    aria-label="Closes Red Hat OpenStack Platform Table"\n    hidden\n  >\n    <div class="icon-close__inner1"></div>\n  </button>\n  <h2 class="product-lifecycle-info__product-name sr-only"></h2>\n  <div id="product-lifecycle-toggle-eol-checkbox">\n    <input type="checkbox" name="toggle-eol" id="toggle-eol">\n    <label for="toggle-eol">Include unsupported versions</label>\n  </div>\n\n\n  <table\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="product-lifecycle-info__table-headers"\n    aria-hidden\n  >\n    <thead>\n      <tr class="product-phases"></tr>\n    </thead>\n  </table>\n\n  <table\n    id="product-lifecycle-full-support"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--supported\n      responsive-table responsive-table--row-strategy\n    "\n  >\n    <caption>\n      <div class="toggle-arrow-default toggle-arrow-expandable">\n        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>\n      </div>\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 class="product-lifecycle-info__table_content"></tbody>\n  </table>\n\n  <table\n    id="product-lifecycle-maintenance-support"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--purgatory\n      responsive-table responsive-table--row-strategy\n    "\n  >\n    <caption>\n      <div class="toggle-arrow-default toggle-arrow-expandable">\n        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>\n      </div>\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 class="product-lifecycle-info__table_content"></tbody>\n  </table>\n\n  <table\n    id="product-lifecycle-extended-support"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--purgatory\n      responsive-table responsive-table--row-strategy\n    "\n  >\n    <caption>\n      <div class="toggle-arrow-default toggle-arrow-expandable">\n        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>\n      </div>\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 class="product-lifecycle-info__table_content"></tbody>\n  </table>\n\n  <table\n    id="product-lifecycle-end-of-maintenance"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--unsupported\n      responsive-table responsive-table--row-strategy\n    "\n  >\n    <caption>\n      <div class="toggle-arrow-default toggle-arrow-expandable">\n        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>\n      </div>\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 class="product-lifecycle-info__table_content"></tbody>\n  </table>\n\n  <table\n    id="product-lifecycle-end-of-life"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--unsupported\n      responsive-table responsive-table--row-strategy\n    "\n  >\n    <caption>\n      <div class="toggle-arrow-default toggle-arrow-expandable">\n        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>\n      </div>\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 class="product-lifecycle-info__table_content"></tbody>\n  </table>\n  <p id="plcc-former-names"></p>\n  <p id="plcc-disclaimer">\n    All future dates mentioned are close approximations, non definitive, and\n    subject to change.\n  </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},hideEol:{title:"Hide end-of-life section",attr:"hide-eol",type:Boolean,observer:"_hideEolChange"},app:{title:"Toggle application version",attr:"app",type:String},expandable:{title:"Toggle version category",attr:"expandable",default:!1,type:Boolean},toggleEOL:{title:"Toggle end-of-life checkbox",attr:"toggle-eol",type:Boolean,observer:"_toggleEolChange"}}}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 expandable(){return this.getAttribute("expandable")}get toggleEOL(){return this.getAttribute("toggle-eol")}get loading(){return this.hasAttribute("loading")}set loading(t){t?(this._loadingIndicator.removeAttribute("hidden"),this._loadingIndicator.classList.add("loading"),this.setAttribute("loading",!0)):(this._loadingIndicator.setAttribute("hidden",!0),this._loadingIndicator.classList.remove("loading"),this.removeAttribute("loading"))}get tableData(){return this._data}set tableData(t){if(!t)return;this.loading=!0,this._data=t;let e=this._getDisplayHeaders(this._data),a=this._getHeaders(this._data);this._construct(this._data,e,a),this.loading=!1}static get PfeType(){return t.PfeTypes.Component}constructor(){super(e,{type:e.PfeType}),this._handleBtnClick=this._handleBtnClick.bind(this),this._handleToggleArrowClick=this._handleToggleArrowClick.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._hasFormerNames=!1,this._translations={en:{full_support:"Full Support",maint_support:"Maintenance Support",ext_support:"Extended Support",uncategorized:"Uncategorized",end_maintenance:"End of maintenance",end_life:"End of life",version:"Version",final_minor:"Final minor release",not_applicable:"N/A",disclaimer:"All future dates mentioned are close approximations, non definitive, and subject to change."},ja:{full_support:"フルサポート",maint_support:"メンテナンスサポート",ext_support:"延長サポート",uncategorized:"未分類",end_maintenance:"メンテナンスサポートの終了日",end_life:"ライフサイクルの終了日",version:"バージョン",final_minor:"最終マイナーリリース",not_applicable:"該当なし",disclaimer:"記載されている将来の日付はすべて概算であり、決定的なものではなく、変更される可能性があります。"},ko:{full_support:"완전 지원",maint_support:"유지 관리 지원",ext_support:"연장 지원",uncategorized:"범주화되지 않음",end_maintenance:"유지 관리 지원 종료",end_life:"종료일",version:"버전",final_minor:"마지막 마이너 릴리스",not_applicable:"해당 없음",disclaimer:"언급된 모든 향후 날짜는 확정되지 않은 예상 날짜이며 변경될 수 있습니다."},zh_CN:{full_support:"完全支持",maint_support:"维护支持",ext_support:"延长的支持",uncategorized:"未分类",end_maintenance:"维护结束",end_life:"生命周期结束",version:"版本",final_minor:"最后的次发行版本",not_applicable:"不适用",disclaimer:"所有提到的未来日期均为近似日期，未完全确定，可能随时更改。"}},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._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._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._formerNames=this.shadowRoot.querySelector("#plcc-former-names"),this._toggleArrowBtnList=this.shadowRoot.querySelectorAll(".toggle-arrow-default"),this._productTableContentList=this.shadowRoot.querySelectorAll(".product-lifecycle-info__table_content"),this._toggleEolCheckboxWrap=this.shadowRoot.querySelector("#product-lifecycle-toggle-eol-checkbox"),this._toggleEolCheckbox=this.shadowRoot.querySelector("#toggle-eol"),this._toggleEolCheckbox.addEventListener("change",t=>this._handleToggleEolCheckboxChange(t)),this.loading=!1}connectedCallback(){super.connectedCallback(),document.querySelector("html").hasAttribute("lang")&&(this._lang=document.querySelector("html").getAttribute("lang")),this._translateStrings(),this._requestProduct(),this._handleVersionCategoryExpandable(),this._handleToggleEolCheckboxShow()}disconnectedCallback(){this._closeBtn.removeEventListener("click",this._handleBtnClick)}_hideEolChange(){this._handleHideEOL(this.hasAttribute("hide-eol"))}_toggleEolChange(){this._handleToggleEOL(this.hasAttribute("toggle-eol"))}_requestProduct(t,e){this.loading=!0;let a="",i=this.productName,n=this._lang;i&&""!==i&&(a="en"===this.lang?"https://access.redhat.com/product-life-cycles/api/v1/products?name="+i:"https://access.redhat.com/product-life-cycles/api/v1/products?name="+i+"&lng="+n);new Promise((t,e)=>{const i=new XMLHttpRequest;i.open("GET",a),i.responseType="json",i.onload=(()=>{i.status>=400?e(i.response):t(i.response),this.loading=!1}),i.onerror=(t=>{e(t,"Something went wrong."),this.loading=!1}),i.send()}).then(t=>{this.tableData=t}).catch(t=>{console.error(t)})}_translateStrings(){this.shadowRoot.querySelector("#product-lifecycle-full-support h3").firstChild.nodeValue=this._translations[this._lang].full_support,this.shadowRoot.querySelector("#product-lifecycle-maintenance-support h3").firstChild.nodeValue=this._translations[this._lang].maint_support,this.shadowRoot.querySelector("#product-lifecycle-extended-support h3").firstChild.nodeValue=this._translations[this._lang].ext_support,this.shadowRoot.querySelector("#product-lifecycle-end-of-maintenance h3").firstChild.nodeValue=this._translations[this._lang].end_maintenance,this.shadowRoot.querySelector("#product-lifecycle-end-of-life h3").firstChild.nodeValue=this._translations[this._lang].end_life,this.shadowRoot.querySelector("#plcc-disclaimer").textContent=this._translations[this._lang].disclaimer}_getDisplayHeaders(t){let e=[];return t.data[0].is_layered_product&&(e=e.concat(t.data[0].product_extra_headers)),t.data[0].all_phases.forEach(t=>{e.push(t.display_name)}),e}_getHeaders(t){let e=[];return t.data[0].is_layered_product&&(e=e.concat(t.data[0].product_extra_headers)),t.data[0].all_phases.forEach(t=>{e.push(t.name)}),e}_getFormerNames(t){let e="";return t.data[0].former_names&&t.data[0].former_names.length>0&&(e=t.data[0].former_names.join(", ")),e}_construct(t,e,a){let i="",n="",l="",o="",r="",s=`<th scope="col">${this._translations[this._lang].version}</th>`,d=t.data[0].versions,c=t.data[0].show_final_minor_release,h=t.data[0].is_layered_product,p=this._getFormerNames(t);""!==p&&(this._hasFormerNames=!0,this.shadowRoot.querySelector("#plcc-former-names").textContent="The former names of this products are: "+p),this.shadowRoot.querySelector(".product-lifecycle-info__product-name").innerText=t.data[0].name,this.shadowRoot.querySelectorAll(".sr-only").forEach(e=>e.innerText=`${t.data[0].name}`),e.forEach(t=>{s+=`<th scope="col">${t}</th>`}),c&&(s+=`<th scope="col">${this._translations[this._lang].final_minor}</th>`),d.forEach((e,s)=>{let d="",p="",_="",u="",f="",g="";"Full Support"===e.type&&(this._fullSupport=!0,d=`\n        <tr>\n          <th scope="row" data-label="${this._translations[this._lang].version}">${e.name}</th>\n          ${h?e.extra_dependences.map((e,a)=>null!==e?`<td data-label="${t.data[0].product_extra_headers[a]}">${e}</td>`:`<td data-label="${t.data[0].product_extra_headers[a]}">${this._translations[this._lang].not_applicable}</td>`).join(""):""}\n          ${e.phases.map(t=>a.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}\n                ${this._parseSuperscript(t.superscript)}\n                </td>`:`<td data-label="${t.name}">${this._translations[this._lang].not_applicable}</td>`).join("")}\n          ${c?null!==e.final_minor_release?`<td data-label="${this._translations[this._lang].final_minor}">`+e.final_minor_release+"</td>":`<td data-label="${this._translations[this._lang].final_minor}">${this._translations[this._lang].not_applicable}</td>`:""}\n        </tr>\n        `),"Maintenance Support"===e.type&&(this._maintenanceSupport=!0,p=`\n        <tr>\n          <th scope="row" data-label="${this._translations[this._lang].version}">${e.name}</th>\n          ${h?e.extra_dependences.map((e,a)=>null!==e?`<td data-label="${t.data[0].product_extra_headers[a]}">${e}</td>`:`<td data-label="${t.data[0].product_extra_headers[a]}">${this._translations[this._lang].not_applicable}</td>`).join(""):""}\n          ${e.phases.map(t=>a.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}\n                ${this._parseSuperscript(t.superscript)}\n                </td>`:`<td data-label="${t.name}">${this._translations[this._lang].not_applicable}</td>`).join("")}\n          ${c?null!==e.final_minor_release?`<td data-label="${this._translations[this._lang].final_minor}">`+e.final_minor_release+"</td>":`<td data-label="${this._translations[this._lang].final_minor}">${this._translations[this._lang].not_applicable}</td>`:""}\n        </tr>\n        `),"Extended Support"===e.type&&(this._extendedSupport=!0,_=`\n        <tr>\n          <th scope="row" data-label="${this._translations[this._lang].version}">${e.name}</th>\n          ${h?e.extra_dependences.map((e,a)=>null!==e?`<td data-label="${t.data[0].product_extra_headers[a]}">${e}</td>`:`<td data-label="${t.data[0].product_extra_headers[a]}">${this._translations[this._lang].not_applicable}</td>`).join(""):""}\n          ${e.phases.map(t=>a.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}\n                ${this._parseSuperscript(t.superscript)}\n                </td>`:`<td data-label="${t.name}">${this._translations[this._lang].not_applicable}</td>`).join("")}\n          ${c?null!==e.final_minor_release?`<td data-label="${this._translations[this._lang].final_minor}">`+e.final_minor_release+"</td>":`<td data-label="${this._translations[this._lang].final_minor}">${this._translations[this._lang].not_applicable}</td>`:""}\n        </tr>\n        `),"End of Maintenance"===e.type&&(this._endOfMaintenance=!0,f=`\n        <tr>\n          <th scope="row" data-label="${this._translations[this._lang].version}">${e.name}</th>\n          ${h?e.extra_dependences.map((e,a)=>null!==e?`<td data-label="${t.data[0].product_extra_headers[a]}">${e}</td>`:`<td data-label="${t.data[0].product_extra_headers[a]}">${this._translations[this._lang].not_applicable}</td>`).join(""):""}\n          ${e.phases.map(t=>a.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}\n                ${this._parseSuperscript(t.superscript)}\n                </td>`:`<td data-label="${t.name}">${this._translations[this._lang].not_applicable}</td>`).join("")}\n          ${c?null!==e.final_minor_release?`<td data-label="${this._translations[this._lang].final_minor}">`+e.final_minor_release+"</td>":`<td data-label="${this._translations[this._lang].final_minor}">${this._translations[this._lang].not_applicable}</td>`:""}\n        </tr>\n        `),"End of life"===e.type&&(this._endOfLife=!0,u=`\n        <tr>\n          <th scope="row" data-label="${this._translations[this._lang].version}">${e.name}</th>\n          ${h?e.extra_dependences.map((e,a)=>null!==e?`<td data-label="${t.data[0].product_extra_headers[a]}">${e}</td>`:`<td data-label="${t.data[0].product_extra_headers[a]}">${this._translations[this._lang].not_applicable}</td>`).join(""):""}\n          ${e.phases.map(t=>a.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}\n                ${this._parseSuperscript(t.superscript)}\n                </td>`:`<td data-label="${t.name}">${this._translations[this._lang].not_applicable}</td>`).join("")}\n          ${c?null!==e.final_minor_release?`<td data-label="${this._translations[this._lang].final_minor}">`+e.final_minor_release+"</td>":`<td data-label="${this._translations[this._lang].final_minor}">${this._translations[this._lang].not_applicable}</td>`:""}\n        </tr>\n        `),""!==e.type&&null!==e.type||(this._uncategorized=!0,g=`\n        <tr>\n          <th scope="row" data-label="${this._translations[this._lang].version}">${e.name}</th>\n          ${h?e.extra_dependences.map((e,a)=>null!==e?`<td data-label="${t.data[0].product_extra_headers[a]}">${e}</td>`:`<td data-label="${t.data[0].product_extra_headers[a]}">N/A</td>`).join(""):""}\n          ${e.phases.map(t=>a.includes(t.name)?`<td data-label="${t.name}">${this._parseDate(t.date,t.date_format)}\n                ${this._parseSuperscript(t.superscript)}\n                </td>`:`<td data-label="${t.name}">${this._translations[this._lang].not_applicable}</td>`).join("")}\n          ${c?null!==e.final_minor_release?`<td data-label="${this._translations[this._lang].final_minor}">`+e.final_minor_release+"</td>":`<td data-label="${this._translations[this._lang].final_minor}">${this._translations[this._lang].not_applicable}</td>`:""}\n        </tr>\n        `),i+=d,n+=p,l+=_,o+=u,r+=f}),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._hasFormerNames?this._formerNames.removeAttribute("hidden"):this._formerNames.setAttribute("hidden",!0),this._phaseRow.forEach(t=>{t.innerHTML=s}),this._fullSupportBody.innerHTML=i,this._maintenanceSupportBody.innerHTML=n,this._extendedSupportBody.innerHTML=l,this._endOfLifeBody.innerHTML=o,this._endOfMaintenanceBody.innerHTML=r}_parseDate(t,e){return"string"===e?t:`<pfe-datetime datetime=${t} day="numeric" month="long" year="numeric" time-zone="UTC" locale="${"zh_CN"!==this._lang?this._lang:"zh-Hans-CN"}"></pfe-datetime>`}_parseSuperscript(t){return this.hasAttribute("app")||void 0===t?"":`<sup>${t}</sup>`}_handleHideEOL(t){t?this._endOfLifeTable.setAttribute("hidden",!0):this._endOfLifeTable.removeAttribute("hidden")}_handleToggleEolCheckboxChange(t){t.currentTarget.checked?this._endOfLifeTable.removeAttribute("hidden"):this._endOfLifeTable.setAttribute("hidden",!0)}_handleToggleEOL(t){t?this._toggleEolCheckboxWrap.removeAttribute("hidden"):this._toggleEolCheckboxWrap.setAttribute("hidden",!0)}_handleToggleEolCheckboxShow(){this.hasAttribute("toggle-eol")?(this._toggleEolCheckboxWrap.removeAttribute("hidden"),this.hasAttribute("hide-eol")||this._toggleEolCheckbox.setAttribute("checked",!0)):this._toggleEolCheckboxWrap.setAttribute("hidden",!0)}_handleBtnClick(t){this.emitEvent(e.events.close)}_handleVersionCategoryExpandable(){this.hasAttribute("expandable")?(this._toggleArrowBtnList.forEach((t,e)=>{t.setAttribute("index",e),t.addEventListener("click",this._handleToggleArrowClick)}),this._productTableContentList.forEach((t,e)=>{t.setAttribute("index",e)})):this._toggleArrowBtnList.forEach(t=>{t.setAttribute("hidden",!0)})}_handleToggleArrowClick(t){const e=t.currentTarget.getAttribute("index");this._toggleArrowBtnList[e].classList.value.includes("toggle-arrow-composable")?(this._toggleArrowBtnList[e].classList.remove("toggle-arrow-composable"),this._productTableContentList[e].classList.remove("product-content-hidden")):(this._toggleArrowBtnList[e].classList.add("toggle-arrow-composable"),this._productTableContentList[e].classList.add("product-content-hidden")),console.log(e,t.currentTarget,this._toggleArrowBtnList,this._productTableContentList)}}t.create(e);export default e;
 //# sourceMappingURL=plcc-table.min.js.map

dist/plcc-table.umd.js

@@ -83,3 +83,3 @@ (function (global, factory) {
   /*!
-   * PatternFly Elements: PlccTable 2.1.3
+   * PatternFly Elements: PlccTable 2.1.4
    * @license
@@ -113,3 +113,3 @@ * Copyright 2020 Red Hat, Inc.
       get: function get$$1() {
-        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:middle}@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\n  class=\"product-lifecycle__wrapper\"\n  id=\"product-lifecycle__wrapper--listing\"\n>\n  <button\n    class=\"product-lifecycle__close icon-close application\"\n    id=\"close-btn\"\n    aria-label=\"Closes Red Hat OpenStack Platform Table\"\n    hidden\n  >\n    <div class=\"icon-close__inner1\"></div>\n  </button>\n  <h2 class=\"product-lifecycle-info__product-name sr-only\"></h2>\n\n  <table\n    border=\"0\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"product-lifecycle-info__table-headers\"\n    aria-hidden\n  >\n    <thead>\n      <tr class=\"product-phases\"></tr>\n    </thead>\n  </table>\n\n  <table\n    id=\"product-lifecycle-full-support\"\n    border=\"0\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"\n      product-lifecycle-info__table product-lifecycle-info__table--supported\n      responsive-table responsive-table--row-strategy\n    \"\n  >\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\n    id=\"product-lifecycle-maintenance-support\"\n    border=\"0\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"\n      product-lifecycle-info__table product-lifecycle-info__table--purgatory\n      responsive-table responsive-table--row-strategy\n    \"\n  >\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\n    id=\"product-lifecycle-extended-support\"\n    border=\"0\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"\n      product-lifecycle-info__table product-lifecycle-info__table--purgatory\n      responsive-table responsive-table--row-strategy\n    \"\n  >\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\n    id=\"product-lifecycle-end-of-maintenance\"\n    border=\"0\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"\n      product-lifecycle-info__table product-lifecycle-info__table--unsupported\n      responsive-table responsive-table--row-strategy\n    \"\n  >\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\n    id=\"product-lifecycle-end-of-life\"\n    border=\"0\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"\n      product-lifecycle-info__table product-lifecycle-info__table--unsupported\n      responsive-table responsive-table--row-strategy\n    \"\n  >\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  <p id=\"plcc-former-names\"></p>\n  <p id=\"plcc-disclaimer\">\n    All future dates mentioned are close approximations, non definitive, and\n    subject to change.\n  </p>\n</article>";
+        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:middle}@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{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}.toggle-arrow-default{float:left;cursor:pointer;margin-right:1rem}.toggle-arrow-composable{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.product-content-hidden{display:none}\n/*# sourceMappingURL=plcc-table.min.css.map */\n</style><div id=\"loading\" hidden>\n  <pfe-progress-indicator></pfe-progress-indicator>\n</div>\n<article\n  class=\"product-lifecycle__wrapper\"\n  id=\"product-lifecycle__wrapper--listing\"\n>\n  <button\n    class=\"product-lifecycle__close icon-close application\"\n    id=\"close-btn\"\n    aria-label=\"Closes Red Hat OpenStack Platform Table\"\n    hidden\n  >\n    <div class=\"icon-close__inner1\"></div>\n  </button>\n  <h2 class=\"product-lifecycle-info__product-name sr-only\"></h2>\n  <div id=\"product-lifecycle-toggle-eol-checkbox\">\n    <input type=\"checkbox\" name=\"toggle-eol\" id=\"toggle-eol\">\n    <label for=\"toggle-eol\">Include unsupported versions</label>\n  </div>\n\n\n  <table\n    border=\"0\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"product-lifecycle-info__table-headers\"\n    aria-hidden\n  >\n    <thead>\n      <tr class=\"product-phases\"></tr>\n    </thead>\n  </table>\n\n  <table\n    id=\"product-lifecycle-full-support\"\n    border=\"0\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"\n      product-lifecycle-info__table product-lifecycle-info__table--supported\n      responsive-table responsive-table--row-strategy\n    \"\n  >\n    <caption>\n      <div class=\"toggle-arrow-default toggle-arrow-expandable\">\n        <svg style=\"vertical-align:-0.125em;\" fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 320 512\" aria-hidden=\"true\" role=\"img\"><path d=\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\"></path></svg>\n      </div>\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 class=\"product-lifecycle-info__table_content\"></tbody>\n  </table>\n\n  <table\n    id=\"product-lifecycle-maintenance-support\"\n    border=\"0\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"\n      product-lifecycle-info__table product-lifecycle-info__table--purgatory\n      responsive-table responsive-table--row-strategy\n    \"\n  >\n    <caption>\n      <div class=\"toggle-arrow-default toggle-arrow-expandable\">\n        <svg style=\"vertical-align:-0.125em;\" fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 320 512\" aria-hidden=\"true\" role=\"img\"><path d=\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\"></path></svg>\n      </div>\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 class=\"product-lifecycle-info__table_content\"></tbody>\n  </table>\n\n  <table\n    id=\"product-lifecycle-extended-support\"\n    border=\"0\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"\n      product-lifecycle-info__table product-lifecycle-info__table--purgatory\n      responsive-table responsive-table--row-strategy\n    \"\n  >\n    <caption>\n      <div class=\"toggle-arrow-default toggle-arrow-expandable\">\n        <svg style=\"vertical-align:-0.125em;\" fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 320 512\" aria-hidden=\"true\" role=\"img\"><path d=\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\"></path></svg>\n      </div>\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 class=\"product-lifecycle-info__table_content\"></tbody>\n  </table>\n\n  <table\n    id=\"product-lifecycle-end-of-maintenance\"\n    border=\"0\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"\n      product-lifecycle-info__table product-lifecycle-info__table--unsupported\n      responsive-table responsive-table--row-strategy\n    \"\n  >\n    <caption>\n      <div class=\"toggle-arrow-default toggle-arrow-expandable\">\n        <svg style=\"vertical-align:-0.125em;\" fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 320 512\" aria-hidden=\"true\" role=\"img\"><path d=\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\"></path></svg>\n      </div>\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 class=\"product-lifecycle-info__table_content\"></tbody>\n  </table>\n\n  <table\n    id=\"product-lifecycle-end-of-life\"\n    border=\"0\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"\n      product-lifecycle-info__table product-lifecycle-info__table--unsupported\n      responsive-table responsive-table--row-strategy\n    \"\n  >\n    <caption>\n      <div class=\"toggle-arrow-default toggle-arrow-expandable\">\n        <svg style=\"vertical-align:-0.125em;\" fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 320 512\" aria-hidden=\"true\" role=\"img\"><path d=\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\"></path></svg>\n      </div>\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 class=\"product-lifecycle-info__table_content\"></tbody>\n  </table>\n  <p id=\"plcc-former-names\"></p>\n  <p id=\"plcc-disclaimer\">\n    All future dates mentioned are close approximations, non definitive, and\n    subject to change.\n  </p>\n</article>";
       }
@@ -137,2 +137,12 @@ }, {
     }, {
+      key: "expandable",
+      get: function get$$1() {
+        return this.getAttribute("expandable");
+      }
+    }, {
+      key: "toggleEOL",
+      get: function get$$1() {
+        return this.getAttribute("toggle-eol");
+      }
+    }, {
       key: "loading",
@@ -176,3 +186,3 @@ get: function get$$1() {
       get: function get$$1() {
-        return "2.1.3";
+        return "2.1.4";
       }
@@ -216,2 +226,14 @@ }, {
             type: String
+          },
+          expandable: {
+            title: "Toggle version category",
+            attr: "expandable",
+            default: false,
+            type: Boolean
+          },
+          toggleEOL: {
+            title: "Toggle end-of-life checkbox",
+            attr: "toggle-eol",
+            type: Boolean,
+            observer: "_toggleEolChange"
           }
@@ -238,2 +260,3 @@ };
       _this._handleBtnClick = _this._handleBtnClick.bind(_this);
+      _this._handleToggleArrowClick = _this._handleToggleArrowClick.bind(_this);
 
@@ -332,4 +355,12 @@ _this._data = null;
 
+      _this._toggleArrowBtnList = _this.shadowRoot.querySelectorAll(".toggle-arrow-default");
+      _this._productTableContentList = _this.shadowRoot.querySelectorAll(".product-lifecycle-info__table_content");
+
+      _this._toggleEolCheckboxWrap = _this.shadowRoot.querySelector("#product-lifecycle-toggle-eol-checkbox");
       // this._closeBtn.addEventListener("click", this._handleBtnClick);
 
+      _this._toggleEolCheckbox = _this.shadowRoot.querySelector("#toggle-eol");
+      _this._toggleEolCheckbox.addEventListener("change", function (event) {
+        return _this._handleToggleEolCheckboxChange(event);
+      });
       _this.loading = false;
@@ -351,2 +382,4 @@ return _this;
         this._requestProduct();
+        this._handleVersionCategoryExpandable();
+        this._handleToggleEolCheckboxShow();
       }
@@ -364,2 +397,7 @@ }, {
     }, {
+      key: "_toggleEolChange",
+      value: function _toggleEolChange() {
+        this._handleToggleEOL(this.hasAttribute("toggle-eol"));
+      }
+    }, {
       key: "_requestProduct",
@@ -731,2 +769,32 @@ value: function _requestProduct(oldVal, newVal) {
       }
+    }, {
+      key: "_handleToggleEolCheckboxChange",
+      value: function _handleToggleEolCheckboxChange(event) {
+        if (event.currentTarget.checked) {
+          this._endOfLifeTable.removeAttribute("hidden");
+        } else {
+          this._endOfLifeTable.setAttribute("hidden", true);
+        }
+      }
+    }, {
+      key: "_handleToggleEOL",
+      value: function _handleToggleEOL(val) {
+        if (val) {
+          this._toggleEolCheckboxWrap.removeAttribute("hidden");
+        } else {
+          this._toggleEolCheckboxWrap.setAttribute("hidden", true);
+        }
+      }
+    }, {
+      key: "_handleToggleEolCheckboxShow",
+      value: function _handleToggleEolCheckboxShow() {
+        if (this.hasAttribute('toggle-eol')) {
+          this._toggleEolCheckboxWrap.removeAttribute("hidden");
+          if (!this.hasAttribute('hide-eol')) {
+            this._toggleEolCheckbox.setAttribute("checked", true);
+          }
+        } else {
+          this._toggleEolCheckboxWrap.setAttribute("hidden", true);
+        }
+      }
 
@@ -740,2 +808,35 @@ //emit close button event
       }
+    }, {
+      key: "_handleVersionCategoryExpandable",
+      value: function _handleVersionCategoryExpandable() {
+        var _this4 = this;
+
+        if (this.hasAttribute("expandable")) {
+          this._toggleArrowBtnList.forEach(function (btnItem, index) {
+            btnItem.setAttribute("index", index);
+            btnItem.addEventListener("click", _this4._handleToggleArrowClick);
+          });
+          this._productTableContentList.forEach(function (contentItem, index) {
+            contentItem.setAttribute("index", index);
+          });
+        } else {
+          this._toggleArrowBtnList.forEach(function (arrowBtn) {
+            arrowBtn.setAttribute("hidden", true);
+          });
+        }
+      }
+    }, {
+      key: "_handleToggleArrowClick",
+      value: function _handleToggleArrowClick(event) {
+        var index = event.currentTarget.getAttribute("index");
+        var eleClassList = this._toggleArrowBtnList[index].classList.value;
+        if (!eleClassList.includes("toggle-arrow-composable")) {
+          this._toggleArrowBtnList[index].classList.add('toggle-arrow-composable');
+          this._productTableContentList[index].classList.add('product-content-hidden');
+        } else {
+          this._toggleArrowBtnList[index].classList.remove('toggle-arrow-composable');
+          this._productTableContentList[index].classList.remove('product-content-hidden');
+        }
+        console.log(index, event.currentTarget, this._toggleArrowBtnList, this._productTableContentList);
+      }
     }]);
@@ -742,0 +843,0 @@ return PlccTable;

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){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},n=function(e,t,n){return t&&a(e.prototype,t),n&&a(e,n),e};function a(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function i(e,t,n){null===e&&(e=Function.prototype);var a=Object.getOwnPropertyDescriptor(e,t);if(void 0!==a){if("value"in a)return a.value;a=a.get;return void 0!==a?a.call(n):void 0}if(null!==(e=Object.getPrototypeOf(e)))return i(e,t,n)}var o=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},n=(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)}(l,e),n(l,[{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:middle}@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\n  class="product-lifecycle__wrapper"\n  id="product-lifecycle__wrapper--listing"\n>\n  <button\n    class="product-lifecycle__close icon-close application"\n    id="close-btn"\n    aria-label="Closes Red Hat OpenStack Platform Table"\n    hidden\n  >\n    <div class="icon-close__inner1"></div>\n  </button>\n  <h2 class="product-lifecycle-info__product-name sr-only"></h2>\n\n  <table\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="product-lifecycle-info__table-headers"\n    aria-hidden\n  >\n    <thead>\n      <tr class="product-phases"></tr>\n    </thead>\n  </table>\n\n  <table\n    id="product-lifecycle-full-support"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--supported\n      responsive-table responsive-table--row-strategy\n    "\n  >\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\n    id="product-lifecycle-maintenance-support"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--purgatory\n      responsive-table responsive-table--row-strategy\n    "\n  >\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\n    id="product-lifecycle-extended-support"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--purgatory\n      responsive-table responsive-table--row-strategy\n    "\n  >\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\n    id="product-lifecycle-end-of-maintenance"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--unsupported\n      responsive-table responsive-table--row-strategy\n    "\n  >\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\n    id="product-lifecycle-end-of-life"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--unsupported\n      responsive-table responsive-table--row-strategy\n    "\n  >\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  <p id="plcc-former-names"></p>\n  <p id="plcc-disclaimer">\n    All future dates mentioned are close approximations, non definitive, and\n    subject to change.\n  </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){var t;e&&(this.loading=!0,this._data=e,t=this._getDisplayHeaders(this._data),e=this._getHeaders(this._data),this._construct(this._data,t,e),this.loading=!1)}}],[{key:"version",get:function(){return"2.1.3"}},{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},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}}]),n(l,[{key:"connectedCallback",value:function(){i(l.prototype.__proto__||Object.getPrototypeOf(l.prototype),"connectedCallback",this).call(this),document.querySelector("html").hasAttribute("lang")&&(this._lang=document.querySelector("html").getAttribute("lang")),this._translateStrings(),this._requestProduct()}},{key:"disconnectedCallback",value:function(){this._closeBtn.removeEventListener("click",this._handleBtnClick)}},{key:"_hideEolChange",value:function(){this._handleHideEOL(this.hasAttribute("hide-eol"))}},{key:"_requestProduct",value:function(e,t){var a=this;this.loading=!0;var i="",n=this.productName,o=this._lang;n&&""!==n&&(i="en"===this.lang?"https://access.redhat.com/product-life-cycles/api/v1/products?name="+n:"https://access.redhat.com/product-life-cycles/api/v1/products?name="+n+"&lng="+o);new Promise(function(e,t){var n=new XMLHttpRequest;n.open("GET",i),n.responseType="json",n.onload=function(){(400<=n.status?t:e)(n.response),a.loading=!1},n.onerror=function(e){t(e,"Something went wrong."),a.loading=!1},n.send()}).then(function(e){a.tableData=e}).catch(function(e){console.error(e)})}},{key:"_translateStrings",value:function(){this.shadowRoot.querySelector("#product-lifecycle-full-support h3").firstChild.nodeValue=this._translations[this._lang].full_support,this.shadowRoot.querySelector("#product-lifecycle-maintenance-support h3").firstChild.nodeValue=this._translations[this._lang].maint_support,this.shadowRoot.querySelector("#product-lifecycle-extended-support h3").firstChild.nodeValue=this._translations[this._lang].ext_support,this.shadowRoot.querySelector("#product-lifecycle-end-of-maintenance h3").firstChild.nodeValue=this._translations[this._lang].end_maintenance,this.shadowRoot.querySelector("#product-lifecycle-end-of-life h3").firstChild.nodeValue=this._translations[this._lang].end_life,this.shadowRoot.querySelector("#plcc-disclaimer").textContent=this._translations[this._lang].disclaimer}},{key:"_getDisplayHeaders",value:function(e){var t=[];return e.data[0].is_layered_product&&(t=t.concat(e.data[0].product_extra_headers)),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=t.concat(e.data[0].product_extra_headers)),e.data[0].all_phases.forEach(function(e){t.push(e.name)}),t}},{key:"_getFormerNames",value:function(e){var t="";return t=e.data[0].former_names&&0<e.data[0].former_names.length?e.data[0].former_names.join(", "):t}},{key:"_construct",value:function(r,e,d){var s=this,c="",p="",h="",u="",_="",t='<th scope="col">'+this._translations[this._lang].version+"</th>",n=r.data[0].versions,f=r.data[0].show_final_minor_release,m=r.data[0].is_layered_product,a=this._getFormerNames(r);""!==a&&(this._hasFormerNames=!0,this.shadowRoot.querySelector("#plcc-former-names").textContent="The former names of this products are: "+a),this.shadowRoot.querySelector(".product-lifecycle-info__product-name").innerText=r.data[0].name,this.shadowRoot.querySelectorAll(".sr-only").forEach(function(e){return e.innerText=""+r.data[0].name}),e.forEach(function(e){t+='<th scope="col">'+e+"</th>"}),f&&(t+='<th scope="col">'+this._translations[this._lang].final_minor+"</th>"),n.forEach(function(e,t){var n="",a="",i="",o="",l="";"Full Support"===e.type&&(s._fullSupport=!0,n='\n        <tr>\n          <th scope="row" data-label="'+s._translations[s._lang].version+'">'+e.name+"</th>\n          "+(m?e.extra_dependences.map(function(e,t){return null!==e?'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+e+"</td>":'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+s._translations[s._lang].not_applicable+"</td>"}).join(""):"")+"\n          "+e.phases.map(function(e){return d.includes(e.name)?'<td data-label="'+e.name+'">'+s._parseDate(e.date,e.date_format)+"\n                "+s._parseSuperscript(e.superscript)+"\n                </td>":'<td data-label="'+e.name+'">'+s._translations[s._lang].not_applicable+"</td>"}).join("")+"\n          "+(f?null!==e.final_minor_release?'<td data-label="'+s._translations[s._lang].final_minor+'">'+e.final_minor_release+"</td>":'<td data-label="'+s._translations[s._lang].final_minor+'">'+s._translations[s._lang].not_applicable+"</td>":"")+"\n        </tr>\n        "),"Maintenance Support"===e.type&&(s._maintenanceSupport=!0,a='\n        <tr>\n          <th scope="row" data-label="'+s._translations[s._lang].version+'">'+e.name+"</th>\n          "+(m?e.extra_dependences.map(function(e,t){return null!==e?'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+e+"</td>":'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+s._translations[s._lang].not_applicable+"</td>"}).join(""):"")+"\n          "+e.phases.map(function(e){return d.includes(e.name)?'<td data-label="'+e.name+'">'+s._parseDate(e.date,e.date_format)+"\n                "+s._parseSuperscript(e.superscript)+"\n                </td>":'<td data-label="'+e.name+'">'+s._translations[s._lang].not_applicable+"</td>"}).join("")+"\n          "+(f?null!==e.final_minor_release?'<td data-label="'+s._translations[s._lang].final_minor+'">'+e.final_minor_release+"</td>":'<td data-label="'+s._translations[s._lang].final_minor+'">'+s._translations[s._lang].not_applicable+"</td>":"")+"\n        </tr>\n        "),"Extended Support"===e.type&&(s._extendedSupport=!0,i='\n        <tr>\n          <th scope="row" data-label="'+s._translations[s._lang].version+'">'+e.name+"</th>\n          "+(m?e.extra_dependences.map(function(e,t){return null!==e?'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+e+"</td>":'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+s._translations[s._lang].not_applicable+"</td>"}).join(""):"")+"\n          "+e.phases.map(function(e){return d.includes(e.name)?'<td data-label="'+e.name+'">'+s._parseDate(e.date,e.date_format)+"\n                "+s._parseSuperscript(e.superscript)+"\n                </td>":'<td data-label="'+e.name+'">'+s._translations[s._lang].not_applicable+"</td>"}).join("")+"\n          "+(f?null!==e.final_minor_release?'<td data-label="'+s._translations[s._lang].final_minor+'">'+e.final_minor_release+"</td>":'<td data-label="'+s._translations[s._lang].final_minor+'">'+s._translations[s._lang].not_applicable+"</td>":"")+"\n        </tr>\n        "),"End of Maintenance"===e.type&&(s._endOfMaintenance=!0,l='\n        <tr>\n          <th scope="row" data-label="'+s._translations[s._lang].version+'">'+e.name+"</th>\n          "+(m?e.extra_dependences.map(function(e,t){return null!==e?'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+e+"</td>":'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+s._translations[s._lang].not_applicable+"</td>"}).join(""):"")+"\n          "+e.phases.map(function(e){return d.includes(e.name)?'<td data-label="'+e.name+'">'+s._parseDate(e.date,e.date_format)+"\n                "+s._parseSuperscript(e.superscript)+"\n                </td>":'<td data-label="'+e.name+'">'+s._translations[s._lang].not_applicable+"</td>"}).join("")+"\n          "+(f?null!==e.final_minor_release?'<td data-label="'+s._translations[s._lang].final_minor+'">'+e.final_minor_release+"</td>":'<td data-label="'+s._translations[s._lang].final_minor+'">'+s._translations[s._lang].not_applicable+"</td>":"")+"\n        </tr>\n        "),"End of life"===e.type&&(s._endOfLife=!0,o='\n        <tr>\n          <th scope="row" data-label="'+s._translations[s._lang].version+'">'+e.name+"</th>\n          "+(m?e.extra_dependences.map(function(e,t){return null!==e?'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+e+"</td>":'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+s._translations[s._lang].not_applicable+"</td>"}).join(""):"")+"\n          "+e.phases.map(function(e){return d.includes(e.name)?'<td data-label="'+e.name+'">'+s._parseDate(e.date,e.date_format)+"\n                "+s._parseSuperscript(e.superscript)+"\n                </td>":'<td data-label="'+e.name+'">'+s._translations[s._lang].not_applicable+"</td>"}).join("")+"\n          "+(f?null!==e.final_minor_release?'<td data-label="'+s._translations[s._lang].final_minor+'">'+e.final_minor_release+"</td>":'<td data-label="'+s._translations[s._lang].final_minor+'">'+s._translations[s._lang].not_applicable+"</td>":"")+"\n        </tr>\n        "),""!==e.type&&null!==e.type||(s._uncategorized=!0,s._translations[s._lang].version,e.name,m&&e.extra_dependences.map(function(e,t){return null!==e?'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+e+"</td>":'<td data-label="'+r.data[0].product_extra_headers[t]+'">N/A</td>'}).join(""),e.phases.map(function(e){return d.includes(e.name)?'<td data-label="'+e.name+'">'+s._parseDate(e.date,e.date_format)+"\n                "+s._parseSuperscript(e.superscript)+"\n                </td>":'<td data-label="'+e.name+'">'+s._translations[s._lang].not_applicable+"</td>"}).join(""),f&&(null!==e.final_minor_release?(s._translations[s._lang].final_minor,e.final_minor_release):(s._translations[s._lang].final_minor,s._translations[s._lang].not_applicable))),c+=n,p+=a,h+=i,u+=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._hasFormerNames?this._formerNames.removeAttribute("hidden"):this._formerNames.setAttribute("hidden",!0),this._phaseRow.forEach(function(e){e.innerHTML=t}),this._fullSupportBody.innerHTML=c,this._maintenanceSupportBody.innerHTML=p,this._extendedSupportBody.innerHTML=h,this._endOfLifeBody.innerHTML=u,this._endOfMaintenanceBody.innerHTML=_}},{key:"_parseDate",value:function(e,t){return"string"===t?e:"<pfe-datetime datetime="+e+' day="numeric" month="long" year="numeric" time-zone="UTC" locale="'+("zh_CN"!==this._lang?this._lang:"zh-Hans-CN")+'"></pfe-datetime>'}},{key:"_parseSuperscript",value:function(e){return this.hasAttribute("app")||void 0===e?"":"<sup>"+e+"</sup>"}},{key:"_handleHideEOL",value:function(e){e?this._endOfLifeTable.setAttribute("hidden",!0):this._endOfLifeTable.removeAttribute("hidden")}},{key:"_handleBtnClick",value:function(e){this.emitEvent(l.events.close)}}]),l);function l(){t(this,l);var e=o(this,(l.__proto__||Object.getPrototypeOf(l)).call(this,l,{type:l.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._hasFormerNames=!1,e._translations={en:{full_support:"Full Support",maint_support:"Maintenance Support",ext_support:"Extended Support",uncategorized:"Uncategorized",end_maintenance:"End of maintenance",end_life:"End of life",version:"Version",final_minor:"Final minor release",not_applicable:"N/A",disclaimer:"All future dates mentioned are close approximations, non definitive, and subject to change."},ja:{full_support:"フルサポート",maint_support:"メンテナンスサポート",ext_support:"延長サポート",uncategorized:"未分類",end_maintenance:"メンテナンスサポートの終了日",end_life:"ライフサイクルの終了日",version:"バージョン",final_minor:"最終マイナーリリース",not_applicable:"該当なし",disclaimer:"記載されている将来の日付はすべて概算であり、決定的なものではなく、変更される可能性があります。"},ko:{full_support:"완전 지원",maint_support:"유지 관리 지원",ext_support:"연장 지원",uncategorized:"범주화되지 않음",end_maintenance:"유지 관리 지원 종료",end_life:"종료일",version:"버전",final_minor:"마지막 마이너 릴리스",not_applicable:"해당 없음",disclaimer:"언급된 모든 향후 날짜는 확정되지 않은 예상 날짜이며 변경될 수 있습니다."},zh_CN:{full_support:"完全支持",maint_support:"维护支持",ext_support:"延长的支持",uncategorized:"未分类",end_maintenance:"维护结束",end_life:"生命周期结束",version:"版本",final_minor:"最后的次发行版本",not_applicable:"不适用",disclaimer:"所有提到的未来日期均为近似日期，未完全确定，可能随时更改。"}},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._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._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._formerNames=e.shadowRoot.querySelector("#plcc-former-names"),e.loading=!1,e}return e.create(n),n});
+!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(a){"use strict";a=a&&a.hasOwnProperty("default")?a.default:a;var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function l(e,t,n){null===e&&(e=Function.prototype);var a=Object.getOwnPropertyDescriptor(e,t);if(void 0!==a){if("value"in a)return a.value;a=a.get;return void 0!==a?a.call(n):void 0}if(null!==(a=Object.getPrototypeOf(e)))return l(a,t,n)}var e=function(){var e=n,t=a;if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);function n(){if(!(this instanceof n))throw new TypeError("Cannot call a class as a function");var t=function(e,t){if(e)return!t||"object"!=typeof t&&"function"!=typeof t?e:t;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,n,{type:n.PfeType}));return t._handleBtnClick=t._handleBtnClick.bind(t),t._handleToggleArrowClick=t._handleToggleArrowClick.bind(t),t._data=null,t._fullSupport=!1,t._maintenanceSupport=!1,t._extendedSupport=!1,t._uncategorized=!1,t._endOfMaintenance=!1,t._endOfLife=!1,t._plccApplication=!1,t._hasFormerNames=!1,t._translations={en:{full_support:"Full Support",maint_support:"Maintenance Support",ext_support:"Extended Support",uncategorized:"Uncategorized",end_maintenance:"End of maintenance",end_life:"End of life",version:"Version",final_minor:"Final minor release",not_applicable:"N/A",disclaimer:"All future dates mentioned are close approximations, non definitive, and subject to change."},ja:{full_support:"フルサポート",maint_support:"メンテナンスサポート",ext_support:"延長サポート",uncategorized:"未分類",end_maintenance:"メンテナンスサポートの終了日",end_life:"ライフサイクルの終了日",version:"バージョン",final_minor:"最終マイナーリリース",not_applicable:"該当なし",disclaimer:"記載されている将来の日付はすべて概算であり、決定的なものではなく、変更される可能性があります。"},ko:{full_support:"완전 지원",maint_support:"유지 관리 지원",ext_support:"연장 지원",uncategorized:"범주화되지 않음",end_maintenance:"유지 관리 지원 종료",end_life:"종료일",version:"버전",final_minor:"마지막 마이너 릴리스",not_applicable:"해당 없음",disclaimer:"언급된 모든 향후 날짜는 확정되지 않은 예상 날짜이며 변경될 수 있습니다."},zh_CN:{full_support:"完全支持",maint_support:"维护支持",ext_support:"延长的支持",uncategorized:"未分类",end_maintenance:"维护结束",end_life:"生命周期结束",version:"版本",final_minor:"最后的次发行版本",not_applicable:"不适用",disclaimer:"所有提到的未来日期均为近似日期，未完全确定，可能随时更改。"}},t._disclaimer=t.shadowRoot.querySelector("#plcc-disclaimer"),t._article=t.shadowRoot.querySelector("article"),t._header=t.shadowRoot.querySelector("header"),t._links=t.shadowRoot.querySelectorAll("a"),t._appMarkup=t.shadowRoot.querySelectorAll(".application"),t._fullSupportTable=t.shadowRoot.querySelector("#product-lifecycle-full-support"),t._maintenanceSupportTable=t.shadowRoot.querySelector("#product-lifecycle-maintenance-support"),t._extendedSupportTable=t.shadowRoot.querySelector("#product-lifecycle-extended-support"),t._endOfMaintenanceTable=t.shadowRoot.querySelector("#product-lifecycle-end-of-maintenance"),t._endOfLifeTable=t.shadowRoot.querySelector("#product-lifecycle-end-of-life"),t._fullSupportBody=t.shadowRoot.querySelector("#product-lifecycle-full-support tbody"),t._maintenanceSupportBody=t.shadowRoot.querySelector("#product-lifecycle-maintenance-support tbody"),t._extendedSupportBody=t.shadowRoot.querySelector("#product-lifecycle-extended-support tbody"),t._endOfMaintenanceBody=t.shadowRoot.querySelector("#product-lifecycle-end-of-maintenance tbody"),t._endOfLifeBody=t.shadowRoot.querySelector("#product-lifecycle-end-of-life tbody"),t._caption=t.shadowRoot.querySelector("caption"),t._phaseRow=t.shadowRoot.querySelectorAll(".product-phases"),t._versionToggleRow=t.shadowRoot.querySelectorAll("version-toggle-row"),t._versionToggle=t.shadowRoot.querySelector("#unsupported-versions"),t._closeBtn=t.shadowRoot.querySelector("#close-btn"),t._loadingIndicator=t.shadowRoot.querySelector("#loading"),t._formerNames=t.shadowRoot.querySelector("#plcc-former-names"),t._toggleArrowBtnList=t.shadowRoot.querySelectorAll(".toggle-arrow-default"),t._productTableContentList=t.shadowRoot.querySelectorAll(".product-lifecycle-info__table_content"),t._toggleEolCheckboxWrap=t.shadowRoot.querySelector("#product-lifecycle-toggle-eol-checkbox"),t._toggleEolCheckbox=t.shadowRoot.querySelector("#toggle-eol"),t._toggleEolCheckbox.addEventListener("change",function(e){return t._handleToggleEolCheckboxChange(e)}),t.loading=!1,t}return 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(n,[{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:middle}@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{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}.toggle-arrow-default{float:left;cursor:pointer;margin-right:1rem}.toggle-arrow-composable{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.product-content-hidden{display:none}\n/*# sourceMappingURL=plcc-table.min.css.map */\n</style><div id="loading" hidden>\n  <pfe-progress-indicator></pfe-progress-indicator>\n</div>\n<article\n  class="product-lifecycle__wrapper"\n  id="product-lifecycle__wrapper--listing"\n>\n  <button\n    class="product-lifecycle__close icon-close application"\n    id="close-btn"\n    aria-label="Closes Red Hat OpenStack Platform Table"\n    hidden\n  >\n    <div class="icon-close__inner1"></div>\n  </button>\n  <h2 class="product-lifecycle-info__product-name sr-only"></h2>\n  <div id="product-lifecycle-toggle-eol-checkbox">\n    <input type="checkbox" name="toggle-eol" id="toggle-eol">\n    <label for="toggle-eol">Include unsupported versions</label>\n  </div>\n\n\n  <table\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="product-lifecycle-info__table-headers"\n    aria-hidden\n  >\n    <thead>\n      <tr class="product-phases"></tr>\n    </thead>\n  </table>\n\n  <table\n    id="product-lifecycle-full-support"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--supported\n      responsive-table responsive-table--row-strategy\n    "\n  >\n    <caption>\n      <div class="toggle-arrow-default toggle-arrow-expandable">\n        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>\n      </div>\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 class="product-lifecycle-info__table_content"></tbody>\n  </table>\n\n  <table\n    id="product-lifecycle-maintenance-support"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--purgatory\n      responsive-table responsive-table--row-strategy\n    "\n  >\n    <caption>\n      <div class="toggle-arrow-default toggle-arrow-expandable">\n        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>\n      </div>\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 class="product-lifecycle-info__table_content"></tbody>\n  </table>\n\n  <table\n    id="product-lifecycle-extended-support"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--purgatory\n      responsive-table responsive-table--row-strategy\n    "\n  >\n    <caption>\n      <div class="toggle-arrow-default toggle-arrow-expandable">\n        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>\n      </div>\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 class="product-lifecycle-info__table_content"></tbody>\n  </table>\n\n  <table\n    id="product-lifecycle-end-of-maintenance"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--unsupported\n      responsive-table responsive-table--row-strategy\n    "\n  >\n    <caption>\n      <div class="toggle-arrow-default toggle-arrow-expandable">\n        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>\n      </div>\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 class="product-lifecycle-info__table_content"></tbody>\n  </table>\n\n  <table\n    id="product-lifecycle-end-of-life"\n    border="0"\n    cellspacing="0"\n    cellpadding="0"\n    class="\n      product-lifecycle-info__table product-lifecycle-info__table--unsupported\n      responsive-table responsive-table--row-strategy\n    "\n  >\n    <caption>\n      <div class="toggle-arrow-default toggle-arrow-expandable">\n        <svg style="vertical-align:-0.125em;" fill="currentColor" height="1em" width="1em" viewBox="0 0 320 512" aria-hidden="true" role="img"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>\n      </div>\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 class="product-lifecycle-info__table_content"></tbody>\n  </table>\n  <p id="plcc-former-names"></p>\n  <p id="plcc-disclaimer">\n    All future dates mentioned are close approximations, non definitive, and\n    subject to change.\n  </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:"expandable",get:function(){return this.getAttribute("expandable")}},{key:"toggleEOL",get:function(){return this.getAttribute("toggle-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){var t;e&&(this.loading=!0,this._data=e,e=this._getDisplayHeaders(this._data),t=this._getHeaders(this._data),this._construct(this._data,e,t),this.loading=!1)}}],[{key:"version",get:function(){return"2.1.4"}},{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},hideEol:{title:"Hide end-of-life section",attr:"hide-eol",type:Boolean,observer:"_hideEolChange"},app:{title:"Toggle application version",attr:"app",type:String},expandable:{title:"Toggle version category",attr:"expandable",default:!1,type:Boolean},toggleEOL:{title:"Toggle end-of-life checkbox",attr:"toggle-eol",type:Boolean,observer:"_toggleEolChange"}}}},{key:"slots",get:function(){return{}}},{key:"PfeType",get:function(){return a.PfeTypes.Component}}]),i(n,[{key:"connectedCallback",value:function(){l(n.prototype.__proto__||Object.getPrototypeOf(n.prototype),"connectedCallback",this).call(this),document.querySelector("html").hasAttribute("lang")&&(this._lang=document.querySelector("html").getAttribute("lang")),this._translateStrings(),this._requestProduct(),this._handleVersionCategoryExpandable(),this._handleToggleEolCheckboxShow()}},{key:"disconnectedCallback",value:function(){this._closeBtn.removeEventListener("click",this._handleBtnClick)}},{key:"_hideEolChange",value:function(){this._handleHideEOL(this.hasAttribute("hide-eol"))}},{key:"_toggleEolChange",value:function(){this._handleToggleEOL(this.hasAttribute("toggle-eol"))}},{key:"_requestProduct",value:function(e,t){var a=this,i=(this.loading=!0,""),n=this.productName,o=this._lang;n&&""!==n&&(i="en"===this.lang?"https://access.redhat.com/product-life-cycles/api/v1/products?name="+n:"https://access.redhat.com/product-life-cycles/api/v1/products?name="+n+"&lng="+o),new Promise(function(e,t){var n=new XMLHttpRequest;n.open("GET",i),n.responseType="json",n.onload=function(){(400<=n.status?t:e)(n.response),a.loading=!1},n.onerror=function(e){t(e,"Something went wrong."),a.loading=!1},n.send()}).then(function(e){a.tableData=e}).catch(function(e){console.error(e)})}},{key:"_translateStrings",value:function(){this.shadowRoot.querySelector("#product-lifecycle-full-support h3").firstChild.nodeValue=this._translations[this._lang].full_support,this.shadowRoot.querySelector("#product-lifecycle-maintenance-support h3").firstChild.nodeValue=this._translations[this._lang].maint_support,this.shadowRoot.querySelector("#product-lifecycle-extended-support h3").firstChild.nodeValue=this._translations[this._lang].ext_support,this.shadowRoot.querySelector("#product-lifecycle-end-of-maintenance h3").firstChild.nodeValue=this._translations[this._lang].end_maintenance,this.shadowRoot.querySelector("#product-lifecycle-end-of-life h3").firstChild.nodeValue=this._translations[this._lang].end_life,this.shadowRoot.querySelector("#plcc-disclaimer").textContent=this._translations[this._lang].disclaimer}},{key:"_getDisplayHeaders",value:function(e){var t=[];return e.data[0].is_layered_product&&(t=t.concat(e.data[0].product_extra_headers)),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=t.concat(e.data[0].product_extra_headers)),e.data[0].all_phases.forEach(function(e){t.push(e.name)}),t}},{key:"_getFormerNames",value:function(e){var t="";return t=e.data[0].former_names&&0<e.data[0].former_names.length?e.data[0].former_names.join(", "):t}},{key:"_construct",value:function(r,e,d){var s=this,c="",p="",h="",u="",_="",t='<th scope="col">'+this._translations[this._lang].version+"</th>",n=r.data[0].versions,f=r.data[0].show_final_minor_release,g=r.data[0].is_layered_product,a=this._getFormerNames(r);""!==a&&(this._hasFormerNames=!0,this.shadowRoot.querySelector("#plcc-former-names").textContent="The former names of this products are: "+a),this.shadowRoot.querySelector(".product-lifecycle-info__product-name").innerText=r.data[0].name,this.shadowRoot.querySelectorAll(".sr-only").forEach(function(e){return e.innerText=""+r.data[0].name}),e.forEach(function(e){t+='<th scope="col">'+e+"</th>"}),f&&(t+='<th scope="col">'+this._translations[this._lang].final_minor+"</th>"),n.forEach(function(e,t){var n="",a="",i="",o="",l="";"Full Support"===e.type&&(s._fullSupport=!0,n='\n        <tr>\n          <th scope="row" data-label="'+s._translations[s._lang].version+'">'+e.name+"</th>\n          "+(g?e.extra_dependences.map(function(e,t){return null!==e?'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+e+"</td>":'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+s._translations[s._lang].not_applicable+"</td>"}).join(""):"")+"\n          "+e.phases.map(function(e){return d.includes(e.name)?'<td data-label="'+e.name+'">'+s._parseDate(e.date,e.date_format)+"\n                "+s._parseSuperscript(e.superscript)+"\n                </td>":'<td data-label="'+e.name+'">'+s._translations[s._lang].not_applicable+"</td>"}).join("")+"\n          "+(f?null!==e.final_minor_release?'<td data-label="'+s._translations[s._lang].final_minor+'">'+e.final_minor_release+"</td>":'<td data-label="'+s._translations[s._lang].final_minor+'">'+s._translations[s._lang].not_applicable+"</td>":"")+"\n        </tr>\n        "),"Maintenance Support"===e.type&&(s._maintenanceSupport=!0,a='\n        <tr>\n          <th scope="row" data-label="'+s._translations[s._lang].version+'">'+e.name+"</th>\n          "+(g?e.extra_dependences.map(function(e,t){return null!==e?'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+e+"</td>":'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+s._translations[s._lang].not_applicable+"</td>"}).join(""):"")+"\n          "+e.phases.map(function(e){return d.includes(e.name)?'<td data-label="'+e.name+'">'+s._parseDate(e.date,e.date_format)+"\n                "+s._parseSuperscript(e.superscript)+"\n                </td>":'<td data-label="'+e.name+'">'+s._translations[s._lang].not_applicable+"</td>"}).join("")+"\n          "+(f?null!==e.final_minor_release?'<td data-label="'+s._translations[s._lang].final_minor+'">'+e.final_minor_release+"</td>":'<td data-label="'+s._translations[s._lang].final_minor+'">'+s._translations[s._lang].not_applicable+"</td>":"")+"\n        </tr>\n        "),"Extended Support"===e.type&&(s._extendedSupport=!0,i='\n        <tr>\n          <th scope="row" data-label="'+s._translations[s._lang].version+'">'+e.name+"</th>\n          "+(g?e.extra_dependences.map(function(e,t){return null!==e?'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+e+"</td>":'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+s._translations[s._lang].not_applicable+"</td>"}).join(""):"")+"\n          "+e.phases.map(function(e){return d.includes(e.name)?'<td data-label="'+e.name+'">'+s._parseDate(e.date,e.date_format)+"\n                "+s._parseSuperscript(e.superscript)+"\n                </td>":'<td data-label="'+e.name+'">'+s._translations[s._lang].not_applicable+"</td>"}).join("")+"\n          "+(f?null!==e.final_minor_release?'<td data-label="'+s._translations[s._lang].final_minor+'">'+e.final_minor_release+"</td>":'<td data-label="'+s._translations[s._lang].final_minor+'">'+s._translations[s._lang].not_applicable+"</td>":"")+"\n        </tr>\n        "),"End of Maintenance"===e.type&&(s._endOfMaintenance=!0,l='\n        <tr>\n          <th scope="row" data-label="'+s._translations[s._lang].version+'">'+e.name+"</th>\n          "+(g?e.extra_dependences.map(function(e,t){return null!==e?'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+e+"</td>":'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+s._translations[s._lang].not_applicable+"</td>"}).join(""):"")+"\n          "+e.phases.map(function(e){return d.includes(e.name)?'<td data-label="'+e.name+'">'+s._parseDate(e.date,e.date_format)+"\n                "+s._parseSuperscript(e.superscript)+"\n                </td>":'<td data-label="'+e.name+'">'+s._translations[s._lang].not_applicable+"</td>"}).join("")+"\n          "+(f?null!==e.final_minor_release?'<td data-label="'+s._translations[s._lang].final_minor+'">'+e.final_minor_release+"</td>":'<td data-label="'+s._translations[s._lang].final_minor+'">'+s._translations[s._lang].not_applicable+"</td>":"")+"\n        </tr>\n        "),"End of life"===e.type&&(s._endOfLife=!0,o='\n        <tr>\n          <th scope="row" data-label="'+s._translations[s._lang].version+'">'+e.name+"</th>\n          "+(g?e.extra_dependences.map(function(e,t){return null!==e?'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+e+"</td>":'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+s._translations[s._lang].not_applicable+"</td>"}).join(""):"")+"\n          "+e.phases.map(function(e){return d.includes(e.name)?'<td data-label="'+e.name+'">'+s._parseDate(e.date,e.date_format)+"\n                "+s._parseSuperscript(e.superscript)+"\n                </td>":'<td data-label="'+e.name+'">'+s._translations[s._lang].not_applicable+"</td>"}).join("")+"\n          "+(f?null!==e.final_minor_release?'<td data-label="'+s._translations[s._lang].final_minor+'">'+e.final_minor_release+"</td>":'<td data-label="'+s._translations[s._lang].final_minor+'">'+s._translations[s._lang].not_applicable+"</td>":"")+"\n        </tr>\n        "),""!==e.type&&null!==e.type||(s._uncategorized=!0,s._translations[s._lang].version,e.name,g&&e.extra_dependences.map(function(e,t){return null!==e?'<td data-label="'+r.data[0].product_extra_headers[t]+'">'+e+"</td>":'<td data-label="'+r.data[0].product_extra_headers[t]+'">N/A</td>'}).join(""),e.phases.map(function(e){return d.includes(e.name)?'<td data-label="'+e.name+'">'+s._parseDate(e.date,e.date_format)+"\n                "+s._parseSuperscript(e.superscript)+"\n                </td>":'<td data-label="'+e.name+'">'+s._translations[s._lang].not_applicable+"</td>"}).join(""),f&&(null!==e.final_minor_release?(s._translations[s._lang].final_minor,e.final_minor_release):(s._translations[s._lang].final_minor,s._translations[s._lang].not_applicable))),c+=n,p+=a,h+=i,u+=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._hasFormerNames?this._formerNames.removeAttribute("hidden"):this._formerNames.setAttribute("hidden",!0),this._phaseRow.forEach(function(e){e.innerHTML=t}),this._fullSupportBody.innerHTML=c,this._maintenanceSupportBody.innerHTML=p,this._extendedSupportBody.innerHTML=h,this._endOfLifeBody.innerHTML=u,this._endOfMaintenanceBody.innerHTML=_}},{key:"_parseDate",value:function(e,t){return"string"===t?e:"<pfe-datetime datetime="+e+' day="numeric" month="long" year="numeric" time-zone="UTC" locale="'+("zh_CN"!==this._lang?this._lang:"zh-Hans-CN")+'"></pfe-datetime>'}},{key:"_parseSuperscript",value:function(e){return this.hasAttribute("app")||void 0===e?"":"<sup>"+e+"</sup>"}},{key:"_handleHideEOL",value:function(e){e?this._endOfLifeTable.setAttribute("hidden",!0):this._endOfLifeTable.removeAttribute("hidden")}},{key:"_handleToggleEolCheckboxChange",value:function(e){e.currentTarget.checked?this._endOfLifeTable.removeAttribute("hidden"):this._endOfLifeTable.setAttribute("hidden",!0)}},{key:"_handleToggleEOL",value:function(e){e?this._toggleEolCheckboxWrap.removeAttribute("hidden"):this._toggleEolCheckboxWrap.setAttribute("hidden",!0)}},{key:"_handleToggleEolCheckboxShow",value:function(){this.hasAttribute("toggle-eol")?(this._toggleEolCheckboxWrap.removeAttribute("hidden"),this.hasAttribute("hide-eol")||this._toggleEolCheckbox.setAttribute("checked",!0)):this._toggleEolCheckboxWrap.setAttribute("hidden",!0)}},{key:"_handleBtnClick",value:function(e){this.emitEvent(n.events.close)}},{key:"_handleVersionCategoryExpandable",value:function(){var n=this;this.hasAttribute("expandable")?(this._toggleArrowBtnList.forEach(function(e,t){e.setAttribute("index",t),e.addEventListener("click",n._handleToggleArrowClick)}),this._productTableContentList.forEach(function(e,t){e.setAttribute("index",t)})):this._toggleArrowBtnList.forEach(function(e){e.setAttribute("hidden",!0)})}},{key:"_handleToggleArrowClick",value:function(e){var t=e.currentTarget.getAttribute("index");this._toggleArrowBtnList[t].classList.value.includes("toggle-arrow-composable")?(this._toggleArrowBtnList[t].classList.remove("toggle-arrow-composable"),this._productTableContentList[t].classList.remove("product-content-hidden")):(this._toggleArrowBtnList[t].classList.add("toggle-arrow-composable"),this._productTableContentList[t].classList.add("product-content-hidden")),console.log(t,e.currentTarget,this._toggleArrowBtnList,this._productTableContentList)}}]),n}();return a.create(e),e});
 //# sourceMappingURL=plcc-table.umd.min.js.map

package.json

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

README.md

@@ -25,3 +25,3 @@ # Plcc table Element
 
-When this attribute is present, the End of Life table will be hidden
+When this attribute is present, the End of Life versions will be hidden
 
@@ -32,2 +32,27 @@ ```html
 
+**`toggle-eol`**
+
+Use this attribute to add a checkbox to toggle End of Life versions (default set to show all versions)
+
+```html
+<plcc-table product-name="Red Hat Enterprise Linux" toggle-eol></plcc-table>
+```
+
+**`toggle-eol hide-eol`**
+
+When these two attributes could be used together, all End of Life versions will be hidden by default
+
+```html
+<plcc-table product-name="Red Hat Enterprise Linux" toggle-eol hide-eol></plcc-table>
+```
+
+**`expandable`**
+
+Use this attribute to make version category expandable
+
+```html
+<plcc-table product-name="Red Hat Enterprise Linux" expandable></plcc-table>
+```
+
+
 ### Compact styles
@@ -34,0 +59,0 @@ To enable compact styles add a class of 'compact' to the `<plcc-table>` tag

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

436203

increased by15.25%

Lines of code

2191

increased by13.05%

Number of lines in readme file

106

increased by30.86%

Worsened metrics

Number of downloads

38

decreased by-15.56%

Number of maintainers

14

decreased by-6.67%

No dependency changes