@alauda/ui 6.0.4-beta.5 → 6.0.4-beta.9

package/bundles/alauda-ui.umd.js

@@ -8023,6 +8023,7 @@
         { type: TabContextService }
     ]; };
     TabComponent.propDecorators = {
+        name: [{ type: i0.Input }],
         textLabel: [{ type: i0.Input, args: ['label',] }],
         closeable: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
@@ -8048,15 +8049,17 @@
             this._tabsSubscription = rxjs.Subscription.EMPTY;
             /** Subscription to changes in the tab labels. */
             this._tabLabelSubscription = rxjs.Subscription.EMPTY;
+            this._selectedIndex = null;
+            this._tab = null;
             this._type = TabType.Line;
             this._size = TabSize.Medium;
             /** Emits whenever the type changes */
             this._typeChange = new rxjs.Subject();
             /** Emits whenever the size changes */
             this._sizeChange = new rxjs.Subject();
-            this._selectedIndex = null;
             /** Output to enable support for two-way binding on `[(selectedIndex)]` */
             this.selectedIndexChange = new i0.EventEmitter();
+            this.tabChange = new i0.EventEmitter();
             /** Event emitted when the tab selection has changed. */
             this.selectedTabChange = new i0.EventEmitter(true);
             /** Event emitted when focus has changed within a tab group. */
@@ -8075,6 +8078,19 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(TabGroupComponent.prototype, "tab", {
+            get: function () {
+                return this._tab;
+            },
+            set: function (value) {
+                this._tab = value;
+                if (this._tabs) {
+                    this.selectedIndex = this._findIndexByTab(value);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(TabGroupComponent.prototype, "type", {
             get: function () {
                 return this._type;
@@ -8143,7 +8159,9 @@
             var _this = this;
             // Don't clamp the `indexToSelect` immediately in the setter because it can happen that
             // the amount of tabs changes before the actual change detection runs.
-            var indexToSelect = (this._indexToSelect = this._clampTabIndex(this._indexToSelect));
+            var indexToSelect = (this._indexToSelect = this.tab
+                ? this._findIndexByTab(this.tab)
+                : this._clampTabIndex(this._indexToSelect));
             // If there is a change in selected index, emit a change event. Should not trigger if
             // the selected index has not yet been initialized.
             if (this._selectedIndex !== indexToSelect && this._selectedIndex != null) {
@@ -8152,7 +8170,10 @@
                 this.selectedTabChange.emit(tabChangeEvent);
                 // Emitting this value after change detection has run
                 // since the checked content may contain this variable'
-                Promise.resolve().then(function () { return _this.selectedIndexChange.emit(indexToSelect); });
+                Promise.resolve().then(function () {
+                    _this.selectedIndexChange.emit(indexToSelect);
+                    _this.tabChange.emit(_this._tabs.get(indexToSelect).name);
+                });
             }
             // Setup the position for each tab and optionally setup an origin on the next selected tab.
             this._tabs.forEach(function (tab, index) {
@@ -8255,6 +8276,9 @@
             // (since Math.max(NaN, 0) === NaN).
             return Math.min(this._tabs.length - 1, Math.max(index || 0, 0));
         };
+        TabGroupComponent.prototype._findIndexByTab = function (name) {
+            return this._tabs.toArray().findIndex(function (tab) { return tab.name === name; }) || 0;
+        };
         TabGroupComponent.prototype._createChangeEvent = function (index) {
             var _a;
             var event = new TabChangeEvent();
@@ -8309,11 +8333,13 @@
         _tabHeader: [{ type: i0.ViewChild, args: [TabHeaderComponent, { static: false },] }],
         _tabTitle: [{ type: i0.ContentChild, args: [TabTitleDirective, { static: false },] }],
         selectedIndex: [{ type: i0.Input }],
+        tab: [{ type: i0.Input }],
         type: [{ type: i0.Input }],
         title: [{ type: i0.Input }],
         size: [{ type: i0.Input }],
         lazy: [{ type: i0.Input }],
         selectedIndexChange: [{ type: i0.Output }],
+        tabChange: [{ type: i0.Output }],
         selectedTabChange: [{ type: i0.Output }],
         focusChange: [{ type: i0.Output }]
     };