nath-angular-ui 0.0.3 → 0.1.0

package/fesm2022/nath-angular-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, model, input, output, contentChild, TemplateRef, viewChild, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, InjectionToken, Injector, EnvironmentInjector, ApplicationRef, createEnvironmentInjector, createComponent, Service, Renderer2, viewChildren, SecurityContext, untracked, HostListener, ViewChild, booleanAttribute, Directive, contentChildren } from '@angular/core';
+import { inject, ElementRef, model, input, output, contentChild, TemplateRef, viewChild, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, InjectionToken, Injector, EnvironmentInjector, ApplicationRef, createEnvironmentInjector, createComponent, Service, Renderer2, viewChildren, SecurityContext, untracked, HostListener, ViewChild, booleanAttribute, Directive, contentChildren, ViewContainerRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, DOCUMENT, NgStyle, NgClass, KeyValuePipe } from '@angular/common';
 import * as i2 from '@angular/cdk/overlay';
@@ -5245,6 +5245,230 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'nath-toc', imports: [], encapsulation: ViewEncapsulation.None, template: "<aside class=\"nath-toc-aside\">\n  <nav class=\"nath-toc-nav\">\n    <h3 class=\"nath-toc-title\">Table of Contents</h3>\n    <ul class=\"nath-toc-list\">\n      @for (section of tocSections(); track section.id) {\n        <li>\n          <button type=\"button\" (click)=\"scrollToSection(section.id)\" class=\"nath-toc-button\">\n            {{ section.label }}\n          </button>\n        </li>\n      }\n    </ul>\n  </nav>\n</aside>\n", styles: ["nath-toc{display:block}nath-toc,.nath-toc-theme{--nath-toc-width: 16rem;--nath-toc-sticky-top: 1rem;--nath-toc-nav-bg: var(--color-white, #ffffff);--nath-toc-nav-padding: 1rem;--nath-toc-nav-radius: .5rem;--nath-toc-nav-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-toc-title-font-weight: 700;--nath-toc-title-margin-bottom: .75rem;--nath-toc-title-font-size: 1.125rem;--nath-toc-title-color: var(--color-gray-900, oklch(21% .006 285.885));--nath-toc-list-gap: .5rem;--nath-toc-button-text-align: left;--nath-toc-button-width: 100%;--nath-toc-button-text: var(--color-gray-700, oklch(37.3% .045 262.531));--nath-toc-button-hover-text: var(--color-primary-500, #8e9ba5);--nath-toc-button-transition: color .2s}.dark nath-toc,.dark .nath-toc-theme{--nath-toc-nav-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toc-title-color: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-toc-button-text: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-toc-button-hover-text: var(--color-primary-400, oklch(68% .01 286.3))}.nath-toc-aside{width:var(--nath-toc-width);flex-shrink:0;position:sticky;top:var(--nath-toc-sticky-top);height:fit-content}.nath-toc-nav{background-color:var(--nath-toc-nav-bg);padding:var(--nath-toc-nav-padding);border-radius:var(--nath-toc-nav-radius);box-shadow:var(--nath-toc-nav-shadow)}.nath-toc-title{font-weight:var(--nath-toc-title-font-weight);margin-bottom:var(--nath-toc-title-margin-bottom);font-size:var(--nath-toc-title-font-size);color:var(--nath-toc-title-color)}.nath-toc-list{display:flex;flex-direction:column;gap:var(--nath-toc-list-gap);list-style:none;padding:0;margin:0}.nath-toc-button{text-align:var(--nath-toc-button-text-align);width:var(--nath-toc-button-width);color:var(--nath-toc-button-text);transition:var(--nath-toc-button-transition);cursor:pointer;border:none;background:transparent;padding:0;font-size:1rem}.nath-toc-button:hover{color:var(--nath-toc-button-hover-text)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], containerSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerSelector", required: false }] }], scrollContainerSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainerSelector", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }] } });
 
+class NathTooltipContainer {
+    sanitizer = inject(DomSanitizer);
+    hostRef = inject((ElementRef)); // Inject host reference directly
+    content = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    positionStyles = signal({ opacity: '0' }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positionStyles" }] : /* istanbul ignore next */ []));
+    arrowClass = signal('arrow-top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrowClass" }] : /* istanbul ignore next */ []));
+    sanitizedHtml() {
+        const raw = this.content();
+        if (typeof raw === 'string') {
+            return this.sanitizer.sanitize(SecurityContext.HTML, raw) || '';
+        }
+        return '';
+    }
+    isTemplate(value) {
+        return value && typeof value !== 'string';
+    }
+    updatePosition(hostRect, preferredPosition) {
+        const tooltipContainer = this.hostRef.nativeElement.querySelector('.nath-tooltip-container');
+        if (!tooltipContainer) {
+            console.error('Tooltip container not found');
+            return;
+        }
+        const tooltipWidth = tooltipContainer.offsetWidth;
+        const tooltipHeight = tooltipContainer.offsetHeight;
+        const spacing = 12;
+        console.log(`hostRect`, hostRect);
+        console.log(`preferredPosition`, preferredPosition);
+        console.log(`tooltipWidth`, tooltipWidth);
+        console.log(`tooltipHeight`, tooltipHeight);
+        // Determine baseline coordinates and potential flip strategy
+        const coords = this.calculateInitialPosition(hostRect, tooltipWidth, tooltipHeight, preferredPosition, spacing);
+        // Prevent edge bleeding along the cross-axis bounds
+        const cleanCoords = this.constrainToViewport(coords.left, coords.top, tooltipWidth, tooltipHeight, preferredPosition);
+        this.arrowClass.set(`arrow-${coords.finalPosition}`);
+        this.positionStyles.set({
+            transform: `translate3d(${cleanCoords.left}px, ${cleanCoords.top}px, 0)`,
+            opacity: '1',
+        });
+    }
+    /**
+     * Calculates structural baseline layout alignments and performs flipping checks.
+     */
+    calculateInitialPosition(hostRect, w, h, pos, space) {
+        if (pos === 'top')
+            return this.getTopCoords(hostRect, w, h, space);
+        if (pos === 'bottom')
+            return this.getBottomCoords(hostRect, w, h, space);
+        if (pos === 'left')
+            return this.getLeftCoords(hostRect, w, h, space);
+        return this.getRightCoords(hostRect, w, h, space);
+    }
+    getTopCoords(hostRect, w, h, space) {
+        const top = hostRect.top - h - space;
+        const isOverflow = top < 0;
+        return {
+            top: isOverflow ? hostRect.bottom + space : top,
+            left: hostRect.left + (hostRect.width - w) / 2,
+            finalPosition: isOverflow ? 'bottom' : 'top',
+        };
+    }
+    getBottomCoords(hostRect, w, h, space) {
+        const top = hostRect.bottom + space;
+        const isOverflow = top + h > window.innerHeight;
+        return {
+            top: isOverflow ? hostRect.top - h - space : top,
+            left: hostRect.left + (hostRect.width - w) / 2,
+            finalPosition: isOverflow ? 'top' : 'bottom',
+        };
+    }
+    getLeftCoords(hostRect, w, h, space) {
+        const left = hostRect.left - w - space;
+        const isOverflow = left < 0;
+        return {
+            top: hostRect.top + (hostRect.height - h) / 2,
+            left: isOverflow ? hostRect.right + space : left,
+            finalPosition: isOverflow ? 'right' : 'left',
+        };
+    }
+    getRightCoords(hostRect, w, h, space) {
+        const left = hostRect.right + space;
+        const isOverflow = left + w > window.innerWidth;
+        return {
+            top: hostRect.top + (hostRect.height - h) / 2,
+            left: isOverflow ? hostRect.left - w - space : left,
+            finalPosition: isOverflow ? 'left' : 'right',
+        };
+    }
+    /**
+     * Adjusts calculated coordinates to keep them confined within visible screen padding bounds.
+     */
+    constrainToViewport(left, top, w, h, pos) {
+        let cleanLeft = left;
+        let cleanTop = top;
+        const boundaryPadding = 8;
+        if (pos === 'top' || pos === 'bottom') {
+            if (cleanLeft < 0)
+                cleanLeft = boundaryPadding;
+            if (cleanLeft + w > window.innerWidth) {
+                cleanLeft = window.innerWidth - w - boundaryPadding;
+            }
+        }
+        else {
+            if (cleanTop < 0)
+                cleanTop = boundaryPadding;
+            if (cleanTop + h > window.innerHeight) {
+                cleanTop = window.innerHeight - h - boundaryPadding;
+            }
+        }
+        return { left: cleanLeft, top: cleanTop };
+    }
+    hide() {
+        this.positionStyles.update((styles) => ({ ...styles, opacity: '0' }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTooltipContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathTooltipContainer, isStandalone: true, selector: "ng-component", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="nath-tooltip-container nath-tooltip-container-theme"
+      [class]="arrowClass()"
+      [style]="positionStyles()"
+    >
+      <div class="nath-tooltip-content">
+        @if (isTemplate(content())) {
+          <ng-container [ngTemplateOutlet]="$any(content())"></ng-container>
+        } @else {
+          <div [innerHTML]="sanitizedHtml()"></div>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: ["nath-tooltip-container,.nath-tooltip-container-theme{--nath-tooltip-container-text-color: #fff;--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-bottom-color: var(--color-slate-100, oklch(.967 .011 264.536))}.dark nath-tooltip-container,.dark .nath-tooltip-container-theme{--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755))}.nath-tooltip-container{position:fixed;left:0;top:0;display:block;z-index:50;transition-property:opacity;transition-duration:.2s;pointer-events:none;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;max-width:20rem;background-color:var(--nath-tooltip-container-bg-color);color:var(--nath-tooltip-container-text-color);border-bottom:1px solid var(--nath-tooltip-container-border-bottom-color)}.nath-tooltip-container:after{content:\"\";position:absolute;width:0;height:0;border-style:solid;border-width:6px;border-color:transparent}.nath-tooltip-container.arrow-top:after{border-top-color:var(--nath-tooltip-container-border-color);top:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-bottom:after{border-bottom-color:var(--nath-tooltip-container-border-color);bottom:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-left:after{border-left-color:var(--nath-tooltip-container-border-color);left:100%;top:calc(50% - 6px)}.nath-tooltip-container.arrow-right:after{border-right-color:var(--nath-tooltip-container-border-color);right:100%;top:calc(50% - 6px)}.nath-tooltip-content{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTooltipContainer, decorators: [{
+            type: Component,
+            args: [{ imports: [NgTemplateOutlet], template: `
+    <div
+      class="nath-tooltip-container nath-tooltip-container-theme"
+      [class]="arrowClass()"
+      [style]="positionStyles()"
+    >
+      <div class="nath-tooltip-content">
+        @if (isTemplate(content())) {
+          <ng-container [ngTemplateOutlet]="$any(content())"></ng-container>
+        } @else {
+          <div [innerHTML]="sanitizedHtml()"></div>
+        }
+      </div>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: ["nath-tooltip-container,.nath-tooltip-container-theme{--nath-tooltip-container-text-color: #fff;--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-bottom-color: var(--color-slate-100, oklch(.967 .011 264.536))}.dark nath-tooltip-container,.dark .nath-tooltip-container-theme{--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755))}.nath-tooltip-container{position:fixed;left:0;top:0;display:block;z-index:50;transition-property:opacity;transition-duration:.2s;pointer-events:none;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;max-width:20rem;background-color:var(--nath-tooltip-container-bg-color);color:var(--nath-tooltip-container-text-color);border-bottom:1px solid var(--nath-tooltip-container-border-bottom-color)}.nath-tooltip-container:after{content:\"\";position:absolute;width:0;height:0;border-style:solid;border-width:6px;border-color:transparent}.nath-tooltip-container.arrow-top:after{border-top-color:var(--nath-tooltip-container-border-color);top:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-bottom:after{border-bottom-color:var(--nath-tooltip-container-border-color);bottom:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-left:after{border-left-color:var(--nath-tooltip-container-border-color);left:100%;top:calc(50% - 6px)}.nath-tooltip-container.arrow-right:after{border-right-color:var(--nath-tooltip-container-border-color);right:100%;top:calc(50% - 6px)}.nath-tooltip-content{white-space:nowrap}\n"] }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
+
+class NathTooltipDirective {
+    tooltipContent = input(null, { ...(ngDevMode ? { debugName: "tooltipContent" } : /* istanbul ignore next */ {}), alias: 'nathTooltip' });
+    tooltipPosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+    showDelay = input(200, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDelay" }] : /* istanbul ignore next */ []));
+    hideDelay = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideDelay" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    document = inject(DOCUMENT);
+    componentRef = null;
+    showTimeout;
+    hideTimeout;
+    onMouseEnter() {
+        clearTimeout(this.hideTimeout);
+        if (!this.componentRef) {
+            this.showTimeout = setTimeout(() => this.showTooltip(), this.showDelay());
+        }
+    }
+    onMouseLeave() {
+        clearTimeout(this.showTimeout);
+        if (this.componentRef) {
+            this.hideTimeout = setTimeout(() => this.destroyTooltip(), this.hideDelay());
+        }
+    }
+    showTooltip() {
+        if (this.componentRef || !this.tooltipContent())
+            return;
+        this.componentRef = this.viewContainerRef.createComponent(NathTooltipContainer);
+        this.componentRef.setInput('content', this.tooltipContent());
+        const domElem = this.componentRef.hostView.rootNodes[0];
+        this.document.body.appendChild(domElem);
+        this.componentRef.changeDetectorRef.detectChanges();
+        const hostRect = this.elementRef.nativeElement.getBoundingClientRect();
+        this.componentRef.instance.updatePosition(hostRect, this.tooltipPosition());
+        this.componentRef.changeDetectorRef.detectChanges();
+    }
+    destroyTooltip() {
+        if (this.componentRef) {
+            this.componentRef.instance.hide();
+            const refToDestroy = this.componentRef;
+            this.componentRef = null;
+            // Keep this at a fixed 200ms to allow the Tailwind opacity transition to complete
+            setTimeout(() => {
+                refToDestroy.destroy();
+            }, 200);
+        }
+    }
+    ngOnDestroy() {
+        clearTimeout(this.showTimeout);
+        clearTimeout(this.hideTimeout);
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NathTooltipDirective, isStandalone: true, selector: "[nathTooltip]", inputs: { tooltipContent: { classPropertyName: "tooltipContent", publicName: "nathTooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "focusin": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusout": "onMouseLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nathTooltip]',
+                    host: {
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(focusin)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                        '(focusout)': 'onMouseLeave()',
+                    },
+                }]
+        }], propDecorators: { tooltipContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "nathTooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDelay", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }] } });
+
 function next(el, selector) {
     const nextEl = el.nextElementSibling;
     if (!selector || (nextEl && nextEl.matches(selector))) {
@@ -5278,5 +5502,5 @@ function isSortOrderValid(order) {
  * Generated bundle index. Do not edit.
  */
 
-export { BreadcrumbService, ConfirmationService, DARK_THEME_CLASS, DIALOG_DATA, DialogRef, DialogService, NathAutocomplete, NathBooleanControl, NathBreadcrumbs, NathConfirmationDialog, NathDatepicker, NathDialogContainer, NathDrawer, NathFileUpload, NathFloatingLabel, NathFormField, NathImagePreview, NathMenu, NathMenuList, NathMultiselect, NathPaginatedView, NathPaginator, NathPanel, NathPickList, NathProgressBar, NathProgressCircle, NathRadioButtonGroup, NathRatingHeart, NathRatingInput, NathSelect, NathSkeleton, NathSlider, NathSortIcon, NathSplitButton, NathTabs, NathThemeSwitch, NathToastContainer, NathToc, ORDER, RATING_MAP, THEME_CONFIG, TabDirective, TabPanelDirective, ThemeService, ToastService, getRatingColor, hasRequiredValidator, isRequired, isSortOrderValid, isTruthy, next, provideThemeConfig, rangeMinMax, rangeNotMinMax, validateAllFormFields };
+export { BreadcrumbService, ConfirmationService, DARK_THEME_CLASS, DIALOG_DATA, DialogRef, DialogService, NathAutocomplete, NathBooleanControl, NathBreadcrumbs, NathConfirmationDialog, NathDatepicker, NathDialogContainer, NathDrawer, NathFileUpload, NathFloatingLabel, NathFormField, NathImagePreview, NathMenu, NathMenuList, NathMultiselect, NathPaginatedView, NathPaginator, NathPanel, NathPickList, NathProgressBar, NathProgressCircle, NathRadioButtonGroup, NathRatingHeart, NathRatingInput, NathSelect, NathSkeleton, NathSlider, NathSortIcon, NathSplitButton, NathTabs, NathThemeSwitch, NathToastContainer, NathToc, NathTooltipContainer, NathTooltipDirective, ORDER, RATING_MAP, THEME_CONFIG, TabDirective, TabPanelDirective, ThemeService, ToastService, getRatingColor, hasRequiredValidator, isRequired, isSortOrderValid, isTruthy, next, provideThemeConfig, rangeMinMax, rangeNotMinMax, validateAllFormFields };
 //# sourceMappingURL=nath-angular-ui.mjs.map