diff --git a/README.md b/README.md index e81a212..e253750 100644 --- a/README.md +++ b/README.md @@ -210,6 +210,19 @@ Now you can use it in your template: ``` +### Show/hide declarativly + +Use isVisible to trigger show and hide. Set trigger to manual. + +```html +
+ Click Open to see me +
+ + + +``` + You can see more examples in our [playground](https://github.com/ngneat/helipopper/blob/master/src/app/app.component.html), or live [here](https://ngneat.github.io/helipopper/). @@ -236,6 +249,7 @@ tippyHost: HTMLElement; lazy: boolean; variation: string; isEnabled: boolean; +isVisible: boolean; className: string; onlyTextOverflow: boolean; useHostWidth: boolean; diff --git a/cypress/integration/helipopper-is-visible.spec.ts b/cypress/integration/helipopper-is-visible.spec.ts new file mode 100644 index 0000000..77c6a99 --- /dev/null +++ b/cypress/integration/helipopper-is-visible.spec.ts @@ -0,0 +1,41 @@ +Cypress.on('scrolled', element => { + // When we do `cy.get()` the Cypress finds the element + // and scrolls down, thus this element becomes at the very top + // of the page. + // `tippy.js` will not show tooltips if they appeared in an invisible + // part of the window. + element.get(0).scrollIntoView({ + block: 'center', + inline: 'center' + }); +}); + +describe('@ngneat/helipopper/is_visible', () => { + const popperSelector = '.tippy-box .tippy-content'; + + describe('isVisible attribute', () => { + beforeEach(() => { + cy.visit('/').wait(200); + }); + + it('should not be visible while flag is false', () => { + cy.get('.declarativeTooltip').should('not.exist'); + }); + it('should be visible while flag is true', () => { + cy.get('[data-cy~="trigger-declarative"]').click({ force: true }); + cy.get(popperSelector).contains("I'm a declarative tooltip"); + cy.get('[data-cy~="trigger-declarative"]').click({ force: true }); + cy.get('.declarativeTooltip').should('not.exist'); + }); + }); + + describe('isVisible attribute with initial value true', () => { + beforeEach(() => { + cy.visit('/is-visible').wait(200); + }); + + it('should be visible while flag is already set true before view renders', () => { + cy.get(popperSelector).contains("I'm a declarative tooltip"); + }); + }); +}); diff --git a/package-lock.json b/package-lock.json index ec67df0..df5e27a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,6 +37,7 @@ "@types/node": "^15.3.0", "all-contributors-cli": "^6.8.1", "angular-cli-ghpages": "^0.6.2", + "angular-http-server": "^1.10.0", "codelyzer": "^6.0.0", "cross-env": "^5.2.0", "cypress": "^7.4.0", @@ -7823,6 +7824,24 @@ "node": ">=6 <7 || >=8" } }, + "node_modules/angular-http-server": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/angular-http-server/-/angular-http-server-1.10.0.tgz", + "integrity": "sha512-GlEkTzduqV56+nkP/Ye68Nd386I1G15AlIUTZYKj2yMdQOYn5E0icw7oyHBSIEOwlhzjlqm9rSxo2oJqAa7JXA==", + "dev": true, + "dependencies": { + "mime": "^1.3.6", + "minimist": "^1.2.0", + "opn": "^5.3.0", + "pem": "^1.9.7" + }, + "bin": { + "angular-http-server": "lib/angular-http-server.js" + }, + "engines": { + "node": ">=8.0.0" + } + }, "node_modules/ansi-colors": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", @@ -8952,6 +8971,15 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, + "node_modules/charenc": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz", + "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=", + "dev": true, + "engines": { + "node": "*" + } + }, "node_modules/check-more-types": { "version": "2.24.0", "resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz", @@ -11100,6 +11128,15 @@ "node": ">=4.8" } }, + "node_modules/crypt": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz", + "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=", + "dev": true, + "engines": { + "node": "*" + } + }, "node_modules/css": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", @@ -12966,6 +13003,12 @@ "integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==", "dev": true }, + "node_modules/es6-promisify": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-6.1.1.tgz", + "integrity": "sha512-HBL8I3mIki5C1Cc9QjKUenHtnG0A5/xA8Q/AllRcfiwl2CZFXGK7ddBiCoRwAix4i2KxcQfjtIVcrVbB3vbmwg==", + "dev": true + }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -17994,6 +18037,17 @@ "node": ">=0.10.0" } }, + "node_modules/md5": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz", + "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==", + "dev": true, + "dependencies": { + "charenc": "0.0.2", + "crypt": "0.0.2", + "is-buffer": "~1.1.6" + } + }, "node_modules/mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", @@ -19971,6 +20025,36 @@ "node": ">=0.10" } }, + "node_modules/pem": { + "version": "1.14.4", + "resolved": "https://registry.npmjs.org/pem/-/pem-1.14.4.tgz", + "integrity": "sha512-v8lH3NpirgiEmbOqhx0vwQTxwi0ExsiWBGYh0jYNq7K6mQuO4gI6UEFlr6fLAdv9TPXRt6GqiwE37puQdIDS8g==", + "dev": true, + "dependencies": { + "es6-promisify": "^6.0.0", + "md5": "^2.2.1", + "os-tmpdir": "^1.0.1", + "which": "^2.0.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/pem/node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/pend": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", @@ -36630,6 +36714,18 @@ } } }, + "angular-http-server": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/angular-http-server/-/angular-http-server-1.10.0.tgz", + "integrity": "sha512-GlEkTzduqV56+nkP/Ye68Nd386I1G15AlIUTZYKj2yMdQOYn5E0icw7oyHBSIEOwlhzjlqm9rSxo2oJqAa7JXA==", + "dev": true, + "requires": { + "mime": "^1.3.6", + "minimist": "^1.2.0", + "opn": "^5.3.0", + "pem": "^1.9.7" + } + }, "ansi-colors": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", @@ -37569,6 +37665,12 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, + "charenc": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz", + "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=", + "dev": true + }, "check-more-types": { "version": "2.24.0", "resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz", @@ -39307,6 +39409,12 @@ "which": "^1.2.9" } }, + "crypt": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz", + "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=", + "dev": true + }, "css": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", @@ -40848,6 +40956,12 @@ "integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==", "dev": true }, + "es6-promisify": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-6.1.1.tgz", + "integrity": "sha512-HBL8I3mIki5C1Cc9QjKUenHtnG0A5/xA8Q/AllRcfiwl2CZFXGK7ddBiCoRwAix4i2KxcQfjtIVcrVbB3vbmwg==", + "dev": true + }, "escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -44884,6 +44998,17 @@ "object-visit": "^1.0.0" } }, + "md5": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz", + "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==", + "dev": true, + "requires": { + "charenc": "0.0.2", + "crypt": "0.0.2", + "is-buffer": "~1.1.6" + } + }, "mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", @@ -46467,6 +46592,29 @@ "integrity": "sha1-z4uvrm7d/0tafvsYUmnqr0YQ3b0=", "dev": true }, + "pem": { + "version": "1.14.4", + "resolved": "https://registry.npmjs.org/pem/-/pem-1.14.4.tgz", + "integrity": "sha512-v8lH3NpirgiEmbOqhx0vwQTxwi0ExsiWBGYh0jYNq7K6mQuO4gI6UEFlr6fLAdv9TPXRt6GqiwE37puQdIDS8g==", + "dev": true, + "requires": { + "es6-promisify": "^6.0.0", + "md5": "^2.2.1", + "os-tmpdir": "^1.0.1", + "which": "^2.0.2" + }, + "dependencies": { + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } + } + } + }, "pend": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", diff --git a/package.json b/package.json index 617cf5b..64db2fa 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "build:playground": "ng build --project helipopper-playground --configuration production", "test:playground": "ng test --project helipopper-playground", "serve:playground": "ng s --project helipopper-playground --live-reload false", - "serve:playground:static": "serve dist/helipopper-playground -l 4200", + "serve:playground:static": "angular-http-server --path dist/helipopper-playground -p 4200", "// - E2E": "E2E testing", "cy:open": "cypress open --config integrationFolder=cypress/integration", "cy:run": "cypress run --config integrationFolder=cypress/integration", @@ -65,6 +65,7 @@ "@types/node": "^15.3.0", "all-contributors-cli": "^6.8.1", "angular-cli-ghpages": "^0.6.2", + "angular-http-server": "^1.10.0", "codelyzer": "^6.0.0", "cross-env": "^5.2.0", "cypress": "^7.4.0", diff --git a/projects/ngneat/helipopper/src/lib/tippy.directive.ts b/projects/ngneat/helipopper/src/lib/tippy.directive.ts index 4af9a9b..1cf0175 100644 --- a/projects/ngneat/helipopper/src/lib/tippy.directive.ts +++ b/projects/ngneat/helipopper/src/lib/tippy.directive.ts @@ -56,7 +56,7 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn @Input('tippyHost') customHost: HTMLElement; @Output() visible = new EventEmitter(); - public isVisible = false; + @Input() public isVisible = false; private instance: TippyInstance; private viewRef: ViewRef; @@ -79,6 +79,8 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn if (isPlatformServer(this.platformId)) return; let props: Partial = Object.keys(changes).reduce((acc, change) => { + if (change === 'isVisible') return acc; + acc[change] = changes[change].currentValue; return acc; @@ -106,6 +108,10 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn this.setStatus(); } + if (isChanged>('isVisible', changes)) { + this.isVisible ? this.show() : this.hide(); + } + this.setProps(props); } @@ -214,6 +220,9 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn } } this.globalConfig.onCreate?.(instance); + if (this.isVisible === true) { + instance.show(); + } }, onShow: instance => { this.zone.run(() => { diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 1ab5aa7..cff484d 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,7 +1,12 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; +import { IsVisibleComponent } from './is-visible/isVisible.component'; +import { PlaygroundComponent } from './playground/playground.component'; -const routes: Routes = []; +const routes: Routes = [ + { path: 'is-visible', component: IsVisibleComponent }, + { path: '**', component: PlaygroundComponent } +]; @NgModule({ imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })], diff --git a/src/app/app.component.html b/src/app/app.component.html index 6426485..0680b43 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,288 +1 @@ - - - -
-
- - {{ option }} -
- -
- -
- {{ option }} -
- -
- -
- {{ - option.label - }} -
- -
- - - -
- -
-
- -
- -
Default variation
- -
- -
- -
- -
-
NIL values
- -
- -
- -
- -
- -
- -
-
- -
- -
-
Custom Template
- -
- - Visible: {{ tippy2.isVisible }} -
- - -
- {{ item }} -
- - -
- -
ng-container
-
- -
- - - -
Hello
- - -
- -
- -
-
Custom Component
- -
- -
-
- -
- -
-
Manual Trigger
- -
-

Click open to see me

- - - -
-
- -
- -
-
Lazy
-
-
{{ item.label }}
-
-
- -
- -
-
Disabled
- -
- -
- - -
- -
- -
-
Text Overflow
- -

Start with overflow and change to not overflow

-
-

- {{ text }} -

-
- - - -
- -

Start with not overflow and change to overflow

-
-

- {{ text }} -

-
- - -
- -
- -
Show on Create
- -
- -
- -
- -
-
Using the Service
- -
- - -
-
- - -
    -
  • Copy
    • -
  • Duplicate
    • -
- - -
-
Context menu
- -
    -
  • - {{ item.label }} -
    • -
-
- -
- -
-
Use host width
-
- -
-
- -
- -
-
Menu
- -
- - - - - - - - - - - - - -
-
- - -
-
Sanitize
- - -
- -
+ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index bb90a2b..07b5f6b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,105 +1,8 @@ -import { Component, ElementRef, ViewChild } from '@angular/core'; -import { FormBuilder } from '@angular/forms'; -import { ExampleComponent } from './example/example.component'; -import { interval } from 'rxjs'; -import { finalize } from 'rxjs/operators'; -import { TippyInstance, TippyService } from '@ngneat/helipopper'; +import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent { - tooltipPositions = ['auto', 'top', 'right', 'bottom', 'left']; - tooltipAlignments = [ - { label: 'start', value: '-start' }, - { label: 'center', value: '' }, - { label: 'end', value: '-end' } - ]; - - tooltipTypes = ['popper', 'tooltip', 'popperBorder']; - - tooltipSettings = this.fb.group({ - type: this.fb.control('tooltip'), - alignment: this.fb.control(''), - position: this.fb.control('top'), - hideOnEsc: this.fb.control(false) - }); - - interval$ = interval(1000).pipe(finalize(() => console.log('interval completed'))); - - get tooltipPosition(): string { - const { position, alignment } = this.tooltipSettings.value; - - return `${position}${alignment}`; - } - - get tooltipType(): string { - return this.tooltipSettings.value.type; - } - - get hideOnEsc(): boolean { - return this.tooltipSettings.value.hideOnEsc; - } - - items = Array.from({ length: 500 }, (_, i) => ({ - id: i, - label: `Value ${i + 1}` - })); - - list = Array.from({ length: 5 }, (_, i) => ({ - id: i, - label: `Value ${i + 1}` - })); - - thoughts = 'We just need someone to talk to 🥺'; - isDisabled = false; - text = `Long Long All Text`; - comp = ExampleComponent; - - changeContent() { - this.text = this.text === `Long Long All Text` ? `Short` : `Long Long All Text`; - } - - constructor(private fb: FormBuilder, private service: TippyService) {} - - @ViewChild('inputName', { static: true }) inputName: ElementRef; - @ViewChild('inputNameComp', { static: true }) inputNameComp: ElementRef; - maxWidth = 300; - show = true; - - toggle() { - this.isDisabled = !this.isDisabled; - } - - handleStatus($event: boolean): void { - console.log('show tooltip', $event); - } - - instance2: TippyInstance; - - useService(host: HTMLButtonElement) { - if (!this.instance2) { - this.instance2 = this.service.create(host, 'Created'); - } - } - - instance: TippyInstance; - - useServiceComponent(host2: HTMLButtonElement) { - if (!this.instance) { - this.instance = this.service.create(host2, ExampleComponent, { - variation: 'popper' - }); - } - } - - duplicate(item: any) { - console.log('duplicate', item); - } - - copy(item: any) { - console.log('copy', item); - } -} +export class AppComponent {} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6c4879b..5de1ad3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,9 +6,11 @@ import { AppComponent } from "./app.component"; import { ReactiveFormsModule } from "@angular/forms"; import { ExampleComponent } from "./example/example.component"; import { popperVariation, TippyModule, tooltipVariation, withContextMenuVariation } from "@ngneat/helipopper"; +import { PlaygroundComponent } from "./playground/playground.component"; +import { IsVisibleComponent } from "./is-visible/isVisible.component"; @NgModule({ - declarations: [AppComponent, ExampleComponent], + declarations: [AppComponent, ExampleComponent, PlaygroundComponent, ExampleComponent, IsVisibleComponent], imports: [ BrowserModule, AppRoutingModule, diff --git a/src/app/is-visible/isVisible.component.html b/src/app/is-visible/isVisible.component.html new file mode 100644 index 0000000..8acde86 --- /dev/null +++ b/src/app/is-visible/isVisible.component.html @@ -0,0 +1,21 @@ +
Declaritive visibility (already set true before render in the component)
+ +
+ +
+ + + +
diff --git a/src/app/is-visible/isVisible.component.scss b/src/app/is-visible/isVisible.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/is-visible/isVisible.component.ts b/src/app/is-visible/isVisible.component.ts new file mode 100644 index 0000000..48b0c69 --- /dev/null +++ b/src/app/is-visible/isVisible.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-is-visible', + templateUrl: './isVisible.component.html', + styleUrls: ['./isVisible.component.scss'] +}) +export class IsVisibleComponent { + visibility = true; +} diff --git a/src/app/playground/playground.component.html b/src/app/playground/playground.component.html new file mode 100644 index 0000000..bcfbf5b --- /dev/null +++ b/src/app/playground/playground.component.html @@ -0,0 +1,310 @@ + + + +
+
+ + {{ option }} +
+ +
+ +
+ {{ option }} +
+ +
+ +
+ {{ + option.label + }} +
+ +
+ + + +
+ +
+
+ +
+ +
Default variation
+ +
+ +
+ +
+ +
+
NIL values
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ +
+
Custom Template
+ +
+ + Visible: {{ tippy2.isVisible }} +
+ + +
+ {{ item }} +
+ + +
+ +
ng-container
+
+ +
+ + + +
Hello
+ + +
+ +
+ +
+
Custom Component
+ +
+ +
+
+ +
+ +
+
Manual Trigger
+ +
+

Click open to see me

+ + + +
+
+ +
+ +
+
Lazy
+
+
{{ item.label }}
+
+
+ +
+ +
+
Disabled
+ +
+ +
+ + +
+ +
+ +
+
Text Overflow
+ +

Start with overflow and change to not overflow

+
+

+ {{ text }} +

+
+ + + +
+ +

Start with not overflow and change to overflow

+
+

+ {{ text }} +

+
+ + +
+ +
+ +
Show on Create
+ +
+ +
+ +
+ +
Declaritive visibility (already set true before render in the component)
+ +
+ +
+ + + +
+ +
+
Using the Service
+ +
+ + +
+
+ + +
    +
  • Copy
    • +
  • Duplicate
    • +
+ + +
+
Context menu
+ +
    +
  • + {{ item.label }} +
    • +
+
+ +
+ +
+
Use host width
+
+ +
+
+ +
+ +
+
Menu
+ +
+ + + + + + + + + + + + + +
+
+ + +
+
Sanitize
+ + +
+ +
diff --git a/src/app/playground/playground.component.scss b/src/app/playground/playground.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/playground/playground.component.ts b/src/app/playground/playground.component.ts new file mode 100644 index 0000000..a2e3160 --- /dev/null +++ b/src/app/playground/playground.component.ts @@ -0,0 +1,107 @@ +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { FormBuilder } from '@angular/forms'; +import { ExampleComponent } from '../example/example.component'; +import { interval } from 'rxjs'; +import { finalize } from 'rxjs/operators'; +import { TippyInstance, TippyService } from '@ngneat/helipopper'; + +@Component({ + selector: 'app-is-visible', + templateUrl: './playground.component.html', + styleUrls: ['./playground.component.scss'] +}) +export class PlaygroundComponent { + tooltipPositions = ['auto', 'top', 'right', 'bottom', 'left']; + tooltipAlignments = [ + { label: 'start', value: '-start' }, + { label: 'center', value: '' }, + { label: 'end', value: '-end' } + ]; + + tooltipTypes = ['popper', 'tooltip', 'popperBorder']; + + tooltipSettings = this.fb.group({ + type: this.fb.control('tooltip'), + alignment: this.fb.control(''), + position: this.fb.control('top'), + hideOnEsc: this.fb.control(false) + }); + + interval$ = interval(1000).pipe(finalize(() => console.log('interval completed'))); + + get tooltipPosition(): string { + const { position, alignment } = this.tooltipSettings.value; + + return `${position}${alignment}`; + } + + get tooltipType(): string { + return this.tooltipSettings.value.type; + } + + get hideOnEsc(): boolean { + return this.tooltipSettings.value.hideOnEsc; + } + + items = Array.from({ length: 500 }, (_, i) => ({ + id: i, + label: `Value ${i + 1}` + })); + + list = Array.from({ length: 5 }, (_, i) => ({ + id: i, + label: `Value ${i + 1}` + })); + + thoughts = 'We just need someone to talk to 🥺'; + isDisabled = false; + text = `Long Long All Text`; + comp = ExampleComponent; + + changeContent() { + this.text = this.text === `Long Long All Text` ? `Short` : `Long Long All Text`; + } + + constructor(private fb: FormBuilder, private service: TippyService) {} + + @ViewChild('inputName', { static: true }) inputName: ElementRef; + @ViewChild('inputNameComp', { static: true }) inputNameComp: ElementRef; + maxWidth = 300; + show = true; + + toggle() { + this.isDisabled = !this.isDisabled; + } + + handleStatus($event: boolean): void { + console.log('show tooltip', $event); + } + + instance2: TippyInstance; + + useService(host: HTMLButtonElement) { + if (!this.instance2) { + this.instance2 = this.service.create(host, 'Created'); + } + } + + instance: TippyInstance; + + useServiceComponent(host2: HTMLButtonElement) { + if (!this.instance) { + this.instance = this.service.create(host2, ExampleComponent, { + variation: 'popper' + }); + } + } + + duplicate(item: any) { + console.log('duplicate', item); + } + + copy(item: any) { + console.log('copy', item); + } + + visibility = false; +}