[Summary view] [Print] [Text view]

   1  function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
   2  
   3  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
   4  
   5  function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
   6  
   7  function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
   8  
   9  function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
  10  
  11  function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
  12  
  13  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
  14  
  15  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
  16  
  17  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
  18  
  19  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
  20  
  21  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  22  
  23  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
  24  
  25  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
  26  
  27  function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
  28  
  29  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
  30  
  31  function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
  32  
  33  function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
  34  
  35  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
  36  
  37  function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }
  38  
  39  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
  40  
  41  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
  42  
  43  var TabElement = /*#__PURE__*/function (_HTMLElement) {
  44    _inherits(TabElement, _HTMLElement);
  45  
  46    var _super = _createSuper(TabElement);
  47  
  48    function TabElement() {
  49      _classCallCheck(this, TabElement);
  50  
  51      return _super.apply(this, arguments);
  52    }
  53  
  54    return TabElement;
  55  }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
  56  
  57  customElements.define('joomla-tab-element', TabElement);
  58  
  59  var TabsElement = /*#__PURE__*/function (_HTMLElement2) {
  60    _inherits(TabsElement, _HTMLElement2);
  61  
  62    var _super2 = _createSuper(TabsElement);
  63  
  64    /* Lifecycle, element created */
  65    function TabsElement() {
  66      var _this;
  67  
  68      _classCallCheck(this, TabsElement);
  69  
  70      _this = _super2.call(this);
  71      _this.tabs = [];
  72      _this.tabsElements = [];
  73      _this.previousActive = null;
  74      _this.onMutation = _this.onMutation.bind(_assertThisInitialized(_this));
  75      _this.keyBehaviour = _this.keyBehaviour.bind(_assertThisInitialized(_this));
  76      _this.activateTab = _this.activateTab.bind(_assertThisInitialized(_this));
  77      _this.deactivateTabs = _this.deactivateTabs.bind(_assertThisInitialized(_this));
  78      _this.checkView = _this.checkView.bind(_assertThisInitialized(_this));
  79      _this.observer = new MutationObserver(_this.onMutation);
  80  
  81      _this.observer.observe(_assertThisInitialized(_this), {
  82        attributes: false,
  83        childList: true,
  84        subtree: true
  85      });
  86  
  87      return _this;
  88    }
  89    /* Lifecycle, element appended to the DOM */
  90  
  91  
  92    _createClass(TabsElement, [{
  93      key: "recall",
  94      get: function get() {
  95        return this.getAttribute('recall');
  96      },
  97      set: function set(value) {
  98        this.setAttribute('recall', value);
  99      }
 100    }, {
 101      key: "view",
 102      get: function get() {
 103        return this.getAttribute('view');
 104      },
 105      set: function set(value) {
 106        this.setAttribute('view', value);
 107      }
 108    }, {
 109      key: "orientation",
 110      get: function get() {
 111        return this.getAttribute('orientation');
 112      },
 113      set: function set(value) {
 114        this.setAttribute('orientation', value);
 115      }
 116    }, {
 117      key: "breakpoint",
 118      get: function get() {
 119        return parseInt(this.getAttribute('breakpoint'), 10);
 120      },
 121      set: function set(value) {
 122        this.setAttribute('breakpoint', value);
 123      }
 124    }, {
 125      key: "connectedCallback",
 126      value: function connectedCallback() {
 127        var _this2 = this;
 128  
 129        if (!this.orientation || this.orientation && !['horizontal', 'vertical'].includes(this.orientation)) {
 130          this.orientation = 'horizontal';
 131        }
 132  
 133        if (!this.view || this.view && !['tabs', 'accordion'].includes(this.view)) {
 134          this.view = 'tabs';
 135        } // get tab elements
 136  
 137  
 138        this.tabsElements = [].slice.call(this.children).filter(function (el) {
 139          return el.tagName.toLowerCase() === 'joomla-tab-element';
 140        }); // Sanity checks
 141  
 142        if (!this.tabsElements.length) {
 143          return;
 144        }
 145  
 146        this.isNested = this.parentNode.closest('joomla-tab') instanceof HTMLElement;
 147        this.hydrate();
 148  
 149        if (this.hasAttribute('recall') && !this.isNested) {
 150          this.activateFromState();
 151        } // Activate tab from the URL hash
 152  
 153  
 154        if (window.location.hash) {
 155          var hash = window.location.hash.substr(1);
 156          var tabToactivate = this.tabs.filter(function (tab) {
 157            return tab.tab.id === hash;
 158          });
 159  
 160          if (tabToactivate.length) {
 161            this.activateTab(tabToactivate[0].tab, false);
 162          }
 163        } // If no active tab activate the first one
 164  
 165  
 166        if (!this.tabs.filter(function (tab) {
 167          return tab.tab.hasAttribute('active');
 168        }).length) {
 169          this.activateTab(this.tabs[0].tab, false);
 170        }
 171  
 172        this.addEventListener('keyup', this.keyBehaviour);
 173  
 174        if (this.breakpoint) {
 175          // Convert tabs to accordian
 176          this.checkView();
 177          window.addEventListener('resize', function () {
 178            _this2.checkView();
 179          });
 180        }
 181      }
 182      /* Lifecycle, element removed from the DOM */
 183  
 184    }, {
 185      key: "disconnectedCallback",
 186      value: function disconnectedCallback() {
 187        var _this3 = this;
 188  
 189        this.tabs.map(function (tab) {
 190          tab.tabButton.removeEventListener('click', _this3.activateTab);
 191          tab.accordionButton.removeEventListener('click', _this3.activateTab);
 192          return tab;
 193        });
 194        this.removeEventListener('keyup', this.keyBehaviour);
 195      }
 196      /* Respond to attribute changes */
 197  
 198    }, {
 199      key: "attributeChangedCallback",
 200      value: function attributeChangedCallback(attr, oldValue, newValue) {
 201        switch (attr) {
 202          case 'view':
 203            if (!newValue || newValue && !['tabs', 'accordion'].includes(newValue)) {
 204              this.view = 'tabs';
 205            }
 206  
 207            if (newValue === 'tabs' && newValue !== oldValue) {
 208              if (this.tabButtonContainer) this.tabButtonContainer.removeAttribute('hidden');
 209              this.tabs.map(function (tab) {
 210                return tab.accordionButton.setAttribute('hidden', '');
 211              });
 212            } else if (newValue === 'accordion' && newValue !== oldValue) {
 213              if (this.tabButtonContainer) this.tabButtonContainer.setAttribute('hidden', '');
 214              this.tabs.map(function (tab) {
 215                return tab.accordionButton.removeAttribute('hidden');
 216              });
 217            }
 218  
 219            break;
 220        }
 221      }
 222    }, {
 223      key: "hydrate",
 224      value: function hydrate() {
 225        var _this4 = this;
 226  
 227        // Ensure the tab links container exists
 228        this.tabButtonContainer = document.createElement('div');
 229        this.tabButtonContainer.setAttribute('role', 'tablist');
 230        this.insertAdjacentElement('afterbegin', this.tabButtonContainer);
 231  
 232        if (this.view === 'accordion') {
 233          this.tabButtonContainer.setAttribute('hidden', '');
 234        }
 235  
 236        this.tabsElements.map(function (tab) {
 237          // Create Accordion button
 238          var accordionButton = document.createElement('button');
 239          accordionButton.setAttribute('aria-expanded', !!tab.hasAttribute('active'));
 240          accordionButton.setAttribute('aria-controls', tab.id);
 241          accordionButton.setAttribute('type', 'button');
 242          accordionButton.innerHTML = "<span class=\"accordion-title\">".concat(tab.getAttribute('name'), "<span class=\"accordion-icon\"></span></span>");
 243          tab.insertAdjacentElement('beforebegin', accordionButton);
 244  
 245          if (_this4.view === 'tabs') {
 246            accordionButton.setAttribute('hidden', '');
 247          }
 248  
 249          accordionButton.addEventListener('click', _this4.activateTab); // Create tab button
 250  
 251          var tabButton = document.createElement('button');
 252          tabButton.setAttribute('aria-expanded', !!tab.hasAttribute('active'));
 253          tabButton.setAttribute('aria-controls', tab.id);
 254          tabButton.setAttribute('role', 'tab');
 255          tabButton.setAttribute('type', 'button');
 256          tabButton.innerHTML = "".concat(tab.getAttribute('name'));
 257  
 258          _this4.tabButtonContainer.appendChild(tabButton);
 259  
 260          tabButton.addEventListener('click', _this4.activateTab);
 261  
 262          if (_this4.view === 'tabs') {
 263            tab.setAttribute('role', 'tabpanel');
 264          } else {
 265            tab.setAttribute('role', 'region');
 266          }
 267  
 268          _this4.tabs.push({
 269            tab: tab,
 270            tabButton: tabButton,
 271            accordionButton: accordionButton
 272          });
 273  
 274          return tab;
 275        });
 276      }
 277      /* Update on mutation */
 278  
 279    }, {
 280      key: "onMutation",
 281      value: function onMutation(mutationsList) {
 282        var _this5 = this;
 283  
 284        // eslint-disable-next-line no-restricted-syntax
 285        var _iterator = _createForOfIteratorHelper(mutationsList),
 286            _step;
 287  
 288        try {
 289          for (_iterator.s(); !(_step = _iterator.n()).done;) {
 290            var mutation = _step.value;
 291  
 292            if (mutation.type === 'childList') {
 293              if (mutation.addedNodes.length) {
 294                [].slice.call(mutation.addedNodes).map(function (inserted) {
 295                  return _this5.createNavs(inserted);
 296                }); // Add the tab buttons
 297              }
 298  
 299              if (mutation.removedNodes.length) {
 300                // Remove the tab buttons
 301                [].slice.call(mutation.addedNodes).map(function (inserted) {
 302                  return _this5.removeNavs(inserted);
 303                });
 304              }
 305            }
 306          }
 307        } catch (err) {
 308          _iterator.e(err);
 309        } finally {
 310          _iterator.f();
 311        }
 312      }
 313    }, {
 314      key: "keyBehaviour",
 315      value: function keyBehaviour(e) {
 316        // Only the tabs/accordion buttons, no ⌘ or Alt modifier
 317        if (![].concat(_toConsumableArray(this.tabs.map(function (el) {
 318          return el.tabButton;
 319        })), _toConsumableArray(this.tabs.map(function (el) {
 320          return el.accordionButton;
 321        }))).includes(document.activeElement) || e.metaKey || e.altKey) {
 322          return;
 323        }
 324  
 325        var previousTabItem;
 326        var nextTabItem;
 327  
 328        if (this.view === 'tabs') {
 329          var currentTabIndex = this.tabs.findIndex(function (tab) {
 330            return tab.tab.hasAttribute('active');
 331          });
 332          previousTabItem = currentTabIndex - 1 >= 0 ? this.tabs[currentTabIndex - 1] : this.tabs[this.tabs.length - 1];
 333          nextTabItem = currentTabIndex + 1 <= this.tabs.length - 1 ? this.tabs[currentTabIndex + 1] : this.tabs[0];
 334        } else {
 335          var _currentTabIndex = this.tabs.map(function (el) {
 336            return el.accordionButton;
 337          }).findIndex(function (tab) {
 338            return tab === document.activeElement;
 339          });
 340  
 341          previousTabItem = _currentTabIndex - 1 >= 0 ? this.tabs[_currentTabIndex - 1] : this.tabs[this.tabs.length - 1];
 342          nextTabItem = _currentTabIndex + 1 <= this.tabs.length - 1 ? this.tabs[_currentTabIndex + 1] : this.tabs[0];
 343        } // catch left/right and up/down arrow key events
 344  
 345  
 346        switch (e.keyCode) {
 347          case 37:
 348          case 38:
 349            if (this.view === 'tabs') {
 350              previousTabItem.tabButton.click();
 351              previousTabItem.tabButton.focus();
 352            } else {
 353              previousTabItem.accordionButton.focus();
 354            }
 355  
 356            e.preventDefault();
 357            break;
 358  
 359          case 39:
 360          case 40:
 361            if (this.view === 'tabs') {
 362              nextTabItem.tabButton.click();
 363              nextTabItem.tabButton.focus();
 364            } else {
 365              nextTabItem.accordionButton.focus();
 366            }
 367  
 368            e.preventDefault();
 369            break;
 370        }
 371      }
 372    }, {
 373      key: "deactivateTabs",
 374      value: function deactivateTabs() {
 375        var _this6 = this;
 376  
 377        this.tabs.map(function (tabObj) {
 378          tabObj.accordionButton.removeAttribute('aria-disabled');
 379          tabObj.tabButton.removeAttribute('aria-expanded');
 380          tabObj.accordionButton.setAttribute('aria-expanded', false);
 381  
 382          if (tabObj.tab.hasAttribute('active')) {
 383            _this6.dispatchCustomEvent('joomla.tab.hide', _this6.view === 'tabs' ? tabObj.tabButton : tabObj.accordionButton, _this6.previousActive);
 384  
 385            tabObj.tab.removeAttribute('active');
 386            tabObj.tab.setAttribute('tabindex', '-1'); // Emit hidden event
 387  
 388            _this6.dispatchCustomEvent('joomla.tab.hidden', _this6.view === 'tabs' ? tabObj.tabButton : tabObj.accordionButton, _this6.previousActive);
 389  
 390            _this6.previousActive = _this6.view === 'tabs' ? tabObj.tabButton : tabObj.accordionButton;
 391          }
 392  
 393          return tabObj;
 394        });
 395      }
 396    }, {
 397      key: "activateTab",
 398      value: function activateTab(input) {
 399        var _this7 = this;
 400  
 401        var state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
 402        var currentTrigger;
 403  
 404        if (input.currentTarget) {
 405          currentTrigger = this.tabs.find(function (tab) {
 406            return (_this7.view === 'tabs' ? tab.tabButton : tab.accordionButton) === input.currentTarget;
 407          });
 408        } else if (input instanceof HTMLElement) {
 409          currentTrigger = this.tabs.find(function (tab) {
 410            return tab.tab === input;
 411          });
 412        } else if (Number.isInteger(input)) {
 413          currentTrigger = this.tabs[input];
 414        }
 415  
 416        if (currentTrigger) {
 417          // Accordion can close the active panel
 418          if (this.view === 'accordion' && this.tabs.find(function (tab) {
 419            return tab.accordionButton.getAttribute('aria-expanded') === 'true';
 420          }) === currentTrigger) {
 421            if (currentTrigger.tab.hasAttribute('active')) {
 422              currentTrigger.tab.removeAttribute('active');
 423              return;
 424            }
 425  
 426            currentTrigger.tab.setAttribute('active', '');
 427            return;
 428          } // Remove current active
 429  
 430  
 431          this.deactivateTabs(); // Set new active
 432  
 433          currentTrigger.tabButton.setAttribute('aria-expanded', true);
 434          currentTrigger.accordionButton.setAttribute('aria-expanded', true);
 435          currentTrigger.accordionButton.setAttribute('aria-disabled', true);
 436          currentTrigger.tab.setAttribute('active', '');
 437          currentTrigger.tabButton.removeAttribute('tabindex');
 438          this.dispatchCustomEvent('joomla.tab.show', this.view === 'tabs' ? currentTrigger.tabButton : currentTrigger.accordionButton, this.previousActive);
 439  
 440          if (state) {
 441            if (this.view === 'tabs') {
 442              currentTrigger.tabButton.focus();
 443            } else {
 444              currentTrigger.accordionButton.focus();
 445            }
 446          }
 447  
 448          if (state) this.saveState(currentTrigger.tab.id);
 449          this.dispatchCustomEvent('joomla.tab.shown', this.view === 'tabs' ? currentTrigger.tabButton : currentTrigger.accordionButton, this.previousActive);
 450        }
 451      } // Create navigation elements for inserted tabs
 452  
 453    }, {
 454      key: "createNavs",
 455      value: function createNavs(tab) {
 456        if (tab instanceof Element && tab.tagName.toLowerCase() !== 'joomla-tab-element' || ![].some.call(this.children, function (el) {
 457          return el === tab;
 458        }).length || !tab.getAttribute('name') || !tab.getAttribute('id')) return;
 459        var tabs = [].slice.call(this.children).filter(function (el) {
 460          return el.tagName.toLowerCase() === 'joomla-tab-element';
 461        });
 462        var index = tabs.findIndex(function (tb) {
 463          return tb === tab;
 464        }); // Create Accordion button
 465  
 466        var accordionButton = document.createElement('button');
 467        accordionButton.setAttribute('aria-expanded', !!tab.hasAttribute('active'));
 468        accordionButton.setAttribute('aria-controls', tab.id);
 469        accordionButton.setAttribute('type', 'button');
 470        accordionButton.innerHTML = "<span class=\"accordion-title\">".concat(tab.getAttribute('name'), "<span class=\"accordion-icon\"></span></span>");
 471        tab.insertAdjacentElement('beforebegin', accordionButton);
 472  
 473        if (this.view === 'tabs') {
 474          accordionButton.setAttribute('hidden', '');
 475        }
 476  
 477        accordionButton.addEventListener('click', this.activateTab); // Create tab button
 478  
 479        var tabButton = document.createElement('button');
 480        tabButton.setAttribute('aria-expanded', !!tab.hasAttribute('active'));
 481        tabButton.setAttribute('aria-controls', tab.id);
 482        tabButton.setAttribute('role', 'tab');
 483        tabButton.setAttribute('type', 'button');
 484        tabButton.innerHTML = "".concat(tab.getAttribute('name'));
 485  
 486        if (tabs.length - 1 === index) {
 487          // last
 488          this.tabButtonContainer.appendChild(tabButton);
 489          this.tabs.push({
 490            tab: tab,
 491            tabButton: tabButton,
 492            accordionButton: accordionButton
 493          });
 494        } else if (index === 0) {
 495          // first
 496          this.tabButtonContainer.insertAdjacentElement('afterbegin', tabButton);
 497          this.tabs.slice(0, 0, {
 498            tab: tab,
 499            tabButton: tabButton,
 500            accordionButton: accordionButton
 501          });
 502        } else {
 503          // Middle
 504          this.tabs[index - 1].tabButton.insertAdjacentElement('afterend', tabButton);
 505          this.tabs.slice(index - 1, 0, {
 506            tab: tab,
 507            tabButton: tabButton,
 508            accordionButton: accordionButton
 509          });
 510        }
 511  
 512        tabButton.addEventListener('click', this.activateTab);
 513      } // Remove navigation elements for removed tabs
 514  
 515    }, {
 516      key: "removeNavs",
 517      value: function removeNavs(tab) {
 518        if (tab instanceof Element && tab.tagName.toLowerCase() !== 'joomla-tab-element' || ![].some.call(this.children, function (el) {
 519          return el === tab;
 520        }).length || !tab.getAttribute('name') || !tab.getAttribute('id')) return;
 521        var accordionButton = tab.previousSilbingElement;
 522  
 523        if (accordionButton && accordionButton.tagName.toLowerCase() === 'button') {
 524          accordionButton.removeEventListener('click', this.keyBehaviour);
 525          accordionButton.parentNode.removeChild(accordionButton);
 526        }
 527  
 528        var tabButton = this.tabButtonContainer.querySelector("[aria-controls=".concat(accordionButton.id, "]"));
 529  
 530        if (tabButton) {
 531          tabButton.removeEventListener('click', this.keyBehaviour);
 532          tabButton.parentNode.removeChild(tabButton);
 533        }
 534  
 535        var index = this.tabs.findIndex(function (tb) {
 536          return tb.tabs === tab;
 537        });
 538  
 539        if (index - 1 === 0) {
 540          this.tabs.shift();
 541        } else if (index - 1 === this.tabs.length) {
 542          this.tabs.pop();
 543        } else {
 544          this.tabs.splice(index - 1, 1);
 545        }
 546      }
 547      /** Method to convert tabs to accordion and vice versa depending on screen size */
 548  
 549    }, {
 550      key: "checkView",
 551      value: function checkView() {
 552        if (!this.breakpoint) {
 553          return;
 554        }
 555  
 556        if (document.body.getBoundingClientRect().width > this.breakpoint) {
 557          if (this.view === 'tabs') {
 558            return;
 559          }
 560  
 561          this.tabButtonContainer.removeAttribute('hidden');
 562          this.tabs.map(function (tab) {
 563            tab.accordionButton.setAttribute('hidden', '');
 564            tab.accordionButton.setAttribute('role', 'tabpanel');
 565  
 566            if (tab.accordionButton.getAttribute('aria-expanded') === 'true') {
 567              tab.tab.setAttribute('active', '');
 568            }
 569  
 570            return tab;
 571          });
 572          this.setAttribute('view', 'tabs');
 573        } else {
 574          if (this.view === 'accordion') {
 575            return;
 576          }
 577  
 578          this.tabButtonContainer.setAttribute('hidden', '');
 579          this.tabs.map(function (tab) {
 580            tab.accordionButton.removeAttribute('hidden');
 581            tab.accordionButton.setAttribute('role', 'region');
 582            return tab;
 583          });
 584          this.setAttribute('view', 'accordion');
 585        }
 586      }
 587    }, {
 588      key: "getStorageKey",
 589      value: function getStorageKey() {
 590        return window.location.href.toString().split(window.location.host)[1].replace(/&return=[a-zA-Z0-9%]+/, '').split('#')[0];
 591      }
 592    }, {
 593      key: "saveState",
 594      value: function saveState(value) {
 595        var storageKey = this.getStorageKey();
 596        sessionStorage.setItem(storageKey, value);
 597      }
 598    }, {
 599      key: "activateFromState",
 600      value: function activateFromState() {
 601        var _this8 = this;
 602  
 603        this.hasNested = this.querySelector('joomla-tab') instanceof HTMLElement; // Use the sessionStorage state!
 604  
 605        var href = sessionStorage.getItem(this.getStorageKey());
 606  
 607        if (href) {
 608          var currentTabIndex = this.tabs.findIndex(function (tab) {
 609            return tab.tab.id === href;
 610          });
 611  
 612          if (currentTabIndex >= 0) {
 613            this.activateTab(currentTabIndex, false);
 614          } else if (this.hasNested) {
 615            var childTabs = this.querySelector('joomla-tab');
 616  
 617            if (childTabs) {
 618              var activeTabs = [].slice.call(this.querySelectorAll('joomla-tab-element')).reverse().filter(function (activeTabEl) {
 619                return activeTabEl.id === href;
 620              });
 621  
 622              if (activeTabs.length) {
 623                // Activate the deepest tab
 624                var activeTab = activeTabs[0].closest('joomla-tab');
 625                [].slice.call(activeTab.querySelectorAll('joomla-tab-element')).forEach(function (tabEl) {
 626                  tabEl.removeAttribute('active');
 627  
 628                  if (tabEl.id === href) {
 629                    tabEl.setAttribute('active', '');
 630                  }
 631                }); // Activate all parent tabs
 632  
 633                var _loop = function _loop() {
 634                  var parentTabContainer = activeTab.closest('joomla-tab');
 635                  var parentTabEl = activeTab.parentNode.closest('joomla-tab-element');
 636                  [].slice.call(parentTabContainer.querySelectorAll('joomla-tab-element')) // eslint-disable-next-line no-loop-func
 637                  .forEach(function (tabEl) {
 638                    tabEl.removeAttribute('active');
 639  
 640                    if (parentTabEl === tabEl) {
 641                      tabEl.setAttribute('active', '');
 642                      activeTab = parentTabEl;
 643                    }
 644                  });
 645                };
 646  
 647                while (activeTab.parentNode.closest('joomla-tab') !== this) {
 648                  _loop();
 649                }
 650  
 651                [].slice.call(this.children).filter(function (el) {
 652                  return el.tagName.toLowerCase() === 'joomla-tab-element';
 653                }).forEach(function (tabEl) {
 654                  tabEl.removeAttribute('active');
 655                  var isActiveChild = tabEl.querySelector('joomla-tab-element[active]');
 656  
 657                  if (isActiveChild) {
 658                    _this8.activateTab(tabEl, false);
 659                  }
 660                });
 661              }
 662            }
 663          }
 664        }
 665      }
 666      /* Method to dispatch events */
 667  
 668    }, {
 669      key: "dispatchCustomEvent",
 670      value: function dispatchCustomEvent(eventName, element, related) {
 671        var OriginalCustomEvent = new CustomEvent(eventName, {
 672          bubbles: true,
 673          cancelable: true
 674        });
 675        OriginalCustomEvent.relatedTarget = related;
 676        element.dispatchEvent(OriginalCustomEvent);
 677      }
 678    }], [{
 679      key: "observedAttributes",
 680      get:
 681      /* Attributes to monitor */
 682      function get() {
 683        return ['recall', 'orientation', 'view', 'breakpoint'];
 684      }
 685    }]);
 686  
 687    return TabsElement;
 688  }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
 689  
 690  customElements.define('joomla-tab', TabsElement);