text: /*
   * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
   * This devtool is not neither made for production nor for readable output files.
   * It uses "eval()" calls to create a separate source file in the browser devtools.
   * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
   * or disable the default devtool with "devtool: false".
   * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
   */
  /******/ (() => { // webpackBootstrap
  /******/ 	"use strict";
  /******/ 	var __webpack_modules__ = ({
  
  /***/ "./assets/scss/filter.scss":
  /*!*********************************!*\
    !*** ./assets/scss/filter.scss ***!
    \*********************************/
  /*! namespace exports */
  /*! export default [provided] [no usage info] [missing usage info prevents renaming] */
  /*! other exports [not provided] [no usage info] */
  /*! runtime requirements: __webpack_exports__, __webpack_require__.r, __webpack_require__.d, __webpack_require__.* */
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  
  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (\"* {\\n  margin: 0;\\n  padding: 0;\\n  box-sizing: border-box;\\n  font-family: \\\"Quicksand\\\", sans-serif; }\\n  *:focus {\\n    outline: none; }\\n\\n.highlight {\\n  background-color: rgba(137, 228, 228, 0.527) !important; }\\n\\n.container {\\n  width: 18rem;\\n  height: 2.5rem;\\n  border: 2px solid black;\\n  display: flex;\\n  justify-content: space-around;\\n  align-items: center;\\n  border-radius: 0.5rem; }\\n  .container:focus-within {\\n    border-color: #127cd3; }\\n  .container .input {\\n    width: 50%;\\n    height: 1.875rem;\\n    border: none;\\n    outline: none;\\n    padding-inline: 7px;\\n    border-right: 1px solid black; }\\n    .container .input:focus {\\n      border-color: #127cd3; }\\n  .container .match-text {\\n    display: inline;\\n    padding-inline: 7px; }\\n  .container .icon {\\n    width: 1.6rem;\\n    height: 1.875rem;\\n    cursor: pointer; }\\n\\n.up-search {\\n  content: url(\\\"../assets/images/chevron-up.svg\\\"); }\\n\\n.down-search {\\n  content: url(\\\"../assets/images/chevron-up.svg\\\");\\n  transform: rotate(180deg); }\\n\\n.close {\\n  content: url(\\\"../assets/images/close.svg\\\");\\n  padding-right: 7px; }\\n\");\n\n//# sourceURL=webpack://web-components/./assets/scss/filter.scss?");
  
  /***/ }),
  
  /***/ "./assets/scss/select.scss":
  /*!*********************************!*\
    !*** ./assets/scss/select.scss ***!
    \*********************************/
  /*! namespace exports */
  /*! export default [provided] [no usage info] [missing usage info prevents renaming] */
  /*! other exports [not provided] [no usage info] */
  /*! runtime requirements: __webpack_exports__, __webpack_require__.r, __webpack_require__.d, __webpack_require__.* */
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  
  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (\"* {\\n  margin: 0;\\n  padding: 0;\\n  box-sizing: border-box;\\n  font-family: \\\"Quicksand\\\", sans-serif; }\\n  *:focus {\\n    outline: none; }\\n\\n.highlight {\\n  background-color: rgba(137, 228, 228, 0.527) !important; }\\n\\n.select {\\n  display: flex;\\n  justify-content: space-around;\\n  position: relative;\\n  width: 6rem;\\n  height: 1.875rem;\\n  line-height: 1.875rem;\\n  border: 2px solid black;\\n  border-radius: 0.5rem;\\n  color: black;\\n  cursor: default;\\n  transition: transform, overflow-y 0.5s linear; }\\n  .select:hover .tooltip {\\n    display: inline; }\\n  .select:focus-within {\\n    border: 2px solid #127cd3; }\\n  .select .para {\\n    display: inline-flex;\\n    align-items: center;\\n    justify-content: flex-start;\\n    vertical-align: middle;\\n    border: none;\\n    outline: none;\\n    background-color: inherit;\\n    color: black;\\n    overflow-x: scroll;\\n    width: 80%;\\n    height: 100%;\\n    padding: 0 0.125rem;\\n    scrollbar-width: none;\\n    cursor: pointer;\\n    font-size: 0.825rem; }\\n    .select .para::-webkit-scrollbar {\\n      width: 0px;\\n      height: 0px; }\\n  .select .img {\\n    content: url(\\\"../assets/images/arrow-down.svg\\\");\\n    width: 17px;\\n    height: 100%;\\n    transition: transform 0.3s ease;\\n    user-select: none; }\\n  .select .options-box {\\n    position: absolute;\\n    bottom: 0;\\n    left: 0;\\n    transform: translateY(103%);\\n    opacity: 0;\\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\\n    pointer-events: none;\\n    overflow: hidden;\\n    height: max-content;\\n    width: 100%; }\\n    .select .options-box .options {\\n      width: 100%;\\n      height: 6.25rem;\\n      color: black;\\n      transition: transform 0.5s ease;\\n      transform: translateY(-150%);\\n      display: flex;\\n      overflow-y: auto;\\n      flex-direction: column;\\n      align-items: center;\\n      scrollbar-width: thin;\\n      scrollbar-color: #888 #f1f1f1; }\\n      .select .options-box .options::-webkit-scrollbar {\\n        width: 3px;\\n        height: 2px; }\\n      .select .options-box .options::-webkit-scrollbar-track {\\n        background-color: #f1f1f1; }\\n      .select .options-box .options::-webkit-scrollbar-thumb {\\n        background-color: #888; }\\n      .select .options-box .options::-webkit-scrollbar-thumb:hover {\\n        background-color: #555; }\\n      .select .options-box .options .option {\\n        display: flex;\\n        align-items: center;\\n        justify-content: flex-start;\\n        width: 100%;\\n        height: 1.875rem;\\n        line-height: 2;\\n        padding-left: 0.25rem;\\n        font-size: 0.825rem; }\\n        .select .options-box .options .option:hover, .select .options-box .options .option:focus {\\n          background-color: rgba(75, 129, 245, 0.534); }\\n\\n.disable-pointer-events {\\n  opacity: 1 !important;\\n  pointer-events: all !important;\\n  background-color: white;\\n  z-index: 5; }\\n\\n.arrow-rotate {\\n  transform: rotate(180deg); }\\n\\n.show {\\n  transform: translateY(0%) !important; }\\n\\n:host([width-size=\\\"md\\\"]) .select {\\n  width: 9rem; }\\n\\n:host([width-size=\\\"lg\\\"]) .select {\\n  width: 12rem; }\\n\\n:host([height-size=\\\"md\\\"]) .select {\\n  height: 2.5rem; }\\n  :host([height-size=\\\"md\\\"]) .select .para,\\n  :host([height-size=\\\"md\\\"]) .select .option {\\n    font-size: 1.25rem; }\\n  :host([height-size=\\\"md\\\"]) .select .img {\\n    width: 20px; }\\n\\n:host([height-size=\\\"lg\\\"]) .select {\\n  height: 3.125rem; }\\n  :host([height-size=\\\"lg\\\"]) .select .para,\\n  :host([height-size=\\\"lg\\\"]) .select .option {\\n    font-size: 1.5rem; }\\n  :host([height-size=\\\"lg\\\"]) .select .img {\\n    width: 23px; }\\n\\n.tooltip {\\n  display: none;\\n  position: absolute;\\n  bottom: 0;\\n  right: 0;\\n  z-index: 1;\\n  opacity: 0.98;\\n  max-width: 27rem;\\n  font-size: 0.875rem;\\n  padding: 0.25rem;\\n  transform: translate(80%, 110%); }\\n\\n.detail {\\n  display: inline-block;\\n  font-size: 0.875rem;\\n  max-width: 36rem; }\\n\\n:host {\\n  display: inline-block; }\\n\");\n\n//# sourceURL=webpack://web-components/./assets/scss/select.scss?");
  
  /***/ }),
  
  /***/ "./assets/scss/table-filter.scss":
  /*!***************************************!*\
    !*** ./assets/scss/table-filter.scss ***!
    \***************************************/
  /*! namespace exports */
  /*! export default [provided] [no usage info] [missing usage info prevents renaming] */
  /*! other exports [not provided] [no usage info] */
  /*! runtime requirements: __webpack_exports__, __webpack_require__.r, __webpack_require__.d, __webpack_require__.* */
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  
  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (\"* {\\n  margin: 0;\\n  padding: 0;\\n  box-sizing: border-box;\\n  font-family: \\\"Quicksand\\\", sans-serif; }\\n  *:focus {\\n    outline: none; }\\n\\n.highlight {\\n  background-color: rgba(137, 228, 228, 0.527) !important; }\\n\\n.container {\\n  width: 23rem;\\n  height: 3.4rem;\\n  border: 2px solid black;\\n  display: flex;\\n  justify-content: space-evenly;\\n  align-items: center;\\n  flex-direction: column;\\n  border-radius: 0.5rem;\\n  padding-block: 2px; }\\n  .container .inputs {\\n    width: 23rem;\\n    height: 2.5rem;\\n    display: flex;\\n    justify-content: space-around;\\n    align-items: center; }\\n    .container .inputs .input {\\n      width: 5rem;\\n      height: 1.875rem;\\n      border: none;\\n      outline: none;\\n      padding-inline: 2px; }\\n    .container .inputs .header-options::part(select),\\n    .container .inputs .match-options::part(select) {\\n      border: none; }\\n    .container .inputs .match-options::part(select):focus-within,\\n    .container .inputs .header-options::part(select):focus-within {\\n      border-color: black; }\\n    .container .inputs .icon {\\n      width: 1.6rem;\\n      height: 1.875rem;\\n      cursor: pointer; }\\n  .container .labels {\\n    width: 23rem;\\n    height: 2.5rem;\\n    display: flex;\\n    justify-content: space-around;\\n    align-items: center; }\\n    .container .labels .column,\\n    .container .labels .operator {\\n      width: 6rem; }\\n    .container .labels .key {\\n      width: 5rem;\\n      padding-inline: 2px; }\\n    .container .labels .pad {\\n      width: 1.6rem; }\\n  .container .search {\\n    content: url(\\\"../assets/images/search.svg\\\"); }\\n\");\n\n//# sourceURL=webpack://web-components/./assets/scss/table-filter.scss?");
  
  /***/ }),
  
  /***/ "./assets/scss/table.scss":
  /*!********************************!*\
    !*** ./assets/scss/table.scss ***!
    \********************************/
  /*! namespace exports */
  /*! export default [provided] [no usage info] [missing usage info prevents renaming] */
  /*! other exports [not provided] [no usage info] */
  /*! runtime requirements: __webpack_exports__, __webpack_require__.r, __webpack_require__.d, __webpack_require__.* */
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  
  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (\"* {\\n  margin: 0;\\n  padding: 0;\\n  box-sizing: border-box;\\n  font-family: \\\"Quicksand\\\", sans-serif; }\\n  *:focus {\\n    outline: none; }\\n\\n.highlight {\\n  background-color: rgba(137, 228, 228, 0.527) !important; }\\n\\n.table-container {\\n  position: relative;\\n  width: 100%;\\n  height: 26rem;\\n  max-height: 26rem;\\n  overflow: auto;\\n  scrollbar-width: thin;\\n  scrollbar-color: #888 #f1f1f1; }\\n  .table-container::-webkit-scrollbar {\\n    width: 3px;\\n    height: 2px; }\\n  .table-container::-webkit-scrollbar-track {\\n    background-color: #f1f1f1; }\\n  .table-container::-webkit-scrollbar-thumb {\\n    background-color: #888; }\\n  .table-container::-webkit-scrollbar-thumb:hover {\\n    background-color: #555; }\\n  .table-container .table {\\n    border-spacing: 0px;\\n    border-collapse: collapse;\\n    position: absolute;\\n    top: 0;\\n    left: 0; }\\n    .table-container .table .thead,\\n    .table-container .table .tbody {\\n      width: 100%; }\\n    .table-container .table .tbody {\\n      height: max-content;\\n      max-height: 23rem; }\\n    .table-container .table .body-cell,\\n    .table-container .table .header-cell {\\n      min-width: 12rem;\\n      max-width: 12rem;\\n      height: 1.875rem;\\n      min-height: 1.875rem;\\n      background-color: inherit;\\n      text-align: center;\\n      word-wrap: break-word; }\\n    .table-container .table .header-cell {\\n      background-color: #02061a;\\n      color: #faf4e2; }\\n    .table-container .table .body-cell {\\n      padding: 5px; }\\n      .table-container .table .body-cell:focus {\\n        background-color: rgba(137, 166, 228, 0.719);\\n        transform: scale(1.05); }\\n\\n.for-serial-nos {\\n  min-width: 2rem !important;\\n  max-width: 2rem !important; }\\n  .for-serial-nos::after {\\n    content: \\\"\\\" !important; }\\n\\n.trash-button {\\n  width: 20px;\\n  height: 20px;\\n  user-select: none;\\n  cursor: pointer;\\n  content: url(\\\"../assets/images/delete.svg\\\"); }\\n\\n.tbody > tr:nth-of-type(odd) {\\n  background-color: white; }\\n\\n.tbody > tr:nth-of-type(even) {\\n  background-color: #f2f2f2; }\\n\\n.freeze-body-cell {\\n  position: sticky;\\n  left: 0;\\n  z-index: 2; }\\n\\n.freeze-trash {\\n  position: sticky;\\n  right: 0;\\n  z-index: 2; }\\n\\n.freeze-header-cell {\\n  position: sticky;\\n  top: 0;\\n  z-index: 3; }\\n\\n.left-cover-up {\\n  display: block;\\n  position: sticky;\\n  top: 0;\\n  left: 0;\\n  z-index: 4;\\n  min-width: 12rem;\\n  max-width: 12rem;\\n  height: 36.8px;\\n  text-align: center;\\n  background-color: #02061a; }\\n\\n.add-row {\\n  cursor: pointer;\\n  user-select: none;\\n  content: url(\\\"../assets/images/plus-circle-outline.svg\\\"); }\\n\\n.hide {\\n  display: none; }\\n\\n.asc-arrow {\\n  content: url(\\\"../assets/images/asc-arrow.svg\\\");\\n  vertical-align: bottom; }\\n\\n.desc-arrow {\\n  content: url(\\\"../assets/images/desc-arrow.svg\\\");\\n  vertical-align: bottom; }\\n\\n.wrapper {\\n  width: 100%;\\n  height: max-content; }\\n  .wrapper .filter-container {\\n    float: right;\\n    overflow-x: hidden;\\n    width: 23rem;\\n    height: max-content;\\n    display: flex;\\n    align-items: center;\\n    justify-content: space-between;\\n    margin-bottom: 2px; }\\n\\n.filter-icon {\\n  width: 25px;\\n  height: 25px;\\n  float: right;\\n  content: url(\\\"../assets/images/filter.svg\\\");\\n  cursor: pointer; }\\n\\n.filter-bar {\\n  float: right;\\n  margin-bottom: 2px; }\\n\\n.show-filter {\\n  transform: translateX(0%) !important;\\n  opacity: 1 !important; }\\n\\n:host([sortable]) .header-cell {\\n  cursor: pointer;\\n  user-select: none; }\\n\\n:host {\\n  display: block; }\\n\");\n\n//# sourceURL=webpack://web-components/./assets/scss/table.scss?");
  
  /***/ }),
  
  /***/ "./src/filter.js":
  /*!***********************!*\
    !*** ./src/filter.js ***!
    \***********************/
  /*! namespace exports */
  /*! exports [not provided] [no usage info] */
  /*! runtime requirements: __webpack_require__, __webpack_require__.r, __webpack_exports__, __webpack_require__.* */
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  
  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _assets_scss_filter_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../assets/scss/filter.scss */ \"./assets/scss/filter.scss\");\n\r\n\r\nclass Filter extends HTMLElement {\r\n  constructor() {\r\n    super();\r\n    this.template = document.createElement(\"template\");\r\n    this.styles = document.createElement(\"style\");\r\n    this.styles.appendChild(document.createTextNode(_assets_scss_filter_scss__WEBPACK_IMPORTED_MODULE_0__.default));\r\n    this.template.innerHTML = `\r\n    <div class=\"container\">\r\n      <input class=\"input\" part=\"input\"/>\r\n      <p class=\"match-text\" part=\"match-text\"></p>\r\n      <i class=\"icon up-search\" part=\"up-search\"></i>\r\n      <i class=\"icon down-search\" part=\"down-search\"></i>\r\n      <i class=\"icon close\" part=\"close\"></i>\r\n    </div>\r\n        `;\r\n\r\n    this.attachShadow({ mode: \"open\" });\r\n    this.shadowRoot.appendChild(this.styles);\r\n    this.shadowRoot.appendChild(this.template.content.cloneNode(true));\r\n    this.input = this.shadowRoot.querySelector(\".input\");\r\n    this.matchText = this.shadowRoot.querySelector(\".match-text\");\r\n    this.searchUp = this.shadowRoot.querySelector(\".up-search\");\r\n    this.searchDown = this.shadowRoot.querySelector(\".down-search\");\r\n    this.close = this.shadowRoot.querySelector(\".close\");\r\n    this.filteredIndex = 0;\r\n    this.setOnClickClose = this.setOnClickClose.bind(this);\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.input.addEventListener(\"change\", (event) => {\r\n      event.stopPropagation();\r\n      \r\n      this.filterData();\r\n\r\n      if (this.filteredData.length > 0) {\r\n        this.matchText.textContent = `${this.filteredIndex + 1}/${\r\n          this.filteredData.length\r\n        }`;\r\n        this.searchElement.querySelector(this.filteredData[0]).focus();\r\n      } else {\r\n        this.matchText.textContent = `0/0`;\r\n      }\r\n    });\r\n\r\n    this.setOnClickSearchUp();\r\n    this.setOnClickSearchDown();\r\n  }\r\n\r\n  setFilter(searchElement, data, idGenerator) {\r\n    this.searchElement = searchElement;\r\n    this.data = data;\r\n    this.idGenerator = idGenerator;\r\n    this.filterData();\r\n  }\r\n\r\n  setOnClickClose(callback) {\r\n    this.close.addEventListener(\"click\", (event) => {\r\n      event.stopPropagation();\r\n      event.stopImmediatePropagation();\r\n      callback();\r\n    });\r\n  }\r\n\r\n  setOnClickSearchUp() {\r\n    this.searchUp.addEventListener(\"click\", (event) => {\r\n      event.stopPropagation();\r\n      event.stopImmediatePropagation();\r\n      console.log(this.filteredIndex);\r\n      if (this.filteredData.length > 0) {\r\n        this.filteredIndex = this.filteredIndex + 1;\r\n        this.filteredIndex = this.filteredIndex % this.filteredData.length;\r\n        this.searchElement\r\n          .querySelector(this.filteredData[this.filteredIndex])\r\n          .focus();\r\n        this.matchText.textContent = `${this.filteredIndex + 1}/${\r\n          this.filteredData.length\r\n        }`;\r\n      } else {\r\n        this.matchText.textContent = `0/0`;\r\n      }\r\n    });\r\n  }\r\n\r\n  setOnClickSearchDown() {\r\n    this.searchDown.addEventListener(\"click\", (event) => {\r\n      event.stopPropagation();\r\n      event.stopImmediatePropagation();\r\n      console.log(this.filteredIndex);\r\n      if (this.filteredIndex > 0) {\r\n        if (this.filteredData.length > 0) {\r\n          this.filteredIndex =\r\n            (this.filteredIndex - 1) % this.filteredData.length;\r\n          this.searchElement\r\n            .querySelector(this.filteredData[this.filteredIndex])\r\n            .focus();\r\n          this.matchText.textContent = `${this.filteredIndex + 1}/${\r\n            this.filteredData.length\r\n          }`;\r\n        } else {\r\n          this.matchText.textContent = `0/0`;\r\n        }\r\n      } else {\r\n        this.filteredIndex = this.filteredData.length - 1;\r\n        this.searchElement\r\n          .querySelector(this.filteredData[this.filteredIndex])\r\n          .focus();\r\n        this.matchText.textContent = `${this.filteredIndex + 1}/${\r\n          this.filteredData.length\r\n        }`;\r\n      }\r\n    });\r\n  }\r\n\r\n  filterData() {\r\n    this.filteredData = [];\r\n    this.filteredIndex = 0;\r\n    this.data.forEach((row, rowIndex) => {\r\n      row.forEach((cell, cellIndex) => {\r\n        if (this.input.value.trim() !== \"\" && cell.includes(this.input.value)) {\r\n          const id = this.idGenerator(rowIndex, cellIndex);\r\n          this.filteredData.push(id);\r\n        }\r\n      });\r\n    });\r\n  }\r\n}\r\n\r\nwindow.customElements.get(\"vpr-filter\") ||\r\n  window.customElements.define(\"vpr-filter\", Filter);\r\n\n\n//# sourceURL=webpack://web-components/./src/filter.js?");
  
  /***/ }),
  
  /***/ "./src/select.js":
  /*!***********************!*\
    !*** ./src/select.js ***!
    \***********************/
  /*! namespace exports */
  /*! exports [not provided] [no usage info] */
  /*! runtime requirements: __webpack_require__, __webpack_require__.r, __webpack_exports__, __webpack_require__.* */
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  
  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _assets_scss_select_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../assets/scss/select.scss */ \"./assets/scss/select.scss\");\n\r\n\r\nconst attr = [\r\n  \"editable\",\r\n  \"border-type\",\r\n  \"border-color\",\r\n  \"border-width\",\r\n  \"border-radius\",\r\n  \"select-color\", \r\n  \"select-bg-color\",\r\n  \"options-color\",\r\n  \"options-bg-color\",\r\n  \"detail\",\r\n  \"tooltip\",\r\n];\r\n\r\nclass Select extends HTMLElement {\r\n\r\n  constructor() {\r\n    super();\r\n    this.template = document.createElement(\"template\");\r\n    this.styles = document.createElement(\"style\");\r\n    this.styles.appendChild(document.createTextNode(_assets_scss_select_scss__WEBPACK_IMPORTED_MODULE_0__.default));\r\n    this.template.innerHTML = `\r\n    <div class=\"container\">\r\n      <div class=\"select\" part=\"select\">\r\n        <input class=\"para\" part=\"para\" tabindex=\"-1\" readonly/>\r\n        <i class=\"img\" part=\"img\"></i>\r\n        <div class=\"options-box\">\r\n            <div class=\"options\" part=\"options\"></div>\r\n        </div>\r\n        <span class=\"tooltip\" part=\"tooltip\"></span>\r\n      </div>\r\n      <span class=\"detail\" part=\"detail\"></span>\r\n    </div>\r\n        `;\r\n\r\n    this.attachShadow({mode: \"open\"});\r\n    this.shadowRoot.appendChild(this.styles);\r\n    this.shadowRoot.appendChild(this.template.content.cloneNode(true));\r\n    this.select = this.shadowRoot.querySelector(\".select\");\r\n    this.para = this.shadowRoot.querySelector(\".select .para\");\r\n    this.image = this.shadowRoot.querySelector(\".select .img\");\r\n    this.optionsBox = this.shadowRoot.querySelector(\".select .options-box\");\r\n    this.options = this.shadowRoot.querySelector(\".options\");\r\n    this.detail = this.shadowRoot.querySelector(\".detail\");\r\n    this.tooltip = this.shadowRoot.querySelector(\".tooltip\");\r\n    this.optionsList = [];\r\n    this.currentOptionIndex = 0;\r\n  }\r\n\r\n  setAttrEditable() {\r\n    if(this.getAttribute(\"editable\") !== null) {\r\n      this.para.removeAttribute(\"readonly\");\r\n      this.para.style.cursor = \"text\";\r\n    }\r\n  }\r\n\r\n  setBorderType() {\r\n    if(this.getAttribute(\"border-type\") === \"all\") {\r\n      this.select.style.borderStyle = \"solid\";\r\n    }\r\n  }\r\n\r\n  setBorderColor() {\r\n    this.select.style.borderColor =\r\n      this.getAttribute(\"border-color\") || \"rgba(0, 0, 0, 1)\";\r\n  }\r\n\r\n  setBorderWidth() {\r\n    this.select.style.borderWidth = \r\n      this.getAttribute(\"border-width\") || \"2px\";\r\n  }\r\n\r\n  setBorderRadius() {\r\n    this.select.style.borderRadius = this.getAttribute(\"border-radius\") || \"0.5rem\";\r\n  }\r\n\r\n  setSelectColor() {\r\n    this.select.style.color = this.getAttribute(\"select-color\") || \"black\";\r\n  }\r\n\r\n  setSelectBackgroundColor() {\r\n    this.select.style.backgroundColor = this.getAttribute(\"bg-color\") || \"white\";\r\n  }\r\n\r\n  setOptionsColor() {\r\n    this.options.style.color = this.getAttribute(\"option-color\") || \"black\";\r\n  }\r\n\r\n  setOptionsBackgroundColor() {\r\n    this.options.style.backgroundColor = this.getAttribute(\"option-bg-color\") || \"white\";\r\n  }\r\n\r\n  onDetailChange() {\r\n    const detailText = this.getAttribute(\"detail\");\r\n    if (detailText !== null && detailText.trim() !== \"\") {\r\n      this.detail.textContent = detailText;\r\n      this.detail.style.display = \"inline-block\";\r\n      this.detail.style.width = \"max-content\";\r\n      this.detail.style.height = \"max-content\";\r\n      this.detail.style.paddingTop = \"0.125rem\";\r\n      this.detail.style.paddingLeft = \"0.16rem\";\r\n      this.detail.style.color = this.getAttribute(\"detail-color\") || \"#858587\";\r\n      this.detail.style.backgroundColor =\r\n        this.getAttribute(\"detail-bg-color\") || \"white\";\r\n    } else {\r\n      this.detail.style.display = \"none\";\r\n      this.detail.style.width = \"0px\";\r\n      this.detail.style.height = \"0px\";\r\n      this.detail.style.paddingTop = \"0px\";\r\n      this.detail.style.paddingLeft = \"0px\";\r\n    }\r\n  }\r\n\r\n  onTooltipChange() {\r\n    const tooltipText = this.getAttribute(\"tooltip\");\r\n    if (tooltipText !== null && tooltipText.trim() !== \"\") {\r\n      this.tooltip.textContent = this.getAttribute(\"tooltip\");\r\n      this.tooltip.style.width = \"max-content\";\r\n      this.tooltip.style.height = \"max-content\";\r\n      this.tooltip.style.color = this.getAttribute(\"tooltip-color\") || \"white\";\r\n      this.tooltip.style.backgroundColor =\r\n        this.getAttribute(\"tooltip-bg-color\") || \"black\";\r\n    } else {\r\n      this.tooltip.style.width = \"0px\";\r\n      this.tooltip.style.height = \"0px\";\r\n      this.tooltip.style.padding = \"0px\";\r\n    }\r\n  }\r\n\r\n  render() {\r\n    this.setAttrEditable();\r\n    this.setBorderType();\r\n    this.setBorderType();\r\n    this.setBorderWidth();\r\n    this.setBorderRadius();\r\n    this.onDetailChange();\r\n    this.onTooltipChange();\r\n  }\r\n\r\n  setOptions(optionsList, callback) {\r\n    this.optionsList = optionsList;\r\n    this.options.innerHTML = \"\";\r\n    let optionsString = \"\";\r\n\r\n    this.optionsList.forEach((option, index) => {\r\n      optionsString += `<p class=\"option\" tabindex=\"2\" id=\"option${index}\" part=\"option\">${option}</p>`;\r\n    });\r\n\r\n    this.options.innerHTML = optionsString;\r\n\r\n    this.optionElements = [];\r\n    const options = this.shadowRoot.querySelectorAll('.option');\r\n    options.forEach(option => {\r\n      this.optionElements.push(option);\r\n    });\r\n\r\n    this.setOnOptionClick(callback);\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.render();\r\n    \r\n    this.select.addEventListener(\"click\", (event) => {\r\n      event.stopPropagation();\r\n      if (this.options.classList.contains(\"show\")) {\r\n        this.options.classList.remove(\"show\");\r\n        this.image.classList.remove(\"arrow-rotate\");\r\n        this.optionsBox.classList.remove(\"disable-pointer-events\");\r\n      } else {\r\n        this.options.classList.add(\"show\");\r\n        this.image.classList.add(\"arrow-rotate\");\r\n        this.optionsBox.classList.add(\"disable-pointer-events\");\r\n      }\r\n    });\r\n\r\n    this.select.addEventListener('keydown', (event) => {\r\n      event.stopPropagation();\r\n      if(event.key === \"Enter\") { // Enter\r\n        event.preventDefault();\r\n        this.options.classList.remove(\"show\");\r\n        this.image.classList.remove(\"arrow-rotate\");\r\n        this.optionsBox.classList.remove(\"disable-pointer-events\");\r\n      }\r\n\r\n      if(this.getAttribute('onSpaceToggle') !== null) {\r\n        if(event.key === \" \" || event.key === \"Spacebar\") { // Space\r\n          event.preventDefault();\r\n          this.para.focus();\r\n          if (this.options.classList.contains(\"show\")) {\r\n            this.options.classList.remove(\"show\");\r\n            this.image.classList.remove(\"arrow-rotate\");\r\n            this.optionsBox.classList.remove(\"disable-pointer-events\");\r\n          } else {\r\n            this.options.classList.add(\"show\");\r\n            this.image.classList.add(\"arrow-rotate\");\r\n            this.optionsBox.classList.add(\"disable-pointer-events\");\r\n          }\r\n        } \r\n      }\r\n    });\r\n\r\n    this.select.addEventListener('keydown', (event) => {\r\n      if(event.key === \"Escape\" || event.key === \"Esc\") { // Escape\r\n        this.options.classList.remove(\"show\");\r\n        this.image.classList.remove(\"arrow-rotate\");\r\n        this.optionsBox.classList.remove(\"disable-pointer-events\");\r\n      } else if(event.key === \"ArrowDown\" || event.key === \"Down\") {\r\n        event.preventDefault();\r\n        const optionElement = this.shadowRoot.querySelector(`#option${this.currentOptionIndex}`);\r\n        optionElement.focus();\r\n      }\r\n    });\r\n\r\n    window.addEventListener('click', (event) => {\r\n      event.stopPropagation();\r\n      this.options.classList.remove(\"show\");\r\n      this.image.classList.remove(\"arrow-rotate\");\r\n      this.optionsBox.classList.remove(\"disable-pointer-events\");\r\n    });\r\n  }\r\n\r\n  static get observedAttributes() {\r\n    return attr;\r\n  }\r\n\r\n  attributeChangedCallback(name, oldValue, newValue) {\r\n    switch (name) {\r\n      case \"editable\":\r\n        this.setAttrEditable();\r\n        break;\r\n      case \"border-type\":\r\n        this.setBorderType();\r\n        break;\r\n      case \"border-color\":\r\n        this.setBorderColor();\r\n        break;\r\n      case \"border-width\":\r\n        this.setBorderWidth();\r\n        break;\r\n      case \"border-radius\":\r\n        this.setBorderRadius();\r\n        break;\r\n      case \"detail\":\r\n        this.onDetailChange();\r\n        break;\r\n      case \"tooltip\":\r\n        this.onTooltipChange();\r\n        break;\r\n    }\r\n  }\r\n\r\n  setOnOptionClick(callback) {\r\n    this.optionElements.forEach((option, index) => {\r\n      option.addEventListener('click', (event) => {\r\n        this.para.value = option.textContent;\r\n        this.scrollOptionsTo(index);\r\n        if(callback !== undefined) {\r\n          callback(event);\r\n        }\r\n      });\r\n\r\n      option.addEventListener('keydown', (event) => {\r\n        event.preventDefault();\r\n        const totalOptionElements = this.optionElements.length;\r\n        if(event.key === \"ArrowUp\" || event.key === \"Up\") {\r\n          event.stopPropagation();\r\n          const optionIndex = (totalOptionElements + index - 1) % totalOptionElements;\r\n          const newOptionId = `#option${optionIndex}`;\r\n          this.shadowRoot.querySelector(newOptionId).focus();\r\n        } else if(event.key === \"ArrowDown\" || event.key === \"Down\") {\r\n          event.stopPropagation();\r\n          const optionIndex = (totalOptionElements + index + 1) % totalOptionElements;\r\n          const newOptionId = `#option${optionIndex}`;\r\n          this.shadowRoot.querySelector(newOptionId).focus();\r\n        } else if(event.key === \"Enter\") {\r\n          this.para.value = option.textContent;\r\n          this.scrollOptionsTo(index);\r\n          if(callback !== undefined) {\r\n            callback(event);\r\n          }\r\n        }\r\n      });\r\n    });\r\n\r\n    this.para.addEventListener('keyup', (event) => {\r\n      if(event.key === \"Enter\") { // Enter\r\n        event.preventDefault();\r\n        if(this.optionsList.indexOf(this.para.value) !== -1) {\r\n          if(callback !== undefined) {\r\n            callback(event);\r\n          }\r\n        } else {\r\n          this.para.value = this.optionsList[this.currentOptionIndex];\r\n        }\r\n      } \r\n    });\r\n  }\r\n\r\n  scrollOptionsTo(index) {\r\n    const option = this.optionElements[0];\r\n    const optionHeight = parseFloat(getComputedStyle(option).height.replace('px', ''));\r\n    setTimeout(() => {\r\n      this.options.scrollTo({\r\n        top: index * optionHeight,\r\n        behavior: 'smooth',\r\n      });\r\n    }, 100);\r\n    \r\n    this.currentOptionIndex = index;\r\n  }\r\n\r\n  setDefaultOption(index) {\r\n    this.para.value = this.optionsList[index];\r\n    this.scrollOptionsTo(index);\r\n  }\r\n\r\n  get selectedOption() {\r\n    return this.para.value;\r\n  }\r\n\r\n  get selectedOptionIndex() {\r\n    return this.optionsList.indexOf(this.para.value);\r\n  }\r\n}\r\n\r\nwindow.customElements.get(\"vpr-select\") || window.customElements.define(\"vpr-select\", Select);\n\n//# sourceURL=webpack://web-components/./src/select.js?");
  
  /***/ }),
  
  /***/ "./src/table-filter.js":
  /*!*****************************!*\
    !*** ./src/table-filter.js ***!
    \*****************************/
  /*! namespace exports */
  /*! exports [not provided] [no usage info] */
  /*! runtime requirements: __webpack_require__, __webpack_require__.r, __webpack_exports__, __webpack_require__.* */
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  
  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _assets_scss_table_filter_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../assets/scss/table-filter.scss */ \"./assets/scss/table-filter.scss\");\n/* harmony import */ var _select__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./select */ \"./src/select.js\");\n\r\n\r\n\r\nconst matchOptionsArr = ['Contains', 'Equals', '<', '>', '==', '>=', '<='];\r\n\r\nclass TableFilter extends HTMLElement {\r\n  constructor() {\r\n    super();\r\n    this.template = document.createElement(\"template\");\r\n    this.styles = document.createElement(\"style\");\r\n    this.styles.appendChild(document.createTextNode(_assets_scss_table_filter_scss__WEBPACK_IMPORTED_MODULE_0__.default));\r\n    this.template.innerHTML = `\r\n    <div class=\"container\">\r\n        <div class=\"labels\">\r\n            <div class=\"column\">Column</div>\r\n            <div class=\"operator\">Operator</div>\r\n            <div class=\"key\">Value</div>\r\n            <div class=\"pad\"></div>\r\n        </div>\r\n        <div class=\"inputs\">\r\n            <vpr-select class=\"header-options\"></vpr-select>\r\n            <vpr-select class=\"match-options\"></vpr-select>\r\n            <input class=\"input\" part=\"input\"/>\r\n            <i class=\"icon search\" part=\"search\"></i>\r\n        </div>\r\n    </div>\r\n        `;\r\n\r\n    this.attachShadow({ mode: \"open\" });\r\n    this.shadowRoot.appendChild(this.styles);\r\n    this.shadowRoot.appendChild(this.template.content.cloneNode(true));\r\n    this.input = this.shadowRoot.querySelector(\".input\");\r\n    this.matchOptions = this.shadowRoot.querySelector(\".match-options\");\r\n    this.headerOptions = this.shadowRoot.querySelector(\".header-options\");\r\n    this.search = this.shadowRoot.querySelector(\".search\");\r\n    this.filteredIndex = 0;\r\n    this.setSearchElement = this.setSearchElement.bind(this);\r\n    this.setFilter = this.setFilter.bind(this);\r\n    this.setData = this.setData.bind(this);\r\n  }\r\n\r\n  setSearchElement(searchElement) {\r\n    this.searchElement = searchElement;\r\n  }\r\n\r\n  setData(data) {\r\n    this.data = data;\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.matchOptions.setOptions(matchOptionsArr);\r\n    this.search.addEventListener('click', this.setFilter);\r\n  }\r\n\r\n  setHeaderOptions(headerOptionsArr) {\r\n    this.headerOptions.setOptions(headerOptionsArr);\r\n  }\r\n\r\n  setFilter(event) {\r\n    event.stopPropagation();\r\n    this.filteredIndices = [];\r\n    const matchOption = this.matchOptions.selectedOption;\r\n    this.data.forEach((row, rowIndex) => {\r\n        row.forEach((cell, cellIndex) => {\r\n          const index =  this.headerOptions.selectedOptionIndex;\r\n          let value = false;\r\n          if(index !== -1 && cellIndex === index) {\r\n              switch(matchOption) {\r\n                  case 'Contains':\r\n                    value = this.stringContains(this.input.value.toLowerCase().trim(), cell.toLowerCase().trim());\r\n                    break;\r\n                  case 'Equals':\r\n                    value = this.stringEquals(this.input.value.toLowerCase().trim(), cell.toLowerCase().trim());\r\n                    break;\r\n                  case '==':\r\n                    value = this.numEq(this.input.value.toLowerCase().trim(), cell.toLowerCase().trim());\r\n                    break;\r\n                  case '<=':\r\n                    value = this.numLe(this.input.value.toLowerCase().trim(), cell.toLowerCase().trim());\r\n                    break;\r\n                  case '>=':\r\n                    value = this.numGe(this.input.value.toLowerCase().trim(), cell.toLowerCase().trim());\r\n                    break;\r\n                  case '<':\r\n                    value = this.numLt(this.input.value.toLowerCase().trim(), cell.toLowerCase().trim());\r\n                    break;\r\n                  case '>':\r\n                    value = this.numGt(this.input.value.toLowerCase().trim(), cell.toLowerCase().trim());\r\n                    break;\r\n              }\r\n          }\r\n\r\n          if(value) {\r\n              this.filteredIndices.push(rowIndex);\r\n          }\r\n        });\r\n    });\r\n    if(this.filteredIndices.length !== 0) {\r\n        this.searchElement.setTableBody(this.data, true, this.filteredIndices);\r\n    } else {\r\n        this.searchElement.setTableBody(this.data, false);\r\n    }\r\n  }\r\n\r\n  stringContains(inputValue, cellValue) {\r\n    return cellValue.includes(inputValue);\r\n  }\r\n\r\n  stringEquals(inputValue, cellValue) {\r\n    return cellValue === inputValue;\r\n  }\r\n\r\n  numEq(inputValue, cellValue) {\r\n    return Number(cellValue) === Number(inputValue);\r\n  }\r\n\r\n  numLt(inputValue, cellValue) {\r\n    return Number(cellValue) < Number(inputValue);\r\n  }\r\n\r\n  numGt(inputValue, cellValue) {\r\n    return Number(cellValue) > Number(inputValue);\r\n  }\r\n\r\n  numLe(inputValue, cellValue) {\r\n    return Number(cellValue) <= Number(inputValue);\r\n  }\r\n\r\n  numGe(inputValue, cellValue) {\r\n    return Number(cellValue) >= Number(inputValue);\r\n  }\r\n}\r\n\r\nwindow.customElements.get(\"vpr-table-filter\") ||\r\n  window.customElements.define(\"vpr-table-filter\", TableFilter);\r\n\n\n//# sourceURL=webpack://web-components/./src/table-filter.js?");
  
  /***/ }),
  
  /***/ "./src/table.js":
  /*!**********************!*\
    !*** ./src/table.js ***!
    \**********************/
  /*! namespace exports */
  /*! exports [not provided] [no usage info] */
  /*! runtime requirements: __webpack_require__, __webpack_require__.r, __webpack_exports__, __webpack_require__.* */
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  
  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _assets_scss_table_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../assets/scss/table.scss */ \"./assets/scss/table.scss\");\n/* harmony import */ var _table_filter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./table-filter */ \"./src/table-filter.js\");\n/* harmony import */ var _filter__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./filter */ \"./src/filter.js\");\n\r\n\r\n\r\n\r\nclass Table extends HTMLElement {\r\n  constructor() {\r\n    super();\r\n    this.template = document.createElement(\"template\");\r\n    this.styles = document.createElement(\"style\");\r\n    this.styles.appendChild(document.createTextNode(_assets_scss_table_scss__WEBPACK_IMPORTED_MODULE_0__.default));\r\n\r\n    const filterTable = `\r\n    <div class=\"wrapper\">\r\n      <vpr-table-filter class=\"filter-bar\" part=\"filter-bar\"></vpr-table-filter>\r\n      <div class=\"table-container\">\r\n        <span class=\"for-serial-nos left-cover-up hide\" part=\"add-button\"></span>\r\n        <table class=\"table\" part=\"table\" cellspacing=\"0\" cellpadding=\"0\">\r\n            <thead class=\"thead\" part=\"thead\"></thead>\r\n            <tbody class=\"tbody\" part=\"tbody\"></tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n    `;\r\n\r\n    const table = `\r\n    <div class=\"table-container\">\r\n      <span class=\"for-serial-nos left-cover-up hide\" part=\"add-button\"></span>\r\n      <table class=\"table\" part=\"table\" cellspacing=\"0\" cellpadding=\"0\">\r\n        <thead class=\"thead\" part=\"thead\"></thead>\r\n        <tbody class=\"tbody\" part=\"tbody\"></tbody>\r\n      </table>\r\n    </div>\r\n    `;\r\n\r\n    if (this.getAttribute(\"filterable\") !== null) {\r\n      this.template.innerHTML = filterTable;\r\n    } else {\r\n      this.template.innerHTML = table;\r\n    }\r\n\r\n    this.attachShadow({ mode: \"open\" });\r\n    this.shadowRoot.appendChild(this.styles);\r\n    this.shadowRoot.appendChild(this.template.content.cloneNode(true));\r\n    this.table = this.shadowRoot.querySelector(\".table\");\r\n    this.thead = this.shadowRoot.querySelector(\".thead\");\r\n    this.tbody = this.shadowRoot.querySelector(\".tbody\");\r\n    this.leftCoverUp = this.shadowRoot.querySelector(\".left-cover-up\");\r\n    this.filterIcon = this.shadowRoot.querySelector(\".filter-icon\");\r\n    this.filterBar = this.shadowRoot.querySelector(\".filter-bar\");\r\n    this.handleKeyPressDown = this.handleKeyPressDown.bind(this);\r\n    this.addNewRow = this.addNewRow.bind(this);\r\n    this.deleteARow = this.deleteARow.bind(this);\r\n    this.setTableBody = this.setTableBody.bind(this);\r\n    this.setTableHeader = this.setTableHeader.bind(this);\r\n    this.setTable = this.setTable.bind(this);\r\n    this.setOnAddRow = this.setOnAddRow.bind(this);\r\n    this.setOnDeleteRow = this.setOnDeleteRow.bind(this);\r\n    this.setOnUpdateCell = this.setOnUpdateCell.bind(this);\r\n    this.setDefaultRowValue = this.setDefaultRowValue.bind(this);\r\n    this.defaultRowValue = [];\r\n  }\r\n\r\n  setOnAddRow(callback) {\r\n    this.addRowCallback = callback;\r\n  }\r\n\r\n  setOnDeleteRow(callback) {\r\n    this.deleteRowCallback = callback;\r\n  }\r\n\r\n  setOnUpdateCell(callback) {\r\n    this.updateCellCallback = callback;\r\n  }\r\n\r\n  setDefaultRowValue(defaultRowValue) {\r\n    this.defaultRowValue = defaultRowValue;\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.leftCoverUp.addEventListener(\"click\", this.addNewRow);\r\n    if(this.filterBar !== undefined && this.filterBar !== null) {\r\n      this.filterBar.setSearchElement(this);\r\n    }\r\n  }\r\n\r\n  setHeightForCoverUp() {\r\n    const thElelment = this.shadowRoot.querySelector(\".header-cell\");\r\n    const height = getComputedStyle(thElelment).getPropertyValue(\"height\");\r\n    this.leftCoverUp.style.height = height;\r\n    // this.rightCoverUp.style.height = height;\r\n  }\r\n\r\n  setHeightForTableContainer() {\r\n    const tableContainer = this.shadowRoot.querySelector(\".table-container\");\r\n    const tableHeight = getComputedStyle(this.table).getPropertyValue(\"height\");\r\n    tableContainer.style.height = tableHeight;\r\n  }\r\n\r\n  setTableHeader(header) {\r\n    let theadStr = `<tr class=\"header-row\" part=\"header-row\">`;\r\n\r\n    if (this.getAttribute(\"show-row-num\") !== null) {\r\n      theadStr += `<th class=\"header-cell for-serial-nos freeze-header-cell\" part=\"header-cell\"></th>`;\r\n      this.leftCoverUp.classList.remove(\"hide\");\r\n    }\r\n\r\n    header.forEach((headerText, index) => {\r\n      theadStr += `<th class=\"header-cell freeze-header-cell\" part=\"header-cell\">${headerText}<i part=\"sort-arrow\"></i></th>`;\r\n      this.defaultRowValue.push(`Body ${index}`);\r\n    });\r\n\r\n    if (this.getAttribute(\"editable\") !== null) {\r\n      theadStr += `<th class=\"header-cell for-serial-nos freeze-header-cell\" part=\"header-cell\"></th>`;\r\n      this.leftCoverUp.classList.remove(\"hide\");\r\n      this.leftCoverUp.classList.add(\"add-row\");\r\n    }\r\n\r\n    theadStr += `</tr>`;\r\n\r\n    this.thead.innerHTML = theadStr;\r\n    this.colLength = header.length;\r\n\r\n    this.setHeightForCoverUp();\r\n    if (this.getAttribute(\"sortable\") !== null) {\r\n      this.setOnClickOnHeader();\r\n    }\r\n\r\n    if (this.getAttribute(\"filterable\") !== null) {\r\n      this.filterBar.setHeaderOptions(header);\r\n    }\r\n  }\r\n\r\n  setTableBody(body, filter = false, filterIndices = []) {\r\n    if (this.bodyData === undefined) {\r\n      this.bodyData = [...body];\r\n    }\r\n\r\n    let tbodyStr = \"\";\r\n    let i = 0;\r\n    this.bodyData.forEach((row, rowIndex) => {\r\n      if (filter) {\r\n        if (filterIndices[i] === rowIndex) {\r\n          tbodyStr += `<tr id=\"r${rowIndex}\" class=\"body-row\" part=\"body-row\">`;\r\n\r\n          if (this.getAttribute(\"show-row-num\") !== null) {\r\n            tbodyStr += `<td class=\"body-cell for-serial-nos freeze-body-cell\" part=\"body-cell\">${\r\n              rowIndex + 1\r\n            }</td>`;\r\n          }\r\n\r\n          row.forEach((cellText, colIndex) => {\r\n            tbodyStr += `<td id=\"r${rowIndex}c${colIndex}\" class=\"body-cell\" part=\"body-cell\" ${\r\n              this.getAttribute(\"editable\") === null ? \"\" : \"contenteditable\"\r\n            }>${cellText}</td>`;\r\n          });\r\n\r\n          if (this.getAttribute(\"editable\") !== null) {\r\n            tbodyStr += `<td class=\"body-cell for-serial-nos freeze-trash\" id=\"trash-${rowIndex}\" part=\"body-cell\"><i class=\"trash-button\" id=\"i-${rowIndex}\" part=\"trash-button\"></i></td>`;\r\n          }\r\n\r\n          tbodyStr += `</tr>`;\r\n          i++;\r\n        }\r\n      } else {\r\n        tbodyStr += `<tr id=\"r${rowIndex}\" class=\"body-row\" part=\"body-row\">`;\r\n\r\n        if (this.getAttribute(\"show-row-num\") !== null) {\r\n          tbodyStr += `<td class=\"body-cell for-serial-nos freeze-body-cell\" part=\"body-cell\">${\r\n            rowIndex + 1\r\n          }</td>`;\r\n        }\r\n\r\n        row.forEach((cellText, colIndex) => {\r\n          tbodyStr += `<td id=\"r${rowIndex}c${colIndex}\" class=\"body-cell\" part=\"body-cell\" ${\r\n            this.getAttribute(\"editable\") === null ? \"\" : \"contenteditable\"\r\n          }>${cellText}</td>`;\r\n        });\r\n\r\n        if (this.getAttribute(\"editable\") !== null) {\r\n          tbodyStr += `<td class=\"body-cell for-serial-nos freeze-trash\" id=\"trash-${rowIndex}\" part=\"body-cell\"><i class=\"trash-button\" id=\"i-${rowIndex}\" part=\"trash-button\"></i></td>`;\r\n        }\r\n\r\n        tbodyStr += `</tr>`;\r\n      }\r\n    });\r\n\r\n    this.tbody.innerHTML = tbodyStr;\r\n    \r\n    this.setInputEventOnBodyCells();\r\n    this.setDeleteRowOnTrash();\r\n    this.setHeightForTableContainer();\r\n\r\n    if(filter) {\r\n      this.rowLength = filterIndices.length;\r\n      this.setArrowKeyEvents(true, filterIndices);\r\n    } else {\r\n      this.rowLength = this.bodyData.length;\r\n      this.setArrowKeyEvents();\r\n    }\r\n\r\n    if(this.filterBar !== undefined && this.filterBar !== null) {\r\n      this.filterBar.setData(this.bodyData);\r\n    }\r\n  }\r\n\r\n  setTable(header, body) {\r\n    this.setTableHeader(header);\r\n    this.setTableBody(body);\r\n  }\r\n\r\n  setArrowKeyEvents(filter, filterIndices) {\r\n    const cells = this.shadowRoot.querySelectorAll(\".body-cell\");\r\n    cells.forEach((cell) => {\r\n      cell.addEventListener(\"keydown\", (event) => this.handleKeyPressDown(event, filter, filterIndices));\r\n    });\r\n  }\r\n\r\n  setDeleteRowOnTrash() {\r\n    const trashElements = this.shadowRoot.querySelectorAll(\".freeze-trash\");\r\n    const trashIconElements = this.shadowRoot.querySelectorAll(\".trash-button\");\r\n\r\n    trashElements.forEach((trashElement, index) => {\r\n      trashElement.addEventListener(\"click\", (event) => {\r\n        index = parseInt(trashElement.id.slice(6));\r\n        this.deleteARow(event, index);\r\n      });\r\n    });\r\n\r\n    trashIconElements.forEach((trashIconElement, index) => {\r\n      trashIconElement.addEventListener(\"click\", (event) => {\r\n        index = parseInt(trashIconElement.id.slice(2));\r\n        this.deleteARow(event, index);\r\n      });\r\n    });\r\n  }\r\n\r\n  setInputEventOnBodyCells() {\r\n    const cells = this.shadowRoot.querySelectorAll(\".body-cell\");\r\n    cells.forEach((cell) => {\r\n      cell.addEventListener(\"input\", (event) => {\r\n        event.stopPropagation();\r\n        const rowIndex = parseInt(\r\n          event.target.id.substring(1, event.target.id.indexOf(\"c\"))\r\n        );\r\n        const cellIndex = parseInt(\r\n          event.target.id.substring(event.target.id.indexOf(\"c\") + 1)\r\n        );\r\n        const oldValue = this.bodyData[rowIndex][cellIndex];\r\n        const newValue = cell.textContent;\r\n\r\n        this.bodyData[rowIndex][cellIndex] = cell.textContent;\r\n\r\n        if(this.updateCellCallback !== undefined) { \r\n          this.updateCellCallback(rowIndex, cellIndex, oldValue, newValue);\r\n        }\r\n      });\r\n    });\r\n  }\r\n\r\n  // onKeyPressDown with ctrl\r\n  handleKeyPressDown(event, filter = false, filterIndices) {\r\n    let currentId = event.target.id;\r\n    let rowId = event.target.parentNode.id.slice(1);\r\n    let colId = currentId.substring(currentId.indexOf(\"c\") + 1);\r\n    if (event.ctrlKey && event.key === \"ArrowLeft\") {\r\n      // left\r\n      event.stopPropagation();\r\n      let colNo = this.leftKey(this.colLength, colId);\r\n      let newId = \"r\" + rowId + \"c\" + colNo;\r\n      this.shadowRoot.querySelector(`#${newId}`).focus();\r\n    } else if (event.ctrlKey && event.key === \"ArrowUp\") {\r\n      // up\r\n      event.stopPropagation();\r\n      let rowNo;\r\n      if(filter) {\r\n        rowNo = (this.rowLength + filterIndices.indexOf(parseInt(rowId)) - 1) % this.rowLength;\r\n        rowNo = filterIndices[rowNo];\r\n      } else {\r\n        rowNo = this.upKey(this.rowLength, rowId);\r\n      }\r\n      let newId = \"r\" + rowNo + \"c\" + colId;\r\n      this.shadowRoot.querySelector(`#${newId}`).focus();\r\n    } else if (event.ctrlKey && event.key === \"ArrowRight\") {\r\n      // right\r\n      event.stopPropagation();\r\n      let colNo = this.rightKey(this.colLength, colId);\r\n      let newId = \"r\" + rowId + \"c\" + colNo;\r\n      this.shadowRoot.querySelector(`#${newId}`).focus();\r\n    } else if (event.ctrlKey && event.key === \"ArrowDown\") {\r\n      // down\r\n      event.stopPropagation();\r\n      let rowNo;\r\n      if(filter) {\r\n        rowNo = (this.rowLength + filterIndices.indexOf(parseInt(rowId)) + 1) % this.rowLength;\r\n        rowNo = filterIndices[rowNo];\r\n      } else {\r\n        rowNo = this.downKey(this.rowLength, rowId);\r\n      }\r\n      let newId = \"r\" + rowNo + \"c\" + colId;\r\n      this.shadowRoot.querySelector(`#${newId}`).focus();\r\n    } else if (event.ctrlKey && event.shiftKey && event.key === \"Enter\") {\r\n      // insert row before\r\n      event.stopPropagation();\r\n      this.insertNewRow(parseInt(rowId, 10));\r\n    } else if (event.ctrlKey && event.key === \"Enter\") {\r\n      // insert row after\r\n      event.stopPropagation();\r\n      this.insertNewRow(parseInt(rowId, 10) + 1);\r\n    }\r\n  }\r\n\r\n  // Formula when ctrl + upArrow is pressed\r\n  upKey(totalRows, rowNo) {\r\n    rowNo = parseInt(rowNo, 10);\r\n    let newRowNo = (totalRows + (rowNo - 1)) % totalRows;\r\n    return newRowNo;\r\n  }\r\n\r\n  // Formula when ctrl + downArrow is pressed\r\n  downKey(totalRows, rowNo) {\r\n    rowNo = parseInt(rowNo, 10);\r\n    let newRowNo = (totalRows + (rowNo + 1)) % totalRows;\r\n    return newRowNo;\r\n  }\r\n\r\n  // Formula when ctrl + leftArrow is pressed\r\n  leftKey(totalCols, colNo) {\r\n    colNo = parseInt(colNo, 10);\r\n    let newColNo = (totalCols + (colNo - 1)) % totalCols;\r\n    return newColNo;\r\n  }\r\n\r\n  // Formula when ctrl + rightArrow is pressed\r\n  rightKey(totalCols, colNo) {\r\n    colNo = parseInt(colNo, 10);\r\n    let newColNo = (totalCols + (colNo + 1)) % totalCols;\r\n    return newColNo;\r\n  }\r\n\r\n  insertNewRow(rowIndex) {\r\n    let row = [];\r\n    for (let i = 0; i < this.colLength; i++) row[i] = this.defaultRowValue[i];\r\n    this.bodyData.splice(rowIndex, 0, row);\r\n    this.setTableBody(this.bodyData);\r\n    this.shadowRoot.querySelector(`#r${rowIndex}c0`).focus();\r\n    \r\n    if(this.addRowCallback !== undefined) {\r\n      this.addRowCallback(row, rowIndex);\r\n    }\r\n  }\r\n\r\n  addNewRow(event) {\r\n    event.stopPropagation();\r\n    let row = [];\r\n    for (let i = 0; i < this.colLength; i++) row[i] = this.defaultRowValue[i];\r\n    this.bodyData.push(row);\r\n    this.setTableBody(this.bodyData);\r\n    this.shadowRoot.querySelector(`#r${this.rowLength - 1}c0`).focus();\r\n\r\n    if(this.addRowCallback !== undefined) {\r\n      this.addRowCallback(row, this.rowLength - 1);\r\n    }\r\n  }\r\n\r\n  deleteARow(event, index) {\r\n    event.stopPropagation();\r\n    const deletedRow = this.bodyData.splice(index, 1);\r\n    this.setTableBody(this.bodyData);\r\n    \r\n    if(this.deleteRowCallback !== undefined) {\r\n      this.deleteRowCallback(index, deletedRow);\r\n    }\r\n  }\r\n\r\n  sortTable(index, order) {\r\n    if (order === \"ascending\") {\r\n      this.bodyData.sort((arr1, arr2) => {\r\n        return arr1[index].localeCompare(arr2[index]);\r\n      });\r\n    } else if (order === \"descending\") {\r\n      this.bodyData.sort((arr1, arr2) => {\r\n        return arr2[index].localeCompare(arr1[index]);\r\n      });\r\n    }\r\n  }\r\n\r\n  setOnClickOnHeader() {\r\n    const headers = this.shadowRoot.querySelectorAll(\".header-cell\");\r\n    this.currentSortCol = this.shadowRoot.querySelector(\".header-cell i\");\r\n    let order = \"\";\r\n    headers.forEach((header, index) => {\r\n      header.addEventListener(\"click\", (event) => {\r\n        event.stopPropagation();\r\n\r\n        const sortArrow = header.firstElementChild;\r\n        if (this.currentSortCol !== sortArrow) {\r\n          this.currentSortCol.classList.remove(\"asc-arrow\");\r\n          this.currentSortCol.classList.remove(\"desc-arrow\");\r\n          this.currentSortCol = sortArrow;\r\n        }\r\n\r\n        if (\r\n          sortArrow.classList.length === 0 ||\r\n          sortArrow.classList.contains(\"desc-arrow\")\r\n        ) {\r\n          sortArrow.classList.remove(\"desc-arrow\");\r\n          sortArrow.classList.add(\"asc-arrow\");\r\n          order = \"ascending\";\r\n        } else if (sortArrow.classList.contains(\"asc-arrow\")) {\r\n          sortArrow.classList.remove(\"asc-arrow\");\r\n          sortArrow.classList.add(\"desc-arrow\");\r\n          order = \"descending\";\r\n        }\r\n\r\n        if (index > 0 && index <= this.colLength) {\r\n          this.sortTable(index - 1, order);\r\n          this.setTableBody();\r\n        }\r\n      });\r\n    });\r\n  }\r\n}\r\n\r\nwindow.customElements.get(\"vpr-table\") ||\r\n  window.customElements.define(\"vpr-table\", Table);\r\n\n\n//# sourceURL=webpack://web-components/./src/table.js?");
  
  /***/ })
  
  /******/ 	});
  /************************************************************************/
  /******/ 	// The module cache
  /******/ 	var __webpack_module_cache__ = {};
  /******/ 	
  /******/ 	// The require function
  /******/ 	function __webpack_require__(moduleId) {
  /******/ 		// Check if module is in cache
  /******/ 		if(__webpack_module_cache__[moduleId]) {
  /******/ 			return __webpack_module_cache__[moduleId].exports;
  /******/ 		}
  /******/ 		// Create a new module (and put it into the cache)
  /******/ 		var module = __webpack_module_cache__[moduleId] = {
  /******/ 			// no module.id needed
  /******/ 			// no module.loaded needed
  /******/ 			exports: {}
  /******/ 		};
  /******/ 	
  /******/ 		// Execute the module function
  /******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  /******/ 	
  /******/ 		// Return the exports of the module
  /******/ 		return module.exports;
  /******/ 	}
  /******/ 	
  /************************************************************************/
  /******/ 	/* webpack/runtime/define property getters */
  /******/ 	(() => {
  /******/ 		// define getter functions for harmony exports
  /******/ 		__webpack_require__.d = (exports, definition) => {
  /******/ 			for(var key in definition) {
  /******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
  /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
  /******/ 				}
  /******/ 			}
  /******/ 		};
  /******/ 	})();
  /******/ 	
  /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
  /******/ 	(() => {
  /******/ 		__webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)
  /******/ 	})();
  /******/ 	
  /******/ 	/* webpack/runtime/make namespace object */
  /******/ 	(() => {
  /******/ 		// define __esModule on exports
  /******/ 		__webpack_require__.r = (exports) => {
  /******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  /******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  /******/ 			}
  /******/ 			Object.defineProperty(exports, '__esModule', { value: true });
  /******/ 		};
  /******/ 	})();
  /******/ 	
  /************************************************************************/
  /******/ 	// startup
  /******/ 	// Load entry module
  /******/ 	__webpack_require__("./src/table.js");
  /******/ 	// This entry module used 'exports' so it can't be inlined
  /******/ })()
  ;