ng-blatui 1.15.0 → 1.17.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 +253 -1
- package/fesm2022/ng-blatui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ng-blatui.d.ts +86 -2
package/fesm2022/ng-blatui.mjs
CHANGED
|
@@ -4731,6 +4731,258 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
4731
4731
|
}]
|
|
4732
4732
|
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4733
4733
|
|
|
4734
|
+
/**
|
|
4735
|
+
* Application menu bar styling on Angular Aria's `ngMenuBar`. Each top-level entry is a
|
|
4736
|
+
* `ngMenuTrigger` opening a `ngMenu` (style the menus with `buiDropdownMenu` /
|
|
4737
|
+
* `buiDropdownMenuItem`). `MenuBar` is re-exported from `ng-blatui`.
|
|
4738
|
+
*
|
|
4739
|
+
* ```html
|
|
4740
|
+
* <div ngMenuBar buiMenubar>
|
|
4741
|
+
* <button ngMenuTrigger [menu]="file" buiMenubarTrigger>File</button>
|
|
4742
|
+
* <div ngMenu #file="ngMenu" buiDropdownMenu>
|
|
4743
|
+
* <div ngMenuItem value="new" buiDropdownMenuItem>New</div>
|
|
4744
|
+
* </div>
|
|
4745
|
+
* </div>
|
|
4746
|
+
* ```
|
|
4747
|
+
*/
|
|
4748
|
+
class BuiMenubar {
|
|
4749
|
+
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4750
|
+
computedClass = computed(() => cn('flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs', this.userClass()), /* @ts-ignore */
|
|
4751
|
+
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
4752
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiMenubar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4753
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiMenubar, isStandalone: true, selector: "[buiMenubar]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "menubar" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
|
|
4754
|
+
}
|
|
4755
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiMenubar, decorators: [{
|
|
4756
|
+
type: Directive,
|
|
4757
|
+
args: [{
|
|
4758
|
+
selector: '[buiMenubar]',
|
|
4759
|
+
host: { 'data-slot': 'menubar', '[class]': 'computedClass()' },
|
|
4760
|
+
}]
|
|
4761
|
+
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4762
|
+
class BuiMenubarTrigger {
|
|
4763
|
+
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4764
|
+
computedClass = computed(() => cn('flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-none select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', this.userClass()), /* @ts-ignore */
|
|
4765
|
+
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
4766
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiMenubarTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4767
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiMenubarTrigger, isStandalone: true, selector: "[buiMenubarTrigger]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "menubar-trigger" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
|
|
4768
|
+
}
|
|
4769
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiMenubarTrigger, decorators: [{
|
|
4770
|
+
type: Directive,
|
|
4771
|
+
args: [{
|
|
4772
|
+
selector: '[buiMenubarTrigger]',
|
|
4773
|
+
host: { 'data-slot': 'menubar-trigger', '[class]': 'computedClass()' },
|
|
4774
|
+
}]
|
|
4775
|
+
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4776
|
+
|
|
4777
|
+
const TYPOGRAPHY = {
|
|
4778
|
+
h1: 'scroll-m-20 text-4xl font-extrabold tracking-tight text-balance',
|
|
4779
|
+
h2: 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0',
|
|
4780
|
+
h3: 'scroll-m-20 text-2xl font-semibold tracking-tight',
|
|
4781
|
+
h4: 'scroll-m-20 text-xl font-semibold tracking-tight',
|
|
4782
|
+
p: 'leading-7 [&:not(:first-child)]:mt-6',
|
|
4783
|
+
lead: 'text-muted-foreground text-xl',
|
|
4784
|
+
large: 'text-lg font-semibold',
|
|
4785
|
+
small: 'text-sm leading-none font-medium',
|
|
4786
|
+
muted: 'text-muted-foreground text-sm',
|
|
4787
|
+
blockquote: 'mt-6 border-l-2 pl-6 italic',
|
|
4788
|
+
'inline-code': 'bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold',
|
|
4789
|
+
list: 'my-6 ml-6 list-disc [&>li]:mt-2',
|
|
4790
|
+
gradient: 'bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-4xl font-extrabold tracking-tight text-transparent',
|
|
4791
|
+
};
|
|
4792
|
+
/** Applies a typographic style. Put it on the matching element (e.g. `<h1 buiTypography variant="h1">`). */
|
|
4793
|
+
class BuiTypography {
|
|
4794
|
+
variant = input('p', /* @ts-ignore */
|
|
4795
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
4796
|
+
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4797
|
+
computedClass = computed(() => cn(TYPOGRAPHY[this.variant()], this.userClass()), /* @ts-ignore */
|
|
4798
|
+
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
4799
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTypography, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4800
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiTypography, isStandalone: true, selector: "[buiTypography]", inputs: { 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": "typography" }, properties: { "attr.data-variant": "variant()", "class": "computedClass()" } }, ngImport: i0 });
|
|
4801
|
+
}
|
|
4802
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTypography, decorators: [{
|
|
4803
|
+
type: Directive,
|
|
4804
|
+
args: [{
|
|
4805
|
+
selector: '[buiTypography]',
|
|
4806
|
+
host: {
|
|
4807
|
+
'data-slot': 'typography',
|
|
4808
|
+
'[attr.data-variant]': 'variant()',
|
|
4809
|
+
'[class]': 'computedClass()',
|
|
4810
|
+
},
|
|
4811
|
+
}]
|
|
4812
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4813
|
+
|
|
4814
|
+
/** Decorative dotted background layer. Drop inside a `relative` container. */
|
|
4815
|
+
class BuiDotPattern {
|
|
4816
|
+
size = input(1, /* @ts-ignore */
|
|
4817
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
4818
|
+
gap = input(16, /* @ts-ignore */
|
|
4819
|
+
...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
4820
|
+
mask = input(false, /* @ts-ignore */
|
|
4821
|
+
...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
|
|
4822
|
+
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4823
|
+
bgImage = computed(() => `radial-gradient(currentColor ${this.size()}px, transparent 0)`, /* @ts-ignore */
|
|
4824
|
+
...(ngDevMode ? [{ debugName: "bgImage" }] : /* istanbul ignore next */ []));
|
|
4825
|
+
bgSize = computed(() => `${this.gap()}px ${this.gap()}px`, /* @ts-ignore */
|
|
4826
|
+
...(ngDevMode ? [{ debugName: "bgSize" }] : /* istanbul ignore next */ []));
|
|
4827
|
+
maskImage = computed(() => this.mask() ? 'radial-gradient(ellipse at center, #000 40%, transparent 75%)' : null, /* @ts-ignore */
|
|
4828
|
+
...(ngDevMode ? [{ debugName: "maskImage" }] : /* istanbul ignore next */ []));
|
|
4829
|
+
computedClass = computed(() => cn('pointer-events-none absolute inset-0 block text-foreground/15', this.userClass()), /* @ts-ignore */
|
|
4830
|
+
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
4831
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDotPattern, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4832
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiDotPattern, isStandalone: true, selector: "bui-dot-pattern", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dot-pattern", "aria-hidden": "true" }, properties: { "class": "computedClass()", "style.background-image": "bgImage()", "style.background-size": "bgSize()", "style.mask-image": "maskImage()" } }, ngImport: i0, template: '', isInline: true });
|
|
4833
|
+
}
|
|
4834
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDotPattern, decorators: [{
|
|
4835
|
+
type: Component,
|
|
4836
|
+
args: [{
|
|
4837
|
+
selector: 'bui-dot-pattern',
|
|
4838
|
+
host: {
|
|
4839
|
+
'data-slot': 'dot-pattern',
|
|
4840
|
+
'aria-hidden': 'true',
|
|
4841
|
+
'[class]': 'computedClass()',
|
|
4842
|
+
'[style.background-image]': 'bgImage()',
|
|
4843
|
+
'[style.background-size]': 'bgSize()',
|
|
4844
|
+
'[style.mask-image]': 'maskImage()',
|
|
4845
|
+
},
|
|
4846
|
+
template: '',
|
|
4847
|
+
}]
|
|
4848
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4849
|
+
|
|
4850
|
+
/** Decorative grid background layer. Drop inside a `relative` container. */
|
|
4851
|
+
class BuiGridPattern {
|
|
4852
|
+
gap = input(24, /* @ts-ignore */
|
|
4853
|
+
...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
4854
|
+
lineWidth = input(1, /* @ts-ignore */
|
|
4855
|
+
...(ngDevMode ? [{ debugName: "lineWidth" }] : /* istanbul ignore next */ []));
|
|
4856
|
+
mask = input(false, /* @ts-ignore */
|
|
4857
|
+
...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
|
|
4858
|
+
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4859
|
+
bgImage = computed(() => {
|
|
4860
|
+
const width = this.lineWidth();
|
|
4861
|
+
return `linear-gradient(to right, currentColor ${width}px, transparent ${width}px), linear-gradient(to bottom, currentColor ${width}px, transparent ${width}px)`;
|
|
4862
|
+
}, /* @ts-ignore */
|
|
4863
|
+
...(ngDevMode ? [{ debugName: "bgImage" }] : /* istanbul ignore next */ []));
|
|
4864
|
+
bgSize = computed(() => `${this.gap()}px ${this.gap()}px`, /* @ts-ignore */
|
|
4865
|
+
...(ngDevMode ? [{ debugName: "bgSize" }] : /* istanbul ignore next */ []));
|
|
4866
|
+
maskImage = computed(() => this.mask() ? 'radial-gradient(ellipse at center, #000 0%, transparent 75%)' : null, /* @ts-ignore */
|
|
4867
|
+
...(ngDevMode ? [{ debugName: "maskImage" }] : /* istanbul ignore next */ []));
|
|
4868
|
+
computedClass = computed(() => cn('pointer-events-none absolute inset-0 block text-foreground/10', this.userClass()), /* @ts-ignore */
|
|
4869
|
+
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
4870
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiGridPattern, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4871
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiGridPattern, isStandalone: true, selector: "bui-grid-pattern", inputs: { gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, lineWidth: { classPropertyName: "lineWidth", publicName: "lineWidth", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "grid-pattern", "aria-hidden": "true" }, properties: { "class": "computedClass()", "style.background-image": "bgImage()", "style.background-size": "bgSize()", "style.mask-image": "maskImage()" } }, ngImport: i0, template: '', isInline: true });
|
|
4872
|
+
}
|
|
4873
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiGridPattern, decorators: [{
|
|
4874
|
+
type: Component,
|
|
4875
|
+
args: [{
|
|
4876
|
+
selector: 'bui-grid-pattern',
|
|
4877
|
+
host: {
|
|
4878
|
+
'data-slot': 'grid-pattern',
|
|
4879
|
+
'aria-hidden': 'true',
|
|
4880
|
+
'[class]': 'computedClass()',
|
|
4881
|
+
'[style.background-image]': 'bgImage()',
|
|
4882
|
+
'[style.background-size]': 'bgSize()',
|
|
4883
|
+
'[style.mask-image]': 'maskImage()',
|
|
4884
|
+
},
|
|
4885
|
+
template: '',
|
|
4886
|
+
}]
|
|
4887
|
+
}], propDecorators: { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], lineWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineWidth", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4888
|
+
|
|
4889
|
+
/** A single-select segmented control (`role="radiogroup"`) with arrow-key navigation. */
|
|
4890
|
+
class BuiSegmentedControl {
|
|
4891
|
+
value = model('', /* @ts-ignore */
|
|
4892
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
4893
|
+
options = input([], /* @ts-ignore */
|
|
4894
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
4895
|
+
disabled = input(false, /* @ts-ignore */
|
|
4896
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
4897
|
+
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4898
|
+
host = inject(ElementRef);
|
|
4899
|
+
normalized = computed(() => this.options().map((option) => typeof option === 'string' ? { value: option, label: option } : option), /* @ts-ignore */
|
|
4900
|
+
...(ngDevMode ? [{ debugName: "normalized" }] : /* istanbul ignore next */ []));
|
|
4901
|
+
computedClass = computed(() => cn('inline-flex items-center gap-1 rounded-lg bg-muted p-1', this.userClass()), /* @ts-ignore */
|
|
4902
|
+
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
4903
|
+
select(next) {
|
|
4904
|
+
if (!this.disabled()) {
|
|
4905
|
+
this.value.set(next);
|
|
4906
|
+
}
|
|
4907
|
+
}
|
|
4908
|
+
tabindexFor(optionValue) {
|
|
4909
|
+
if (this.value() === optionValue) {
|
|
4910
|
+
return 0;
|
|
4911
|
+
}
|
|
4912
|
+
return this.value() === '' && this.normalized().at(0)?.value === optionValue ? 0 : -1;
|
|
4913
|
+
}
|
|
4914
|
+
onKeydown(event) {
|
|
4915
|
+
if (this.disabled() ||
|
|
4916
|
+
!['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
|
|
4917
|
+
return;
|
|
4918
|
+
}
|
|
4919
|
+
event.preventDefault();
|
|
4920
|
+
const items = this.normalized();
|
|
4921
|
+
if (items.length === 0) {
|
|
4922
|
+
return;
|
|
4923
|
+
}
|
|
4924
|
+
const current = Math.max(0, items.findIndex((option) => option.value === this.value()));
|
|
4925
|
+
const isForward = event.key === 'ArrowRight' || event.key === 'ArrowDown';
|
|
4926
|
+
const nextIndex = (current + (isForward ? 1 : -1) + items.length) % items.length;
|
|
4927
|
+
this.value.set(items[nextIndex].value);
|
|
4928
|
+
const buttons = this.host.nativeElement.querySelectorAll('[role="radio"]');
|
|
4929
|
+
buttons[nextIndex].focus();
|
|
4930
|
+
}
|
|
4931
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSegmentedControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4932
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSegmentedControl, isStandalone: true, selector: "bui-segmented-control", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", 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": "segmented-control", "role": "radiogroup" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
|
|
4933
|
+
@for (option of normalized(); track option.value) {
|
|
4934
|
+
<button
|
|
4935
|
+
type="button"
|
|
4936
|
+
role="radio"
|
|
4937
|
+
[attr.aria-checked]="value() === option.value"
|
|
4938
|
+
[attr.tabindex]="tabindexFor(option.value)"
|
|
4939
|
+
[disabled]="disabled()"
|
|
4940
|
+
class="rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
|
|
4941
|
+
[class]="
|
|
4942
|
+
value() === option.value
|
|
4943
|
+
? 'bg-background text-foreground shadow-sm'
|
|
4944
|
+
: 'text-muted-foreground hover:text-foreground'
|
|
4945
|
+
"
|
|
4946
|
+
(click)="select(option.value)"
|
|
4947
|
+
>
|
|
4948
|
+
{{ option.label }}
|
|
4949
|
+
</button>
|
|
4950
|
+
}
|
|
4951
|
+
`, isInline: true });
|
|
4952
|
+
}
|
|
4953
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSegmentedControl, decorators: [{
|
|
4954
|
+
type: Component,
|
|
4955
|
+
args: [{
|
|
4956
|
+
selector: 'bui-segmented-control',
|
|
4957
|
+
host: {
|
|
4958
|
+
'data-slot': 'segmented-control',
|
|
4959
|
+
role: 'radiogroup',
|
|
4960
|
+
'[class]': 'computedClass()',
|
|
4961
|
+
'(keydown)': 'onKeydown($event)',
|
|
4962
|
+
},
|
|
4963
|
+
template: `
|
|
4964
|
+
@for (option of normalized(); track option.value) {
|
|
4965
|
+
<button
|
|
4966
|
+
type="button"
|
|
4967
|
+
role="radio"
|
|
4968
|
+
[attr.aria-checked]="value() === option.value"
|
|
4969
|
+
[attr.tabindex]="tabindexFor(option.value)"
|
|
4970
|
+
[disabled]="disabled()"
|
|
4971
|
+
class="rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
|
|
4972
|
+
[class]="
|
|
4973
|
+
value() === option.value
|
|
4974
|
+
? 'bg-background text-foreground shadow-sm'
|
|
4975
|
+
: 'text-muted-foreground hover:text-foreground'
|
|
4976
|
+
"
|
|
4977
|
+
(click)="select(option.value)"
|
|
4978
|
+
>
|
|
4979
|
+
{{ option.label }}
|
|
4980
|
+
</button>
|
|
4981
|
+
}
|
|
4982
|
+
`,
|
|
4983
|
+
}]
|
|
4984
|
+
}], 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4985
|
+
|
|
4734
4986
|
/*
|
|
4735
4987
|
* Public API Surface of ng-blatui
|
|
4736
4988
|
*/
|
|
@@ -4739,5 +4991,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
4739
4991
|
* Generated bundle index. Do not edit.
|
|
4740
4992
|
*/
|
|
4741
4993
|
|
|
4742
|
-
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, BuiContainer, BuiCopyButton, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiDropdownMenu, BuiDropdownMenuItem, BuiDropdownMenuLabel, BuiDropdownMenuSeparator, 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, BuiQuantitySelector, BuiRadioGroup, BuiRadioGroupItem, BuiRating, 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 };
|
|
4994
|
+
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, 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, 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, BuiSeparator, BuiSkeleton, BuiSlider, BuiSpinner, BuiStat, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTextarea, BuiThemeCustomizer, BuiToggle, BuiTooltip, BuiTooltipContent, BuiTypography, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
|
|
4743
4995
|
//# sourceMappingURL=ng-blatui.mjs.map
|