@flexzap/overlay 1.2.1 → 1.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Vitor Azevedo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -142,8 +142,8 @@ npm run overlay:test:watch      # Run tests in watch mode (no coverage)
 
 ```bash
 # From the monorepo root
-npm run overlay:build       # Build the library
-ng build @flexzap/overlay   # Build directly using CLI
+npm run overlay:build       # Build directly
+ng build @flexzap/overlay   # Build using Angular CLI
 ```
 
 ### Code Scaffolding

package/fesm2022/flexzap-overlay.mjs

@@ -2,8 +2,27 @@ import * as i0 from '@angular/core';
 import { input, ChangeDetectionStrategy, Component, inject, ElementRef, Renderer2, Directive, output } from '@angular/core';
 import { ZapSvgConfig, ZapSvg } from '@flexzap/symbols';
 
+/**
+ * Component that displays a tooltip with text content.
+ * Positioned relative to a target element.
+ *
+ * @example
+ * ```html
+ * <zap-tooltip [position]="'top'" [visible]="true">
+ *   Tooltip Content
+ * </zap-tooltip>
+ * ```
+ */
 class ZapTooltip {
+    /**
+     * The position of the tooltip relative to the target.
+     * Required.
+     */
     position = input.required(...(ngDevMode ? [{ debugName: "position" }] : []));
+    /**
+     * Whether the tooltip is currently visible.
+     * @default false
+     */
     visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ZapTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", 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.zap-position": "position()", "attr.zap-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[zap-visible=true]{display:table}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -67,13 +86,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 }]
         }] });
 
+/**
+ * A shell component for creating modal dialogs.
+ * Handles visibility, backdrop, and close interactions (click outside, escape key).
+ *
+ * @example
+ * ```html
+ * <zap-modal-shell [visible]="isOpen()" (close)="onClose()">
+ *   <div class="modal-content">
+ *     <h2>Title</h2>
+ *     <p>Content...</p>
+ *   </div>
+ * </zap-modal-shell>
+ * ```
+ */
 class ZapModalShell {
+    /**
+     * Whether the modal is visible.
+     * Required.
+     */
     visible = input.required(...(ngDevMode ? [{ debugName: "visible" }] : []));
+    /**
+     * Event emitted when the modal should close.
+     * Triggered by clicking the close button or pressing Escape.
+     */
     close = output();
     svgConfigIcon = ZapSvgConfig.createIcon();
+    /**
+     * Closes the modal by emitting the close event.
+     */
     closeModal() {
         this.close.emit();
     }
+    /**
+     * Handles the Escape key press to close the modal.
+     * @param e The keyboard event.
+     */
     onKeyDown(e) {
         const event = e;
         if (event.key === 'Escape') {

package/fesm2022/flexzap-overlay.mjs.map

@@ -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/lib/modal-shell/modal-shell.ts","../../../../projects/flexzap/overlay/src/lib/modal-shell/modal-shell.html","../../../../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.zap-position]': 'position()',\n    '[attr.zap-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 `zap-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, 'zap-visible', String(show));\n  }\n}\n","import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\n\nimport { ZapSvg, ZapSvgConfig, ZapSvgInterface } from '@flexzap/symbols';\n\n@Component({\n  selector: 'zap-modal-shell',\n  imports: [ZapSvg],\n  templateUrl: './modal-shell.html',\n  styleUrl: './modal-shell.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.zap-visible]': 'visible()',\n    '(window:keydown.escape)': 'onKeyDown($event)'\n  }\n})\nexport class ZapModalShell {\n  visible = input.required<boolean>();\n  close = output<void>();\n\n  svgConfigIcon: ZapSvgInterface = ZapSvgConfig.createIcon();\n\n  closeModal() {\n    this.close.emit();\n  }\n\n  onKeyDown(e: Event) {\n    const event = e as KeyboardEvent;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close.emit();\n    }\n  }\n}\n","<section class=\"zap-modal-shell\" (click)=\"closeModal()\">\n  <div (click)=\"$event.stopPropagation()\">\n    <button type=\"button\" (click)=\"closeModal()\">\n      <zap-svg [name]=\"'close'\" [config]=\"svgConfigIcon\"></zap-svg>\n    </button>\n    <div>\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n","/*\n * Public API Surface of overlay\n */\n\nexport * from './lib/tooltip/tooltip';\nexport * from './lib/tooltip-bind/tooltip-bind';\nexport * from './lib/modal-shell/modal-shell';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"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/lib/modal-shell/modal-shell.ts","../../../../projects/flexzap/overlay/src/lib/modal-shell/modal-shell.html","../../../../projects/flexzap/overlay/src/public-api.ts","../../../../projects/flexzap/overlay/src/flexzap-overlay.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n/**\n * Component that displays a tooltip with text content.\n * Positioned relative to a target element.\n *\n * @example\n * ```html\n * <zap-tooltip [position]=\"'top'\" [visible]=\"true\">\n *   Tooltip Content\n * </zap-tooltip>\n * ```\n */\n@Component({\n  selector: 'zap-tooltip',\n  templateUrl: './tooltip.html',\n  styleUrl: './tooltip.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.zap-position]': 'position()',\n    '[attr.zap-visible]': 'visible()'\n  }\n})\nexport class ZapTooltip {\n  /**\n   * The position of the tooltip relative to the target.\n   * Required.\n   */\n  position = input.required<'top' | 'right' | 'bottom' | 'left'>();\n\n  /**\n   * Whether the tooltip is currently visible.\n   * @default false\n   */\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 `zap-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, 'zap-visible', String(show));\n  }\n}\n","import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\n\nimport { ZapSvg, ZapSvgConfig, ZapSvgInterface } from '@flexzap/symbols';\n\n/**\n * A shell component for creating modal dialogs.\n * Handles visibility, backdrop, and close interactions (click outside, escape key).\n *\n * @example\n * ```html\n * <zap-modal-shell [visible]=\"isOpen()\" (close)=\"onClose()\">\n *   <div class=\"modal-content\">\n *     <h2>Title</h2>\n *     <p>Content...</p>\n *   </div>\n * </zap-modal-shell>\n * ```\n */\n@Component({\n  selector: 'zap-modal-shell',\n  imports: [ZapSvg],\n  templateUrl: './modal-shell.html',\n  styleUrl: './modal-shell.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.zap-visible]': 'visible()',\n    '(window:keydown.escape)': 'onKeyDown($event)'\n  }\n})\nexport class ZapModalShell {\n  /**\n   * Whether the modal is visible.\n   * Required.\n   */\n  visible = input.required<boolean>();\n\n  /**\n   * Event emitted when the modal should close.\n   * Triggered by clicking the close button or pressing Escape.\n   */\n  close = output<void>();\n\n  svgConfigIcon: ZapSvgInterface = ZapSvgConfig.createIcon();\n\n  /**\n   * Closes the modal by emitting the close event.\n   */\n  closeModal() {\n    this.close.emit();\n  }\n\n  /**\n   * Handles the Escape key press to close the modal.\n   * @param e The keyboard event.\n   */\n  onKeyDown(e: Event) {\n    const event = e as KeyboardEvent;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close.emit();\n    }\n  }\n}\n","<section class=\"zap-modal-shell\" (click)=\"closeModal()\">\n  <div (click)=\"$event.stopPropagation()\">\n    <button type=\"button\" (click)=\"closeModal()\">\n      <zap-svg [name]=\"'close'\" [config]=\"svgConfigIcon\"></zap-svg>\n    </button>\n    <div>\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n","/*\n * Public API Surface of overlay\n */\n\nexport * from './lib/tooltip/index';\nexport * from './lib/tooltip-bind/index';\nexport * from './lib/modal-shell/index';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexzap/overlay",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "All the overlay components that makes part of the flexzap library",
   "keywords": [
     "flexzap",

package/types/flexzap-overlay.d.ts

@@ -1,8 +1,27 @@
 import * as i0 from '@angular/core';
 import { ZapSvgInterface } from '@flexzap/symbols';
 
+/**
+ * Component that displays a tooltip with text content.
+ * Positioned relative to a target element.
+ *
+ * @example
+ * ```html
+ * <zap-tooltip [position]="'top'" [visible]="true">
+ *   Tooltip Content
+ * </zap-tooltip>
+ * ```
+ */
 declare class ZapTooltip {
+    /**
+     * The position of the tooltip relative to the target.
+     * Required.
+     */
     position: i0.InputSignal<"top" | "right" | "bottom" | "left">;
+    /**
+     * Whether the tooltip is currently visible.
+     * @default false
+     */
     visible: i0.InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ZapTooltip, never>;
     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>;
@@ -19,11 +38,40 @@ declare class ZapTooltipBind {
     static ɵdir: i0.ɵɵDirectiveDeclaration<ZapTooltipBind, "[ZapTooltipBind]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * A shell component for creating modal dialogs.
+ * Handles visibility, backdrop, and close interactions (click outside, escape key).
+ *
+ * @example
+ * ```html
+ * <zap-modal-shell [visible]="isOpen()" (close)="onClose()">
+ *   <div class="modal-content">
+ *     <h2>Title</h2>
+ *     <p>Content...</p>
+ *   </div>
+ * </zap-modal-shell>
+ * ```
+ */
 declare class ZapModalShell {
+    /**
+     * Whether the modal is visible.
+     * Required.
+     */
     visible: i0.InputSignal<boolean>;
+    /**
+     * Event emitted when the modal should close.
+     * Triggered by clicking the close button or pressing Escape.
+     */
     close: i0.OutputEmitterRef<void>;
     svgConfigIcon: ZapSvgInterface;
+    /**
+     * Closes the modal by emitting the close event.
+     */
     closeModal(): void;
+    /**
+     * Handles the Escape key press to close the modal.
+     * @param e The keyboard event.
+     */
     onKeyDown(e: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ZapModalShell, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ZapModalShell, "zap-modal-shell", never, { "visible": { "alias": "visible"; "required": true; "isSignal": true; }; }, { "close": "close"; }, never, ["*"], true, never>;