芝麻web文件管理V1.00
编辑当前文件:/home2/sdektunc/dzilamdebravo1821.gob.mx/media/vendor/joomla-custom-elements/js/joomla-tab-es5.js
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); } function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } 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."); } function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } 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; } } }; } 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); } 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; } 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); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 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); } 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); }; } function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } 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); } 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); } 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; } } function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } var TabElement = /*#__PURE__*/function (_HTMLElement) { _inherits(TabElement, _HTMLElement); var _super = _createSuper(TabElement); function TabElement() { _classCallCheck(this, TabElement); return _super.apply(this, arguments); } return TabElement; }( /*#__PURE__*/_wrapNativeSuper(HTMLElement)); customElements.define('joomla-tab-element', TabElement); var TabsElement = /*#__PURE__*/function (_HTMLElement2) { _inherits(TabsElement, _HTMLElement2); var _super2 = _createSuper(TabsElement); /* Lifecycle, element created */ function TabsElement() { var _this; _classCallCheck(this, TabsElement); _this = _super2.call(this); _this.tabs = []; _this.tabsElements = []; _this.previousActive = null; _this.onMutation = _this.onMutation.bind(_assertThisInitialized(_this)); _this.keyBehaviour = _this.keyBehaviour.bind(_assertThisInitialized(_this)); _this.activateTab = _this.activateTab.bind(_assertThisInitialized(_this)); _this.deactivateTabs = _this.deactivateTabs.bind(_assertThisInitialized(_this)); _this.checkView = _this.checkView.bind(_assertThisInitialized(_this)); _this.observer = new MutationObserver(_this.onMutation); _this.observer.observe(_assertThisInitialized(_this), { attributes: false, childList: true, subtree: true }); return _this; } /* Lifecycle, element appended to the DOM */ _createClass(TabsElement, [{ key: "recall", get: function get() { return this.getAttribute('recall'); }, set: function set(value) { this.setAttribute('recall', value); } }, { key: "view", get: function get() { return this.getAttribute('view'); }, set: function set(value) { this.setAttribute('view', value); } }, { key: "orientation", get: function get() { return this.getAttribute('orientation'); }, set: function set(value) { this.setAttribute('orientation', value); } }, { key: "breakpoint", get: function get() { return parseInt(this.getAttribute('breakpoint'), 10); }, set: function set(value) { this.setAttribute('breakpoint', value); } }, { key: "connectedCallback", value: function connectedCallback() { var _this2 = this; if (!this.orientation || this.orientation && !['horizontal', 'vertical'].includes(this.orientation)) { this.orientation = 'horizontal'; } if (!this.view || this.view && !['tabs', 'accordion'].includes(this.view)) { this.view = 'tabs'; } // get tab elements this.tabsElements = [].slice.call(this.children).filter(function (el) { return el.tagName.toLowerCase() === 'joomla-tab-element'; }); // Sanity checks if (!this.tabsElements.length) { return; } this.isNested = this.parentNode.closest('joomla-tab') instanceof HTMLElement; this.hydrate(); if (this.hasAttribute('recall') && !this.isNested) { this.activateFromState(); } // Activate tab from the URL hash if (window.location.hash) { var hash = window.location.hash.substr(1); var tabToactivate = this.tabs.filter(function (tab) { return tab.tab.id === hash; }); if (tabToactivate.length) { this.activateTab(tabToactivate[0].tab, false); } } // If no active tab activate the first one if (!this.tabs.filter(function (tab) { return tab.tab.hasAttribute('active'); }).length) { this.activateTab(this.tabs[0].tab, false); } this.addEventListener('keyup', this.keyBehaviour); if (this.breakpoint) { // Convert tabs to accordian this.checkView(); window.addEventListener('resize', function () { _this2.checkView(); }); } } /* Lifecycle, element removed from the DOM */ }, { key: "disconnectedCallback", value: function disconnectedCallback() { var _this3 = this; this.tabs.map(function (tab) { tab.tabButton.removeEventListener('click', _this3.activateTab); tab.accordionButton.removeEventListener('click', _this3.activateTab); return tab; }); this.removeEventListener('keyup', this.keyBehaviour); } /* Respond to attribute changes */ }, { key: "attributeChangedCallback", value: function attributeChangedCallback(attr, oldValue, newValue) { switch (attr) { case 'view': if (!newValue || newValue && !['tabs', 'accordion'].includes(newValue)) { this.view = 'tabs'; } if (newValue === 'tabs' && newValue !== oldValue) { if (this.tabButtonContainer) this.tabButtonContainer.removeAttribute('hidden'); this.tabs.map(function (tab) { return tab.accordionButton.setAttribute('hidden', ''); }); } else if (newValue === 'accordion' && newValue !== oldValue) { if (this.tabButtonContainer) this.tabButtonContainer.setAttribute('hidden', ''); this.tabs.map(function (tab) { return tab.accordionButton.removeAttribute('hidden'); }); } break; } } }, { key: "hydrate", value: function hydrate() { var _this4 = this; // Ensure the tab links container exists this.tabButtonContainer = document.createElement('div'); this.tabButtonContainer.setAttribute('role', 'tablist'); this.insertAdjacentElement('afterbegin', this.tabButtonContainer); if (this.view === 'accordion') { this.tabButtonContainer.setAttribute('hidden', ''); } this.tabsElements.map(function (tab) { // Create Accordion button var accordionButton = document.createElement('button'); accordionButton.setAttribute('aria-expanded', !!tab.hasAttribute('active')); accordionButton.setAttribute('aria-controls', tab.id); accordionButton.setAttribute('type', 'button'); accordionButton.innerHTML = "
".concat(tab.getAttribute('name'), "
"); tab.insertAdjacentElement('beforebegin', accordionButton); if (_this4.view === 'tabs') { accordionButton.setAttribute('hidden', ''); } accordionButton.addEventListener('click', _this4.activateTab); // Create tab button var tabButton = document.createElement('button'); tabButton.setAttribute('aria-expanded', !!tab.hasAttribute('active')); tabButton.setAttribute('aria-controls', tab.id); tabButton.setAttribute('role', 'tab'); tabButton.setAttribute('type', 'button'); tabButton.innerHTML = "".concat(tab.getAttribute('name')); _this4.tabButtonContainer.appendChild(tabButton); tabButton.addEventListener('click', _this4.activateTab); if (_this4.view === 'tabs') { tab.setAttribute('role', 'tabpanel'); } else { tab.setAttribute('role', 'region'); } _this4.tabs.push({ tab: tab, tabButton: tabButton, accordionButton: accordionButton }); return tab; }); } /* Update on mutation */ }, { key: "onMutation", value: function onMutation(mutationsList) { var _this5 = this; // eslint-disable-next-line no-restricted-syntax var _iterator = _createForOfIteratorHelper(mutationsList), _step; try { for (_iterator.s(); !(_step = _iterator.n()).done;) { var mutation = _step.value; if (mutation.type === 'childList') { if (mutation.addedNodes.length) { [].slice.call(mutation.addedNodes).map(function (inserted) { return _this5.createNavs(inserted); }); // Add the tab buttons } if (mutation.removedNodes.length) { // Remove the tab buttons [].slice.call(mutation.addedNodes).map(function (inserted) { return _this5.removeNavs(inserted); }); } } } } catch (err) { _iterator.e(err); } finally { _iterator.f(); } } }, { key: "keyBehaviour", value: function keyBehaviour(e) { // Only the tabs/accordion buttons, no ⌘ or Alt modifier if (![].concat(_toConsumableArray(this.tabs.map(function (el) { return el.tabButton; })), _toConsumableArray(this.tabs.map(function (el) { return el.accordionButton; }))).includes(document.activeElement) || e.metaKey || e.altKey) { return; } var previousTabItem; var nextTabItem; if (this.view === 'tabs') { var currentTabIndex = this.tabs.findIndex(function (tab) { return tab.tab.hasAttribute('active'); }); previousTabItem = currentTabIndex - 1 >= 0 ? this.tabs[currentTabIndex - 1] : this.tabs[this.tabs.length - 1]; nextTabItem = currentTabIndex + 1 <= this.tabs.length - 1 ? this.tabs[currentTabIndex + 1] : this.tabs[0]; } else { var _currentTabIndex = this.tabs.map(function (el) { return el.accordionButton; }).findIndex(function (tab) { return tab === document.activeElement; }); previousTabItem = _currentTabIndex - 1 >= 0 ? this.tabs[_currentTabIndex - 1] : this.tabs[this.tabs.length - 1]; nextTabItem = _currentTabIndex + 1 <= this.tabs.length - 1 ? this.tabs[_currentTabIndex + 1] : this.tabs[0]; } // catch left/right and up/down arrow key events switch (e.keyCode) { case 37: case 38: if (this.view === 'tabs') { previousTabItem.tabButton.click(); previousTabItem.tabButton.focus(); } else { previousTabItem.accordionButton.focus(); } e.preventDefault(); break; case 39: case 40: if (this.view === 'tabs') { nextTabItem.tabButton.click(); nextTabItem.tabButton.focus(); } else { nextTabItem.accordionButton.focus(); } e.preventDefault(); break; } } }, { key: "deactivateTabs", value: function deactivateTabs() { var _this6 = this; this.tabs.map(function (tabObj) { tabObj.accordionButton.removeAttribute('aria-disabled'); tabObj.tabButton.removeAttribute('aria-expanded'); tabObj.accordionButton.setAttribute('aria-expanded', false); if (tabObj.tab.hasAttribute('active')) { _this6.dispatchCustomEvent('joomla.tab.hide', _this6.view === 'tabs' ? tabObj.tabButton : tabObj.accordionButton, _this6.previousActive); tabObj.tab.removeAttribute('active'); tabObj.tab.setAttribute('tabindex', '-1'); // Emit hidden event _this6.dispatchCustomEvent('joomla.tab.hidden', _this6.view === 'tabs' ? tabObj.tabButton : tabObj.accordionButton, _this6.previousActive); _this6.previousActive = _this6.view === 'tabs' ? tabObj.tabButton : tabObj.accordionButton; } return tabObj; }); } }, { key: "activateTab", value: function activateTab(input) { var _this7 = this; var state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; var currentTrigger; if (input.currentTarget) { currentTrigger = this.tabs.find(function (tab) { return (_this7.view === 'tabs' ? tab.tabButton : tab.accordionButton) === input.currentTarget; }); } else if (input instanceof HTMLElement) { currentTrigger = this.tabs.find(function (tab) { return tab.tab === input; }); } else if (Number.isInteger(input)) { currentTrigger = this.tabs[input]; } if (currentTrigger) { // Accordion can close the active panel if (this.view === 'accordion' && this.tabs.find(function (tab) { return tab.accordionButton.getAttribute('aria-expanded') === 'true'; }) === currentTrigger) { if (currentTrigger.tab.hasAttribute('active')) { currentTrigger.tab.removeAttribute('active'); return; } currentTrigger.tab.setAttribute('active', ''); return; } // Remove current active this.deactivateTabs(); // Set new active currentTrigger.tabButton.setAttribute('aria-expanded', true); currentTrigger.accordionButton.setAttribute('aria-expanded', true); currentTrigger.accordionButton.setAttribute('aria-disabled', true); currentTrigger.tab.setAttribute('active', ''); currentTrigger.tabButton.removeAttribute('tabindex'); this.dispatchCustomEvent('joomla.tab.show', this.view === 'tabs' ? currentTrigger.tabButton : currentTrigger.accordionButton, this.previousActive); if (state) { if (this.view === 'tabs') { currentTrigger.tabButton.focus(); } else { currentTrigger.accordionButton.focus(); } } if (state) this.saveState(currentTrigger.tab.id); this.dispatchCustomEvent('joomla.tab.shown', this.view === 'tabs' ? currentTrigger.tabButton : currentTrigger.accordionButton, this.previousActive); } } // Create navigation elements for inserted tabs }, { key: "createNavs", value: function createNavs(tab) { if (tab instanceof Element && tab.tagName.toLowerCase() !== 'joomla-tab-element' || ![].some.call(this.children, function (el) { return el === tab; }).length || !tab.getAttribute('name') || !tab.getAttribute('id')) return; var tabs = [].slice.call(this.children).filter(function (el) { return el.tagName.toLowerCase() === 'joomla-tab-element'; }); var index = tabs.findIndex(function (tb) { return tb === tab; }); // Create Accordion button var accordionButton = document.createElement('button'); accordionButton.setAttribute('aria-expanded', !!tab.hasAttribute('active')); accordionButton.setAttribute('aria-controls', tab.id); accordionButton.setAttribute('type', 'button'); accordionButton.innerHTML = "
".concat(tab.getAttribute('name'), "
"); tab.insertAdjacentElement('beforebegin', accordionButton); if (this.view === 'tabs') { accordionButton.setAttribute('hidden', ''); } accordionButton.addEventListener('click', this.activateTab); // Create tab button var tabButton = document.createElement('button'); tabButton.setAttribute('aria-expanded', !!tab.hasAttribute('active')); tabButton.setAttribute('aria-controls', tab.id); tabButton.setAttribute('role', 'tab'); tabButton.setAttribute('type', 'button'); tabButton.innerHTML = "".concat(tab.getAttribute('name')); if (tabs.length - 1 === index) { // last this.tabButtonContainer.appendChild(tabButton); this.tabs.push({ tab: tab, tabButton: tabButton, accordionButton: accordionButton }); } else if (index === 0) { // first this.tabButtonContainer.insertAdjacentElement('afterbegin', tabButton); this.tabs.slice(0, 0, { tab: tab, tabButton: tabButton, accordionButton: accordionButton }); } else { // Middle this.tabs[index - 1].tabButton.insertAdjacentElement('afterend', tabButton); this.tabs.slice(index - 1, 0, { tab: tab, tabButton: tabButton, accordionButton: accordionButton }); } tabButton.addEventListener('click', this.activateTab); } // Remove navigation elements for removed tabs }, { key: "removeNavs", value: function removeNavs(tab) { if (tab instanceof Element && tab.tagName.toLowerCase() !== 'joomla-tab-element' || ![].some.call(this.children, function (el) { return el === tab; }).length || !tab.getAttribute('name') || !tab.getAttribute('id')) return; var accordionButton = tab.previousSilbingElement; if (accordionButton && accordionButton.tagName.toLowerCase() === 'button') { accordionButton.removeEventListener('click', this.keyBehaviour); accordionButton.parentNode.removeChild(accordionButton); } var tabButton = this.tabButtonContainer.querySelector("[aria-controls=".concat(accordionButton.id, "]")); if (tabButton) { tabButton.removeEventListener('click', this.keyBehaviour); tabButton.parentNode.removeChild(tabButton); } var index = this.tabs.findIndex(function (tb) { return tb.tabs === tab; }); if (index - 1 === 0) { this.tabs.shift(); } else if (index - 1 === this.tabs.length) { this.tabs.pop(); } else { this.tabs.splice(index - 1, 1); } } /** Method to convert tabs to accordion and vice versa depending on screen size */ }, { key: "checkView", value: function checkView() { if (!this.breakpoint) { return; } if (document.body.getBoundingClientRect().width > this.breakpoint) { if (this.view === 'tabs') { return; } this.tabButtonContainer.removeAttribute('hidden'); this.tabs.map(function (tab) { tab.accordionButton.setAttribute('hidden', ''); tab.accordionButton.setAttribute('role', 'tabpanel'); if (tab.accordionButton.getAttribute('aria-expanded') === 'true') { tab.tab.setAttribute('active', ''); } return tab; }); this.setAttribute('view', 'tabs'); } else { if (this.view === 'accordion') { return; } this.tabButtonContainer.setAttribute('hidden', ''); this.tabs.map(function (tab) { tab.accordionButton.removeAttribute('hidden'); tab.accordionButton.setAttribute('role', 'region'); return tab; }); this.setAttribute('view', 'accordion'); } } }, { key: "getStorageKey", value: function getStorageKey() { return window.location.href.toString().split(window.location.host)[1].replace(/&return=[a-zA-Z0-9%]+/, '').split('#')[0]; } }, { key: "saveState", value: function saveState(value) { var storageKey = this.getStorageKey(); sessionStorage.setItem(storageKey, value); } }, { key: "activateFromState", value: function activateFromState() { var _this8 = this; this.hasNested = this.querySelector('joomla-tab') instanceof HTMLElement; // Use the sessionStorage state! var href = sessionStorage.getItem(this.getStorageKey()); if (href) { var currentTabIndex = this.tabs.findIndex(function (tab) { return tab.tab.id === href; }); if (currentTabIndex >= 0) { this.activateTab(currentTabIndex, false); } else if (this.hasNested) { var childTabs = this.querySelector('joomla-tab'); if (childTabs) { var activeTabs = [].slice.call(this.querySelectorAll('joomla-tab-element')).reverse().filter(function (activeTabEl) { return activeTabEl.id === href; }); if (activeTabs.length) { // Activate the deepest tab var activeTab = activeTabs[0].closest('joomla-tab'); [].slice.call(activeTab.querySelectorAll('joomla-tab-element')).forEach(function (tabEl) { tabEl.removeAttribute('active'); if (tabEl.id === href) { tabEl.setAttribute('active', ''); } }); // Activate all parent tabs var _loop = function _loop() { var parentTabContainer = activeTab.closest('joomla-tab'); var parentTabEl = activeTab.parentNode.closest('joomla-tab-element'); [].slice.call(parentTabContainer.querySelectorAll('joomla-tab-element')) // eslint-disable-next-line no-loop-func .forEach(function (tabEl) { tabEl.removeAttribute('active'); if (parentTabEl === tabEl) { tabEl.setAttribute('active', ''); activeTab = parentTabEl; } }); }; while (activeTab.parentNode.closest('joomla-tab') !== this) { _loop(); } [].slice.call(this.children).filter(function (el) { return el.tagName.toLowerCase() === 'joomla-tab-element'; }).forEach(function (tabEl) { tabEl.removeAttribute('active'); var isActiveChild = tabEl.querySelector('joomla-tab-element[active]'); if (isActiveChild) { _this8.activateTab(tabEl, false); } }); } } } } } /* Method to dispatch events */ }, { key: "dispatchCustomEvent", value: function dispatchCustomEvent(eventName, element, related) { var OriginalCustomEvent = new CustomEvent(eventName, { bubbles: true, cancelable: true }); OriginalCustomEvent.relatedTarget = related; element.dispatchEvent(OriginalCustomEvent); } }], [{ key: "observedAttributes", get: /* Attributes to monitor */ function get() { return ['recall', 'orientation', 'view', 'breakpoint']; } }]); return TabsElement; }( /*#__PURE__*/_wrapNativeSuper(HTMLElement)); customElements.define('joomla-tab', TabsElement);