ng-blatui 1.10.0 → 1.11.0

package/fesm2022/ng-blatui.mjs

@@ -3811,6 +3811,190 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], change: [{ type: i0.Input, args: [{ isSignal: true, alias: "change", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+/**
+ * Hover-triggered card on the Angular CDK overlay. Opens on hover/focus after a delay
+ * and stays open while the pointer is over the card. SSR-safe (browser-only, on hover).
+ */
+class BuiHoverCard {
+    content = input.required({ ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'buiHoverCard' });
+    openDelay = input(400, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
+    closeDelay = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    overlay = inject(Overlay);
+    host = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    overlayRef = null;
+    timer;
+    scheduleOpen() {
+        this.clearTimer();
+        this.timer = setTimeout(() => {
+            this.open();
+        }, this.openDelay());
+    }
+    scheduleClose() {
+        this.clearTimer();
+        this.timer = setTimeout(() => {
+            this.close();
+        }, this.closeDelay());
+    }
+    clearTimer() {
+        if (this.timer === undefined) {
+            return;
+        }
+        clearTimeout(this.timer);
+        this.timer = undefined;
+    }
+    open() {
+        if (this.overlayRef) {
+            return;
+        }
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.host)
+            .withPositions([
+            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 },
+            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -4 },
+        ]);
+        const overlayReference = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        overlayReference.attach(new TemplatePortal(this.content(), this.viewContainerRef));
+        overlayReference.overlayElement.addEventListener('mouseenter', () => {
+            this.clearTimer();
+        });
+        overlayReference.overlayElement.addEventListener('mouseleave', () => {
+            this.scheduleClose();
+        });
+        this.overlayRef = overlayReference;
+    }
+    close() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+    }
+    ngOnDestroy() {
+        this.clearTimer();
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiHoverCard, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiHoverCard, isStandalone: true, selector: "[buiHoverCard]", inputs: { content: { classPropertyName: "content", publicName: "buiHoverCard", isSignal: true, isRequired: true, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "scheduleOpen()", "mouseleave": "scheduleClose()", "focusin": "scheduleOpen()", "focusout": "scheduleClose()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiHoverCard, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiHoverCard]',
+                    host: {
+                        '(mouseenter)': 'scheduleOpen()',
+                        '(mouseleave)': 'scheduleClose()',
+                        '(focusin)': 'scheduleOpen()',
+                        '(focusout)': 'scheduleClose()',
+                    },
+                }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "buiHoverCard", required: true }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }] } });
+/** Styling for the hover-card content root (inside the bound template). */
+class BuiHoverCardContent {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiHoverCardContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiHoverCardContent, isStandalone: true, selector: "[buiHoverCardContent]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "hover-card-content", "tabindex": "-1" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiHoverCardContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiHoverCardContent]',
+                    host: { 'data-slot': 'hover-card-content', tabindex: '-1', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** A dark code panel with an optional filename header and a copy button. */
+class BuiCodeBlock {
+    code = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    filename = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filename" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    copied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('group/code-block relative block overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950 text-zinc-100', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    async copy() {
+        try {
+            await navigator.clipboard.writeText(this.code());
+            this.copied.set(true);
+            setTimeout(() => {
+                this.copied.set(false);
+            }, 1600);
+        }
+        catch {
+            // Clipboard unavailable — ignore.
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCodeBlock, isStandalone: true, selector: "bui-code-block", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "code-block" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    @if (filename()) {
+      <div class="flex items-center justify-between border-b border-white/10 px-4 py-2">
+        <span class="font-mono text-xs text-zinc-400">{{ filename() }}</span>
+        <button
+          type="button"
+          aria-label="Copy code"
+          class="text-xs text-zinc-400 transition-colors hover:text-zinc-100"
+          (click)="copy()"
+        >
+          {{ copied() ? 'Copied' : 'Copy' }}
+        </button>
+      </div>
+    } @else {
+      <button
+        type="button"
+        aria-label="Copy code"
+        class="absolute end-2 top-2 z-10 rounded-md px-1.5 py-1 text-xs text-zinc-400 opacity-0 transition-all group-hover/code-block:opacity-100 hover:bg-white/10 hover:text-zinc-100 focus-visible:opacity-100"
+        (click)="copy()"
+      >
+        {{ copied() ? 'Copied' : 'Copy' }}
+      </button>
+    }
+    <pre
+      class="overflow-x-auto p-4 text-[13px] leading-relaxed"
+    ><code class="font-mono">{{ code() }}</code></pre>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCodeBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-code-block',
+                    host: { 'data-slot': 'code-block', '[class]': 'computedClass()' },
+                    template: `
+    @if (filename()) {
+      <div class="flex items-center justify-between border-b border-white/10 px-4 py-2">
+        <span class="font-mono text-xs text-zinc-400">{{ filename() }}</span>
+        <button
+          type="button"
+          aria-label="Copy code"
+          class="text-xs text-zinc-400 transition-colors hover:text-zinc-100"
+          (click)="copy()"
+        >
+          {{ copied() ? 'Copied' : 'Copy' }}
+        </button>
+      </div>
+    } @else {
+      <button
+        type="button"
+        aria-label="Copy code"
+        class="absolute end-2 top-2 z-10 rounded-md px-1.5 py-1 text-xs text-zinc-400 opacity-0 transition-all group-hover/code-block:opacity-100 hover:bg-white/10 hover:text-zinc-100 focus-visible:opacity-100"
+        (click)="copy()"
+      >
+        {{ copied() ? 'Copied' : 'Copy' }}
+      </button>
+    }
+    <pre
+      class="overflow-x-auto p-4 text-[13px] leading-relaxed"
+    ><code class="font-mono">{{ code() }}</code></pre>
+  `,
+                }]
+        }], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], filename: [{ type: i0.Input, args: [{ isSignal: true, alias: "filename", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /*
  * Public API Surface of ng-blatui
  */
@@ -3819,5 +4003,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertTitle, BuiAspectRatio, BuiAvatar, BuiAvatarGroup, BuiBadge, BuiBanner, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiContainer, BuiCopyButton, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiInput, BuiInputGroup, BuiInputGroupAddon, BuiInputGroupButton, BuiInputGroupInput, BuiInputGroupText, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiKbd, BuiLabel, BuiMeter, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiPopover, BuiPopoverContent, BuiProgress, BuiRadioGroup, BuiRadioGroupItem, BuiScrollArea, BuiSeparator, BuiSkeleton, BuiSpinner, BuiStat, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTextarea, BuiThemeCustomizer, BuiToggle, BuiTooltip, BuiTooltipContent, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
+export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertTitle, BuiAspectRatio, BuiAvatar, BuiAvatarGroup, BuiBadge, BuiBanner, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiCodeBlock, BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiContainer, BuiCopyButton, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiHoverCard, BuiHoverCardContent, BuiInput, BuiInputGroup, BuiInputGroupAddon, BuiInputGroupButton, BuiInputGroupInput, BuiInputGroupText, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiKbd, BuiLabel, BuiMeter, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiPopover, BuiPopoverContent, BuiProgress, BuiRadioGroup, BuiRadioGroupItem, BuiScrollArea, BuiSeparator, BuiSkeleton, BuiSpinner, BuiStat, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTextarea, BuiThemeCustomizer, BuiToggle, BuiTooltip, BuiTooltipContent, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
 //# sourceMappingURL=ng-blatui.mjs.map