@flexzap/overlay 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,144 @@
1
+ # @flexzap/overlay
2
+
3
+ Flexible and reusable overlay components for Angular applications. Part of the FlexZap Library ecosystem.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @flexzap/overlay
9
+ ```
10
+
11
+ ### Peer Dependencies
12
+
13
+ This library requires the following peer dependencies:
14
+
15
+ ```bash
16
+ npm install @angular/common@^21.0.0 @angular/core@^21.0.0
17
+ ```
18
+
19
+ ## Usage
20
+
21
+ ### Basic Implementation
22
+
23
+ ```typescript
24
+ import { Component } from '@angular/core';
25
+ import { ZapTooltip } from '@flexzap/overlay';
26
+
27
+ @Component({
28
+ imports: [ZapTooltip],
29
+ template: `
30
+ <button (mouseenter)="isVisible = true" (mouseleave)="isVisible = false">
31
+ Hover Me
32
+ <zap-tooltip [visible]="isVisible" [position]="'top'"> Tooltip Content </zap-tooltip>
33
+ </button>
34
+ `
35
+ })
36
+ export class MyComponent {
37
+ isVisible = false;
38
+ }
39
+ ```
40
+
41
+ ### Directive Implementation (Recommended)
42
+
43
+ The `ZapTooltipBind` directive simplifies usage by automatically handling hover events for sibling tooltips.
44
+
45
+ ```typescript
46
+ import { Component } from '@angular/core';
47
+ import { ZapTooltip, ZapTooltipBind } from '@flexzap/overlay';
48
+
49
+ @Component({
50
+ imports: [ZapTooltip, ZapTooltipBind],
51
+ template: `
52
+ <button>
53
+ <span ZapTooltipBind>Hover Me</span>
54
+ <zap-tooltip [position]="'right'"> Tooltip Content </zap-tooltip>
55
+ </button>
56
+ `
57
+ })
58
+ export class MyComponent {}
59
+ ```
60
+
61
+ ## API Reference
62
+
63
+ ### ZapTooltip Component
64
+
65
+ A lightweight tooltip component that positions itself relative to its container.
66
+
67
+ #### Inputs
68
+
69
+ | Property | Type | Default | Description |
70
+ | ---------- | ---------------------------------------- | ------------ | ----------------------------------------------------- |
71
+ | `position` | `'top' \| 'right' \| 'bottom' \| 'left'` | **Required** | Sets the position of the tooltip relative to the host |
72
+ | `visible` | `boolean` | `false` | Controls the visibility of the tooltip |
73
+
74
+ ### ZapTooltipBind Directive
75
+
76
+ A helper directive that binds hover events (`mouseenter`, `mouseleave`) to toggle the visibility of sibling `zap-tooltip` components.
77
+
78
+ **Selector:** `[ZapTooltipBind]`
79
+
80
+ ## Styling
81
+
82
+ The component uses SCSS for styling. You can customize the appearance by overriding the default styles:
83
+
84
+ ```scss
85
+ zap-tooltip {
86
+ // Custom tooltip styles
87
+ --zap-tooltip-bg-color: #333;
88
+ --zap-tooltip-text-color: #fff;
89
+ }
90
+ ```
91
+
92
+ ## Testing
93
+
94
+ This library uses Jest for unit testing with zoneless Angular configuration.
95
+
96
+ ### Running Tests
97
+
98
+ ```bash
99
+ # From the monorepo root
100
+ npm run overlay:test # Run all unit tests with coverage
101
+ npm run overlay:test:watch # Run tests in watch mode (no coverage)
102
+ ```
103
+
104
+ ## Development
105
+
106
+ ### Building the Library
107
+
108
+ ```bash
109
+ # From the monorepo root
110
+ npm run overlay:build # Build the library
111
+ ng build @flexzap/overlay # Build directly using CLI
112
+ ```
113
+
114
+ ### Code Scaffolding
115
+
116
+ To generate new components within this library:
117
+
118
+ ```bash
119
+ ng generate component [component-name] --project @flexzap/overlay
120
+ ```
121
+
122
+ ## Publishing
123
+
124
+ ### Build for Publication
125
+
126
+ ```bash
127
+ # From the monorepo root
128
+ npm run overlay:build
129
+ ```
130
+
131
+ ### Publish to NPM
132
+
133
+ ```bash
134
+ cd dist/flexzap/overlay
135
+ npm publish --access public
136
+ ```
137
+
138
+ ## Contributing
139
+
140
+ This library is part of the FlexZap Library monorepo. Please refer to the [main repository](../../../README.md) for contribution guidelines.
141
+
142
+ ## License
143
+
144
+ MIT License - see the [LICENSE](../../../LICENSE) file for details.
@@ -0,0 +1,78 @@
1
+ import * as i0 from '@angular/core';
2
+ import { input, ChangeDetectionStrategy, Component, inject, ElementRef, Renderer2, Directive } from '@angular/core';
3
+
4
+ class ZapTooltip {
5
+ position = input.required(...(ngDevMode ? [{ debugName: "position" }] : []));
6
+ visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
7
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ZapTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
8
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: ZapTooltip, isStandalone: true, selector: "zap-tooltip", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.position": "position()", "attr.visible": "visible()" } }, ngImport: i0, template: "<div class=\"zap-tooltip\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{width:max-content;display:none}:host[visible=true]{display:table}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
9
+ }
10
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ZapTooltip, decorators: [{
11
+ type: Component,
12
+ args: [{ selector: 'zap-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, host: {
13
+ '[attr.position]': 'position()',
14
+ '[attr.visible]': 'visible()'
15
+ }, template: "<div class=\"zap-tooltip\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{width:max-content;display:none}:host[visible=true]{display:table}\n"] }]
16
+ }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }] } });
17
+
18
+ /**
19
+ * Directive that binds the visibility of a sibling `zap-tooltip` to the host element's hover events.
20
+ *
21
+ * It listens for `mouseenter` and `mouseleave` events on the host element and toggles the `visible`
22
+ * attribute of the immediate previous or next sibling if it matches the `zap-tooltip` tag.
23
+ *
24
+ * @usageNotes
25
+ * Apply this directive to any element that has a `zap-tooltip` sibling.
26
+ *
27
+ * ```html
28
+ * <button ZapTooltipBind>Hover me</button>
29
+ * <zap-tooltip [position]="'top'">I'm a tooltip</zap-tooltip>
30
+ * ```
31
+ */
32
+ class ZapTooltipBind {
33
+ elementRef = inject(ElementRef);
34
+ renderer = inject(Renderer2);
35
+ onMouseEnter() {
36
+ this.toggleTooltip(true);
37
+ }
38
+ onMouseLeave() {
39
+ this.toggleTooltip(false);
40
+ }
41
+ toggleTooltip(show) {
42
+ const element = this.elementRef.nativeElement;
43
+ const nextSibling = element.nextElementSibling;
44
+ const prevSibling = element.previousElementSibling;
45
+ if (nextSibling && nextSibling.tagName.toLowerCase() === 'zap-tooltip') {
46
+ this.updateSibling(nextSibling, show);
47
+ }
48
+ if (prevSibling && prevSibling.tagName.toLowerCase() === 'zap-tooltip') {
49
+ this.updateSibling(prevSibling, show);
50
+ }
51
+ }
52
+ updateSibling(sibling, show) {
53
+ this.renderer.setAttribute(sibling, 'visible', String(show));
54
+ }
55
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ZapTooltipBind, deps: [], target: i0.ɵɵFactoryTarget.Directive });
56
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: ZapTooltipBind, isStandalone: true, selector: "[ZapTooltipBind]", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
57
+ }
58
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ZapTooltipBind, decorators: [{
59
+ type: Directive,
60
+ args: [{
61
+ selector: '[ZapTooltipBind]',
62
+ host: {
63
+ '(mouseenter)': 'onMouseEnter()',
64
+ '(mouseleave)': 'onMouseLeave()'
65
+ }
66
+ }]
67
+ }] });
68
+
69
+ /*
70
+ * Public API Surface of overlay
71
+ */
72
+
73
+ /**
74
+ * Generated bundle index. Do not edit.
75
+ */
76
+
77
+ export { ZapTooltip, ZapTooltipBind };
78
+ //# sourceMappingURL=flexzap-overlay.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"flexzap-overlay.mjs","sources":["../../../../projects/flexzap/overlay/src/lib/tooltip/tooltip.ts","../../../../projects/flexzap/overlay/src/lib/tooltip/tooltip.html","../../../../projects/flexzap/overlay/src/lib/tooltip-bind/tooltip-bind.ts","../../../../projects/flexzap/overlay/src/public-api.ts","../../../../projects/flexzap/overlay/src/flexzap-overlay.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n selector: 'zap-tooltip',\n templateUrl: './tooltip.html',\n styleUrl: './tooltip.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.position]': 'position()',\n '[attr.visible]': 'visible()'\n }\n})\nexport class ZapTooltip {\n position = input.required<'top' | 'right' | 'bottom' | 'left'>();\n visible = input(false);\n}\n","<div class=\"zap-tooltip\">\n <ng-content></ng-content>\n</div>\n","import { Directive, ElementRef, Renderer2, inject } from '@angular/core';\n\n@Directive({\n selector: '[ZapTooltipBind]',\n host: {\n '(mouseenter)': 'onMouseEnter()',\n '(mouseleave)': 'onMouseLeave()'\n }\n})\n/**\n * Directive that binds the visibility of a sibling `zap-tooltip` to the host element's hover events.\n *\n * It listens for `mouseenter` and `mouseleave` events on the host element and toggles the `visible`\n * attribute of the immediate previous or next sibling if it matches the `zap-tooltip` tag.\n *\n * @usageNotes\n * Apply this directive to any element that has a `zap-tooltip` sibling.\n *\n * ```html\n * <button ZapTooltipBind>Hover me</button>\n * <zap-tooltip [position]=\"'top'\">I'm a tooltip</zap-tooltip>\n * ```\n */\nexport class ZapTooltipBind {\n private elementRef = inject(ElementRef);\n private renderer = inject(Renderer2);\n\n onMouseEnter() {\n this.toggleTooltip(true);\n }\n\n onMouseLeave() {\n this.toggleTooltip(false);\n }\n\n private toggleTooltip(show: boolean) {\n const element = this.elementRef.nativeElement;\n const nextSibling = element.nextElementSibling;\n const prevSibling = element.previousElementSibling;\n\n if (nextSibling && nextSibling.tagName.toLowerCase() === 'zap-tooltip') {\n this.updateSibling(nextSibling, show);\n }\n\n if (prevSibling && prevSibling.tagName.toLowerCase() === 'zap-tooltip') {\n this.updateSibling(prevSibling, show);\n }\n }\n\n private updateSibling(sibling: Element, show: boolean) {\n this.renderer.setAttribute(sibling, 'visible', String(show));\n }\n}\n","/*\n * Public API Surface of overlay\n */\n\nexport * from './lib/tooltip/tooltip';\nexport * from './lib/tooltip-bind/tooltip-bind';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAYa,UAAU,CAAA;AACrB,IAAA,QAAQ,GAAG,KAAK,CAAC,QAAQ,mDAAuC;AAChE,IAAA,OAAO,GAAG,KAAK,CAAC,KAAK,mDAAC;uGAFX,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,uaCZvB,oEAGA,EAAA,MAAA,EAAA,CAAA,2EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDSa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAVtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,eAAA,EAGN,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,iBAAiB,EAAE,YAAY;AAC/B,wBAAA,gBAAgB,EAAE;AACnB,qBAAA,EAAA,QAAA,EAAA,oEAAA,EAAA,MAAA,EAAA,CAAA,2EAAA,CAAA,EAAA;;;AEDH;;;;;;;;;;;;;AAaG;MACU,cAAc,CAAA;AACjB,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/B,IAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;IAEpC,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;IAC1B;IAEA,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;IAC3B;AAEQ,IAAA,aAAa,CAAC,IAAa,EAAA;AACjC,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;AAC7C,QAAA,MAAM,WAAW,GAAG,OAAO,CAAC,kBAAkB;AAC9C,QAAA,MAAM,WAAW,GAAG,OAAO,CAAC,sBAAsB;QAElD,IAAI,WAAW,IAAI,WAAW,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,EAAE;AACtE,YAAA,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,IAAI,CAAC;QACvC;QAEA,IAAI,WAAW,IAAI,WAAW,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,EAAE;AACtE,YAAA,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,IAAI,CAAC;QACvC;IACF;IAEQ,aAAa,CAAC,OAAgB,EAAE,IAAa,EAAA;AACnD,QAAA,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAC9D;uGA5BW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBArB1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,IAAI,EAAE;AACJ,wBAAA,cAAc,EAAE,gBAAgB;AAChC,wBAAA,cAAc,EAAE;AACjB;AACF,iBAAA;;;ACRD;;AAEG;;ACFH;;AAEG;;;;"}
package/package.json ADDED
@@ -0,0 +1,40 @@
1
+ {
2
+ "name": "@flexzap/overlay",
3
+ "version": "1.0.0",
4
+ "description": "All the overlay components that makes part of the flexzap library",
5
+ "keywords": [
6
+ "flexzap",
7
+ "library",
8
+ "components",
9
+ "tooltip"
10
+ ],
11
+ "repository": {
12
+ "type": "git",
13
+ "url": "https://github.com/vitorazevedo/flexzap-library"
14
+ },
15
+ "author": "flexzap",
16
+ "license": "MIT",
17
+ "homepage": "https://www.flexzap.dev",
18
+ "publishConfig": {
19
+ "access": "public"
20
+ },
21
+ "peerDependencies": {
22
+ "@angular/common": "^21.0.0",
23
+ "@angular/core": "^21.0.0"
24
+ },
25
+ "dependencies": {
26
+ "tslib": "^2.8.1"
27
+ },
28
+ "sideEffects": false,
29
+ "module": "fesm2022/flexzap-overlay.mjs",
30
+ "typings": "types/flexzap-overlay.d.ts",
31
+ "exports": {
32
+ "./package.json": {
33
+ "default": "./package.json"
34
+ },
35
+ ".": {
36
+ "types": "./types/flexzap-overlay.d.ts",
37
+ "default": "./fesm2022/flexzap-overlay.mjs"
38
+ }
39
+ }
40
+ }
@@ -0,0 +1,21 @@
1
+ import * as i0 from '@angular/core';
2
+
3
+ declare class ZapTooltip {
4
+ position: i0.InputSignal<"top" | "right" | "bottom" | "left">;
5
+ visible: i0.InputSignal<boolean>;
6
+ static ɵfac: i0.ɵɵFactoryDeclaration<ZapTooltip, never>;
7
+ static ɵcmp: i0.ɵɵComponentDeclaration<ZapTooltip, "zap-tooltip", never, { "position": { "alias": "position"; "required": true; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
8
+ }
9
+
10
+ declare class ZapTooltipBind {
11
+ private elementRef;
12
+ private renderer;
13
+ onMouseEnter(): void;
14
+ onMouseLeave(): void;
15
+ private toggleTooltip;
16
+ private updateSibling;
17
+ static ɵfac: i0.ɵɵFactoryDeclaration<ZapTooltipBind, never>;
18
+ static ɵdir: i0.ɵɵDirectiveDeclaration<ZapTooltipBind, "[ZapTooltipBind]", never, {}, {}, never, never, true, never>;
19
+ }
20
+
21
+ export { ZapTooltip, ZapTooltipBind };