feat(docs) refactors floating docs (#173)

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/1/index.component.html

@@ -0,0 +1,16 @@
+<div #reference>
+  <p>Reference content</p>
+</div>
+
+<ngx-floating
+  [reference]="reference"
+  [middleware]="middleware"
+  placement="bottom"
+  bindTo=".page"
+>
+  <div class="floating">
+    <p>Floating content</p>
+  </div>
+
+  <ngx-arrow padding="12" />
+</ngx-floating>

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/1/index.component.scss

@@ -0,0 +1,6 @@
+.floating {
+  padding: 10px;
+  background: theme('colors.base-100');
+  border: 1px solid theme('colors.primary');
+  border-radius: 4px;
+}

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/1/index.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IndexComponent } from './index.component';
+
+describe('IndexComponent', () => {
+  let component: IndexComponent;
+  let fixture: ComponentFixture<IndexComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IndexComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IndexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/1/index.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Arrow, flip, FloatingComponent, offset, shift } from '@ngx-popovers/core';
+
+@Component({
+  selector: 'demo-index',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FloatingComponent,
+    Arrow
+  ],
+  templateUrl: './index.component.html',
+  styleUrl: './index.component.scss'
+})
+export class IndexComponent {
+  middleware = [
+    flip(),
+    shift(),
+    offset(8)
+  ];
+}

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/2/index.component.html

@@ -0,0 +1,31 @@
+<div #reference class="flex flex-col gap-2 w-[120px] p-2 m-auto items-center bg-base-300 overflow-hidden">
+  @for (place of placementList; track place) {
+    <button
+      class="btn btn-sm w-[100px]"
+      [class.btn-primary]="place === placement()"
+      (click)="placement.set(place)"
+    >
+      {{ place }}
+    </button>
+  }
+</div>
+
+<ngx-floating
+  bindTo=".page"
+  [reference]="reference"
+  [placement]="placement()"
+  [middleware]="middleware"
+>
+  <div class="card bg-base-100 border-4 border-base-200">
+    <div class="card-body items-center text-center">
+      <h2 class="card-title">Floating</h2>
+
+      <pre [innerText]="'<ngx-floating />'"></pre>
+      <div class="card-actions">
+        <button class="btn btn-sm btn-primary">{{ placement() }}</button>
+      </div>
+    </div>
+  </div>
+
+  <ngx-arrow padding="20" />
+</ngx-floating>

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/2/index.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IndexComponent } from './index.component';
+
+describe('IndexComponent', () => {
+  let component: IndexComponent;
+  let fixture: ComponentFixture<IndexComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IndexComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IndexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/2/index.component.ts

@@ -0,0 +1,34 @@
+import { Component, ElementRef, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Arrow, FloatingComponent, Middleware, offset, Placement } from '@ngx-popovers/core';
+import { flip } from '@floating-ui/dom';
+
+@Component({
+  selector: 'demo-index',
+  standalone: true,
+  imports: [
+    CommonModule,
+    Arrow,
+    FloatingComponent
+  ],
+  templateUrl: './index.component.html',
+  styleUrl: './index.component.scss'
+})
+export class IndexComponent {
+  readonly elementRef: HTMLElement = inject(ElementRef).nativeElement;
+  readonly placement = signal<Placement>('left');
+
+  readonly placementList: Placement[] = [
+    'left',
+    'bottom',
+    'right',
+    'top'
+  ];
+
+  readonly middleware: Middleware[] = [
+    offset(10),
+    flip({
+      fallbackStrategy: 'initialPlacement'
+    })
+  ];
+}

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/3/index.component.html

@@ -0,0 +1,14 @@
+<div #reference>
+  <p>Reference content</p>
+</div>
+
+<ngx-floating
+  [reference]="reference"
+  bindTo=".page"
+>
+  <div class="floating">
+    <p>Floating content</p>
+  </div>
+
+  <ngx-arrow padding="12" />
+</ngx-floating>

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/3/index.component.scss

@@ -0,0 +1,6 @@
+.floating {
+  padding: 10px;
+  background: theme('colors.base-100');
+  border: 1px solid theme('colors.primary');
+  border-radius: 4px;
+}

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/3/index.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IndexComponent } from './index.component';
+
+describe('IndexComponent', () => {
+  let component: IndexComponent;
+  let fixture: ComponentFixture<IndexComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IndexComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IndexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/3/index.component.ts

@@ -0,0 +1,25 @@
+import { Component, Provider } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Arrow, FloatingComponent, NGX_FLOATING_CONFIG, NgxFloatingConfig, offset } from '@ngx-popovers/core';
+
+export const FloatingConfigProvider: Provider = {
+  provide: NGX_FLOATING_CONFIG,
+  useValue: new NgxFloatingConfig({
+    placement: 'right-start',
+    autoUpdate: false,
+    middleware: [
+      offset(40)
+    ]
+  })
+};
+
+@Component({
+  selector: 'demo-index',
+  standalone: true,
+  imports: [CommonModule, Arrow, FloatingComponent],
+  providers: [FloatingConfigProvider],
+  templateUrl: './index.component.html',
+  styleUrl: './index.component.scss'
+})
+export class IndexComponent {
+}

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/page-floating.component.html

@@ -5,11 +5,24 @@
     <h2 class="text-4xl mb-4 font-bold">Usage</h2>
 
     <p class="text-xl">Default usage:</p>
-    <div class="my-4">
-      <highlight lang="html" [code]="example" />
-    </div>
 
-    <p>The floating component uses <a class="link" [routerLink]="['/', 'docs', 'core', 'portal']">Portal</a> and  <a class="link" [routerLink]="['/', 'core', 'arrow']">Arrow</a> inside.</p>
+    <demo-code-example-tabs
+      [html]="example1.HTML | async"
+      [ts]="example1.TS | async"
+      [scss]="example1.SCSS | async"
+    >
+      <ng-container
+        *ngComponentOutlet="example1.EXAMPLE | async"
+      />
+    </demo-code-example-tabs>
+
+    <p>
+      The floating component uses
+      <a class="link" [routerLink]="['/', 'docs', 'core', 'portal']">Portal</a>
+      and
+      <a class="link" [routerLink]="['/', 'core', 'arrow']">Arrow</a>
+      inside.
+    </p>
 
     <div class="divider"></div>
 
@@ -22,41 +35,15 @@ <h2 class="text-4xl mb-4 font-bold">Example</h2>
 
     <br>
 
-    <section
-      #wrapper
-      class="border-2 border-dashed border-primary rounded min-h-[400px] max-w-[800px] m-auto flex items-center justify-center relative overflow-hidden"
+    <demo-code-example-tabs
+      [html]="example2.HTML | async"
+      [ts]="example2.TS | async"
+      [scss]="example2.SCSS | async"
     >
-      <div #trigger class="flex flex-col gap-2 w-[120px] p-2 m-auto items-center bg-base-300">
-        @for (place of placementList; track place) {
-          <button
-            class="btn btn-sm w-[100px]"
-            [class.btn-accent]="place === placement()"
-            (click)="placement.set(place)"
-          >
-            {{ place }}
-          </button>
-        }
-
-        <ngx-floating
-          [trigger]="trigger"
-          [bindTo]="wrapper"
-          [placement]="placement()"
-          [middleware]="middleware"
-        >
-          <div class="card bg-base-100 border-4 border-base-200">
-            <div class="card-body items-center text-center">
-              <h2 class="card-title">Floating</h2>
-              <pre [innerText]="'<ngx-floating />'"></pre>
-              <div class="card-actions">
-                <button class="btn btn-sm btn-primary">{{ placement() }}</button>
-              </div>
-            </div>
-          </div>
-
-          <ngx-arrow padding="20" />
-        </ngx-floating>
-      </div>
-    </section>
+      <ng-container
+        *ngComponentOutlet="example2.EXAMPLE | async"
+      />
+    </demo-code-example-tabs>
 
     <div class="divider"></div>
 
@@ -66,7 +53,15 @@ <h2 class="text-4xl mb-4 font-bold">Configuration</h2>
     <p>Please, use the <code class="code">NgxFloatingConfig</code> class to change the default floating properties.</p>
 
     <div class="my-4">
-      <highlight lang="typescript" [code]="configExample" />
+      <demo-code-example-tabs
+        [html]="example3.HTML | async"
+        [ts]="example3.TS | async"
+        [scss]="example3.SCSS | async"
+      >
+        <ng-container
+          *ngComponentOutlet="example3.EXAMPLE | async"
+        />
+      </demo-code-example-tabs>
     </div>
   </section>
 </div>