feat(components/hint): add passing context as $implicit to templatess #…

…291

apps/doc/src/app/components/hint/examples/with-custom-context/hint-with-custom-context-example.component.html

@@ -0,0 +1,13 @@
+<button
+ [prizmHintContext]="{ name: 'Moscow', country: 'Russia' }"
+ [prizmHint]="dropdown"
+ type="button"
+ prizmButton
+>
+ City
+</button>
+
+<ng-template #dropdown let-context>
+ <div>{{ context.name }}</div>
+ <div>{{ context.country }}</div>
+</ng-template>

apps/doc/src/app/components/hint/examples/with-custom-context/hint-with-custom-context-example.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'prizm-hint-with-custom-context-example',
+ templateUrl: './hint-with-custom-context-example.component.html',
+ styles: [
+ `
+ .box {
+ display: flex;
+ gap: 1rem;
+ }
+ `,
+ ],
+})
+export class PrizmHintWithCustomContextExampleComponent {}

apps/doc/src/app/components/hint/hint-example.component.html

@@ -11,6 +11,10 @@
  <prizm-hint-with-template-example></prizm-hint-with-template-example>
  </prizm-doc-example>
 
+ <prizm-doc-example id="with-context" [content]="exampleWithContext" heading="With Context">
+ <prizm-hint-with-custom-context-example></prizm-hint-with-custom-context-example>
+ </prizm-doc-example>
+
  <prizm-doc-example id="with-component" [content]="exampleWithComponent" heading="With Component">
  <prizm-hint-with-component-example></prizm-hint-with-component-example>
  </prizm-doc-example>

apps/doc/src/app/components/hint/hint-example.component.ts

@@ -96,6 +96,10 @@ export class HintExampleComponent {
  TypeScript: import('./examples/with-template/hint-with-template-example.component.ts?raw'),
  HTML: import('./examples/with-template/hint-with-template-example.component.html?raw'),
  };
+ readonly exampleWithContext: TuiDocExample = {
+ TypeScript: import('./examples/with-custom-context/hint-with-custom-context-example.component.ts?raw'),
+ HTML: import('./examples/with-custom-context/hint-with-custom-context-example.component.html?raw'),
+ };
 
  readonly exampleWithComponent: TuiDocExample = {
  TypeScript: import('./examples/with-component/hint-with-component-example.component.ts?raw'),

apps/doc/src/app/components/hint/hint-example.module.ts

@@ -1,15 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { prizmDocGenerateRoutes, PrizmAddonDocModule } from '@prizm-ui/doc';
+import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc';
 import { RouterModule } from '@angular/router';
-import { PolymorphModule, PrizmButtonModule, PrizmHintModule } from '@prizm-ui/components';
+import { PolymorphModule, PrizmButtonModule, PrizmHintDirective } from '@prizm-ui/components';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HintExampleComponent } from './hint-example.component';
 import { PrizmHintWithTemplateExampleComponent } from './examples/with-template/hint-with-template-example.component';
 import { PrizmHintWithComponentExampleComponent } from './examples/with-component/hint-with-component-example.component';
 import { PrizmHintBaseExampleComponent } from './examples/base/hint-base-example.component';
 import { PrizmHintSomeComponent } from './examples/with-component/some.component';
 import { PrizmHintChangeThemeExampleComponent } from './examples/change-theme/hint-change-theme-example.component';
+import { PrizmHintWithCustomContextExampleComponent } from './examples/with-custom-context/hint-with-custom-context-example.component';
 
 @NgModule({
  imports: [
@@ -18,11 +19,12 @@ import { PrizmHintChangeThemeExampleComponent } from './examples/change-theme/hi
  FormsModule,
  ReactiveFormsModule,
  PolymorphModule,
- PrizmHintModule,
+ PrizmHintDirective,
  PrizmButtonModule,
  RouterModule.forChild(prizmDocGenerateRoutes(HintExampleComponent)),
  ],
  declarations: [
+ PrizmHintWithCustomContextExampleComponent,
  PrizmHintWithTemplateExampleComponent,
  PrizmHintWithComponentExampleComponent,
  PrizmHintSomeComponent,

apps/doc/src/app/components/tooltip/examples/with-custom-context/tooltip-with-custom-context-example.component.html

@@ -0,0 +1,13 @@
+<button
+ [prizmTooltipContext]="{ name: 'Moscow', country: 'Russia' }"
+ [prizmTooltip]="dropdown"
+ type="button"
+ prizmButton
+>
+ City
+</button>
+
+<ng-template #dropdown let-context>
+ <div>{{ context.name }}</div>
+ <div>{{ context.country }}</div>
+</ng-template>

apps/doc/src/app/components/tooltip/examples/with-custom-context/tooltip-with-custom-context-example.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'prizm-tooltip-with-custom-context-example',
+ templateUrl: './tooltip-with-custom-context-example.component.html',
+ styles: [
+ `
+ .box {
+ display: flex;
+ gap: 1rem;
+ }
+ `,
+ ],
+})
+export class PrizmTooltipWithCustomContextExampleComponent {}

apps/doc/src/app/components/tooltip/tooltip-example.component.html

@@ -11,6 +11,10 @@
  <prizm-tooltip-with-template-example></prizm-tooltip-with-template-example>
  </prizm-doc-example>
 
+ <prizm-doc-example id="with-custom-context" [content]="exampleWithContext" heading="With Context">
+ <prizm-tooltip-with-custom-context-example></prizm-tooltip-with-custom-context-example>
+ </prizm-doc-example>
+
  <prizm-doc-example id="with-component" [content]="exampleWithComponent" heading="With Component">
  <prizm-tooltip-with-component-example></prizm-tooltip-with-component-example>
  </prizm-doc-example>

apps/doc/src/app/components/tooltip/tooltip-example.component.ts

@@ -93,6 +93,11 @@ export class TooltipExampleComponent {
  HTML: import('./examples/with-template/tooltip-with-template-example.component.html?raw'),
  };
 
+ readonly exampleWithContext: TuiDocExample = {
+ TypeScript: import('./examples/with-custom-context/tooltip-with-custom-context-example.component.ts?raw'),
+ HTML: import('./examples/with-custom-context/tooltip-with-custom-context-example.component.html?raw'),
+ };
+
  readonly exampleWithComponent: TuiDocExample = {
  TypeScript: import('./examples/with-component/tooltip-with-component-example.component.ts?raw'),
  HTML: import('./examples/with-component/tooltip-with-component-example.component.html?raw'),

apps/doc/src/app/components/tooltip/tooltip-example.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { prizmDocGenerateRoutes, PrizmAddonDocModule } from '@prizm-ui/doc';
+import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc';
 import { RouterModule } from '@angular/router';
 import { PolymorphModule, PrizmButtonModule, PrizmTooltipModule } from '@prizm-ui/components';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -9,6 +9,7 @@ import { PrizmTooltipWithTemplateExampleComponent } from './examples/with-templa
 import { PrizmTooltipWithComponentExampleComponent } from './examples/with-component/tooltip-with-component-example.component';
 import { PrizmTooltipBaseExampleComponent } from './examples/base/tooltip-base-example.component';
 import { PrizmTooltipSomeComponent } from './examples/with-component/some.component';
+import { PrizmTooltipWithCustomContextExampleComponent } from './examples/with-custom-context/tooltip-with-custom-context-example.component';
 
 @NgModule({
  imports: [
@@ -22,6 +23,7 @@ import { PrizmTooltipSomeComponent } from './examples/with-component/some.compon
  RouterModule.forChild(prizmDocGenerateRoutes(TooltipExampleComponent)),
  ],
  declarations: [
+ PrizmTooltipWithCustomContextExampleComponent,
  PrizmTooltipWithTemplateExampleComponent,
  PrizmTooltipWithComponentExampleComponent,
  PrizmTooltipSomeComponent,

libs/components/src/lib/directives/hint/hint-options.ts

@@ -21,6 +21,7 @@ export interface PrizmHintContext {
  hideDelay: number;
  host: HTMLElement;
  context?: Record<string, unknown>;
+ $implicit?: Record<string, unknown>;
 }
 
 /** Default values for hint options */

libs/components/src/lib/directives/hint/hint.directive.ts

@@ -226,11 +226,6 @@ export class PrizmHintDirective<
  map(([thisHovered, containerHovered]) => {
  return thisHovered || containerHovered;
  }),
- // filter(
- // () => {
- // this
- // }
- // ),
  tap(hovered => this.show$.next(hovered)),
  takeUntil(this.destroyListeners$),
  takeUntil(this.destroy$)
@@ -248,6 +243,7 @@ export class PrizmHintDirective<
  hideDelay: this.prizmHintHideDelay,
  host: this.host,
  context: this.prizmHintContext,
+ $implicit: this.prizmHintContext,
  } as CONTEXT;
  }
 }