feat(docs): page arrow docs (#188)

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

@@ -0,0 +1,13 @@
+<div #reference>trigger</div>
+
+<ngx-floating 
+  [reference]="reference" 
+  placement="bottom" 
+  bindTo="main"
+>
+  <div class="floating">
+    <p>Floating content</p>
+  </div>
+
+  <ngx-arrow padding="20" />
+</ngx-floating>

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

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

apps/ngx-popovers/src/app/pages/documentation/page-core/page-arrow/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-arrow/examples/1/index.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Arrow, FloatingComponent } from "@ngx-popovers/core";
+
+@Component({
+  selector: 'demo-index',
+  standalone: true,
+  imports: [
+    FloatingComponent,
+    Arrow
+  ],
+  templateUrl: './index.component.html',
+  styleUrl: './index.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IndexComponent { }

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

@@ -0,0 +1,23 @@
+import { Component, Provider } from "@angular/core";
+import { ArrowBase, NGX_ARROW_COMPONENT } from "@ngx-popovers/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <div
+      style="
+        width: 12px;
+        height: 12px;
+        transform: rotate(45deg);
+      "
+      class="bg-primary"
+    ></div>
+  `
+})
+export class CustomArrow extends ArrowBase {
+}
+
+export const ArrowProvider: Provider = {
+  provide: NGX_ARROW_COMPONENT,
+  useValue: CustomArrow
+};

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

@@ -1,22 +1,26 @@
-<div class="page">
-  <page-title description="The Arrow component adds arrow to the floating elements." />
+<demo-doc-page>
+  <page-title
+    description="The Arrow component adds arrow to the floating elements."
+  />
 
-  <section class="py-4">
-    <h2 class="text-4xl mb-4 font-bold">Usage</h2>
-    <p>
-      The arrow component should be used into the floating component
-    </p>
+  <demo-doc-section name="usage">
+    <demo-sub-title>Usage</demo-sub-title>
 
-    <div class="my-4">
-      <highlight lang="html" [code]="defaultUsage" />
-    </div>
+    <p>The arrow component should be used into the floating component</p>
 
-    <div class="divider"></div>
-    <h2 class="text-4xl mb-4 font-bold">Configuration</h2>
+    <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>
+  </demo-doc-section>
+
+  <demo-doc-section name="configuration">
+    <demo-sub-title>Configuration</demo-sub-title>
 
     <p>You can use your own arrow component</p>
-    <div class="my-4">
-      <highlight lang="typescript" [code]="configExample" />
-    </div>
-  </section>
-</div>
+    <highlight lang="typescript" [code]="configExample | async" />
+  </demo-doc-section>
+</demo-doc-page>

apps/ngx-popovers/src/app/pages/documentation/page-core/page-arrow/page-arrow.component.ts

@@ -1,59 +1,36 @@
+import { AsyncPipe, CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { TitleComponent } from '@demo/pages/documentation/ui/components/title/title.component';
 import { HighlightComponent } from '@demo/core/highlight';
-
-const defaultUsage = `
-<div #trigger>trigger</div>
-
-<ngx-floating
-  [reference]="trigger"
-  placement="bottom"
-  bindTo=".body"
->
-  <p>Floating content</p>
-  
-  <ngx-arrow padding="20" />
-</ngx-floating>
-`.trim();
-
-const configExample = `
-import { Component, Provider } from '@angular/core';
-import { ArrowBase, NGX_ARROW_COMPONENT } from '@ngx-popovers/core';
-
-@Component({
-  standalone: true,
-  template: \`
-    <div
-      style="
-        width: 12px;
-        height: 12px;
-        transform: rotate(45deg);
-      "
-      class="bg-primary"
-    ></div>
-  \`
-})
-export class CustomArrow extends ArrowBase {
-}
-
-export const ArrowProvider: Provider = {
-  provide: NGX_ARROW_COMPONENT,
-  useValue: CustomArrow
-};
-`.trim();
+import { TitleComponent } from '@demo/pages/documentation/ui/components/title/title.component';
+import { CodeExampleTabsComponent } from "../../ui/components/code-example-tabs/code-example-tabs.component";
+import { DocPageComponent } from "../../ui/components/doc-page/doc-page.component";
+import { DocSectionComponent } from "../../ui/components/doc-page/doc-section/doc-section.component";
+import { SubTitleComponent } from "../../ui/components/doc-page/sub-title/sub-title.component";
 
 @Component({
   selector: 'ngx-popovers-page-arrow',
   standalone: true,
   imports: [
+    CommonModule,
     TitleComponent,
-    HighlightComponent
-  ],
+    HighlightComponent,
+    DocPageComponent,
+    DocSectionComponent,
+    SubTitleComponent,
+    CodeExampleTabsComponent,
+    AsyncPipe
+],
   templateUrl: './page-arrow.component.html',
   styleUrl: './page-arrow.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PageArrowComponent {
-  defaultUsage = defaultUsage;
-  configExample = configExample;
+  example1 = {
+    EXAMPLE: import('./examples/1/index.component').then(m => m.IndexComponent),
+    HTML: import('./examples/1/index.component.html?raw').then(m => m.default),
+    TS: import('./examples/1/index.component.ts?raw').then(m => m.default),
+    SCSS: import('./examples/1/index.component.scss?raw').then(m => m.default)
+  };
+
+  configExample = import('./examples/2/index.config.ts?raw').then(m => m.default);
 }