Finish docs

farengeyt451 · Sep 26, 2023 · a689978 · a689978
1 parent ee2fb62
commit a689978
Show file tree

Hide file tree

Showing 32 changed files with 712 additions and 97 deletions.
diff --git a/projects/ngx-tippy-demo/src/app/app-routing.module.ts b/projects/ngx-tippy-demo/src/app/app-routing.module.ts
@@ -4,6 +4,7 @@ import { DemoPageComponent } from '@pages/demo-page';
 import { GroupedTooltipsComponent } from '@pages/grouped-tooltips';
 import { MultipleTooltipsComponent } from '@pages/multiple-tooltips';
 import { ServiceComponent } from '@pages/service';
+import { SingletonComponent } from '@pages/singleton';
 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';
@@ -47,6 +48,10 @@ export const routes: Routes = [
     path: 'multiple-tooltips',
     component: MultipleTooltipsComponent,
   },
+  {
+    path: 'singleton',
+    component: SingletonComponent,
+  },
 ];
 
 @NgModule({

diff --git a/projects/ngx-tippy-demo/src/app/app.component.scss b/projects/ngx-tippy-demo/src/app/app.component.scss
@@ -32,8 +32,8 @@
   position: fixed;
   top: $header-height;
   width: 16rem;
-  height: 100%;
-  padding: 2rem 1.5rem;
+  padding: 2rem 1.5rem 0.5rem 1.5rem;
+  bottom: 70px;
 
   @include max-w($tablet) {
     width: 10rem;
@@ -56,5 +56,10 @@
 .t-demo__content {
   width: 100%;
   max-width: 62.5rem;
+}
 
+.t-demo__footer {
+  box-shadow: 0 0.125rem 1rem #00000014;
+  background-color: var(--tui-base-01);
+  border-top: 0.1rem solid var(--tui-base-03);
 }
diff --git a/projects/ngx-tippy-demo/src/app/app.module.ts b/projects/ngx-tippy-demo/src/app/app.module.ts
@@ -18,6 +18,7 @@ import { MultipleTooltipsComponent } from '@pages/multiple-tooltips';
 import { NotSupportedComponent } from '@pages/not-supported';
 import { PropsComponent } from '@pages/props';
 import { ServiceComponent } from '@pages/service';
+import { SingletonComponent } from '@pages/singleton';
 import { UsageComponent } from '@pages/usage';
 import { SchemeService } from '@services';
 import { TuiLetModule } from '@taiga-ui/cdk';
@@ -74,6 +75,7 @@ function initialize(SchemeService: SchemeService) {
     DefaultOrderKeyvaluePipe,
     GroupedTooltipsComponent,
     MultipleTooltipsComponent,
+    SingletonComponent,
   ],
   imports: [
     AppRoutingModule,

diff --git a/projects/ngx-tippy-demo/src/app/components/footer/footer.component.scss b/projects/ngx-tippy-demo/src/app/components/footer/footer.component.scss
@@ -1,5 +1,5 @@
 .footer {
-  padding: 1.5rem 5rem 1.5rem 0;
+  padding: 1rem 5rem 1rem 0;
   text-align: right;
 }
 

diff --git a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html
@@ -45,7 +45,6 @@
                 fragment="basic_usage"
                 routerLinkActive="nav__link--active"
                 [routerLinkActiveOptions]="linkActiveOptions"
-                (click)="onFragmentNav('basic_usage')"
               >
                 Basic usage
               </a>
@@ -58,7 +57,6 @@
                 fragment="initializing_on_condition"
                 routerLinkActive="nav__link--active"
                 [routerLinkActiveOptions]="linkActiveOptions"
-                (click)="onFragmentNav('initializing_on_condition')"
               >
                 Initializing on condition
               </a>
@@ -101,7 +99,6 @@
                 fragment="{{ method.value }}"
                 routerLinkActive="nav__link--active"
                 [routerLinkActiveOptions]="linkActiveOptions"
-                (click)="onFragmentNav(method.value)"
               >
                 {{ method.view }}
               </a>
@@ -130,7 +127,6 @@
                 fragment="additional_methods"
                 routerLinkActive="nav__link--active"
                 [routerLinkActiveOptions]="linkActiveOptions"
-                (click)="onFragmentNav('additional_methods')"
               >
                 Additional methods
               </a>
@@ -143,7 +139,6 @@
                 fragment="static_methods"
                 routerLinkActive="nav__link--active"
                 [routerLinkActiveOptions]="linkActiveOptions"
-                (click)="onFragmentNav('static_methods')"
               >
                 Static methods
               </a>
@@ -156,7 +151,6 @@
                 fragment="subscription_instances_changes"
                 routerLinkActive="nav__link--active"
                 [routerLinkActiveOptions]="linkActiveOptions"
-                (click)="onFragmentNav('subscription_instances_changes')"
               >
                 Subscription to instances changes
               </a>
@@ -187,6 +181,58 @@
           Multiple tooltips on a single element
         </a>
       </li>
+
+      <li class="nav__item">
+        <a
+          class="nav__link"
+          tuiLink
+          routerLink="/singleton"
+          routerLinkActive="nav__link--active"
+        >
+          Singleton
+        </a>
+
+        <tui-expand [expanded]="isSubListExpanded">
+          <ul class="nav__sub-list">
+            <li class="nav__sub-item">
+              <a
+                class="nav__link"
+                tuiLink
+                routerLink="/singleton"
+                fragment="overridden_props"
+                routerLinkActive="nav__link--active"
+                [routerLinkActiveOptions]="linkActiveOptions"
+              >
+                Overridden properties
+              </a>
+            </li>
+            <li class="nav__sub-item">
+              <a
+                class="nav__link"
+                tuiLink
+                routerLink="/singleton"
+                fragment="smooth_transitions"
+                routerLinkActive="nav__link--active"
+                [routerLinkActiveOptions]="linkActiveOptions"
+              >
+                Smooth transitions
+              </a>
+            </li>
+            <li class="nav__sub-item">
+              <a
+                class="nav__link"
+                tuiLink
+                routerLink="/singleton"
+                fragment="control_singleton_instance"
+                routerLinkActive="nav__link--active"
+                [routerLinkActiveOptions]="linkActiveOptions"
+              >
+                Programmatically control singleton instance
+              </a>
+            </li>
+          </ul>
+        </tui-expand>
+      </li>
     </ul>
   </div>
 </tui-scrollbar>
diff --git a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.scss b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.scss
@@ -1,5 +1,5 @@
 .nav-box {
-  height: calc(100% - 128px);
+  height: 100%;
 }
 
 .nav__list {

diff --git a/projects/ngx-tippy-demo/src/app/pages/app-content/app-content.component.html b/projects/ngx-tippy-demo/src/app/pages/app-content/app-content.component.html
@@ -1,6 +1,6 @@
 <div class="app-content">
 
-  <h1 class="tui-text_h3">Applying content</h1>
+  <h1 class="tui-text_h3 tui-space_top-0">Applying content</h1>
 
   <p class="tui-text_body-m-2">You can pass content for tooltip through:</p>
 
@@ -13,7 +13,6 @@ <h1 class="tui-text_h3">Applying content</h1>
         tuiLink
         routerLink="/applying-content"
         fragment="{{ method.value }}"
-        (click)="onFragmentNav(method.value)"
       >
         {{ method.view }}
       </a>
@@ -160,7 +159,7 @@ <h1 class="tui-text_h3">Applying content</h1>
   <p class="tui-text_body-m-2">Use <em>setContent()</em> method exposed by <em>NgxTippyService</em></p>
 
   <tui-notification>
-    tippyName is mandatory for this approach
+    <p class="tui-text_body-m-2 tui-space_vertical-0"><em>tippyName</em> is mandatory for this approach</p>
   </tui-notification>
 
   <t-demo-code

diff --git a/projects/ngx-tippy-demo/src/app/pages/app-content/app-content.component.scss b/projects/ngx-tippy-demo/src/app/pages/app-content/app-content.component.scss
@@ -1,3 +0,0 @@
-.tui-text_h3 {
-  margin-top: 0;
-}

diff --git a/projects/ngx-tippy-demo/src/app/pages/app-content/app-content.component.ts b/projects/ngx-tippy-demo/src/app/pages/app-content/app-content.component.ts
@@ -1,9 +1,6 @@
-import { ViewportScroller } from '@angular/common';
 import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { CONTENT_METHODS } from '@constants';
 import { DestroyService } from '@services';
-import { ScrollComponent } from '@shared';
 import { NgxTippyProps, NgxTippyService } from 'ngx-tippy-wrapper';
 import { SNIPPETS } from './snippets';
 
@@ -14,7 +11,7 @@ import { SNIPPETS } from './snippets';
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [DestroyService],
 })
-export class AppContentComponent extends ScrollComponent implements OnInit, AfterViewInit {
+export class AppContentComponent implements OnInit, AfterViewInit {
   @ViewChild('templateRefService', { read: ElementRef, static: true }) templateRefService!: ElementRef;
 
   public readonly snippets = SNIPPETS;
@@ -25,14 +22,7 @@ export class AppContentComponent extends ScrollComponent implements OnInit, Afte
     placement: 'right',
   };
 
-  constructor(
-    protected readonly activatedRoute: ActivatedRoute,
-    protected readonly scroller: ViewportScroller,
-    protected readonly destroy$: DestroyService,
-    private readonly tippyService: NgxTippyService
-  ) {
-    super(activatedRoute, scroller);
-  }
+  constructor(protected readonly destroy$: DestroyService, private readonly tippyService: NgxTippyService) {}
 
   ngOnInit() {}
 

diff --git a/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.html b/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.html
@@ -1,6 +1,6 @@
 <div class="demo-page">
 
-  <h1 class="tui-text_h3">Demo page</h1>
+  <h1 class="tui-text_h3 tui-space_top-0">Demo page</h1>
 
   <!-- Simple tooltip -->
 
@@ -209,7 +209,7 @@ <h6 class="tui-text_h6">
     status="info"
     class="service-demo tui-space_vertical-4"
   >
-    mouseenter | focus | click | focusin | manual
+    <p class="tui-text_body-m-2 tui-space_vertical-0">mouseenter | focus | click | focusin | manual</p>
   </tui-notification>
 
 

diff --git a/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.scss b/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.scss
@@ -25,10 +25,6 @@
   }
 }
 
-.tui-text_h3 {
-  margin-top: 0;
-}
-
 t-demo {
   margin-top: 1.2rem;
 }

diff --git a/projects/ngx-tippy-demo/src/app/pages/getting-started/getting-started.component.html b/projects/ngx-tippy-demo/src/app/pages/getting-started/getting-started.component.html
@@ -1,6 +1,6 @@
 <div class="getting-started">
 
-  <h1 class="tui-text_h3">Getting started</h1>
+  <h1 class="tui-text_h3 tui-space_top-0">Getting started</h1>
 
   <h6 class="tui-text_h6">Recommended versions to use</h6>
 

diff --git a/projects/ngx-tippy-demo/src/app/pages/getting-started/getting-started.component.scss b/projects/ngx-tippy-demo/src/app/pages/getting-started/getting-started.component.scss
@@ -1,7 +1,3 @@
-.tui-text_h3 {
-  margin-top: 0;
-}
-
 .tui-list__item {
   display: flex;
   align-items: center;

diff --git a/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.html b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.html
@@ -1,6 +1,6 @@
 <div class="grouped">
 
-  <h1 class="tui-text_h3">Grouped tooltips</h1>
+  <h1 class="tui-text_h3 tui-space_top-0">Grouped tooltips</h1>
 
   <p class="tui-text_body-m-2">
     If you need to provide unique tooltip content to multiple elements but only initialize once, use the ngx-tippy-group
@@ -11,7 +11,8 @@ <h1 class="tui-text_h3">Grouped tooltips</h1>
     status="info"
     class="service-demo tui-space_vertical-4"
   >
-    For each tooltip within <em>ngx-tippy-group</em> component you should pass <em>data-tippy-grouped</em> attribute
+    <p class="tui-text_body-m-2 tui-space_vertical-0">For each tooltip within <em>ngx-tippy-group</em> component you
+      should pass <em>data-tippy-grouped</em> attribute</p>
   </tui-notification>
 
   <t-demo-code

diff --git a/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.scss b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.scss
@@ -1,7 +1,3 @@
-.tui-text_h3 {
-  margin-top: 0;
-}
-
 .tui-button:not(:first-child) {
   margin-left: 1rem;
 }
diff --git a/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/snippets.ts b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/snippets.ts
@@ -1,5 +1,4 @@
-const GROUPED_TEMPLATE_SN = `
-<ngx-tippy-group [groupedProps]="groupedProps">
+const GROUPED_TEMPLATE_SN = `<ngx-tippy-group [groupedProps]="groupedProps">
   <button
     *ngFor="let btn of [0, 1, 2, 3, 4]"
     data-tippy-grouped
@@ -10,8 +9,7 @@ const GROUPED_TEMPLATE_SN = `
 </ngx-tippy-group>
 `;
 
-const GROUPED_COMPONENT_SN = `
-import { NgxTippyProps } from 'ngx-tippy-wrapper';
+const GROUPED_COMPONENT_SN = `import { NgxTippyProps } from 'ngx-tippy-wrapper';
 
 @Component({ ... })
 export class DemoComponent implements OnInit {
@@ -22,8 +20,7 @@ export class DemoComponent implements OnInit {
   ...
 }`;
 
-const GROUPED_CUSTOM_TEMPLATE_SN = `
-<ngx-tippy-group [groupedProps]="groupedProps">
+const GROUPED_CUSTOM_TEMPLATE_SN = `<ngx-tippy-group [groupedProps]="groupedProps">
   <button
     data-tippy-grouped
     data-tippy-content="Tooltip content"

diff --git a/projects/ngx-tippy-demo/src/app/pages/multiple-tooltips/multiple-tooltips.component.html b/projects/ngx-tippy-demo/src/app/pages/multiple-tooltips/multiple-tooltips.component.html
@@ -1,6 +1,6 @@
 <div class="multiple">
 
-  <h1 class="tui-text_h3">Multiple tooltips on a single element</h1>
+  <h1 class="tui-text_h3 tui-space_top-0">Multiple tooltips on a single element</h1>
 
   <p class="tui-text_body-m-2">
     For multiple tooltips on a single element - use nest elements with <em>ngxTippy</em> directive:

diff --git a/projects/ngx-tippy-demo/src/app/pages/multiple-tooltips/multiple-tooltips.component.scss b/projects/ngx-tippy-demo/src/app/pages/multiple-tooltips/multiple-tooltips.component.scss
@@ -1,3 +0,0 @@
-.tui-text_h3 {
-  margin-top: 0;
-}

diff --git a/projects/ngx-tippy-demo/src/app/pages/props/props.component.html b/projects/ngx-tippy-demo/src/app/pages/props/props.component.html
@@ -1,6 +1,6 @@
 <div class="props">
 
-  <h1 class="tui-text_h3">Applying properties</h1>
+  <h1 class="tui-text_h3 tui-space_top-0">Applying properties</h1>
 
   <p class="tui-text_body-m-2">Use the <em>tippyProps</em> directive to apply props:</p>
 
@@ -56,14 +56,14 @@ <h1 class="tui-text_h3">Applying properties</h1>
   </t-demo>
 
   <tui-notification>
-    <a
-      tuiLink
-      href="https://atomiks.github.io/tippyjs/v6/all-props/"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      View all available properties
-    </a>
+    <p class="tui-text_body-m-2 tui-space_vertical-0"><a
+        tuiLink
+        href="https://atomiks.github.io/tippyjs/v6/all-props/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        View all available properties
+      </a></p>
   </tui-notification>
 
   <h6

diff --git a/projects/ngx-tippy-demo/src/app/pages/props/props.component.scss b/projects/ngx-tippy-demo/src/app/pages/props/props.component.scss
@@ -1,3 +0,0 @@
-.tui-text_h3 {
-  margin-top: 0;
-}