ng-blatui 1.10.0 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  import { clsx } from 'clsx';
2
2
  import { twMerge } from 'tailwind-merge';
3
3
  import * as i0 from '@angular/core';
4
- import { input, computed, Directive, Component, signal, model, inject, PLATFORM_ID, effect, Injectable, ElementRef, ViewContainerRef } from '@angular/core';
4
+ import { input, computed, Directive, Component, signal, model, inject, PLATFORM_ID, effect, Injectable, ElementRef, ViewContainerRef, viewChild } from '@angular/core';
5
5
  import { cva } from 'class-variance-authority';
6
6
  export { AccordionContent, AccordionGroup, AccordionPanel, AccordionTrigger, ɵɵDeferredContent, ɵɵDeferredContentAware } from '@angular/aria/accordion';
7
7
  export { Tab, TabContent, TabList, TabPanel, Tabs } from '@angular/aria/tabs';
@@ -3811,6 +3811,380 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
3811
3811
  }]
3812
3812
  }], 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 }] }] } });
3813
3813
 
3814
+ /**
3815
+ * Hover-triggered card on the Angular CDK overlay. Opens on hover/focus after a delay
3816
+ * and stays open while the pointer is over the card. SSR-safe (browser-only, on hover).
3817
+ */
3818
+ class BuiHoverCard {
3819
+ content = input.required({ ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'buiHoverCard' });
3820
+ openDelay = input(400, /* @ts-ignore */
3821
+ ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
3822
+ closeDelay = input(100, /* @ts-ignore */
3823
+ ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
3824
+ overlay = inject(Overlay);
3825
+ host = inject(ElementRef);
3826
+ viewContainerRef = inject(ViewContainerRef);
3827
+ overlayRef = null;
3828
+ timer;
3829
+ scheduleOpen() {
3830
+ this.clearTimer();
3831
+ this.timer = setTimeout(() => {
3832
+ this.open();
3833
+ }, this.openDelay());
3834
+ }
3835
+ scheduleClose() {
3836
+ this.clearTimer();
3837
+ this.timer = setTimeout(() => {
3838
+ this.close();
3839
+ }, this.closeDelay());
3840
+ }
3841
+ clearTimer() {
3842
+ if (this.timer === undefined) {
3843
+ return;
3844
+ }
3845
+ clearTimeout(this.timer);
3846
+ this.timer = undefined;
3847
+ }
3848
+ open() {
3849
+ if (this.overlayRef) {
3850
+ return;
3851
+ }
3852
+ const positionStrategy = this.overlay
3853
+ .position()
3854
+ .flexibleConnectedTo(this.host)
3855
+ .withPositions([
3856
+ { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 },
3857
+ { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -4 },
3858
+ ]);
3859
+ const overlayReference = this.overlay.create({
3860
+ positionStrategy,
3861
+ scrollStrategy: this.overlay.scrollStrategies.reposition(),
3862
+ });
3863
+ overlayReference.attach(new TemplatePortal(this.content(), this.viewContainerRef));
3864
+ overlayReference.overlayElement.addEventListener('mouseenter', () => {
3865
+ this.clearTimer();
3866
+ });
3867
+ overlayReference.overlayElement.addEventListener('mouseleave', () => {
3868
+ this.scheduleClose();
3869
+ });
3870
+ this.overlayRef = overlayReference;
3871
+ }
3872
+ close() {
3873
+ this.overlayRef?.dispose();
3874
+ this.overlayRef = null;
3875
+ }
3876
+ ngOnDestroy() {
3877
+ this.clearTimer();
3878
+ this.close();
3879
+ }
3880
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiHoverCard, deps: [], target: i0.ɵɵFactoryTarget.Directive });
3881
+ 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 });
3882
+ }
3883
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiHoverCard, decorators: [{
3884
+ type: Directive,
3885
+ args: [{
3886
+ selector: '[buiHoverCard]',
3887
+ host: {
3888
+ '(mouseenter)': 'scheduleOpen()',
3889
+ '(mouseleave)': 'scheduleClose()',
3890
+ '(focusin)': 'scheduleOpen()',
3891
+ '(focusout)': 'scheduleClose()',
3892
+ },
3893
+ }]
3894
+ }], 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 }] }] } });
3895
+ /** Styling for the hover-card content root (inside the bound template). */
3896
+ class BuiHoverCardContent {
3897
+ userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
3898
+ 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 */
3899
+ ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
3900
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiHoverCardContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
3901
+ 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 });
3902
+ }
3903
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiHoverCardContent, decorators: [{
3904
+ type: Directive,
3905
+ args: [{
3906
+ selector: '[buiHoverCardContent]',
3907
+ host: { 'data-slot': 'hover-card-content', tabindex: '-1', '[class]': 'computedClass()' },
3908
+ }]
3909
+ }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
3910
+
3911
+ /** A dark code panel with an optional filename header and a copy button. */
3912
+ class BuiCodeBlock {
3913
+ code = input('', /* @ts-ignore */
3914
+ ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
3915
+ filename = input(null, /* @ts-ignore */
3916
+ ...(ngDevMode ? [{ debugName: "filename" }] : /* istanbul ignore next */ []));
3917
+ userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
3918
+ copied = signal(false, /* @ts-ignore */
3919
+ ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
3920
+ 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 */
3921
+ ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
3922
+ async copy() {
3923
+ try {
3924
+ await navigator.clipboard.writeText(this.code());
3925
+ this.copied.set(true);
3926
+ setTimeout(() => {
3927
+ this.copied.set(false);
3928
+ }, 1600);
3929
+ }
3930
+ catch {
3931
+ // Clipboard unavailable — ignore.
3932
+ }
3933
+ }
3934
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
3935
+ 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: `
3936
+ @if (filename()) {
3937
+ <div class="flex items-center justify-between border-b border-white/10 px-4 py-2">
3938
+ <span class="font-mono text-xs text-zinc-400">{{ filename() }}</span>
3939
+ <button
3940
+ type="button"
3941
+ aria-label="Copy code"
3942
+ class="text-xs text-zinc-400 transition-colors hover:text-zinc-100"
3943
+ (click)="copy()"
3944
+ >
3945
+ {{ copied() ? 'Copied' : 'Copy' }}
3946
+ </button>
3947
+ </div>
3948
+ } @else {
3949
+ <button
3950
+ type="button"
3951
+ aria-label="Copy code"
3952
+ 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"
3953
+ (click)="copy()"
3954
+ >
3955
+ {{ copied() ? 'Copied' : 'Copy' }}
3956
+ </button>
3957
+ }
3958
+ <pre
3959
+ class="overflow-x-auto p-4 text-[13px] leading-relaxed"
3960
+ ><code class="font-mono">{{ code() }}</code></pre>
3961
+ `, isInline: true });
3962
+ }
3963
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCodeBlock, decorators: [{
3964
+ type: Component,
3965
+ args: [{
3966
+ selector: 'bui-code-block',
3967
+ host: { 'data-slot': 'code-block', '[class]': 'computedClass()' },
3968
+ template: `
3969
+ @if (filename()) {
3970
+ <div class="flex items-center justify-between border-b border-white/10 px-4 py-2">
3971
+ <span class="font-mono text-xs text-zinc-400">{{ filename() }}</span>
3972
+ <button
3973
+ type="button"
3974
+ aria-label="Copy code"
3975
+ class="text-xs text-zinc-400 transition-colors hover:text-zinc-100"
3976
+ (click)="copy()"
3977
+ >
3978
+ {{ copied() ? 'Copied' : 'Copy' }}
3979
+ </button>
3980
+ </div>
3981
+ } @else {
3982
+ <button
3983
+ type="button"
3984
+ aria-label="Copy code"
3985
+ 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"
3986
+ (click)="copy()"
3987
+ >
3988
+ {{ copied() ? 'Copied' : 'Copy' }}
3989
+ </button>
3990
+ }
3991
+ <pre
3992
+ class="overflow-x-auto p-4 text-[13px] leading-relaxed"
3993
+ ><code class="font-mono">{{ code() }}</code></pre>
3994
+ `,
3995
+ }]
3996
+ }], 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 }] }] } });
3997
+
3998
+ /**
3999
+ * A single-value slider (`role="slider"`) with pointer drag and full keyboard support
4000
+ * (arrows, Home/End, PageUp/PageDown). Horizontal or vertical. SSR-safe — geometry is
4001
+ * only read inside browser event handlers.
4002
+ */
4003
+ class BuiSlider {
4004
+ value = model(0, /* @ts-ignore */
4005
+ ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
4006
+ min = input(0, /* @ts-ignore */
4007
+ ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
4008
+ max = input(100, /* @ts-ignore */
4009
+ ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
4010
+ step = input(1, /* @ts-ignore */
4011
+ ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
4012
+ disabled = input(false, /* @ts-ignore */
4013
+ ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
4014
+ orientation = input('horizontal', /* @ts-ignore */
4015
+ ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
4016
+ ariaLabel = input('Value', /* @ts-ignore */
4017
+ ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
4018
+ userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
4019
+ track = viewChild.required('track');
4020
+ dragging = false;
4021
+ pct = computed(() => {
4022
+ const range = this.max() - this.min() || 1;
4023
+ return ((this.value() - this.min()) / range) * 100;
4024
+ }, /* @ts-ignore */
4025
+ ...(ngDevMode ? [{ debugName: "pct" }] : /* istanbul ignore next */ []));
4026
+ 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 */
4027
+ ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
4028
+ onPointerDown(event) {
4029
+ if (this.disabled()) {
4030
+ return;
4031
+ }
4032
+ this.dragging = true;
4033
+ this.value.set(this.valueFromPointer(event));
4034
+ }
4035
+ onMove(event) {
4036
+ if (this.dragging) {
4037
+ this.value.set(this.valueFromPointer(event));
4038
+ }
4039
+ }
4040
+ onUp() {
4041
+ this.dragging = false;
4042
+ }
4043
+ onKeydown(event) {
4044
+ if (this.disabled()) {
4045
+ return;
4046
+ }
4047
+ const big = Math.max(this.step(), (this.max() - this.min()) / 10);
4048
+ let next;
4049
+ switch (event.key) {
4050
+ case 'ArrowRight':
4051
+ case 'ArrowUp': {
4052
+ next = this.value() + this.step();
4053
+ break;
4054
+ }
4055
+ case 'ArrowLeft':
4056
+ case 'ArrowDown': {
4057
+ next = this.value() - this.step();
4058
+ break;
4059
+ }
4060
+ case 'Home': {
4061
+ next = this.min();
4062
+ break;
4063
+ }
4064
+ case 'End': {
4065
+ next = this.max();
4066
+ break;
4067
+ }
4068
+ case 'PageUp': {
4069
+ next = this.value() + big;
4070
+ break;
4071
+ }
4072
+ case 'PageDown': {
4073
+ next = this.value() - big;
4074
+ break;
4075
+ }
4076
+ default: {
4077
+ return;
4078
+ }
4079
+ }
4080
+ event.preventDefault();
4081
+ this.value.set(this.clamp(next));
4082
+ }
4083
+ valueFromPointer(event) {
4084
+ const rect = this.track().nativeElement.getBoundingClientRect();
4085
+ const ratioRaw = this.orientation() === 'vertical'
4086
+ ? 1 - (event.clientY - rect.top) / rect.height
4087
+ : (event.clientX - rect.left) / rect.width;
4088
+ const ratio = Math.max(0, Math.min(1, ratioRaw));
4089
+ return this.snap(this.min() + ratio * (this.max() - this.min()));
4090
+ }
4091
+ snap(raw) {
4092
+ return this.clamp(Math.round(raw / this.step()) * this.step());
4093
+ }
4094
+ clamp(value) {
4095
+ return Math.max(this.min(), Math.min(this.max(), value));
4096
+ }
4097
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
4098
+ 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: `
4099
+ <span
4100
+ #track
4101
+ data-slot="slider-track"
4102
+ class="relative grow overflow-hidden rounded-full bg-muted"
4103
+ [class]="orientation() === 'vertical' ? 'h-full w-1.5' : 'h-1.5 w-full'"
4104
+ (pointerdown)="onPointerDown($event)"
4105
+ >
4106
+ <span
4107
+ data-slot="slider-range"
4108
+ class="absolute bg-primary"
4109
+ [class]="orientation() === 'vertical' ? 'bottom-0 w-full' : 'left-0 h-full'"
4110
+ [style.height.%]="orientation() === 'vertical' ? pct() : null"
4111
+ [style.width.%]="orientation() === 'vertical' ? null : pct()"
4112
+ ></span>
4113
+ </span>
4114
+ <span
4115
+ data-slot="slider-thumb"
4116
+ role="slider"
4117
+ [attr.aria-orientation]="orientation()"
4118
+ [attr.aria-label]="ariaLabel()"
4119
+ [attr.aria-valuemin]="min()"
4120
+ [attr.aria-valuemax]="max()"
4121
+ [attr.aria-valuenow]="value()"
4122
+ [attr.aria-disabled]="disabled()"
4123
+ [attr.tabindex]="disabled() ? -1 : 0"
4124
+ 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"
4125
+ [class]="
4126
+ orientation() === 'vertical'
4127
+ ? 'left-1/2 -translate-x-1/2 translate-y-1/2'
4128
+ : 'top-1/2 -translate-x-1/2 -translate-y-1/2'
4129
+ "
4130
+ [style.bottom.%]="orientation() === 'vertical' ? pct() : null"
4131
+ [style.left.%]="orientation() === 'vertical' ? null : pct()"
4132
+ (keydown)="onKeydown($event)"
4133
+ ></span>
4134
+ `, isInline: true });
4135
+ }
4136
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSlider, decorators: [{
4137
+ type: Component,
4138
+ args: [{
4139
+ selector: 'bui-slider',
4140
+ host: {
4141
+ 'data-slot': 'slider',
4142
+ '[attr.data-orientation]': 'orientation()',
4143
+ '[attr.data-disabled]': "disabled() ? '' : null",
4144
+ '[class]': 'computedClass()',
4145
+ '(document:pointermove)': 'onMove($event)',
4146
+ '(document:pointerup)': 'onUp()',
4147
+ },
4148
+ template: `
4149
+ <span
4150
+ #track
4151
+ data-slot="slider-track"
4152
+ class="relative grow overflow-hidden rounded-full bg-muted"
4153
+ [class]="orientation() === 'vertical' ? 'h-full w-1.5' : 'h-1.5 w-full'"
4154
+ (pointerdown)="onPointerDown($event)"
4155
+ >
4156
+ <span
4157
+ data-slot="slider-range"
4158
+ class="absolute bg-primary"
4159
+ [class]="orientation() === 'vertical' ? 'bottom-0 w-full' : 'left-0 h-full'"
4160
+ [style.height.%]="orientation() === 'vertical' ? pct() : null"
4161
+ [style.width.%]="orientation() === 'vertical' ? null : pct()"
4162
+ ></span>
4163
+ </span>
4164
+ <span
4165
+ data-slot="slider-thumb"
4166
+ role="slider"
4167
+ [attr.aria-orientation]="orientation()"
4168
+ [attr.aria-label]="ariaLabel()"
4169
+ [attr.aria-valuemin]="min()"
4170
+ [attr.aria-valuemax]="max()"
4171
+ [attr.aria-valuenow]="value()"
4172
+ [attr.aria-disabled]="disabled()"
4173
+ [attr.tabindex]="disabled() ? -1 : 0"
4174
+ 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"
4175
+ [class]="
4176
+ orientation() === 'vertical'
4177
+ ? 'left-1/2 -translate-x-1/2 translate-y-1/2'
4178
+ : 'top-1/2 -translate-x-1/2 -translate-y-1/2'
4179
+ "
4180
+ [style.bottom.%]="orientation() === 'vertical' ? pct() : null"
4181
+ [style.left.%]="orientation() === 'vertical' ? null : pct()"
4182
+ (keydown)="onKeydown($event)"
4183
+ ></span>
4184
+ `,
4185
+ }]
4186
+ }], 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 }] }] } });
4187
+
3814
4188
  /*
3815
4189
  * Public API Surface of ng-blatui
3816
4190
  */
@@ -3819,5 +4193,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
3819
4193
  * Generated bundle index. Do not edit.
3820
4194
  */
3821
4195
 
3822
- 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 };
4196
+ 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 };
3823
4197
  //# sourceMappingURL=ng-blatui.mjs.map