Refactor folder structure, add content page

projects/ngx-tippy-demo/src/app/app-routing.module.ts

@@ -1,8 +1,9 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-import { GettingStartedComponent } from '@pages/getting-started';
-import { PropsComponent } from '@pages/props';
-import { UsageComponent } from '@pages/usage';
+import { AppContentComponent } from 'projects/ngx-tippy-demo/src/app/pages/app-content';
+import { GettingStartedComponent } from 'projects/ngx-tippy-demo/src/app/pages/getting-started';
+import { PropsComponent } from 'projects/ngx-tippy-demo/src/app/pages/props';
+import { UsageComponent } from 'projects/ngx-tippy-demo/src/app/pages/usage';
 
 export const routes: Routes = [
   {
@@ -22,6 +23,10 @@ export const routes: Routes = [
     path: 'applying-props',
     component: PropsComponent,
   },
+  {
+    path: 'applying-content',
+    component: AppContentComponent,
+  },
 ];
 
 @NgModule({

projects/ngx-tippy-demo/src/app/app.component.ts

@@ -27,7 +27,7 @@ export class AppComponent implements OnInit {
     this.bodyClassList = this.window.document.body.classList;
   }
 
-  ngOnInit(): void {
+  ngOnInit() {
     this.initResizeSub();
     this.listenForSchemeChange();
     this.checkIsMobile();

projects/ngx-tippy-demo/src/app/app.module.ts

@@ -3,13 +3,14 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CodeComponent } from '@components/code';
-import { ContentComponent } from '@components/content';
 import { DemoComponent } from '@components/demo';
 import { FooterComponent } from '@components/footer';
 import { HeaderComponent } from '@components/header';
 import { NavComponent } from '@components/nav';
 import { SchemeSwitcherComponent } from '@components/scheme-switcher';
 import { SocialComponent } from '@components/social';
+import { AppContentComponent } from '@pages/app-content';
+import { ContentComponent } from '@pages/content';
 import { GettingStartedComponent } from '@pages/getting-started';
 import { NotSupportedComponent } from '@pages/not-supported';
 import { PropsComponent } from '@pages/props';
@@ -55,6 +56,7 @@ function initialize(SchemeService: SchemeService) {
     DemoComponent,
     NotSupportedComponent,
     PropsComponent,
+    AppContentComponent,
   ],
   imports: [
     AppRoutingModule,

projects/ngx-tippy-demo/src/components/code/code.component.ts → projects/ngx-tippy-demo/src/app/components/code/code.component.ts

@@ -40,7 +40,7 @@ export class CodeComponent implements OnInit {
     private readonly cdr: ChangeDetectorRef
   ) {}
 
-  ngOnInit(): void {
+  ngOnInit() {
     this.listenSchemeChanges();
   }
 

projects/ngx-tippy-demo/src/components/demo/demo.component.ts → projects/ngx-tippy-demo/src/app/components/demo/demo.component.ts

@@ -20,9 +20,9 @@ export class DemoComponent implements OnInit, AfterViewInit {
     private readonly destroy$: DestroyService
   ) {}
 
-  ngOnInit(): void {}
+  ngOnInit() {}
 
-  ngAfterViewInit(): void {
+  ngAfterViewInit() {
     const tInstances = this.tippyService.getInstances();
 
     if (!tInstances) return;

projects/ngx-tippy-demo/src/components/footer/footer.component.ts → projects/ngx-tippy-demo/src/app/components/footer/footer.component.ts

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 export class FooterComponent implements OnInit {
   constructor() {}
 
-  ngOnInit(): void {}
+  ngOnInit() {}
 
   public get year() {
     return new Date().getFullYear();

projects/ngx-tippy-demo/src/components/header/header.component.ts → projects/ngx-tippy-demo/src/app/components/header/header.component.ts

@@ -9,5 +9,5 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 export class HeaderComponent implements OnInit {
   constructor() {}
 
-  public ngOnInit(): void {}
+  public ngOnInit() {}
 }

projects/ngx-tippy-demo/src/components/nav/nav.component.html → projects/ngx-tippy-demo/src/app/components/nav/nav.component.html

@@ -57,7 +57,16 @@
       >
         Applying props
       </a>
+    </li>
 
+    <li class="nav__item">
+      <a
+        class="nav__link"
+        tuiLink
+        routerLink="/applying-content"
+      >
+        Applying content
+      </a>
     </li>
   </ul>
 </div>

projects/ngx-tippy-demo/src/app/components/nav/nav.component.ts

@@ -0,0 +1,26 @@
+import { ViewportScroller } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DestroyService } from '@services';
+import { ScrollComponent } from '@shared';
+
+@Component({
+  selector: 't-demo-nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [DestroyService],
+})
+export class NavComponent extends ScrollComponent implements OnInit {
+  public isSublistExpanded: boolean = true;
+
+  constructor(
+    protected readonly activatedRoute: ActivatedRoute,
+    protected readonly scroller: ViewportScroller,
+    protected readonly destroy$: DestroyService
+  ) {
+    super(activatedRoute, scroller, destroy$);
+  }
+
+  ngOnInit() {}
+}

projects/ngx-tippy-demo/src/components/scheme-switcher/scheme-switcher.component.ts → projects/ngx-tippy-demo/src/app/components/scheme-switcher/scheme-switcher.component.ts

@@ -23,25 +23,25 @@ export class SchemeSwitcherComponent implements OnInit {
 
   constructor(protected readonly schemeService: SchemeService, private destroy$: DestroyService) {}
 
-  ngOnInit(): void {
+  ngOnInit() {
     this.listenForSchemeChanges();
   }
 
-  protected onSchemeSelect(scheme: Schemes): void {
+  protected onSchemeSelect(scheme: Schemes) {
     this.schemeService.toggleScheme(scheme);
   }
 
-  protected onSystemSchemeToggle(): void {
+  protected onSystemSchemeToggle() {
     this.schemeService.toggleSystemScheme();
   }
 
-  private listenForSchemeChanges(): void {
+  private listenForSchemeChanges() {
     this.schemeService.scheme$.pipe(takeUntil(this.destroy$)).subscribe(scheme => {
       this.updateTippyTheme(scheme);
     });
   }
 
-  private updateTippyTheme(selectedScheme: string): void {
+  private updateTippyTheme(selectedScheme: string) {
     this.tSchemes = {
       ...this.tSchemes,
       theme: selectedScheme === Schemes.Dark ? 'light' : 'dark',

projects/ngx-tippy-demo/src/components/social/social.component.ts → projects/ngx-tippy-demo/src/app/components/social/social.component.ts

@@ -20,5 +20,5 @@ export class SocialComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit(): void {}
+  ngOnInit() {}
 }

projects/ngx-tippy-demo/src/app/pages/app-content/_tests/app-content.component.spec.ts

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

projects/ngx-tippy-demo/src/app/pages/app-content/app-content.component.html

@@ -0,0 +1,151 @@
+<div class="app-content">
+
+  <h1 class="tui-text_h3">Applying content</h1>
+
+  <p class="tui-text_body-m-2">You can pass content for tooltip through:</p>
+
+  <ul class="tui-list">
+    <li
+      *ngFor="let method of contentMethods"
+      class="tui-list__item"
+    >
+      <a
+        tuiLink
+        routerLink="/applying-content"
+        fragment="{{ method.value }}"
+        (click)="onFragmentNav('data_attribute')"
+      >
+        {{ method.view }}
+      </a>
+    </li>
+  </ul>
+
+  <!-- Data attribute -->
+
+  <h6
+    id="data_attribute"
+    class="tui-text_h6"
+  >
+    Data attribute
+  </h6>
+
+  <t-demo-code
+    *tuiLet="snippets.data_attribute as s"
+    [snippet]="s.snippet"
+    [languages]="s.languages"
+  ></t-demo-code>
+
+  <t-demo>
+    <button
+      class="tui-button"
+      size="m"
+      tuiButton
+      ngxTippy
+      [tippyProps]="{
+        placement: 'right'
+      }"
+      data-tippy-content="Tooltip content"
+      type="button"
+      appearance="primary"
+    >
+      Button
+    </button>
+  </t-demo>
+
+  <!-- Content property -->
+
+  <h6
+    id="content_property"
+    class="tui-text_h6"
+  >
+    Content property
+  </h6>
+
+  <t-demo-code
+    *tuiLet="snippets.data_content_prop as s"
+    [snippet]="s.snippet"
+    [languages]="s.languages"
+  ></t-demo-code>
+
+  <t-demo>
+    <button
+      class="tui-button"
+      size="m"
+      tuiButton
+      ngxTippy
+      [tippyProps]="{
+        allowHTML: true,
+        placement: 'right',
+        content: '<p>Tooltip <strong>HTML</strong> content</p>'
+      }"
+      type="button"
+      appearance="primary"
+    >
+      Button
+    </button>
+  </t-demo>
+
+  <!-- ngxTippy directive -->
+
+  <h6
+    id="ngxTippy_directive"
+    class="tui-text_h6"
+  >
+    ngxTippy directive
+  </h6>
+
+  <p class="tui-text_body-m-2">Template driven approach:</p>
+
+  <t-demo-code
+    *tuiLet="snippets.data_directive_tmpl as s"
+    [snippet]="s.snippet"
+    [languages]="s.languages"
+  ></t-demo-code>
+
+  <t-demo>
+    <button
+      class="tui-button"
+      size="m"
+      tuiButton
+      ngxTippy="Tooltip content"
+      [tippyProps]="{
+        placement: 'right'
+      }"
+      type="button"
+      appearance="primary"
+    >
+      Button
+    </button>
+  </t-demo>
+
+  <p class="tui-text_body-m-2">Component driven approach:</p>
+
+  <t-demo-code
+    *tuiLet="snippets.data_directive_component_1 as s"
+    [snippet]="s.snippet"
+    [languages]="s.languages"
+  ></t-demo-code>
+
+  <t-demo-code
+    *tuiLet="snippets.data_directive_component_2 as s"
+    [snippet]="s.snippet"
+    [languages]="s.languages"
+  ></t-demo-code>
+
+  <t-demo>
+    <button
+      class="tui-button"
+      size="m"
+      tuiButton
+      [ngxTippy]="content"
+      [tippyProps]="{
+        placement: 'right'
+      }"
+      type="button"
+      appearance="primary"
+    >
+      Button
+    </button>
+  </t-demo>
+
+</div>

projects/ngx-tippy-demo/src/app/pages/app-content/app-content.component.ts

@@ -0,0 +1,30 @@
+import { ViewportScroller } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DestroyService } from '@services';
+import { ScrollComponent } from '@shared';
+import { CONTENT_METHODS } from './constants';
+import { SNIPPETS } from './snippets';
+
+@Component({
+  selector: 't-demo-app-content',
+  templateUrl: './app-content.component.html',
+  styleUrls: ['./app-content.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [DestroyService],
+})
+export class AppContentComponent extends ScrollComponent implements OnInit {
+  public readonly snippets = SNIPPETS;
+  public readonly contentMethods = CONTENT_METHODS;
+  public readonly content = 'Tooltip content';
+
+  constructor(
+    protected readonly activatedRoute: ActivatedRoute,
+    protected readonly scroller: ViewportScroller,
+    protected readonly destroy$: DestroyService
+  ) {
+    super(activatedRoute, scroller, destroy$);
+  }
+
+  ngOnInit() {}
+}