ng-blatui 1.11.0 → 1.12.0

package/fesm2022/ng-blatui.mjs

@@ -1,7 +1,7 @@
 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, ElementRef, ViewContainerRef } from '@angular/core';
+import { input, computed, Directive, Component, signal, model, inject, PLATFORM_ID, effect, Injectable, ElementRef, ViewContainerRef, viewChild } 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';
@@ -3995,6 +3995,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], 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 }] }] } });
 
+/**
+ * A single-value slider (`role="slider"`) with pointer drag and full keyboard support
+ * (arrows, Home/End, PageUp/PageDown). Horizontal or vertical. SSR-safe — geometry is
+ * only read inside browser event handlers.
+ */
+class BuiSlider {
+    value = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    step = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Value', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    track = viewChild.required('track');
+    dragging = false;
+    pct = computed(() => {
+        const range = this.max() - this.min() || 1;
+        return ((this.value() - this.min()) / range) * 100;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pct" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('relative flex touch-none items-center select-none data-disabled:pointer-events-none data-disabled:opacity-50', this.orientation() === 'vertical' ? 'h-40 w-fit flex-col' : 'w-full', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    onPointerDown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        this.dragging = true;
+        this.value.set(this.valueFromPointer(event));
+    }
+    onMove(event) {
+        if (this.dragging) {
+            this.value.set(this.valueFromPointer(event));
+        }
+    }
+    onUp() {
+        this.dragging = false;
+    }
+    onKeydown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        const big = Math.max(this.step(), (this.max() - this.min()) / 10);
+        let next;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp': {
+                next = this.value() + this.step();
+                break;
+            }
+            case 'ArrowLeft':
+            case 'ArrowDown': {
+                next = this.value() - this.step();
+                break;
+            }
+            case 'Home': {
+                next = this.min();
+                break;
+            }
+            case 'End': {
+                next = this.max();
+                break;
+            }
+            case 'PageUp': {
+                next = this.value() + big;
+                break;
+            }
+            case 'PageDown': {
+                next = this.value() - big;
+                break;
+            }
+            default: {
+                return;
+            }
+        }
+        event.preventDefault();
+        this.value.set(this.clamp(next));
+    }
+    valueFromPointer(event) {
+        const rect = this.track().nativeElement.getBoundingClientRect();
+        const ratioRaw = this.orientation() === 'vertical'
+            ? 1 - (event.clientY - rect.top) / rect.height
+            : (event.clientX - rect.left) / rect.width;
+        const ratio = Math.max(0, Math.min(1, ratioRaw));
+        return this.snap(this.min() + ratio * (this.max() - this.min()));
+    }
+    snap(raw) {
+        return this.clamp(Math.round(raw / this.step()) * this.step());
+    }
+    clamp(value) {
+        return Math.max(this.min(), Math.min(this.max(), value));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: BuiSlider, isStandalone: true, selector: "bui-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "slider" }, listeners: { "document:pointermove": "onMove($event)", "document:pointerup": "onUp()" }, properties: { "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? '' : null", "class": "computedClass()" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <span
+      #track
+      data-slot="slider-track"
+      class="relative grow overflow-hidden rounded-full bg-muted"
+      [class]="orientation() === 'vertical' ? 'h-full w-1.5' : 'h-1.5 w-full'"
+      (pointerdown)="onPointerDown($event)"
+    >
+      <span
+        data-slot="slider-range"
+        class="absolute bg-primary"
+        [class]="orientation() === 'vertical' ? 'bottom-0 w-full' : 'left-0 h-full'"
+        [style.height.%]="orientation() === 'vertical' ? pct() : null"
+        [style.width.%]="orientation() === 'vertical' ? null : pct()"
+      ></span>
+    </span>
+    <span
+      data-slot="slider-thumb"
+      role="slider"
+      [attr.aria-orientation]="orientation()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-valuemin]="min()"
+      [attr.aria-valuemax]="max()"
+      [attr.aria-valuenow]="value()"
+      [attr.aria-disabled]="disabled()"
+      [attr.tabindex]="disabled() ? -1 : 0"
+      class="absolute block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] outline-none hover:ring-4 focus-visible:ring-4"
+      [class]="
+        orientation() === 'vertical'
+          ? 'left-1/2 -translate-x-1/2 translate-y-1/2'
+          : 'top-1/2 -translate-x-1/2 -translate-y-1/2'
+      "
+      [style.bottom.%]="orientation() === 'vertical' ? pct() : null"
+      [style.left.%]="orientation() === 'vertical' ? null : pct()"
+      (keydown)="onKeydown($event)"
+    ></span>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSlider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-slider',
+                    host: {
+                        'data-slot': 'slider',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-disabled]': "disabled() ? '' : null",
+                        '[class]': 'computedClass()',
+                        '(document:pointermove)': 'onMove($event)',
+                        '(document:pointerup)': 'onUp()',
+                    },
+                    template: `
+    <span
+      #track
+      data-slot="slider-track"
+      class="relative grow overflow-hidden rounded-full bg-muted"
+      [class]="orientation() === 'vertical' ? 'h-full w-1.5' : 'h-1.5 w-full'"
+      (pointerdown)="onPointerDown($event)"
+    >
+      <span
+        data-slot="slider-range"
+        class="absolute bg-primary"
+        [class]="orientation() === 'vertical' ? 'bottom-0 w-full' : 'left-0 h-full'"
+        [style.height.%]="orientation() === 'vertical' ? pct() : null"
+        [style.width.%]="orientation() === 'vertical' ? null : pct()"
+      ></span>
+    </span>
+    <span
+      data-slot="slider-thumb"
+      role="slider"
+      [attr.aria-orientation]="orientation()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-valuemin]="min()"
+      [attr.aria-valuemax]="max()"
+      [attr.aria-valuenow]="value()"
+      [attr.aria-disabled]="disabled()"
+      [attr.tabindex]="disabled() ? -1 : 0"
+      class="absolute block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] outline-none hover:ring-4 focus-visible:ring-4"
+      [class]="
+        orientation() === 'vertical'
+          ? 'left-1/2 -translate-x-1/2 translate-y-1/2'
+          : 'top-1/2 -translate-x-1/2 -translate-y-1/2'
+      "
+      [style.bottom.%]="orientation() === 'vertical' ? pct() : null"
+      [style.left.%]="orientation() === 'vertical' ? null : pct()"
+      (keydown)="onKeydown($event)"
+    ></span>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+
 /*
  * Public API Surface of ng-blatui
  */
@@ -4003,5 +4193,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, 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 };
+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, BuiSlider, 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