ng-blatui 1.20.0 → 1.22.0

package/fesm2022/ng-blatui.mjs

@@ -77,7 +77,7 @@ const SIZES$3 = {
     default: 'px-2 py-0.5 text-xs',
     lg: 'px-3 py-1 text-sm [&>svg]:size-3.5',
 };
-const VARIANTS = {
+const VARIANTS$1 = {
     default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
     secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
     destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
@@ -113,16 +113,16 @@ const TONES$2 = {
 function brandClass(variant) {
     switch (variant) {
         case 'secondary': {
-            return VARIANTS.secondary;
+            return VARIANTS$1.secondary;
         }
         case 'destructive': {
-            return VARIANTS.destructive;
+            return VARIANTS$1.destructive;
         }
         case 'outline': {
-            return VARIANTS.outline;
+            return VARIANTS$1.outline;
         }
         default: {
-            return VARIANTS.default;
+            return VARIANTS$1.default;
         }
     }
 }
@@ -5673,6 +5673,457 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+const VARIANTS = {
+    primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+    subtle: 'bg-card text-foreground hover:bg-accent hover:text-accent-foreground border',
+};
+/**
+ * A floating "scroll to top" button that reveals itself once the page scrolls past
+ * `threshold` px. SSR-safe — the scroll position is only read in the browser.
+ */
+class BuiBackToTop {
+    threshold = input(300, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "threshold" }] : /* istanbul ignore next */ []));
+    variant = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    shown = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    variantClass = computed(() => VARIANTS[this.variant()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('fixed end-6 bottom-6 z-40 block', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            this.onScroll();
+        });
+    }
+    onScroll() {
+        this.shown.set(globalThis.scrollY > this.threshold());
+    }
+    toTop() {
+        globalThis.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBackToTop, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiBackToTop, isStandalone: true, selector: "bui-back-to-top", inputs: { threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "back-to-top" }, listeners: { "window:scroll": "onScroll()" }, properties: { "hidden": "!shown()", "class": "computedClass()" } }, ngImport: i0, template: `
+    <button
+      type="button"
+      aria-label="Back to top"
+      class="inline-flex size-10 items-center justify-center rounded-full shadow-md transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+      [class]="variantClass()"
+      (click)="toTop()"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+        class="size-5"
+      >
+        <path d="m5 12 7-7 7 7" />
+        <path d="M12 19V5" />
+      </svg>
+    </button>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBackToTop, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-back-to-top',
+                    host: {
+                        'data-slot': 'back-to-top',
+                        '[hidden]': '!shown()',
+                        '[class]': 'computedClass()',
+                        '(window:scroll)': 'onScroll()',
+                    },
+                    template: `
+    <button
+      type="button"
+      aria-label="Back to top"
+      class="inline-flex size-10 items-center justify-center rounded-full shadow-md transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+      [class]="variantClass()"
+      (click)="toTop()"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+        class="size-5"
+      >
+        <path d="m5 12 7-7 7 7" />
+        <path d="M12 19V5" />
+      </svg>
+    </button>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * A filterable combobox: a text input (`role="combobox"`, `aria-autocomplete="list"`) over a
+ * filtered listbox, using the `aria-activedescendant` pattern. Full keyboard + outside-click.
+ */
+class BuiCombobox {
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    placeholder = input('Search…', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    listId = inject(_IdGenerator).getId('bui-combobox-');
+    host = inject(ElementRef);
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    active = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    query = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    selectedLabel = computed(() => this.options().find((option) => option.value === this.value())?.label ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+    display = computed(() => (this.open() ? this.query() : this.selectedLabel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    filtered = computed(() => {
+        const query = this.query().trim().toLowerCase();
+        return query === ''
+            ? this.options()
+            : this.options().filter((option) => option.label.toLowerCase().includes(query));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('relative block', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    onInput(event) {
+        this.query.set(event.target.value);
+        this.active.set(0);
+        this.open.set(true);
+    }
+    openList() {
+        this.query.set('');
+        this.active.set(0);
+        this.open.set(true);
+    }
+    select(option) {
+        this.value.set(option.value);
+        this.query.set('');
+        this.open.set(false);
+    }
+    onKeydown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            this.open.set(false);
+            return;
+        }
+        if (!this.open() && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            event.preventDefault();
+            this.openList();
+            return;
+        }
+        const items = this.filtered();
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                this.active.set(Math.min(items.length - 1, this.active() + 1));
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                this.active.set(Math.max(0, this.active() - 1));
+                break;
+            }
+            case 'Enter': {
+                if (this.open() && items.length > 0) {
+                    event.preventDefault();
+                    this.select(items[this.active()]);
+                }
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }
+    onDocumentClick(event) {
+        if (!(this.open() && !this.host.nativeElement.contains(event.target))) {
+            return;
+        }
+        this.open.set(false);
+        this.query.set('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCombobox, isStandalone: true, selector: "bui-combobox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "combobox" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    <input
+      type="text"
+      role="combobox"
+      aria-autocomplete="list"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="listId"
+      [attr.aria-activedescendant]="open() ? listId + '-' + active() : null"
+      [value]="display()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
+      (input)="onInput($event)"
+      (focus)="openList()"
+      (keydown)="onKeydown($event)"
+    />
+    @if (open() && filtered().length > 0) {
+      <ul
+        [id]="listId"
+        role="listbox"
+        class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
+      >
+        @for (option of filtered(); track option.value; let i = $index) {
+          <li
+            [id]="listId + '-' + i"
+            role="option"
+            [attr.aria-selected]="option.value === value()"
+            class="relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none"
+            [class]="i === active() ? 'bg-accent text-accent-foreground' : ''"
+            (click)="select(option)"
+            (mouseenter)="active.set(i)"
+          >
+            {{ option.label }}
+          </li>
+        }
+      </ul>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCombobox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-combobox',
+                    host: {
+                        'data-slot': 'combobox',
+                        '[class]': 'computedClass()',
+                        '(document:click)': 'onDocumentClick($event)',
+                    },
+                    template: `
+    <input
+      type="text"
+      role="combobox"
+      aria-autocomplete="list"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="listId"
+      [attr.aria-activedescendant]="open() ? listId + '-' + active() : null"
+      [value]="display()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
+      (input)="onInput($event)"
+      (focus)="openList()"
+      (keydown)="onKeydown($event)"
+    />
+    @if (open() && filtered().length > 0) {
+      <ul
+        [id]="listId"
+        role="listbox"
+        class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
+      >
+        @for (option of filtered(); track option.value; let i = $index) {
+          <li
+            [id]="listId + '-' + i"
+            role="option"
+            [attr.aria-selected]="option.value === value()"
+            class="relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none"
+            [class]="i === active() ? 'bg-accent text-accent-foreground' : ''"
+            (click)="select(option)"
+            (mouseenter)="active.set(i)"
+          >
+            {{ option.label }}
+          </li>
+        }
+      </ul>
+    }
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** A live countdown to a target time (`role="timer"`). SSR-safe — ticks only in the browser. */
+class BuiCountdown {
+    to = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "to" }] : /* istanbul ignore next */ []));
+    expired = input('Expired', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expired" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    now = signal(Date.now(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []));
+    timer;
+    targetMs = computed(() => new Date(this.to()).getTime(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetMs" }] : /* istanbul ignore next */ []));
+    diff = computed(() => Math.max(0, this.targetMs() - this.now()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "diff" }] : /* istanbul ignore next */ []));
+    done = computed(() => this.diff() <= 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "done" }] : /* istanbul ignore next */ []));
+    units = computed(() => {
+        const diff = this.diff();
+        const pad = (value) => String(value).padStart(2, '0');
+        return [
+            { key: 'days', label: 'Days', value: pad(Math.floor(diff / 86_400_000)) },
+            { key: 'hours', label: 'Hrs', value: pad(Math.floor(diff / 3_600_000) % 24) },
+            { key: 'minutes', label: 'Min', value: pad(Math.floor(diff / 60_000) % 60) },
+            { key: 'seconds', label: 'Sec', value: pad(Math.floor(diff / 1000) % 60) },
+        ];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "units" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('inline-flex items-center gap-2', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            this.timer = setInterval(() => {
+                this.now.set(Date.now());
+            }, 1000);
+        });
+    }
+    ngOnDestroy() {
+        if (this.timer !== undefined) {
+            clearInterval(this.timer);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCountdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCountdown, isStandalone: true, selector: "bui-countdown", inputs: { to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: true, transformFunction: null }, expired: { classPropertyName: "expired", publicName: "expired", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "countdown", "role": "timer", "aria-live": "off" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    @if (done()) {
+      <span data-slot="countdown-expired" class="text-sm font-medium text-muted-foreground">
+        {{ expired() }}
+      </span>
+    } @else {
+      <div class="flex items-center gap-2">
+        @for (unit of units(); track unit.key) {
+          <div
+            data-slot="countdown-unit"
+            class="flex min-w-[3.25rem] flex-col items-center rounded-lg border bg-card px-2 py-1.5 shadow-xs"
+          >
+            <span class="text-xl font-bold tabular-nums">{{ unit.value }}</span>
+            <span class="text-[10px] font-medium tracking-wide text-muted-foreground uppercase">
+              {{ unit.label }}
+            </span>
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCountdown, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-countdown',
+                    host: {
+                        'data-slot': 'countdown',
+                        role: 'timer',
+                        'aria-live': 'off',
+                        '[class]': 'computedClass()',
+                    },
+                    template: `
+    @if (done()) {
+      <span data-slot="countdown-expired" class="text-sm font-medium text-muted-foreground">
+        {{ expired() }}
+      </span>
+    } @else {
+      <div class="flex items-center gap-2">
+        @for (unit of units(); track unit.key) {
+          <div
+            data-slot="countdown-unit"
+            class="flex min-w-[3.25rem] flex-col items-center rounded-lg border bg-card px-2 py-1.5 shadow-xs"
+          >
+            <span class="text-xl font-bold tabular-nums">{{ unit.value }}</span>
+            <span class="text-[10px] font-medium tracking-wide text-muted-foreground uppercase">
+              {{ unit.label }}
+            </span>
+          </div>
+        }
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: true }] }], expired: [{ type: i0.Input, args: [{ isSignal: true, alias: "expired", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Animates a number counting up to its target on first render. The animated digits are
+ * `aria-hidden`; an sr-only span carries the final value (SSR/no-JS read the real number).
+ */
+class BuiNumberTicker {
+    value = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    from = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []));
+    duration = input(1500, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
+    decimals = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decimals" }] : /* istanbul ignore next */ []));
+    prefix = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+    suffix = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+    separator = input(',', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    current = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('tabular-nums', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            this.animate();
+        });
+    }
+    format(value) {
+        const fixed = value.toFixed(Math.max(0, this.decimals()));
+        const [integer, decimal] = fixed.split('.');
+        const decimalPart = decimal ? `.${decimal}` : '';
+        return this.prefix() + this.group(integer) + decimalPart + this.suffix();
+    }
+    group(value) {
+        return value.length <= 3
+            ? value
+            : this.group(value.slice(0, -3)) + this.separator() + value.slice(-3);
+    }
+    animate() {
+        const start = this.from();
+        const end = this.value();
+        const duration = this.duration();
+        if (duration <= 0) {
+            this.current.set(end);
+            return;
+        }
+        this.current.set(start);
+        const startTime = performance.now();
+        const step = (time) => {
+            const progress = Math.min(1, (time - startTime) / duration);
+            this.current.set(start + (end - start) * progress);
+            if (progress < 1) {
+                requestAnimationFrame(step);
+            }
+        };
+        requestAnimationFrame(step);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiNumberTicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiNumberTicker, isStandalone: true, selector: "bui-number-ticker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "number-ticker" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    <span aria-hidden="true">{{ format(current()) }}</span>
+    <span class="sr-only">{{ format(value()) }}</span>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiNumberTicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-number-ticker',
+                    host: { 'data-slot': 'number-ticker', '[class]': 'computedClass()' },
+                    template: `
+    <span aria-hidden="true">{{ format(current()) }}</span>
+    <span class="sr-only">{{ format(value()) }}</span>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /*
  * Public API Surface of ng-blatui
  */
@@ -5681,5 +6132,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, 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, BuiSelect, 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 };
+export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertDialogAction, BuiAlertDialogCancel, BuiAlertDialogContent, BuiAlertDialogDescription, BuiAlertDialogFooter, BuiAlertDialogHeader, BuiAlertDialogTitle, BuiAlertTitle, BuiAspectRatio, BuiAutosizeTextarea, BuiAvatar, BuiAvatarGroup, BuiBackToTop, BuiBadge, BuiBanner, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiCodeBlock, BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiCombobox, BuiComparisonTable, BuiContainer, BuiCopyButton, BuiCountdown, 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, BuiNumberTicker, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiPopover, BuiPopoverContent, BuiProgress, BuiQuantitySelector, BuiRadioGroup, BuiRadioGroupItem, BuiRating, BuiScrollArea, BuiSegmentedControl, BuiSelect, 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