master - 816099e76 Revert "feat(material/tabs): add the ability to keep content inside the DOM while off-screen (#20393)" (#24298)

Author: crisbeto

docs-content/api-docs/material-tabs.html

@@ -953,22 +953,6 @@ <h4 id="MatTabGroup" class="docs-header-link docs-api-h4 docs-api-class-name">
 
 
 
-<tr class="docs-api-properties-row">
-  <td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">
-          @Input()</div><p class="docs-api-property-name">
-      <code>preserveContent: boolean</code>
-    </p>
-  </td>
-  <td class="docs-api-property-description"><p>By default tabs remove their content from the DOM while it&#39;s off-screen.
-Setting this to <code>true</code> will keep it in the DOM which will prevent elements
-like iframes and videos from reloading next time it comes back into the view.</p>
-</td>
-</tr>
-
-
-    
-      
-
 <tr class="docs-api-properties-row">
   <td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">
           @Input()</div><p class="docs-api-property-name">
@@ -1268,21 +1252,6 @@ <h4 id="MatTabsConfig" class="docs-header-link docs-api-h4 docs-api-interface-na
 
 
 
-      
-
-<tr class="docs-api-properties-row">
-  <td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
-      <code>preserveContent: boolean</code>
-    </p>
-  </td>
-  <td class="docs-api-property-description"><p>By default tabs remove their content from the DOM while it&#39;s off-screen.
-Setting this to <code>true</code> will keep it in the DOM which will prevent elements
-like iframes and videos from reloading next time it comes back into the view.</p>
-</td>
-</tr>
-
-
-    
   </table>
 
 

docs-content/examples-highlighted/material/tabs/index-ts.html

@@ -17,7 +17,6 @@
 <span class="hljs-keyword">import</span> {TabGroupDynamicExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-dynamic/tab-group-dynamic-example&#x27;</span>;
 <span class="hljs-keyword">import</span> {TabGroupHeaderBelowExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-header-below/tab-group-header-below-example&#x27;</span>;
 <span class="hljs-keyword">import</span> {TabGroupLazyLoadedExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-lazy-loaded/tab-group-lazy-loaded-example&#x27;</span>;
-<span class="hljs-keyword">import</span> {TabGroupPreserveContentExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-preserve-content/tab-group-preserve-content-example&#x27;</span>;
 <span class="hljs-keyword">import</span> {TabGroupStretchedExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-stretched/tab-group-stretched-example&#x27;</span>;
 <span class="hljs-keyword">import</span> {TabGroupThemeExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-theme/tab-group-theme-example&#x27;</span>;
 <span class="hljs-keyword">import</span> {TabNavBarBasicExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-nav-bar-basic/tab-nav-bar-basic-example&#x27;</span>;
@@ -38,7 +37,6 @@
   TabGroupThemeExample,
   TabNavBarBasicExample,
   TabNavBarWithPanelExample,
-  TabGroupPreserveContentExample,
 };
 
 <span class="hljs-keyword">const</span> EXAMPLES = [
@@ -56,7 +54,6 @@
   TabGroupThemeExample,
   TabNavBarBasicExample,
   TabNavBarWithPanelExample,
-  TabGroupPreserveContentExample,
 ];
 
 <span class="hljs-meta">@NgModule</span>({

docs-content/examples-highlighted/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example-html.html

@@ -17,7 +17,6 @@ import {TabGroupHarnessExample} from './tab-group-harness/tab-group-harness-exam
 import {TabGroupDynamicExample} from './tab-group-dynamic/tab-group-dynamic-example';
 import {TabGroupHeaderBelowExample} from './tab-group-header-below/tab-group-header-below-example';
 import {TabGroupLazyLoadedExample} from './tab-group-lazy-loaded/tab-group-lazy-loaded-example';
-import {TabGroupPreserveContentExample} from './tab-group-preserve-content/tab-group-preserve-content-example';
 import {TabGroupStretchedExample} from './tab-group-stretched/tab-group-stretched-example';
 import {TabGroupThemeExample} from './tab-group-theme/tab-group-theme-example';
 import {TabNavBarBasicExample} from './tab-nav-bar-basic/tab-nav-bar-basic-example';
@@ -38,7 +37,6 @@ export {
   TabGroupThemeExample,
   TabNavBarBasicExample,
   TabNavBarWithPanelExample,
-  TabGroupPreserveContentExample,
 };
 
 const EXAMPLES = [
@@ -56,7 +54,6 @@ const EXAMPLES = [
   TabGroupThemeExample,
   TabNavBarBasicExample,
   TabNavBarWithPanelExample,
-  TabGroupPreserveContentExample,
 ];
 
 @NgModule({

docs-content/examples-highlighted/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example-ts.html

@@ -96,18 +96,6 @@ <h3 id="controlling-the-tab-animation" class="docs-header-link">
                              region="slow-animation-duration"></div>
 
 
-        <h3 id="keeping-the-tab-content-inside-the-dom-while-its-off-screen" class="docs-header-link">
-          <span header-link="keeping-the-tab-content-inside-the-dom-while-its-off-screen"></span>
-          Keeping the tab content inside the DOM while it&#39;s off-screen
-        </h3>
-      <p>By default the <code>&lt;mat-tab-group&gt;</code> will remove the content of off-screen tabs from the DOM until they
-come into the view. This is optimal for most cases since it keeps the DOM size smaller, but it
-isn&#39;t great for others like when a tab has an <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code> element, because the content
-will be re-initialized whenever the user navigates to the tab. If you want to keep the content of
-off-screen tabs in the DOM, you can set the <code>preserveContent</code> input to <code>true</code>.</p>
-<div material-docs-example="tab-group-preserve-content"></div>
-
-
         <h3 id="accessibility" class="docs-header-link">
           <span header-link="accessibility"></span>
           Accessibility

docs-content/examples-source/material/tabs/index.ts

@@ -4844,22 +4844,6 @@ const EXAMPLE_COMPONENTS = {
             "importSpecifier": "material/tabs"
         }
     },
-    "tab-group-preserve-content": {
-        "packagePath": "material/tabs/tab-group-preserve-content",
-        "title": "Tab group that keeps its content inside the DOM when it's off-screen.",
-        "componentName": "TabGroupPreserveContentExample",
-        "files": [
-            "tab-group-preserve-content-example.ts",
-            "tab-group-preserve-content-example.html"
-        ],
-        "selector": "tab-group-preserve-content-example",
-        "additionalComponents": [],
-        "primaryFile": "tab-group-preserve-content-example.ts",
-        "module": {
-            "name": "TabGroupExamplesModule",
-            "importSpecifier": "material/tabs"
-        }
-    },
     "tab-group-stretched": {
         "packagePath": "material/tabs/tab-group-stretched",
         "title": "Tab group with stretched labels",

docs-content/examples-source/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example.html

@@ -172,18 +172,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ng
             args: [{ selector: 'tab-group-lazy-loaded-example', template: "<mat-tab-group>\n<!-- #docregion mat-tab-content -->\n  <mat-tab label=\"First\">\n    <ng-template matTabContent>\n      Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}\n    </ng-template>\n  </mat-tab>\n<!-- #enddocregion mat-tab-content -->\n  <mat-tab label=\"Second\">\n    <ng-template matTabContent>\n      Content 2 - Loaded: {{getTimeLoaded(2) | date:'medium'}}\n    </ng-template>\n  </mat-tab>\n  <mat-tab label=\"Third\">\n    <ng-template matTabContent>\n      Content 3 - Loaded: {{getTimeLoaded(3) | date:'medium'}}\n    </ng-template>\n  </mat-tab>\n</mat-tab-group>\n" }]
         }] });
 
-/**
- * @title Tab group that keeps its content inside the DOM when it's off-screen.
- */
-class TabGroupPreserveContentExample {
-}
-TabGroupPreserveContentExample.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: TabGroupPreserveContentExample, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabGroupPreserveContentExample.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: TabGroupPreserveContentExample, selector: "tab-group-preserve-content-example", ngImport: i0, template: "<p>Start the video in the first tab and navigate to the second one to see how it keeps playing.</p>\n\n<mat-tab-group [preserveContent]=\"true\">\n  <mat-tab label=\"First\">\n    <iframe\n      width=\"560\"\n      height=\"315\"\n      src=\"https://www.youtube.com/embed/B-lipaiZII8\"\n      frameborder=\"0\"\n      allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n      allowfullscreen></iframe>\n  </mat-tab>\n  <mat-tab label=\"Second\">Note how the video from the previous tab is still playing.</mat-tab>\n</mat-tab-group>\n", components: [{ type: i1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: TabGroupPreserveContentExample, decorators: [{
-            type: Component,
-            args: [{ selector: 'tab-group-preserve-content-example', template: "<p>Start the video in the first tab and navigate to the second one to see how it keeps playing.</p>\n\n<mat-tab-group [preserveContent]=\"true\">\n  <mat-tab label=\"First\">\n    <iframe\n      width=\"560\"\n      height=\"315\"\n      src=\"https://www.youtube.com/embed/B-lipaiZII8\"\n      frameborder=\"0\"\n      allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n      allowfullscreen></iframe>\n  </mat-tab>\n  <mat-tab label=\"Second\">Note how the video from the previous tab is still playing.</mat-tab>\n</mat-tab-group>\n" }]
-        }] });
-
 /**
  * @title Tab group with stretched labels
  */
@@ -262,7 +250,6 @@ const EXAMPLES = [
     TabGroupThemeExample,
     TabNavBarBasicExample,
     TabNavBarWithPanelExample,
-    TabGroupPreserveContentExample,
 ];
 class TabGroupExamplesModule {
 }
@@ -280,8 +267,7 @@ TabGroupExamplesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         TabGroupStretchedExample,
         TabGroupThemeExample,
         TabNavBarBasicExample,
-        TabNavBarWithPanelExample,
-        TabGroupPreserveContentExample], imports: [CommonModule,
+        TabNavBarWithPanelExample], imports: [CommonModule,
         MatButtonModule,
         MatButtonToggleModule,
         MatCheckboxModule,
@@ -301,8 +287,7 @@ TabGroupExamplesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         TabGroupStretchedExample,
         TabGroupThemeExample,
         TabNavBarBasicExample,
-        TabNavBarWithPanelExample,
-        TabGroupPreserveContentExample] });
+        TabNavBarWithPanelExample] });
 TabGroupExamplesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: TabGroupExamplesModule, imports: [[
             CommonModule,
             MatButtonModule,
@@ -335,5 +320,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ng
  * Generated bundle index. Do not edit.
  */
 
-export { TabGroupAlignExample, TabGroupAnimationsExample, TabGroupAsyncExample, TabGroupBasicExample, TabGroupCustomLabelExample, TabGroupDynamicExample, TabGroupDynamicHeightExample, TabGroupExamplesModule, TabGroupHarnessExample, TabGroupHeaderBelowExample, TabGroupLazyLoadedExample, TabGroupPreserveContentExample, TabGroupStretchedExample, TabGroupThemeExample, TabNavBarBasicExample, TabNavBarWithPanelExample };
+export { TabGroupAlignExample, TabGroupAnimationsExample, TabGroupAsyncExample, TabGroupBasicExample, TabGroupCustomLabelExample, TabGroupDynamicExample, TabGroupDynamicHeightExample, TabGroupExamplesModule, TabGroupHarnessExample, TabGroupHeaderBelowExample, TabGroupLazyLoadedExample, TabGroupStretchedExample, TabGroupThemeExample, TabNavBarBasicExample, TabNavBarWithPanelExample };
 //# sourceMappingURL=tabs.mjs.map