carbon-components-angular 6.0.0-rc.21 → 6.0.0-rc.22

package/fesm2022/carbon-components-angular-tabs.mjs

@@ -3,7 +3,7 @@ import { ViewChild, HostBinding, Input, Component, EventEmitter, Output, Directi
 import * as i1 from 'carbon-components-angular/utils';
 import { EventService, UtilsModule } from 'carbon-components-angular/utils';
 import { Subscription } from 'rxjs';
-import { NgClass, NgTemplateOutlet, NgStyle, CommonModule } from '@angular/common';
+import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i2 from 'carbon-components-angular/i18n';
 import { I18nModule } from 'carbon-components-angular/i18n';
 import { Tooltip } from 'carbon-components-angular/tooltip';
@@ -1188,10 +1188,10 @@ class TabHeaderComponent extends TabHeaderBase {
 				[leaveDelayMs]="leaveDelayMs"
 				[isOpen]="isTooltipOpen"
 				[disabled]="disabled">
-				<ng-container *ngTemplateOutlet="tabButtonTemplate"></ng-container>
+				<ng-container *ngTemplateOutlet="tabButtonTemplate" />
 			</cds-tooltip>
 		} @else {
-			<ng-container *ngTemplateOutlet="tabButtonTemplate"></ng-container>
+			<ng-container *ngTemplateOutlet="tabButtonTemplate" />
 		}
 
 		<ng-template #tabButtonTemplate>
@@ -1299,10 +1299,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 				[leaveDelayMs]="leaveDelayMs"
 				[isOpen]="isTooltipOpen"
 				[disabled]="disabled">
-				<ng-container *ngTemplateOutlet="tabButtonTemplate"></ng-container>
+				<ng-container *ngTemplateOutlet="tabButtonTemplate" />
 			</cds-tooltip>
 		} @else {
-			<ng-container *ngTemplateOutlet="tabButtonTemplate"></ng-container>
+			<ng-container *ngTemplateOutlet="tabButtonTemplate" />
 		}
 
 		<ng-template #tabButtonTemplate>
@@ -1571,10 +1571,9 @@ class Tab {
 			@if (isTemplate(tabContent)) {
 				<ng-template
 					[ngTemplateOutlet]="tabContent"
-					[ngTemplateOutletContext]="{ $implicit: templateContext }">
-				</ng-template>
+					[ngTemplateOutletContext]="{ $implicit: templateContext }" />
 			}
-			<ng-content></ng-content>
+			<ng-content />
 		}
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
@@ -1587,13 +1586,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 			@if (isTemplate(tabContent)) {
 				<ng-template
 					[ngTemplateOutlet]="tabContent"
-					[ngTemplateOutletContext]="{ $implicit: templateContext }">
-				</ng-template>
+					[ngTemplateOutletContext]="{ $implicit: templateContext }" />
 			}
-			<ng-content></ng-content>
+			<ng-content />
 		}
 	`,
-                    imports: [NgStyle, NgTemplateOutlet]
+                    imports: [NgTemplateOutlet]
                 }]
         }], propDecorators: { hostId: [{
                 type: HostBinding,
@@ -2691,10 +2689,9 @@ class IconTab extends Tab {
 			@if (isTemplate(tabContent)) {
 				<ng-template
 					[ngTemplateOutlet]="tabContent"
-					[ngTemplateOutletContext]="{ $implicit: templateContext }">
-				</ng-template>
+					[ngTemplateOutletContext]="{ $implicit: templateContext }" />
 			}
-			<ng-content></ng-content>
+			<ng-content />
 		}
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
@@ -2707,10 +2704,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 			@if (isTemplate(tabContent)) {
 				<ng-template
 					[ngTemplateOutlet]="tabContent"
-					[ngTemplateOutletContext]="{ $implicit: templateContext }">
-				</ng-template>
+					[ngTemplateOutletContext]="{ $implicit: templateContext }" />
 			}
-			<ng-content></ng-content>
+			<ng-content />
 		}
 	`,
                     providers: [
@@ -2898,7 +2894,7 @@ class Tabs {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: Tabs, isStandalone: true, selector: "cds-tabs, ibm-tabs", inputs: { position: "position", cacheActive: "cacheActive", followFocus: "followFocus", isNavigation: "isNavigation", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", type: "type", theme: "theme", skeleton: "skeleton", iconSize: "iconSize", fullWidth: "fullWidth", dismissable: "dismissable", scrollIntoView: "scrollIntoView", scrollDebounceWait: "scrollDebounceWait" }, outputs: { tabClose: "tabClose" }, queries: [{ propertyName: "tabHeaders", first: true, predicate: TabHeaders, descendants: true }, { propertyName: "tabs", predicate: Tab }], usesOnChanges: true, ngImport: i0, template: `
 		@if (skeleton) {
-			<cds-tabs-skeleton [contained]="type === 'contained'"></cds-tabs-skeleton>
+			<cds-tabs-skeleton [contained]="type === 'contained'" />
 		}
 		@if (!skeleton) {
 			@if (hasTabHeaders() && position === 'top') {
@@ -2917,15 +2913,14 @@ class Tabs {
 					[dismissable]="dismissable"
 					[scrollIntoView]="scrollIntoView"
 					[scrollDebounceWait]="scrollDebounceWait"
-					(tabClose)="tabClose.emit($event)">
-				</cds-tab-headers>
+					(tabClose)="tabClose.emit($event)" />
 			}
-			<ng-content></ng-content>
+			<ng-content />
 			<ng-template #before>
-				<ng-content select="[before]"></ng-content>
+				<ng-content select="[before]" />
 			</ng-template>
 			<ng-template #after>
-				<ng-content select="[after]"></ng-content>
+				<ng-content select="[after]" />
 			</ng-template>
 			@if (hasTabHeaders() && position === 'bottom') {
 				<cds-tab-headers
@@ -2937,8 +2932,7 @@ class Tabs {
 					[dismissable]="dismissable"
 					[scrollIntoView]="scrollIntoView"
 					[scrollDebounceWait]="scrollDebounceWait"
-					(tabClose)="tabClose.emit($event)">
-				</cds-tab-headers>
+					(tabClose)="tabClose.emit($event)" />
 			}
 		}
 	`, isInline: true, dependencies: [{ kind: "component", type: TabSkeleton, selector: "cds-tabs-skeleton, ibm-tabs-skeleton", inputs: ["numOftabs", "contained"] }, { kind: "component", type: TabHeaders, selector: "cds-tab-headers, ibm-tab-headers", inputs: ["tabs", "translations"], outputs: ["tabClose"] }] }); }
@@ -2949,7 +2943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     selector: "cds-tabs, ibm-tabs",
                     template: `
 		@if (skeleton) {
-			<cds-tabs-skeleton [contained]="type === 'contained'"></cds-tabs-skeleton>
+			<cds-tabs-skeleton [contained]="type === 'contained'" />
 		}
 		@if (!skeleton) {
 			@if (hasTabHeaders() && position === 'top') {
@@ -2968,15 +2962,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 					[dismissable]="dismissable"
 					[scrollIntoView]="scrollIntoView"
 					[scrollDebounceWait]="scrollDebounceWait"
-					(tabClose)="tabClose.emit($event)">
-				</cds-tab-headers>
+					(tabClose)="tabClose.emit($event)" />
 			}
-			<ng-content></ng-content>
+			<ng-content />
 			<ng-template #before>
-				<ng-content select="[before]"></ng-content>
+				<ng-content select="[before]" />
 			</ng-template>
 			<ng-template #after>
-				<ng-content select="[after]"></ng-content>
+				<ng-content select="[after]" />
 			</ng-template>
 			@if (hasTabHeaders() && position === 'bottom') {
 				<cds-tab-headers
@@ -2988,8 +2981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 					[dismissable]="dismissable"
 					[scrollIntoView]="scrollIntoView"
 					[scrollDebounceWait]="scrollDebounceWait"
-					(tabClose)="tabClose.emit($event)">
-				</cds-tab-headers>
+					(tabClose)="tabClose.emit($event)" />
 			}
 		}
 	`,
@@ -3091,7 +3083,7 @@ class TabsVertical {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TabsVertical, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TabsVertical, isStandalone: true, selector: "cds-tabs-vertical, ibm-tabs-vertical", inputs: { cacheActive: "cacheActive", followFocus: "followFocus", isNavigation: "isNavigation", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", height: "height", skeleton: "skeleton" }, host: { properties: { "class.cds--css-grid": "this.cssGridClass", "style.height": "this.hostHeight" } }, queries: [{ propertyName: "tabHeaders", first: true, predicate: TabHeadersVertical, descendants: true }, { propertyName: "tabs", predicate: Tab }], usesOnChanges: true, ngImport: i0, template: `
 		@if (skeleton) {
-			<cds-tabs-skeleton [contained]="true"></cds-tabs-skeleton>
+			<cds-tabs-skeleton [contained]="true" />
 		}
 		@if (!skeleton) {
 			@if (hasTabHeaders()) {
@@ -3102,15 +3094,14 @@ class TabsVertical {
 					[contentBefore]="before"
 					[contentAfter]="after"
 					[ariaLabel]="ariaLabel"
-					[ariaLabelledby]="ariaLabelledby">
-				</cds-tab-headers-vertical>
+					[ariaLabelledby]="ariaLabelledby" />
 			}
-			<ng-content></ng-content>
+			<ng-content />
 			<ng-template #before>
-				<ng-content select="[before]"></ng-content>
+				<ng-content select="[before]" />
 			</ng-template>
 			<ng-template #after>
-				<ng-content select="[after]"></ng-content>
+				<ng-content select="[after]" />
 			</ng-template>
 		}
 	`, isInline: true, dependencies: [{ kind: "component", type: TabSkeleton, selector: "cds-tabs-skeleton, ibm-tabs-skeleton", inputs: ["numOftabs", "contained"] }, { kind: "component", type: TabHeadersVertical, selector: "cds-tab-headers-vertical, ibm-tab-headers-vertical", inputs: ["tabs", "translations"] }] }); }
@@ -3121,7 +3112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     selector: "cds-tabs-vertical, ibm-tabs-vertical",
                     template: `
 		@if (skeleton) {
-			<cds-tabs-skeleton [contained]="true"></cds-tabs-skeleton>
+			<cds-tabs-skeleton [contained]="true" />
 		}
 		@if (!skeleton) {
 			@if (hasTabHeaders()) {
@@ -3132,15 +3123,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 					[contentBefore]="before"
 					[contentAfter]="after"
 					[ariaLabel]="ariaLabel"
-					[ariaLabelledby]="ariaLabelledby">
-				</cds-tab-headers-vertical>
+					[ariaLabelledby]="ariaLabelledby" />
 			}
-			<ng-content></ng-content>
+			<ng-content />
 			<ng-template #before>
-				<ng-content select="[before]"></ng-content>
+				<ng-content select="[before]" />
 			</ng-template>
 			<ng-template #after>
-				<ng-content select="[after]"></ng-content>
+				<ng-content select="[after]" />
 			</ng-template>
 		}
 	`,
@@ -3202,13 +3192,13 @@ class TabsVerticalGrouped {
         return this.height || null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TabsVerticalGrouped, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TabsVerticalGrouped, isStandalone: true, selector: "cds-tabs-vertical-grouped, ibm-tabs-vertical-grouped", inputs: { height: "height" }, host: { properties: { "class.cds--css-grid": "this.cssGridClass", "style.height": "this.hostHeight" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TabsVerticalGrouped, isStandalone: true, selector: "cds-tabs-vertical-grouped, ibm-tabs-vertical-grouped", inputs: { height: "height" }, host: { properties: { "class.cds--css-grid": "this.cssGridClass", "style.height": "this.hostHeight" } }, ngImport: i0, template: `<ng-content />`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TabsVerticalGrouped, decorators: [{
             type: Component,
             args: [{
                     selector: "cds-tabs-vertical-grouped, ibm-tabs-vertical-grouped",
-                    template: `<ng-content></ng-content>`,
+                    template: `<ng-content />`,
                     standalone: true
                 }]
         }], propDecorators: { height: [{