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.
- package/fesm2022/ng-blatui.mjs +376 -2
- package/fesm2022/ng-blatui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ng-blatui.d.ts +72 -1
package/fesm2022/ng-blatui.mjs
CHANGED
|
@@ -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
|