fix: (Platform) remove dependency on position: fixed for Dynamic Page (…

…#4343)

* fix: (Platform) add styles only to Dynamic Page tabs and not to content tabs

* refactor nested ifs

- also add z-index so that tabs in dynamic page have more weight than tabs in content, avoiding one visible behind the other on scrolling

* remove dependency on position:fixed

- minor documentation selector name refactoring

* remove unused directive

fix failing unit test

* changed to position:static and added input offset

-removed unnecessary code

apps/docs/src/app/platform/component-docs/platform-dynamic-page/platform-dynamic-page-docs.component.html

@@ -3,7 +3,7 @@
 </fd-docs-section-title>
 <description> </description>
 <component-example>
-    <fdp-dynamic-page-example></fdp-dynamic-page-example>
+    <fdp-platform-dynamic-page-example></fdp-platform-dynamic-page-example>
 </component-example>
 <code-example [exampleFiles]="dynamicPageBasic"></code-example>
 
@@ -17,7 +17,7 @@
     Scrolling down will hide the header, and scrolling back up to the top will bring back the header into view.
 </description>
 <component-example>
-    <fdp-dynamic-page-snap-scroll-example></fdp-dynamic-page-snap-scroll-example>
+    <fdp-platform-dynamic-page-snap-scroll-example></fdp-platform-dynamic-page-snap-scroll-example>
 </component-example>
 <code-example [exampleFiles]="dynamicPageSnapScroll"></code-example>
 
@@ -29,7 +29,7 @@
 <description> Specify the <code>[tabLabel]</code> option to internally set up tabbed content for the page. 
     Use <code>(tabChange)</code> property to do something on tab change.</description>
 <component-example>
-    <fdp-dynamic-page-tabbed-example></fdp-dynamic-page-tabbed-example>
+    <fdp-platform-dynamic-page-tabbed-example></fdp-platform-dynamic-page-tabbed-example>
 </component-example>
 <code-example [exampleFiles]="dynamicPageTabbed"></code-example>
 
@@ -44,7 +44,7 @@
     <code>extra-large</code>
 </description>
 <component-example>
-    <fdp-dynamic-page-responsive-padding-example></fdp-dynamic-page-responsive-padding-example>
+    <fdp-platform-dynamic-page-responsive-padding-example></fdp-platform-dynamic-page-responsive-padding-example>
 </component-example>
 <code-example [exampleFiles]="dynamicPageResponsivePadding"></code-example>
 
@@ -56,6 +56,16 @@
     The collapsing header can be disabled by setting <code>[collapsible]</code> and <code>[pinnable]</code> properties to <code>false</code>.
 </description>
 <component-example>
-    <fdp-dynamic-page-non-collapsible-example></fdp-dynamic-page-non-collapsible-example>
+    <fdp-platform-dynamic-page-non-collapsible-example></fdp-platform-dynamic-page-non-collapsible-example>
 </component-example>
 <code-example [exampleFiles]="dynamicPageNonCollapsible"></code-example>
+
+<fd-docs-section-title id="dynamicPageFlexibleColumn" componentName="dynamicPage">
+    Tabbed Dynamic Page with a Flexible Column Layout
+</fd-docs-section-title>
+<description> Please note to give <code>position: relative</code> to the container holding the dynamic page, so that the page 
+is contained within the column(or any other container) correctly.</description>
+<component-example>
+    <fdp-platform-dynamic-page-flexible-column-example></fdp-platform-dynamic-page-flexible-column-example>
+</component-example>
+<code-example [exampleFiles]="dynamicPageFlexibleColumn"></code-example>

apps/docs/src/app/platform/component-docs/platform-dynamic-page/platform-dynamic-page-docs.component.ts

@@ -22,6 +22,10 @@ import * as dynamicPageNonCollapsibleExample from '!raw-loader!./platform-dynami
 import * as dynamicPageNonCollapsibleExampleScss from '!raw-loader!./platform-dynamic-page-examples/platform-dynamic-page-non-collapsible-example.component.scss';
 import * as dynamicPageNonCollapsibleExampleTsCode from '!raw-loader!./platform-dynamic-page-examples/platform-dynamic-page-non-collapsible-example.component.ts';
 
+import * as dynamicPageFlexibleColumnExample from '!raw-loader!./platform-dynamic-page-examples/platform-dynamic-page-flexible-column-example.component.html';
+import * as dynamicPageFlexibleColumnExampleScss from '!raw-loader!./platform-dynamic-page-examples/platform-dynamic-page-flexible-column-example.component.scss';
+import * as dynamicPageFlexibleColumnExampleTsCode from '!raw-loader!./platform-dynamic-page-examples/platform-dynamic-page-flexible-column-example.component.ts';
+
 @Component({
     selector: 'app-dynamic-page',
     templateUrl: './platform-dynamic-page-docs.component.html'
@@ -52,7 +56,7 @@ export class PlatformDynamicPageDocsComponent {
             language: 'typescript',
             code: dynamicPageSnapScrollExampleTsCode,
             fileName: 'platform-dynamic-page-snap-scroll-example',
-            component: 'PlatformDynamicPageSnapScrollComponent'
+            component: 'PlatformDynamicPageSnapScrollExampleComponent'
         }
     ];
 
@@ -67,7 +71,7 @@ export class PlatformDynamicPageDocsComponent {
             language: 'typescript',
             code: dynamicPageTabbedExampleTsCode,
             fileName: 'platform-dynamic-page-tabbed-example',
-            component: 'PlatformDynamicPageTabbedComponent'
+            component: 'PlatformDynamicPageTabbedExampleComponent'
         }
     ];
 
@@ -82,22 +86,37 @@ export class PlatformDynamicPageDocsComponent {
             language: 'typescript',
             code: dynamicPageResponsivePaddingExampleTsCode,
             fileName: 'platform-dynamic-page-responsive-padding-example',
-            component: 'PlatformDynamicPageResponsivePaddingComponent'
+            component: 'PlatformDynamicPageResponsivePaddingExampleComponent'
         }
     ];
 
     dynamicPageNonCollapsible: ExampleFile[] = [
         {
             language: 'html',
             code: dynamicPageNonCollapsibleExample,
-            fileName: 'platform-dynamic-page-responsive-padding-example',
+            fileName: 'platform-dynamic-page-non-collapsible-example',
             scssFileCode: dynamicPageNonCollapsibleExampleScss
         },
         {
             language: 'typescript',
             code: dynamicPageNonCollapsibleExampleTsCode,
-            fileName: 'platform-dynamic-page-responsive-padding-example',
-            component: 'PlatformDynamicPageResponsivePaddingComponent'
+            fileName: 'platform-dynamic-page-non-collapsible-example',
+            component: 'PlatformDynamicPageNonCollapsibleExampleComponent'
+        }
+    ];
+
+    dynamicPageFlexibleColumn: ExampleFile[] = [
+        {
+            language: 'html',
+            code: dynamicPageFlexibleColumnExample,
+            fileName: 'platform-dynamic-page-flexible-column-example',
+            scssFileCode: dynamicPageFlexibleColumnExampleScss
+        },
+        {
+            language: 'typescript',
+            code: dynamicPageFlexibleColumnExampleTsCode,
+            fileName: 'platform-dynamic-page-flexible-column-example',
+            component: 'PlatformDynamicPageFlexibleColumnExampleComponent'
         }
     ];
 }

apps/docs/src/app/platform/component-docs/platform-dynamic-page/platform-dynamic-page-examples/platform-dynamic-page-example.component.html

@@ -1,5 +1,5 @@
 <button fd-button (click)="openPage()">Click to open full screen</button>
-<div cdkScrollable class="overlay" #overlay>
+<div class="overlay" #overlay>
     <ng-container *ngIf="fullscreen">
         <div class="overlay-content">
             <fdp-dynamic-page size="large" ariaLabel="Example Dynamic Page">

apps/docs/src/app/platform/component-docs/platform-dynamic-page/platform-dynamic-page-examples/platform-dynamic-page-example.component.scss

@@ -10,6 +10,5 @@
 }
 
 .overlay-content {
-    position: relative;
     width: 100%;
 }

apps/docs/src/app/platform/component-docs/platform-dynamic-page/platform-dynamic-page-examples/platform-dynamic-page-example.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, ViewChild } from '@angu
 import { DynamicPageCollapseChangeEvent } from '@fundamental-ngx/platform';
 
 @Component({
-    selector: 'fdp-dynamic-page-example',
+    selector: 'fdp-platform-dynamic-page-example',
     templateUrl: './platform-dynamic-page-example.component.html',
     styleUrls: ['./platform-dynamic-page-example.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush