ng-blatui 1.18.0 → 1.19.0

package/fesm2022/ng-blatui.mjs

@@ -5204,6 +5204,227 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { tiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "tiers", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], highlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlight", required: false }] }], featureLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+/**
+ * A card that flips to reveal its back. Default content is the front; project the back
+ * with `[buiFlipBack]`. `trigger="hover"` (default) or `"click"` (keyboard-accessible).
+ */
+class BuiFlipCard {
+    trigger = input('hover', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    height = input('16rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    flipped = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flipped" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('relative block w-full', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    onHover(shouldFlip) {
+        if (this.trigger() === 'hover') {
+            this.flipped.set(shouldFlip);
+        }
+    }
+    onClick() {
+        if (this.trigger() === 'click') {
+            this.flipped.update((value) => !value);
+        }
+    }
+    onKeydown(event) {
+        if (!(this.trigger() === 'click' && (event.key === 'Enter' || event.key === ' '))) {
+            return;
+        }
+        event.preventDefault();
+        this.flipped.update((value) => !value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFlipCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiFlipCard, isStandalone: true, selector: "bui-flip-card", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "flip-card" }, listeners: { "mouseenter": "onHover(true)", "mouseleave": "onHover(false)", "focusin": "onHover(true)", "focusout": "onHover(false)", "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "class": "computedClass()", "style.perspective": "'1000px'", "style.height": "height()", "attr.role": "trigger() === 'click' ? 'button' : null", "attr.tabindex": "trigger() === 'click' ? 0 : null", "attr.aria-pressed": "trigger() === 'click' ? flipped() : null" } }, ngImport: i0, template: `
+    <div
+      data-slot="flip-card-flipper"
+      class="relative block size-full rounded-xl transition-transform duration-500 [transform-style:preserve-3d]"
+      [class]="flipped() ? '[transform:rotateY(180deg)]' : ''"
+    >
+      <div
+        data-slot="flip-card-front"
+        class="absolute inset-0 flex flex-col overflow-hidden rounded-xl border bg-card p-6 text-card-foreground shadow-sm [backface-visibility:hidden]"
+        [attr.aria-hidden]="flipped()"
+      >
+        <ng-content />
+      </div>
+      <div
+        data-slot="flip-card-back"
+        class="absolute inset-0 flex [transform:rotateY(180deg)] flex-col overflow-hidden rounded-xl border bg-card p-6 text-card-foreground shadow-sm [backface-visibility:hidden]"
+        [attr.aria-hidden]="!flipped()"
+      >
+        <ng-content select="[buiFlipBack]" />
+      </div>
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFlipCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-flip-card',
+                    host: {
+                        'data-slot': 'flip-card',
+                        '[class]': 'computedClass()',
+                        '[style.perspective]': "'1000px'",
+                        '[style.height]': 'height()',
+                        '[attr.role]': "trigger() === 'click' ? 'button' : null",
+                        '[attr.tabindex]': "trigger() === 'click' ? 0 : null",
+                        '[attr.aria-pressed]': "trigger() === 'click' ? flipped() : null",
+                        '(mouseenter)': 'onHover(true)',
+                        '(mouseleave)': 'onHover(false)',
+                        '(focusin)': 'onHover(true)',
+                        '(focusout)': 'onHover(false)',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                    template: `
+    <div
+      data-slot="flip-card-flipper"
+      class="relative block size-full rounded-xl transition-transform duration-500 [transform-style:preserve-3d]"
+      [class]="flipped() ? '[transform:rotateY(180deg)]' : ''"
+    >
+      <div
+        data-slot="flip-card-front"
+        class="absolute inset-0 flex flex-col overflow-hidden rounded-xl border bg-card p-6 text-card-foreground shadow-sm [backface-visibility:hidden]"
+        [attr.aria-hidden]="flipped()"
+      >
+        <ng-content />
+      </div>
+      <div
+        data-slot="flip-card-back"
+        class="absolute inset-0 flex [transform:rotateY(180deg)] flex-col overflow-hidden rounded-xl border bg-card p-6 text-card-foreground shadow-sm [backface-visibility:hidden]"
+        [attr.aria-hidden]="!flipped()"
+      >
+        <ng-content select="[buiFlipBack]" />
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** A card with a radial spotlight glow that follows the cursor on hover. */
+class BuiSpotlightCard {
+    color = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input(350, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    host = inject(ElementRef);
+    hover = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
+    glowStyle = computed(() => {
+        const glow = this.color() ?? 'color-mix(in oklab, var(--foreground) 14%, transparent)';
+        return `radial-gradient(circle ${this.size()}px at var(--x, 50%) var(--y, 50%), ${glow}, transparent 80%)`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "glowStyle" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('relative overflow-hidden rounded-xl border bg-card p-6 text-card-foreground shadow-sm', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    track(event) {
+        const element = this.host.nativeElement;
+        const rect = element.getBoundingClientRect();
+        element.style.setProperty('--x', `${event.clientX - rect.left}px`);
+        element.style.setProperty('--y', `${event.clientY - rect.top}px`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSpotlightCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiSpotlightCard, isStandalone: true, selector: "bui-spotlight-card", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "spotlight-card" }, listeners: { "mousemove": "track($event)", "mouseenter": "hover.set(true)", "mouseleave": "hover.set(false)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    <div
+      aria-hidden="true"
+      class="pointer-events-none absolute inset-0 rounded-[inherit] transition-opacity duration-300"
+      [style.opacity]="hover() ? 1 : 0"
+      [style.background]="glowStyle()"
+    ></div>
+    <div class="relative z-10"><ng-content /></div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSpotlightCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-spotlight-card',
+                    host: {
+                        'data-slot': 'spotlight-card',
+                        '[class]': 'computedClass()',
+                        '(mousemove)': 'track($event)',
+                        '(mouseenter)': 'hover.set(true)',
+                        '(mouseleave)': 'hover.set(false)',
+                    },
+                    template: `
+    <div
+      aria-hidden="true"
+      class="pointer-events-none absolute inset-0 rounded-[inherit] transition-opacity duration-300"
+      [style.opacity]="hover() ? 1 : 0"
+      [style.background]="glowStyle()"
+    ></div>
+    <div class="relative z-10"><ng-content /></div>
+  `,
+                }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** A card that tilts in 3D toward the cursor. SSR-safe (geometry read on mousemove). */
+class BuiTiltCard {
+    max = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    scaleTo = input(1.05, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scaleTo" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    active = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    rx = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rx" }] : /* istanbul ignore next */ []));
+    ry = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ry" }] : /* istanbul ignore next */ []));
+    cardTransform = computed(() => {
+        const scale = this.active() ? this.scaleTo() : 1;
+        return `rotateX(${this.rx()}deg) rotateY(${this.ry()}deg) scale(${scale})`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cardTransform" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('block [perspective:1000px]', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    move(event) {
+        const rect = event.currentTarget.getBoundingClientRect();
+        const px = (event.clientX - rect.left) / rect.width;
+        const py = (event.clientY - rect.top) / rect.height;
+        this.active.set(true);
+        this.ry.set((px - 0.5) * 2 * this.max());
+        this.rx.set(-(py - 0.5) * 2 * this.max());
+    }
+    leave() {
+        this.active.set(false);
+        this.rx.set(0);
+        this.ry.set(0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTiltCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiTiltCard, isStandalone: true, selector: "bui-tilt-card", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, scaleTo: { classPropertyName: "scaleTo", publicName: "scaleTo", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tilt-card" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    <div
+      class="relative block overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm [transform-style:preserve-3d]"
+      [class]="active() ? 'transition-none' : 'transition-transform duration-500 ease-out'"
+      [style.transform]="cardTransform()"
+      (mousemove)="move($event)"
+      (mouseleave)="leave()"
+    >
+      <ng-content />
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTiltCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-tilt-card',
+                    host: { 'data-slot': 'tilt-card', '[class]': 'computedClass()' },
+                    template: `
+    <div
+      class="relative block overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm [transform-style:preserve-3d]"
+      [class]="active() ? 'transition-none' : 'transition-transform duration-500 ease-out'"
+      [style.transform]="cardTransform()"
+      (mousemove)="move($event)"
+      (mouseleave)="leave()"
+    >
+      <ng-content />
+    </div>
+  `,
+                }]
+        }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], scaleTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "scaleTo", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /*
  * Public API Surface of ng-blatui
  */
@@ -5212,5 +5433,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, BuiAlertDialogAction, BuiAlertDialogCancel, BuiAlertDialogContent, BuiAlertDialogDescription, BuiAlertDialogFooter, BuiAlertDialogHeader, BuiAlertDialogTitle, BuiAlertTitle, BuiAspectRatio, BuiAutosizeTextarea, 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, BuiComparisonTable, BuiContainer, BuiCopyButton, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiDotPattern, BuiDropdownMenu, BuiDropdownMenuItem, BuiDropdownMenuLabel, BuiDropdownMenuSeparator, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiGridPattern, BuiHoverCard, BuiHoverCardContent, BuiInput, BuiInputGroup, BuiInputGroupAddon, BuiInputGroupButton, BuiInputGroupInput, BuiInputGroupText, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiKbd, BuiLabel, BuiMenubar, BuiMenubarTrigger, BuiMeter, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiPopover, BuiPopoverContent, BuiProgress, BuiQuantitySelector, BuiRadioGroup, BuiRadioGroupItem, BuiRating, BuiScrollArea, BuiSegmentedControl, BuiSeparator, BuiSkeleton, BuiSlider, BuiSpinner, BuiStat, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTerminal, BuiTextarea, BuiThemeCustomizer, BuiToggle, BuiTooltip, BuiTooltipContent, BuiTypography, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
+export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertDialogAction, BuiAlertDialogCancel, BuiAlertDialogContent, BuiAlertDialogDescription, BuiAlertDialogFooter, BuiAlertDialogHeader, BuiAlertDialogTitle, BuiAlertTitle, BuiAspectRatio, BuiAutosizeTextarea, 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, BuiComparisonTable, BuiContainer, BuiCopyButton, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiDotPattern, BuiDropdownMenu, BuiDropdownMenuItem, BuiDropdownMenuLabel, BuiDropdownMenuSeparator, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiFlipCard, BuiGridPattern, BuiHoverCard, BuiHoverCardContent, BuiInput, BuiInputGroup, BuiInputGroupAddon, BuiInputGroupButton, BuiInputGroupInput, BuiInputGroupText, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiKbd, BuiLabel, BuiMenubar, BuiMenubarTrigger, BuiMeter, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiPopover, BuiPopoverContent, BuiProgress, BuiQuantitySelector, BuiRadioGroup, BuiRadioGroupItem, BuiRating, BuiScrollArea, BuiSegmentedControl, BuiSeparator, BuiSkeleton, BuiSlider, BuiSpinner, BuiSpotlightCard, BuiStat, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTerminal, BuiTextarea, BuiThemeCustomizer, BuiTiltCard, BuiToggle, BuiTooltip, BuiTooltipContent, BuiTypography, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
 //# sourceMappingURL=ng-blatui.mjs.map