ng-blatui 1.13.0 → 1.14.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 +179 -10
- package/fesm2022/ng-blatui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ng-blatui.d.ts +66 -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, viewChild } from '@angular/core';
|
|
4
|
+
import { input, computed, Directive, Component, signal, model, inject, PLATFORM_ID, effect, Injectable, ElementRef, ViewContainerRef, viewChild, afterNextRender } 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';
|
|
@@ -69,8 +69,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
69
69
|
}]
|
|
70
70
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
71
71
|
|
|
72
|
-
const BASE = 'inline-flex items-center justify-center rounded-md border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden';
|
|
73
|
-
const SIZES$
|
|
72
|
+
const BASE$1 = 'inline-flex items-center justify-center rounded-md border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden';
|
|
73
|
+
const SIZES$3 = {
|
|
74
74
|
sm: 'px-1.5 py-px text-[0.625rem]',
|
|
75
75
|
default: 'px-2 py-0.5 text-xs',
|
|
76
76
|
lg: 'px-3 py-1 text-sm [&>svg]:size-3.5',
|
|
@@ -144,7 +144,7 @@ class BuiBadge {
|
|
|
144
144
|
computedClass = computed(() => {
|
|
145
145
|
const tone = this.tone();
|
|
146
146
|
const toneOrVariant = tone === null ? brandClass(this.variant()) : TONES$2[tone][intensityFor(this.variant())];
|
|
147
|
-
return cn(BASE, SIZES$
|
|
147
|
+
return cn(BASE$1, SIZES$3[this.size()], toneOrVariant, this.userClass());
|
|
148
148
|
}, /* @ts-ignore */
|
|
149
149
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
150
150
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -2343,7 +2343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
2343
2343
|
}]
|
|
2344
2344
|
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
2345
2345
|
|
|
2346
|
-
const SIZES$
|
|
2346
|
+
const SIZES$2 = {
|
|
2347
2347
|
sm: 'max-w-3xl',
|
|
2348
2348
|
md: 'max-w-5xl',
|
|
2349
2349
|
lg: 'max-w-6xl',
|
|
@@ -2356,7 +2356,7 @@ class BuiContainer {
|
|
|
2356
2356
|
size = input('lg', /* @ts-ignore */
|
|
2357
2357
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2358
2358
|
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
2359
|
-
computedClass = computed(() => cn('mx-auto w-full px-4 sm:px-6 lg:px-8', SIZES$
|
|
2359
|
+
computedClass = computed(() => cn('mx-auto w-full px-4 sm:px-6 lg:px-8', SIZES$2[this.size()], this.userClass()), /* @ts-ignore */
|
|
2360
2360
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
2361
2361
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2362
2362
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiContainer, isStandalone: true, selector: "[buiContainer]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "container" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
|
|
@@ -3043,7 +3043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
3043
3043
|
}]
|
|
3044
3044
|
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
3045
3045
|
|
|
3046
|
-
const SIZES = {
|
|
3046
|
+
const SIZES$1 = {
|
|
3047
3047
|
sm: { box: 'size-6', overlap: '-ms-2', ring: 'ring-1', text: 'text-xs' },
|
|
3048
3048
|
default: { box: 'size-8', overlap: '-ms-2.5', ring: 'ring-2', text: 'text-sm' },
|
|
3049
3049
|
lg: { box: 'size-12', overlap: '-ms-3', ring: 'ring-2', text: 'text-base' },
|
|
@@ -3075,11 +3075,11 @@ class BuiAvatarGroup {
|
|
|
3075
3075
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
3076
3076
|
toInitials = initials;
|
|
3077
3077
|
itemClass(index) {
|
|
3078
|
-
const size = SIZES[this.size()];
|
|
3078
|
+
const size = SIZES$1[this.size()];
|
|
3079
3079
|
return cn(size.box, size.ring, 'ring-background', index > 0 && size.overlap);
|
|
3080
3080
|
}
|
|
3081
3081
|
moreClass() {
|
|
3082
|
-
const size = SIZES[this.size()];
|
|
3082
|
+
const size = SIZES$1[this.size()];
|
|
3083
3083
|
return cn('relative z-10 flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-foreground', size.box, size.ring, 'ring-background', size.text, this.shown().length > 0 && size.overlap);
|
|
3084
3084
|
}
|
|
3085
3085
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -4498,6 +4498,175 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
4498
4498
|
}]
|
|
4499
4499
|
}], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4500
4500
|
|
|
4501
|
+
/**
|
|
4502
|
+
* Confirm dialog styling (`role="alertdialog"`). Open it with the CDK `Dialog` service
|
|
4503
|
+
* (re-exported from `ng-blatui`) on a template whose root carries `buiAlertDialogContent`.
|
|
4504
|
+
*/
|
|
4505
|
+
class BuiAlertDialogContent {
|
|
4506
|
+
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4507
|
+
computedClass = computed(() => cn('relative grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border bg-background p-6 shadow-lg sm:max-w-lg', this.userClass()), /* @ts-ignore */
|
|
4508
|
+
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
4509
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4510
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDialogContent, isStandalone: true, selector: "[buiAlertDialogContent]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-dialog-content", "role": "alertdialog" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
|
|
4511
|
+
}
|
|
4512
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogContent, decorators: [{
|
|
4513
|
+
type: Directive,
|
|
4514
|
+
args: [{
|
|
4515
|
+
selector: '[buiAlertDialogContent]',
|
|
4516
|
+
host: { 'data-slot': 'alert-dialog-content', role: 'alertdialog', '[class]': 'computedClass()' },
|
|
4517
|
+
}]
|
|
4518
|
+
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4519
|
+
class BuiAlertDialogHeader {
|
|
4520
|
+
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4521
|
+
computedClass = computed(() => cn('flex flex-col gap-2 text-center sm:text-left', this.userClass()), /* @ts-ignore */
|
|
4522
|
+
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
4523
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4524
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDialogHeader, isStandalone: true, selector: "[buiAlertDialogHeader]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-dialog-header" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
|
|
4525
|
+
}
|
|
4526
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogHeader, decorators: [{
|
|
4527
|
+
type: Directive,
|
|
4528
|
+
args: [{
|
|
4529
|
+
selector: '[buiAlertDialogHeader]',
|
|
4530
|
+
host: { 'data-slot': 'alert-dialog-header', '[class]': 'computedClass()' },
|
|
4531
|
+
}]
|
|
4532
|
+
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4533
|
+
class BuiAlertDialogTitle {
|
|
4534
|
+
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4535
|
+
computedClass = computed(() => cn('text-lg font-semibold', this.userClass()), /* @ts-ignore */
|
|
4536
|
+
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
4537
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4538
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDialogTitle, isStandalone: true, selector: "[buiAlertDialogTitle]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-dialog-title" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
|
|
4539
|
+
}
|
|
4540
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogTitle, decorators: [{
|
|
4541
|
+
type: Directive,
|
|
4542
|
+
args: [{
|
|
4543
|
+
selector: '[buiAlertDialogTitle]',
|
|
4544
|
+
host: { 'data-slot': 'alert-dialog-title', '[class]': 'computedClass()' },
|
|
4545
|
+
}]
|
|
4546
|
+
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4547
|
+
class BuiAlertDialogDescription {
|
|
4548
|
+
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4549
|
+
computedClass = computed(() => cn('text-sm text-muted-foreground', this.userClass()), /* @ts-ignore */
|
|
4550
|
+
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
4551
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4552
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDialogDescription, isStandalone: true, selector: "[buiAlertDialogDescription]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-dialog-description" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
|
|
4553
|
+
}
|
|
4554
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogDescription, decorators: [{
|
|
4555
|
+
type: Directive,
|
|
4556
|
+
args: [{
|
|
4557
|
+
selector: '[buiAlertDialogDescription]',
|
|
4558
|
+
host: { 'data-slot': 'alert-dialog-description', '[class]': 'computedClass()' },
|
|
4559
|
+
}]
|
|
4560
|
+
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4561
|
+
class BuiAlertDialogFooter {
|
|
4562
|
+
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4563
|
+
computedClass = computed(() => cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', this.userClass()), /* @ts-ignore */
|
|
4564
|
+
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
4565
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4566
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDialogFooter, isStandalone: true, selector: "[buiAlertDialogFooter]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-dialog-footer" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
|
|
4567
|
+
}
|
|
4568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogFooter, decorators: [{
|
|
4569
|
+
type: Directive,
|
|
4570
|
+
args: [{
|
|
4571
|
+
selector: '[buiAlertDialogFooter]',
|
|
4572
|
+
host: { 'data-slot': 'alert-dialog-footer', '[class]': 'computedClass()' },
|
|
4573
|
+
}]
|
|
4574
|
+
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4575
|
+
/** Primary confirm action button. */
|
|
4576
|
+
class BuiAlertDialogAction {
|
|
4577
|
+
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4578
|
+
computedClass = computed(() => cn(buttonVariants(), this.userClass()), /* @ts-ignore */
|
|
4579
|
+
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
4580
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4581
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDialogAction, isStandalone: true, selector: "button[buiAlertDialogAction]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "data-slot": "alert-dialog-action" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
|
|
4582
|
+
}
|
|
4583
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogAction, decorators: [{
|
|
4584
|
+
type: Directive,
|
|
4585
|
+
args: [{
|
|
4586
|
+
selector: 'button[buiAlertDialogAction]',
|
|
4587
|
+
host: { type: 'button', 'data-slot': 'alert-dialog-action', '[class]': 'computedClass()' },
|
|
4588
|
+
}]
|
|
4589
|
+
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4590
|
+
/** Cancel (dismiss) button. */
|
|
4591
|
+
class BuiAlertDialogCancel {
|
|
4592
|
+
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4593
|
+
computedClass = computed(() => cn(buttonVariants({ variant: 'outline' }), this.userClass()), /* @ts-ignore */
|
|
4594
|
+
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
4595
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogCancel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4596
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDialogCancel, isStandalone: true, selector: "button[buiAlertDialogCancel]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "data-slot": "alert-dialog-cancel" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
|
|
4597
|
+
}
|
|
4598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogCancel, decorators: [{
|
|
4599
|
+
type: Directive,
|
|
4600
|
+
args: [{
|
|
4601
|
+
selector: 'button[buiAlertDialogCancel]',
|
|
4602
|
+
host: { type: 'button', 'data-slot': 'alert-dialog-cancel', '[class]': 'computedClass()' },
|
|
4603
|
+
}]
|
|
4604
|
+
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4605
|
+
|
|
4606
|
+
const BASE = 'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 flex w-full resize-none overflow-hidden rounded-md border bg-transparent shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50';
|
|
4607
|
+
const SIZES = {
|
|
4608
|
+
sm: 'min-h-14 px-2.5 py-1.5 text-sm',
|
|
4609
|
+
default: 'min-h-16 px-3 py-2 text-base md:text-sm',
|
|
4610
|
+
lg: 'min-h-20 px-4 py-2.5 text-base',
|
|
4611
|
+
};
|
|
4612
|
+
/**
|
|
4613
|
+
* A textarea that grows with its content. SSR-safe — the height is measured only in the
|
|
4614
|
+
* browser (via `afterNextRender` and the `input` event).
|
|
4615
|
+
*/
|
|
4616
|
+
class BuiAutosizeTextarea {
|
|
4617
|
+
size = input('default', /* @ts-ignore */
|
|
4618
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
4619
|
+
maxRows = input(null, /* @ts-ignore */
|
|
4620
|
+
...(ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []));
|
|
4621
|
+
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4622
|
+
host = inject(ElementRef);
|
|
4623
|
+
computedClass = computed(() => cn(BASE, SIZES[this.size()], this.userClass()), /* @ts-ignore */
|
|
4624
|
+
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
4625
|
+
constructor() {
|
|
4626
|
+
afterNextRender(() => {
|
|
4627
|
+
this.resize();
|
|
4628
|
+
});
|
|
4629
|
+
}
|
|
4630
|
+
resize() {
|
|
4631
|
+
const element = this.host.nativeElement;
|
|
4632
|
+
element.style.height = 'auto';
|
|
4633
|
+
let target = element.scrollHeight;
|
|
4634
|
+
const maxRows = this.maxRows();
|
|
4635
|
+
if (maxRows !== null) {
|
|
4636
|
+
const styles = getComputedStyle(element);
|
|
4637
|
+
let lineHeight = Number.parseFloat(styles.lineHeight);
|
|
4638
|
+
if (Number.isNaN(lineHeight)) {
|
|
4639
|
+
lineHeight = Number.parseFloat(styles.fontSize) * 1.2;
|
|
4640
|
+
}
|
|
4641
|
+
const padding = Number.parseFloat(styles.paddingTop) + Number.parseFloat(styles.paddingBottom);
|
|
4642
|
+
const border = Number.parseFloat(styles.borderTopWidth) + Number.parseFloat(styles.borderBottomWidth);
|
|
4643
|
+
const cap = lineHeight * maxRows + padding + border;
|
|
4644
|
+
if (target > cap) {
|
|
4645
|
+
target = cap;
|
|
4646
|
+
element.style.overflowY = 'auto';
|
|
4647
|
+
}
|
|
4648
|
+
else {
|
|
4649
|
+
element.style.overflowY = 'hidden';
|
|
4650
|
+
}
|
|
4651
|
+
}
|
|
4652
|
+
element.style.height = `${target}px`;
|
|
4653
|
+
}
|
|
4654
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAutosizeTextarea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4655
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAutosizeTextarea, isStandalone: true, selector: "textarea[buiAutosizeTextarea]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "autosize-textarea" }, listeners: { "input": "resize()" }, properties: { "attr.data-size": "size()", "class": "computedClass()" } }, ngImport: i0 });
|
|
4656
|
+
}
|
|
4657
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAutosizeTextarea, decorators: [{
|
|
4658
|
+
type: Directive,
|
|
4659
|
+
args: [{
|
|
4660
|
+
selector: 'textarea[buiAutosizeTextarea]',
|
|
4661
|
+
host: {
|
|
4662
|
+
'data-slot': 'autosize-textarea',
|
|
4663
|
+
'[attr.data-size]': 'size()',
|
|
4664
|
+
'[class]': 'computedClass()',
|
|
4665
|
+
'(input)': 'resize()',
|
|
4666
|
+
},
|
|
4667
|
+
}]
|
|
4668
|
+
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
4669
|
+
|
|
4501
4670
|
/*
|
|
4502
4671
|
* Public API Surface of ng-blatui
|
|
4503
4672
|
*/
|
|
@@ -4506,5 +4675,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
4506
4675
|
* Generated bundle index. Do not edit.
|
|
4507
4676
|
*/
|
|
4508
4677
|
|
|
4509
|
-
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, 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 };
|
|
4678
|
+
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, 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 };
|
|
4510
4679
|
//# sourceMappingURL=ng-blatui.mjs.map
|