@wavemaker-ai/app-ng-runtime 1.0.0-rc.309

package/components/containers/tabs/fesm2022/index.mjs

@@ -0,0 +1,775 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { PROP_STRING, PROP_ANY, PROP_NUMBER, PROP_BOOLEAN, register, AUTO_LAYOUT_PROPS, StylableComponent, getCurrentWidgets, styler, APPLY_STYLES_TYPE, RedrawableDirective, provideAsWidgetRef, AutoLayout, createArrayFrom, TextContentDirective } from '@wm/components/base';
+import * as i0 from '@angular/core';
+import { inject, Injector, ContentChildren, HostBinding, Attribute, Inject, Optional, Component } from '@angular/core';
+import * as i1 from '@wm/core';
+import { setCSSFromObj, addClass, setCSS, $appDigest, noop, removeAttr, App, removeClass, appendNode, isDefined } from '@wm/core';
+import { SwipeAnimation } from '@swipey';
+import { __decorate, __metadata } from 'tslib';
+import { find, isArray, forEach, indexOf, get, isEmpty, findIndex } from 'lodash-es';
+
+class TabsAnimator extends SwipeAnimation {
+    constructor(tabs) {
+        super();
+        this.tabs = tabs;
+        this._$el = $(this.tabs.getNativeElement()).find('>.tab-content');
+        this.init(this._$el);
+    }
+    calibrate() {
+        const activeTabIndex = this.tabs.getActiveTabIndex();
+        const panes = this._$el.find('>.tab-pane');
+        let activeTabVisibleIndex = 0;
+        let noOfVisiblePanes = 0;
+        let visiblePanes = [];
+        panes.each((i, p) => {
+            if (!$(p).prop('hidden')) {
+                noOfVisiblePanes++;
+                if (i === activeTabIndex) {
+                    activeTabVisibleIndex = noOfVisiblePanes - 1;
+                }
+                visiblePanes.push(p);
+            }
+            return true;
+        });
+        return {
+            activeTabIndex: activeTabVisibleIndex,
+            noOfTabs: noOfVisiblePanes,
+            panes: visiblePanes
+        };
+    }
+    bounds() {
+        const { activeTabIndex, noOfTabs, panes } = this.calibrate(), w = $(panes[0]).width(), centerVal = -1 * activeTabIndex * w;
+        this.clearContentFocus();
+        return {
+            strict: false,
+            lower: activeTabIndex === noOfTabs - 1 ? 0 : -w,
+            center: centerVal,
+            upper: activeTabIndex === 0 ? centerVal : w
+        };
+    }
+    context() {
+        return {
+            'w': this._$el.width()
+        };
+    }
+    animation() {
+        return {
+            'transform': 'translate3d(${{ ($D + $d)/w * 100 + \'%\'}}, 0, 0)',
+            '-webkit-transform': 'translate3d(${{ ($D + $d)/w * 100 + \'%\'}}, 0, 0)'
+        };
+    }
+    /* WMS-18031 | On Tab Switch | Remove the Focus on the Existing Tab Contents */
+    clearContentFocus() {
+        let activeTab = this._$el.find('>.tab-pane.active');
+        if (activeTab.length && activeTab.find(document.activeElement).length) {
+            document.activeElement.blur();
+        }
+    }
+    transitionTabIntoView() {
+        const { activeTabIndex, noOfTabs, panes } = this.calibrate();
+        const maxWidth = `${noOfTabs * 100}%`;
+        setCSSFromObj(this._$el[0], { maxWidth: maxWidth, width: maxWidth });
+        addClass(this.tabs.getNativeElement(), 'has-transition');
+        const width = `${100 / noOfTabs}%`;
+        panes.forEach(p => {
+            setCSS(p, 'width', width);
+        });
+        setCSS(this._$el[0], 'transform', `translate3d(${-1 * activeTabIndex / noOfTabs * 100}%, 0, 0)`);
+    }
+    onUpper($event) {
+        this.tabs.prev($event);
+        $appDigest();
+    }
+    onLower($event) {
+        this.tabs.next($event);
+        $appDigest();
+    }
+    threshold() {
+        return 5;
+    }
+}
+
+const registerProps$1 = () => {
+    const props = new Map([
+        ['class', PROP_STRING],
+        ['dataset', PROP_ANY],
+        ['defaultpaneindex', { value: 0, ...PROP_NUMBER }],
+        ['justified', PROP_BOOLEAN],
+        ['tabsposition', { value: 'top', ...PROP_STRING }],
+        ['name', PROP_STRING],
+        ['nodatamessage', { value: 'No Data Found', ...PROP_STRING }],
+        ['show', { value: true, ...PROP_BOOLEAN }],
+        ['statehandler', { value: 'none', ...PROP_STRING }],
+        ['transition', PROP_STRING],
+        ['type', PROP_STRING],
+        ['iconposition', PROP_STRING],
+        ['autotabactivation', { value: true, ...PROP_BOOLEAN }]
+    ]);
+    register('wm-tabs', props);
+};
+
+const registerProps = () => {
+    register('wm-tabpane', new Map([
+        ['active', PROP_BOOLEAN], // internal property
+        ['badgevalue', PROP_STRING],
+        ['badgetype', { value: 'default', ...PROP_STRING }],
+        ['class', PROP_STRING],
+        ['content', PROP_STRING],
+        ['disabled', PROP_BOOLEAN],
+        ['dynamicPaneIndex', PROP_NUMBER], // internal property
+        ['heading', PROP_STRING],
+        ['isdefaulttab', PROP_STRING],
+        ['isdynamic', PROP_BOOLEAN], // internal property
+        ['name', PROP_STRING],
+        ['paneicon', PROP_STRING],
+        ['show', { value: true, ...PROP_BOOLEAN }],
+        ['smoothscroll', { value: false, ...PROP_BOOLEAN }],
+        ['title', { value: 'Tab Title', ...PROP_STRING }],
+        ...AUTO_LAYOUT_PROPS
+    ]));
+};
+
+const DEFAULT_CLS$1 = 'tab-pane';
+const WIDGET_CONFIG$1 = {
+    widgetType: 'wm-tabpane',
+    hostClass: DEFAULT_CLS$1
+};
+let TabPaneComponent = class TabPaneComponent extends StylableComponent {
+    static { this.initializeProps = registerProps(); }
+    constructor(inj, heading, title, explicitContext, app) {
+        super(inj, WIDGET_CONFIG$1, explicitContext);
+        this.heading = heading;
+        this.title = title;
+        this.app = app;
+        this._isFirstLoad = true;
+        this._isOnLoadTriggered = false;
+        this.$lazyLoad = noop;
+        this._currentTabWidgets = {};
+        this.isActive = false;
+        this.disabled = false;
+        this.tabsRef = inject(TabsComponent);
+        // title property here serves the purpose of heading.
+        // TODO: make it common for all the widget.
+        removeAttr(this.nativeElement, 'title');
+    }
+    // parent tabs component will call this method for the order of callbacks to be proper
+    // order of callbacks - deselect, select, change
+    invokeOnSelectCallback($event) {
+        this.invokeEventCallback('select', { $event });
+    }
+    select($event, isKeyBoardEvent) {
+        // When called programatically $event won't be available
+        if (this.isActive || this.disabled) {
+            return;
+        }
+        this.isActive = true;
+        this.$lazyLoad();
+        this.redrawChildren();
+        this.notifyParent($event, isKeyBoardEvent);
+    }
+    tabpaneHeaderClick($event, paneIndex) {
+        this.invokeEventCallback('headerclick', { $event, paneIndex });
+    }
+    deselect() {
+        if (this.isActive) {
+            this.isActive = false;
+            this.invokeEventCallback('deselect');
+        }
+    }
+    remove() {
+        if (this.isActive) {
+            this === this.tabsRef.panes.last ? this.tabsRef.prev() : this.tabsRef.next();
+        }
+        const availablePanes = this.tabsRef.panes.toArray();
+        availablePanes.splice(this.tabsRef.getPaneIndexByRef(this), 1);
+        this.tabsRef.panes.reset([...availablePanes]);
+        this.nativeElement.remove();
+        this.tabsRef.$element.find(`.tab-header[data-paneid='${this.$element.attr('widget-id')}'] a`).remove();
+    }
+    redrawChildren() {
+        setTimeout(() => {
+            if (this.reDrawableComponents) {
+                this.reDrawableComponents.forEach(c => c.redraw());
+            }
+            // Fix for [WMS-24564]: trigger  Onload event when it is inline content
+            if (!this._isOnLoadTriggered && !this.content) {
+                this.invokeEventCallback('load');
+                this._isOnLoadTriggered = true;
+            }
+        }, 100);
+    }
+    notifyParent(evt, isKeyBoardEvent) {
+        this.tabsRef.notifyChange(this, evt, isKeyBoardEvent);
+    }
+    // select next valid tab
+    handleSwipeLeft() {
+        this.tabsRef.next();
+    }
+    // select prev valid tab
+    handleSwipeRight() {
+        this.tabsRef.prev();
+    }
+    // select event is called manually
+    handleEvent(node, eventName, callback, locals) {
+        if (eventName !== 'select') {
+            super.handleEvent(this.nativeElement, eventName, callback, locals);
+        }
+    }
+    get currentTabWidgets() {
+        return getCurrentWidgets(this.nativeElement, this._currentTabWidgets);
+    }
+    onPropertyChange(key, nv, ov) {
+        if (key === 'content') {
+            if (this.isActive) {
+                setTimeout(() => this.$lazyLoad(), 100);
+            }
+        }
+        else if (key === 'show') {
+            // overridding the base component show propertyChangeHandler
+            this.nativeElement.hidden = !nv;
+            // setting default tab pane on pageload whenever show property is bindable
+            if (this._isFirstLoad) {
+                this.tabsRef.selectDefaultPaneByIndex(this.tabsRef.defaultpaneindex);
+            }
+            else if (!nv && this.isActive) {
+                this.tabsRef.next();
+            }
+            else if (nv || !this.isActive) {
+                this.tabsRef.tabsAnimator?.transitionTabIntoView();
+            }
+            this._isFirstLoad = false;
+        }
+        else {
+            super.onPropertyChange(key, nv, ov);
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.title = this.title || this.heading;
+    }
+    ngAfterViewInit() {
+        styler(this.nativeElement.querySelector('.tab-body'), this, APPLY_STYLES_TYPE.CONTAINER);
+        super.ngAfterViewInit();
+        if (this.isdynamic) {
+            this.tabsRef.registerDynamicTab(this);
+        }
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Clear ContentChildren QueryList reference
+        if (this.reDrawableComponents) {
+            this.reDrawableComponents = null;
+        }
+        // MEMORY LEAK FIX: Clear lazy load function reference
+        this.$lazyLoad = null;
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TabPaneComponent, deps: [{ token: i0.Injector }, { token: 'heading', attribute: true }, { token: 'title', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }, { token: i1.App }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: TabPaneComponent, isStandalone: true, selector: "div[wmTabPane]", host: { properties: { "class.active": "this.isActive", "class.disabled": "this.disabled" } }, providers: [
+            provideAsWidgetRef(TabPaneComponent)
+        ], queries: [{ propertyName: "reDrawableComponents", predicate: RedrawableDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tab-body\" partial-container-target >\n    <ng-content></ng-content>\n</div>" }); }
+};
+TabPaneComponent = __decorate([
+    AutoLayout({ targetSelector: '.tab-body' }),
+    __metadata("design:paramtypes", [Injector, Object, Object, Object, App])
+], TabPaneComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TabPaneComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'div[wmTabPane]', providers: [
+                        provideAsWidgetRef(TabPaneComponent)
+                    ], template: "<div class=\"tab-body\" partial-container-target >\n    <ng-content></ng-content>\n</div>" }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['heading']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['title']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }, { type: i1.App }], propDecorators: { isActive: [{
+                type: HostBinding,
+                args: ['class.active']
+            }], disabled: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }], reDrawableComponents: [{
+                type: ContentChildren,
+                args: [RedrawableDirective, { descendants: true }]
+            }] } });
+
+const DEFAULT_CLS = 'app-tabs clearfix';
+const WIDGET_CONFIG = {
+    widgetType: 'wm-tabs',
+    hostClass: DEFAULT_CLS
+};
+class TabsComponent extends StylableComponent {
+    static { this.initializeProps = registerProps$1(); }
+    constructor(inj, dynamicComponentProvider, _transition, _tabsPosition, statePersistence, explicitContext) {
+        // handle to the promise resolver
+        let resolveFn = noop;
+        super(inj, WIDGET_CONFIG, explicitContext, new Promise(res => resolveFn = res));
+        this.dynamicComponentRefs = [];
+        this.iconposition = '';
+        this.transition = _transition;
+        this.tabsposition = _tabsPosition;
+        this.statePersistence = statePersistence;
+        this.dynamicComponentProvider = dynamicComponentProvider;
+        this.dynamicTabs = [];
+        this.dynamicPaneIndex = 0;
+        this.promiseResolverFn = resolveFn;
+        styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
+    }
+    animateIn(element) {
+        const tabHeader = $(element);
+        // when the animation is not present toggle the active class.
+        tabHeader.siblings('.active').removeClass('active');
+        tabHeader.addClass('active');
+        const ul = this.nativeElement.querySelector('ul.nav.nav-tabs');
+        // move the tabheader into the viewport
+        const $prevHeaderEle = tabHeader.prev();
+        if ($prevHeaderEle.length) {
+            ul.scrollLeft = $prevHeaderEle[0].offsetLeft;
+        }
+        else {
+            ul.scrollLeft = 0;
+        }
+    }
+    /**
+     * This method is used to register the dynamic panes.
+     * After all panes are initialzed, update the querylist manually based on index.
+     * @param paneRef - refrence of the tabpane
+     */
+    registerDynamicTab(paneRef) {
+        this.dynamicTabs.push(paneRef);
+        const isLastPane = this.dynamicTabs.length === this.dynamicPaneIndex;
+        if (isLastPane) {
+            for (let i = 0; i < this.dynamicTabs.length; i++) {
+                const newPaneRef = find(this.dynamicTabs, pane => pane.dynamicPaneIndex === i);
+                const isPaneAlreadyExist = find(this.panes.toArray(), newPaneRef);
+                if (!isPaneAlreadyExist) {
+                    this.panes.reset([...this.panes.toArray(), newPaneRef]);
+                    if (newPaneRef.active) {
+                        setTimeout(() => {
+                            newPaneRef.select();
+                        }, 20);
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * This method is to add the tabpane dynamically
+     * @param tabpanes - list of tabpanes
+     */
+    addPane(tabpanes) {
+        if (!isArray(tabpanes)) {
+            tabpanes = [tabpanes];
+        }
+        const paneNamesList = [];
+        forEach(tabpanes, (pane, index) => {
+            const isPaneAlreadyCreated = find(this.panes.toArray(), { name: pane.name });
+            const isPaneNameExist = indexOf(paneNamesList, pane.name);
+            // If user tries to add tabpane with the same name which is already exists then do not create the pane
+            if (isPaneAlreadyCreated || isPaneNameExist > 0) {
+                console.warn(`The tab pane with name ${pane.name} already exists`);
+                return;
+            }
+            let paramMarkup = '';
+            let propsTmpl = '';
+            this.dynamicPaneIndex++;
+            const name = pane.name ? pane.name : `tabpane${this.panes.toArray().length + (index + 1)}`;
+            paneNamesList.push(name);
+            const partialParams = get(pane, 'params');
+            forEach(pane, (value, key) => {
+                if (key !== 'params') {
+                    propsTmpl = `${propsTmpl} ${key}="${value}"`;
+                }
+            });
+            forEach(partialParams, (value, key) => {
+                paramMarkup = `${paramMarkup} <wm-param name="${key}" value="${value}"></wm-param>`;
+            });
+            const markup = `<wm-tabpane dynamicPaneIndex="${this.dynamicPaneIndex - 1}" isdynamic="true" name="${name}" ${propsTmpl}>
+                            ${paramMarkup}
+                        </wm-tabpane>`;
+            if (!this._dynamicContext) {
+                this._dynamicContext = Object.create(this.viewParent);
+                this._dynamicContext[this.getAttr('wmTab')] = this;
+            }
+            // MEMORY LEAK FIX: Store component reference for cleanup
+            this.dynamicComponentProvider.addComponent(this.getNativeElement().querySelector('.tab-content'), markup, this._dynamicContext, { inj: this.inj })
+                .then(componentRef => {
+                if (componentRef) {
+                    this.dynamicComponentRefs.push(componentRef);
+                }
+            });
+        });
+        return paneNamesList;
+    }
+    /**
+     * This method is to remove the tabpane
+     * @param paneIndex - index of the pane
+     */
+    removePane(paneName) {
+        const paneRef = this.getPaneRefByName(paneName);
+        if (paneRef) {
+            paneRef.remove();
+        }
+    }
+    /**
+     * TabPane children components invoke this method to communicate with the parent
+     * if the evt argument is defined on-change callback will be invoked.
+     */
+    notifyChange(paneRef, evt, isKeyBoardEvent) {
+        if (!this.isSelectableTab(paneRef)) {
+            return;
+        }
+        let headerElement;
+        // invoke deselect event callback on the preset active tab
+        if (!isEmpty(this.activeTab)) {
+            this.activeTab.deselect();
+        }
+        this.activeTab = paneRef.getWidget();
+        const newPaneIndex = this.getPaneIndexByRef(paneRef);
+        const mode = this.statePersistence.computeMode(this.statehandler);
+        if (!this.isPageLoadCall && mode && mode.toLowerCase() !== 'none') {
+            this.statePersistence.setWidgetState(this, this.activeTab.name);
+        }
+        else {
+            this.defaultpaneindex = this.getPaneIndexByRef(paneRef);
+            this.isPageLoadCall = false;
+        }
+        // invoke select callback on the selected tab
+        paneRef.invokeOnSelectCallback(evt);
+        // invoke change callback if the evt is present, select a tab programmatically will not have the event
+        if (evt) {
+            this.invokeEventCallback('change', {
+                $event: evt,
+                newPaneIndex: newPaneIndex,
+                oldPaneIndex: this._oldPaneIndex || 0
+            });
+        }
+        this._oldPaneIndex = newPaneIndex;
+        if (evt) {
+            headerElement = $(evt.target).closest('li.tab-header');
+        }
+        if (!evt || !headerElement || !headerElement.length) {
+            headerElement = this.nativeElement.querySelector(`li[data-paneid=${paneRef.widgetId}]`);
+            const insideTabs = !!$(headerElement).closest('.app-tabs')
+                .parent().closest('.app-tabs').length;
+            if (!insideTabs && isKeyBoardEvent) {
+                $(headerElement).children().focus();
+            }
+        }
+        this.animateIn(headerElement);
+        // this.setTabsLeftPosition(this.getPaneIndexByRef(this.activeTab), this.panes.length);
+        if (this.canSlide()) {
+            if (!this.tabsAnimator) {
+                this.tabsAnimator = new TabsAnimator(this);
+                this.tabsAnimator.setGesturesEnabled(this.canSlide());
+            }
+            this.tabsAnimator.transitionTabIntoView();
+        }
+    }
+    goToTab(tabIndex) {
+        if (this.isValidPaneIndex(tabIndex - 1)) {
+            const tab = this.getPaneRefByIndex(tabIndex - 1);
+            tab.select();
+        }
+    }
+    getPaneIndexByRef(paneRef) {
+        return this.panes.toArray().indexOf(paneRef);
+    }
+    // Returns the active tab index from tabs.
+    getActiveTabIndex() {
+        return findIndex(this.panes.toArray(), { isActive: true });
+    }
+    isValidPaneIndex(index) {
+        return (index >= 0 && index < this.panes.length);
+    }
+    getPaneRefByIndex(index) {
+        return this.panes.toArray()[index];
+    }
+    getPaneRefByName(name) {
+        return find(this.panes.toArray(), { name: name });
+    }
+    // returns false if the pane is hidden or disabled
+    isSelectableTab(paneRef) {
+        return paneRef.show && !paneRef.disabled;
+    }
+    canSlide() {
+        return this.transition === 'slide' && !this.vertical;
+    }
+    getSelectableTabAfterIndex(index) {
+        for (let i = index + 1; i < this.panes.length; i++) {
+            const pane = this.getPaneRefByIndex(i);
+            if (this.isSelectableTab(pane)) {
+                return pane;
+            }
+        }
+        if (index === this.panes.length - 1) {
+            const pane = this.getPaneRefByIndex(0);
+            if (this.isSelectableTab(pane)) {
+                return pane;
+            }
+        }
+    }
+    getSelectableTabBeforeIndex(index) {
+        for (let i = index - 1; i >= 0; i--) {
+            const pane = this.getPaneRefByIndex(i);
+            if (this.isSelectableTab(pane)) {
+                return pane;
+            }
+        }
+        if (index === 0) {
+            const pane = this.getPaneRefByIndex(this.panes.length - 1);
+            if (this.isSelectableTab(pane)) {
+                return pane;
+            }
+        }
+    }
+    // select next tab relative to the current active tab
+    next($event, isKeyBoardEvent) {
+        const pane = this.getSelectableTabAfterIndex(this.getActiveTabIndex());
+        if (pane) {
+            pane.select($event, isKeyBoardEvent);
+        }
+    }
+    // select prev tab relative to the current active tab
+    prev($event, isKeyBoardEvent) {
+        const pane = this.getSelectableTabBeforeIndex(this.getActiveTabIndex());
+        if (pane) {
+            pane.select($event, isKeyBoardEvent);
+        }
+    }
+    /**
+     * this method will be invoked during the initialization of the component and on defaultpaneindex property change,
+     * if the provided defaultpaneindex is not valid, find the first pane index which can be shown and select it
+     */
+    selectDefaultPaneByIndex(index) {
+        if (!this.isValidPaneIndex(index)) {
+            return;
+        }
+        let paneRef = this.getPaneRefByIndex(index);
+        if (!this.isSelectableTab(paneRef)) {
+            paneRef = this.getSelectableTabAfterIndex(0);
+        }
+        if (paneRef) {
+            paneRef.select();
+        }
+    }
+    // update the postion of tab header
+    setTabsPosition() {
+        const ul = this.nativeElement.children[0];
+        this.vertical = (this.tabsposition === 'left' || this.tabsposition === 'right');
+        removeClass(this.nativeElement, 'inverted');
+        if (this.tabsposition === 'bottom' || this.tabsposition === 'right') {
+            appendNode(ul, this.nativeElement);
+            addClass(this.nativeElement, 'inverted');
+        }
+    }
+    onDataChange(newVal) {
+        this.fieldDefs = createArrayFrom(newVal);
+        setTimeout(() => this.selectDefaultPaneByIndex(this.defaultpaneindex || 0));
+    }
+    getWidgets(widgteName, index) {
+        let $target;
+        const retVal = [];
+        if (!widgteName) {
+            return;
+        }
+        if (!isDefined(index)) {
+            forEach(this.panes.toArray(), (el) => {
+                $target = get(el.currentTabWidgets, widgteName);
+                if ($target) {
+                    retVal.push($target);
+                }
+            });
+            return retVal;
+        }
+        index = +index || 0;
+        $target = get(this.panes.toArray(), index);
+        if ($target) {
+            return [get($target.currentTabWidgets, widgteName)];
+        }
+    }
+    get currentTabPaneIndex() {
+        return this.getActiveTabIndex();
+    }
+    get isFirstTabPane() {
+        return this.panes.first.widgetId === this.activeTab.widgetId;
+    }
+    get isLastTabPane() {
+        return this.panes.last.widgetId === this.activeTab.widgetId;
+    }
+    onPropertyChange(key, nv, ov) {
+        if (key === 'defaultpaneindex') {
+            this.defaultpaneindex = nv;
+        }
+        else if (key === 'dataset') {
+            this.onDataChange(nv);
+        }
+        else if (key === 'statehandler') {
+            this.isPageLoadCall = true;
+            const widgetState = this.statePersistence.getWidgetState(this);
+            if (nv !== 'none' && widgetState) {
+                const paneToSelect = this.panes.filter(function (pane) {
+                    return widgetState === pane.name;
+                });
+                if (!paneToSelect.length) {
+                    console.warn('Tab pane name ' + widgetState + ' in State is incorrect. Falling back to the default pane');
+                    setTimeout(() => this.selectDefaultPaneByIndex(this.defaultpaneindex || 0), 20);
+                }
+                else {
+                    const index = this.getPaneIndexByRef(paneToSelect[0]);
+                    setTimeout(() => this.selectDefaultPaneByIndex(index), 20);
+                }
+            }
+            else {
+                setTimeout(() => this.selectDefaultPaneByIndex(this.defaultpaneindex || 0), 20);
+            }
+        }
+        else if (key === 'autotabactivation') {
+            this.autoActivation = nv;
+        }
+        else {
+            super.onPropertyChange(key, nv, ov);
+        }
+    }
+    registerTabsScroll() {
+        setTimeout(() => {
+            const $ul = this.$element.find('> ul');
+            let $liPosition;
+            const $li = $ul.children();
+            $liPosition = $li.last().position();
+            if ($liPosition && ($liPosition.left > $ul.width())) {
+                $ul.on('mousewheel', (e) => {
+                    const left = $ul[0].scrollLeft, _delta = -1 * e.originalEvent.wheelDelta;
+                    e.stopPropagation();
+                    e.preventDefault();
+                    $ul.animate({ scrollLeft: left + _delta }, { 'duration': 10 });
+                });
+            }
+        });
+    }
+    onkeydown(event) {
+        let newPane;
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                newPane = this.autoActivation ? (this.prev(null, true), null) : this.getSelectableTabBeforeIndex(this.getSelectedPaneIndex());
+                break;
+            case 'ArrowRight':
+            case 'ArrowDown':
+                newPane = this.autoActivation ? (this.next(null, true), null) : this.getSelectableTabAfterIndex(this.getSelectedPaneIndex());
+                break;
+            case 'Enter': {
+                const pane = this.getSelectableTabAfterIndex(this.getSelectedPaneIndex() - 1);
+                if (pane) {
+                    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', code: 'Enter', bubbles: true, cancelable: true });
+                    pane.nativeElement.dispatchEvent(enterEvent);
+                    pane.select(enterEvent, true);
+                }
+                event.preventDefault();
+                return;
+            }
+            default:
+                return;
+        }
+        if (newPane) {
+            this.nativeElement.querySelector('li.select')?.classList.remove('select');
+            this.nativeElement.querySelector(`li[data-paneid="${newPane.widgetId}"]`)?.classList.add('select');
+        }
+        event.preventDefault();
+    }
+    ngAfterContentInit() {
+        this.promiseResolverFn();
+        super.ngAfterContentInit();
+        this.setTabsPosition();
+        this.panesChangesSubscription = this.panes.changes.subscribe(slides => {
+            if (this.panes.length) {
+                this.selectDefaultPaneByIndex(this.defaultpaneindex || 0);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.registerTabsScroll();
+    }
+    getSelectedPaneIndex() {
+        const index = this.panes.toArray().findIndex(pane => this.nativeElement.querySelector(`li[data-paneid="${pane.widgetId}"]`)?.classList.contains("select"));
+        return index >= 0 ? index : this.getActiveTabIndex();
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Unsubscribe from panes changes
+        if (this.panesChangesSubscription) {
+            this.panesChangesSubscription.unsubscribe();
+            this.panesChangesSubscription = null;
+        }
+        // MEMORY LEAK FIX: Destroy all dynamically created component instances
+        if (this.dynamicComponentRefs && this.dynamicComponentRefs.length) {
+            this.dynamicComponentRefs.forEach(componentRef => {
+                if (componentRef && componentRef.destroy) {
+                    componentRef.destroy();
+                }
+            });
+            this.dynamicComponentRefs = [];
+        }
+        // MEMORY LEAK FIX: Clear dynamic context
+        if (this._dynamicContext) {
+            Object.keys(this._dynamicContext).forEach(key => {
+                delete this._dynamicContext[key];
+            });
+            this._dynamicContext = null;
+        }
+        // MEMORY LEAK FIX: Clear dynamic tabs array
+        if (this.dynamicTabs) {
+            this.dynamicTabs = [];
+        }
+        // MEMORY LEAK FIX: Destroy tabs animator
+        if (this.tabsAnimator) {
+            // TabsAnimator may have internal subscriptions or timers
+            this.tabsAnimator = null;
+        }
+        // MEMORY LEAK FIX: Clear field definitions and references
+        this.fieldDefs = null;
+        this.activeTab = null;
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TabsComponent, deps: [{ token: i0.Injector }, { token: i1.DynamicComponentRefProvider }, { token: 'transition', attribute: true }, { token: 'tabsposition', attribute: true }, { token: i1.StatePersistence }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: TabsComponent, isStandalone: true, selector: "div[wmTabs]", host: { properties: { "attr.icon-position": "this.iconposition" } }, providers: [
+            provideAsWidgetRef(TabsComponent)
+        ], queries: [{ propertyName: "panes", predicate: TabPaneComponent }], exportAs: ["wmTabs"], usesInheritance: true, ngImport: i0, template: "<ul class=\"nav nav-tabs\" [ngClass]=\"{'nav-stacked': vertical, 'nav-justified': justified}\" role=\"tablist\">\n  @for (pane of panes; track pane; let i = $index) {\n    <li class=\"tab-header\" [attr.data-paneid]=\"pane.widgetId\" [ngClass]=\"{'active': pane.isActive, 'disabled': pane.disabled}\"\n      [hidden]=\"!pane.show\" role=\"presentation\">\n      <a [attr.aria-label]=\"pane.badgevalue ? pane.title + ' ' + pane.badgevalue : pane.title\"\n        [attr.icon-position]=\"iconposition\"\n        [attr.title]=\"pane.title\"\n        [tabindex]=\"pane.isActive ? '0' : '-1'\"\n        class=\"tab-heading\" href=\"javascript:void(0);\"\n        [attr.aria-selected]=\"pane.isActive\" role=\"tab\" (click)=\"pane.select($event); pane.tabpaneHeaderClick($event, i);\" (keydown)=\"onkeydown($event)\">\n        @if (pane.paneicon) {\n          <i [ngClass]=\"['app-icon', pane.paneicon]\"></i>\n        }\n        <span [textContent]=\"pane.title\"></span>\n        @if (pane.badgevalue) {\n          <span class=\"label label-{{pane.badgetype}}\" [textContent]=\"pane.badgevalue\"></span>\n        }\n      </a>\n    </li>\n  }\n</ul>\n@if (type !== 'dynamic') {\n  <div class=\"tab-content\" [ngClass]=\"{'tab-stacked': vertical, 'tab-justified': justified}\">\n    <ng-content ngProjectAs=\"div[wmTabPane]\"></ng-content>\n  </div>\n}\n@if (type === 'dynamic') {\n  <div class=\"tab-content\" [ngClass]=\"{'tab-stacked': vertical, 'tab-justified': justified}\">\n    @if (fieldDefs && !fieldDefs.length) {\n      <div>{{nodatamessage}}</div>\n    }\n    <ng-content select=\"div[wmRepeatTemplate]\"></ng-content>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, TextContentDirective], selector: 'div[wmTabs]', exportAs: 'wmTabs', providers: [
+                        provideAsWidgetRef(TabsComponent)
+                    ], template: "<ul class=\"nav nav-tabs\" [ngClass]=\"{'nav-stacked': vertical, 'nav-justified': justified}\" role=\"tablist\">\n  @for (pane of panes; track pane; let i = $index) {\n    <li class=\"tab-header\" [attr.data-paneid]=\"pane.widgetId\" [ngClass]=\"{'active': pane.isActive, 'disabled': pane.disabled}\"\n      [hidden]=\"!pane.show\" role=\"presentation\">\n      <a [attr.aria-label]=\"pane.badgevalue ? pane.title + ' ' + pane.badgevalue : pane.title\"\n        [attr.icon-position]=\"iconposition\"\n        [attr.title]=\"pane.title\"\n        [tabindex]=\"pane.isActive ? '0' : '-1'\"\n        class=\"tab-heading\" href=\"javascript:void(0);\"\n        [attr.aria-selected]=\"pane.isActive\" role=\"tab\" (click)=\"pane.select($event); pane.tabpaneHeaderClick($event, i);\" (keydown)=\"onkeydown($event)\">\n        @if (pane.paneicon) {\n          <i [ngClass]=\"['app-icon', pane.paneicon]\"></i>\n        }\n        <span [textContent]=\"pane.title\"></span>\n        @if (pane.badgevalue) {\n          <span class=\"label label-{{pane.badgetype}}\" [textContent]=\"pane.badgevalue\"></span>\n        }\n      </a>\n    </li>\n  }\n</ul>\n@if (type !== 'dynamic') {\n  <div class=\"tab-content\" [ngClass]=\"{'tab-stacked': vertical, 'tab-justified': justified}\">\n    <ng-content ngProjectAs=\"div[wmTabPane]\"></ng-content>\n  </div>\n}\n@if (type === 'dynamic') {\n  <div class=\"tab-content\" [ngClass]=\"{'tab-stacked': vertical, 'tab-justified': justified}\">\n    @if (fieldDefs && !fieldDefs.length) {\n      <div>{{nodatamessage}}</div>\n    }\n    <ng-content select=\"div[wmRepeatTemplate]\"></ng-content>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.DynamicComponentRefProvider }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['transition']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['tabsposition']
+                }] }, { type: i1.StatePersistence }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { iconposition: [{
+                type: HostBinding,
+                args: ['attr.icon-position']
+            }], panes: [{
+                type: ContentChildren,
+                args: [TabPaneComponent]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TabPaneComponent, TabsComponent };
+//# sourceMappingURL=index.mjs.map