ng-blatui 1.0.0 → 1.2.0

package/fesm2022/ng-blatui.mjs

@@ -1,12 +1,15 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { input, computed, Directive, Component, signal, model, inject, PLATFORM_ID, effect, Injectable } from '@angular/core';
+import { input, computed, Directive, Component, signal, model, inject, PLATFORM_ID, effect, Injectable, ElementRef } from '@angular/core';
 import { cva } from 'class-variance-authority';
 export { AccordionContent, AccordionGroup, AccordionPanel, AccordionTrigger, ɵɵDeferredContent, ɵɵDeferredContentAware } from '@angular/aria/accordion';
 export { Tab, TabContent, TabList, TabPanel, Tabs } from '@angular/aria/tabs';
 export { DIALOG_DATA, Dialog, DialogModule, DialogRef } from '@angular/cdk/dialog';
 import { isPlatformBrowser } from '@angular/common';
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
 
 /**
  * Merge class names with `clsx` semantics and resolve Tailwind conflicts with
@@ -1819,6 +1822,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }] });
 
+/**
+ * BlatUI radio group. `role="radiogroup"` with arrow-key roving focus across the
+ * `buiRadioItem` buttons; `[(value)]` two-way binds the selected value.
+ */
+class BuiRadioGroup {
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    host = inject(ElementRef);
+    computedClass = computed(() => cn('grid gap-3', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    select(next) {
+        this.value.set(next);
+    }
+    onKeydown(event) {
+        if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        const items = [
+            ...this.host.nativeElement.querySelectorAll('[role="radio"]:not([disabled])'),
+        ];
+        if (items.length === 0) {
+            return;
+        }
+        const current = items.indexOf(document.activeElement);
+        const isForward = event.key === 'ArrowDown' || event.key === 'ArrowRight';
+        const next = items[(current + (isForward ? 1 : -1) + items.length) % items.length];
+        next.focus();
+        next.click();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiRadioGroup, isStandalone: true, selector: "[buiRadioGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "radiogroup", "data-slot": "radio-group" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "computedClass()" } }, exportAs: ["buiRadioGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRadioGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiRadioGroup]',
+                    exportAs: 'buiRadioGroup',
+                    host: {
+                        role: 'radiogroup',
+                        'data-slot': 'radio-group',
+                        '[class]': 'computedClass()',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+const ITEM = 'border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50';
+class BuiRadioGroupItem {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    group = inject(BuiRadioGroup);
+    checked = computed(() => this.group.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    tabIndex = computed(() => this.checked() || this.group.value() === null ? 0 : -1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(ITEM, this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    select() {
+        if (!this.disabled()) {
+            this.group.select(this.value());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRadioGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiRadioGroupItem, isStandalone: true, selector: "button[buiRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "role": "radio", "data-slot": "radio-group-item" }, listeners: { "click": "select()" }, properties: { "attr.aria-checked": "checked()", "attr.data-state": "checked() ? 'checked' : 'unchecked'", "attr.tabindex": "tabIndex()", "disabled": "disabled()", "class": "computedClass()" } }, ngImport: i0, template: `
+    @if (checked()) {
+      <span data-slot="radio-group-indicator" class="flex items-center justify-center">
+        <svg viewBox="0 0 24 24" fill="currentColor" class="size-2" aria-hidden="true">
+          <circle cx="12" cy="12" r="10" />
+        </svg>
+      </span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRadioGroupItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[buiRadioItem]',
+                    host: {
+                        type: 'button',
+                        role: 'radio',
+                        'data-slot': 'radio-group-item',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.data-state]': "checked() ? 'checked' : 'unchecked'",
+                        '[attr.tabindex]': 'tabIndex()',
+                        '[disabled]': 'disabled()',
+                        '[class]': 'computedClass()',
+                        '(click)': 'select()',
+                    },
+                    template: `
+    @if (checked()) {
+      <span data-slot="radio-group-indicator" class="flex items-center justify-center">
+        <svg viewBox="0 0 24 24" fill="currentColor" class="size-2" aria-hidden="true">
+          <circle cx="12" cy="12" r="10" />
+        </svg>
+      </span>
+    }
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** Floating tooltip bubble rendered into a CDK overlay. */
+class BuiTooltipContent {
+    text = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTooltipContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiTooltipContent, isStandalone: true, selector: "bui-tooltip-content", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, classAttribute: "bg-primary text-primary-foreground z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs shadow-md" }, ngImport: i0, template: `{{ text() }}`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTooltipContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-tooltip-content',
+                    host: {
+                        role: 'tooltip',
+                        class: 'bg-primary text-primary-foreground z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs shadow-md',
+                    },
+                    template: `{{ text() }}`,
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
+/**
+ * BlatUI tooltip. Shows an accessible `role="tooltip"` bubble on hover/focus via the
+ * Angular CDK overlay and wires `aria-describedby` on the host. SSR-safe (the overlay
+ * is only created in the browser, on interaction).
+ */
+class BuiTooltip {
+    text = input.required({ ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'buiTooltip' });
+    overlay = inject(Overlay);
+    idGenerator = inject(_IdGenerator);
+    host = inject(ElementRef);
+    overlayRef = null;
+    describedBy = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    show() {
+        if (this.overlayRef || !this.text()) {
+            return;
+        }
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.host)
+            .withPositions([
+            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -6 },
+            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 6 },
+        ]);
+        this.overlayRef = this.overlay.create({ positionStrategy });
+        const reference = this.overlayRef.attach(new ComponentPortal(BuiTooltipContent));
+        reference.setInput('text', this.text());
+        const id = this.idGenerator.getId('bui-tooltip-');
+        reference.location.nativeElement.id = id;
+        this.describedBy.set(id);
+    }
+    hide() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.describedBy.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiTooltip, isStandalone: true, selector: "[buiTooltip]", inputs: { text: { classPropertyName: "text", publicName: "buiTooltip", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "focusin": "show()", "focusout": "hide()" }, properties: { "attr.aria-describedby": "describedBy()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiTooltip]',
+                    host: {
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '(mouseenter)': 'show()',
+                        '(mouseleave)': 'hide()',
+                        '(focusin)': 'show()',
+                        '(focusout)': 'hide()',
+                    },
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "buiTooltip", required: true }] }] } });
+
 /*
  * Public API Surface of ng-blatui
  */
@@ -1827,5 +2005,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, BuiAvatar, BuiBadge, BuiButton, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiInput, BuiLabel, BuiProgress, BuiSeparator, BuiSkeleton, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTabs, BuiTextarea, BuiThemeCustomizer, THEME_TOKENS, ThemeStore, buttonVariants, cn };
+export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertTitle, BuiAvatar, BuiBadge, BuiButton, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiInput, BuiLabel, BuiProgress, BuiRadioGroup, BuiRadioGroupItem, BuiSeparator, BuiSkeleton, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTabs, BuiTextarea, BuiThemeCustomizer, BuiTooltip, BuiTooltipContent, THEME_TOKENS, ThemeStore, buttonVariants, cn };
 //# sourceMappingURL=ng-blatui.mjs.map