angular-tailwind-components 1.8.3-RC2 → 1.8.3-RC4
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/README.md
CHANGED
|
@@ -44,21 +44,25 @@ import { TailwindButton, TailwindInput, TailwindTextarea, TailwindToggle } from
|
|
|
44
44
|
|
|
45
45
|
@Component({
|
|
46
46
|
selector: 'app-example',
|
|
47
|
-
standalone: true,
|
|
48
47
|
imports: [TailwindButton, TailwindInput, TailwindTextarea, TailwindToggle],
|
|
49
48
|
template: `
|
|
50
|
-
|
|
51
|
-
<tailwind-
|
|
52
|
-
<tailwind-
|
|
49
|
+
<form [formGroup]="form">
|
|
50
|
+
<tailwind-input label="Email" placeholder="you@example.com" [formControl]="form.controls.email" />
|
|
51
|
+
<tailwind-textarea label="Notes" placeholder="Optional notes" [formControl]="form.controls.notes" />
|
|
52
|
+
<tailwind-toggle label="Notifications" [formControl]="form.controls.notifications" />
|
|
53
53
|
<tailwind-button variant="primary" (onClick)="submit()">Submit</tailwind-button>
|
|
54
|
+
</form>
|
|
54
55
|
`
|
|
55
56
|
})
|
|
56
57
|
export class ExampleComponent {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
form = new FormGroup({
|
|
59
|
+
email: new FormControl(''),
|
|
60
|
+
notes: new FormControl(''),
|
|
61
|
+
notifications: new FormControl(false)
|
|
62
|
+
});
|
|
63
|
+
|
|
60
64
|
submit() {
|
|
61
|
-
|
|
65
|
+
console.log(this.form.value);
|
|
62
66
|
}
|
|
63
67
|
}
|
|
64
68
|
```
|
|
@@ -764,7 +764,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
764
764
|
type: Directive,
|
|
765
765
|
args: [{
|
|
766
766
|
selector: '[tailwindSortHeader]',
|
|
767
|
-
standalone: true,
|
|
768
767
|
host: {
|
|
769
768
|
class: 'cursor-pointer whitespace-nowrap text-left select-none hover:text-neutral-900',
|
|
770
769
|
'[attr.tabindex]': '0',
|
|
@@ -842,30 +841,30 @@ class TailwindButton extends TailwindComponent {
|
|
|
842
841
|
const outlinedMap = {
|
|
843
842
|
primary: 'bg-transparent text-primary-600 border-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:outline-primary-600',
|
|
844
843
|
secondary: 'bg-transparent text-neutral-700 border-neutral-300 hover:bg-neutral-50 active:bg-neutral-100 focus-visible:outline-neutral-500',
|
|
845
|
-
danger: 'bg-transparent text-danger-
|
|
846
|
-
success: 'bg-transparent text-success-
|
|
847
|
-
warning: 'bg-transparent text-warning-
|
|
848
|
-
info: 'bg-transparent text-info-
|
|
844
|
+
danger: 'bg-transparent text-danger-800 border-danger-700 hover:bg-danger-50 active:bg-danger-100 focus-visible:outline-danger-600',
|
|
845
|
+
success: 'bg-transparent text-success-800 border-success-700 hover:bg-success-50 active:bg-success-100 focus-visible:outline-success-600',
|
|
846
|
+
warning: 'bg-transparent text-warning-800 border-warning-700 hover:bg-warning-50 active:bg-warning-100 focus-visible:outline-warning-700',
|
|
847
|
+
info: 'bg-transparent text-info-800 border-info-700 hover:bg-info-50 active:bg-info-100 focus-visible:outline-info-600',
|
|
849
848
|
transparent: transparentColorClasses
|
|
850
849
|
};
|
|
851
850
|
/** Transparent + hover/active background tint (former `text` look). */
|
|
852
851
|
const ghostMap = {
|
|
853
852
|
primary: 'bg-transparent text-primary-600 border-transparent hover:bg-primary-50 active:bg-primary-100 focus-visible:outline-primary-600',
|
|
854
853
|
secondary: 'bg-transparent text-neutral-700 border-transparent hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-neutral-500',
|
|
855
|
-
danger: 'bg-transparent text-danger-
|
|
856
|
-
success: 'bg-transparent text-success-
|
|
857
|
-
warning: 'bg-transparent text-warning-
|
|
858
|
-
info: 'bg-transparent text-info-
|
|
854
|
+
danger: 'bg-transparent text-danger-800 border-transparent hover:bg-danger-50 active:bg-danger-100 focus-visible:outline-danger-600',
|
|
855
|
+
success: 'bg-transparent text-success-800 border-transparent hover:bg-success-50 active:bg-success-100 focus-visible:outline-success-600',
|
|
856
|
+
warning: 'bg-transparent text-warning-800 border-transparent hover:bg-warning-50 active:bg-warning-100 focus-visible:outline-warning-700',
|
|
857
|
+
info: 'bg-transparent text-info-800 border-transparent hover:bg-info-50 active:bg-info-100 focus-visible:outline-info-600',
|
|
859
858
|
transparent: transparentColorClasses
|
|
860
859
|
};
|
|
861
860
|
/** Text color from severity only; background stays transparent on hover/active. */
|
|
862
861
|
const textMap = {
|
|
863
862
|
primary: 'bg-transparent text-primary-600 border-transparent focus-visible:outline-primary-600',
|
|
864
863
|
secondary: 'bg-transparent text-neutral-700 border-transparent focus-visible:outline-neutral-500',
|
|
865
|
-
danger: 'bg-transparent text-danger-
|
|
866
|
-
success: 'bg-transparent text-success-
|
|
867
|
-
warning: 'bg-transparent text-warning-
|
|
868
|
-
info: 'bg-transparent text-info-
|
|
864
|
+
danger: 'bg-transparent text-danger-800 border-transparent focus-visible:outline-danger-600',
|
|
865
|
+
success: 'bg-transparent text-success-800 border-transparent focus-visible:outline-success-600',
|
|
866
|
+
warning: 'bg-transparent text-warning-800 border-transparent focus-visible:outline-warning-700',
|
|
867
|
+
info: 'bg-transparent text-info-800 border-transparent focus-visible:outline-info-600',
|
|
869
868
|
transparent: transparentColorClasses
|
|
870
869
|
};
|
|
871
870
|
const styleMap = {
|
|
@@ -3858,11 +3857,11 @@ class TailwindStepper extends TailwindComponent {
|
|
|
3858
3857
|
this.activeIndex.update(v => v - 1);
|
|
3859
3858
|
}
|
|
3860
3859
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3861
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindStepper, isStandalone: true, selector: "tailwind-stepper", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "steps", predicate: TailwindStep, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Step indicators -->\n<div class=\"flex items-center mb-6\">\n @for (step of steps(); track step.label(); let i = $index; let last = $last) {\n <div class=\"flex items-center\" [class.flex-1]=\"!last\">\n <button\n type=\"button\"\n (click)=\"goToStep(i)\"\n class=\"flex items-center gap-2 cursor-pointer group\"\n [attr.aria-current]=\"activeIndex() === i ? 'step' : null\">\n <div\n class=\"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-200\"\n [class.bg-primary-600]=\"i <= activeIndex()\"\n [class.border-primary-600]=\"i <= activeIndex()\"\n [class.text-
|
|
3860
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindStepper, isStandalone: true, selector: "tailwind-stepper", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "steps", predicate: TailwindStep, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Step indicators -->\n<div class=\"flex items-center mb-6\">\n @for (step of steps(); track step.label(); let i = $index; let last = $last) {\n <div class=\"flex items-center\" [class.flex-1]=\"!last\">\n <button\n type=\"button\"\n (click)=\"goToStep(i)\"\n class=\"flex items-center gap-2 cursor-pointer group\"\n [attr.aria-current]=\"activeIndex() === i ? 'step' : null\">\n <div\n class=\"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-200\"\n [class.bg-primary-600]=\"i <= activeIndex()\"\n [class.border-primary-600]=\"i <= activeIndex()\"\n [class.text-on-primary-600]=\"i <= activeIndex()\"\n [class.border-neutral-300]=\"i > activeIndex()\"\n [class.text-neutral-600]=\"i > activeIndex()\">\n @if (step.completed()) {\n <tailwind-icon icon=\"check\" [size]=\"16\" />\n } @else {\n {{ i + 1 }}\n }\n </div>\n <div class=\"hidden sm:block\">\n <p\n class=\"text-sm font-medium\"\n [class.text-primary-700]=\"i <= activeIndex()\"\n [class.text-neutral-700]=\"i > activeIndex()\">\n {{ step.label() }}\n </p>\n @if (step.description()) {\n <p class=\"text-xs text-neutral-500\">{{ step.description() }}</p>\n }\n </div>\n </button>\n @if (!last) {\n <div\n class=\"flex-1 h-0.5 mx-3 rounded-full transition-colors duration-200\"\n [class.bg-primary-600]=\"i < activeIndex()\"\n [class.bg-neutral-200]=\"i >= activeIndex()\"></div>\n }\n </div>\n }\n</div>\n<!-- Step content -->\n<ng-content />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3862
3861
|
}
|
|
3863
3862
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindStepper, decorators: [{
|
|
3864
3863
|
type: Component,
|
|
3865
|
-
args: [{ imports: [TailwindIcon], selector: 'tailwind-stepper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Step indicators -->\n<div class=\"flex items-center mb-6\">\n @for (step of steps(); track step.label(); let i = $index; let last = $last) {\n <div class=\"flex items-center\" [class.flex-1]=\"!last\">\n <button\n type=\"button\"\n (click)=\"goToStep(i)\"\n class=\"flex items-center gap-2 cursor-pointer group\"\n [attr.aria-current]=\"activeIndex() === i ? 'step' : null\">\n <div\n class=\"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-200\"\n [class.bg-primary-600]=\"i <= activeIndex()\"\n [class.border-primary-600]=\"i <= activeIndex()\"\n [class.text-
|
|
3864
|
+
args: [{ imports: [TailwindIcon], selector: 'tailwind-stepper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Step indicators -->\n<div class=\"flex items-center mb-6\">\n @for (step of steps(); track step.label(); let i = $index; let last = $last) {\n <div class=\"flex items-center\" [class.flex-1]=\"!last\">\n <button\n type=\"button\"\n (click)=\"goToStep(i)\"\n class=\"flex items-center gap-2 cursor-pointer group\"\n [attr.aria-current]=\"activeIndex() === i ? 'step' : null\">\n <div\n class=\"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-200\"\n [class.bg-primary-600]=\"i <= activeIndex()\"\n [class.border-primary-600]=\"i <= activeIndex()\"\n [class.text-on-primary-600]=\"i <= activeIndex()\"\n [class.border-neutral-300]=\"i > activeIndex()\"\n [class.text-neutral-600]=\"i > activeIndex()\">\n @if (step.completed()) {\n <tailwind-icon icon=\"check\" [size]=\"16\" />\n } @else {\n {{ i + 1 }}\n }\n </div>\n <div class=\"hidden sm:block\">\n <p\n class=\"text-sm font-medium\"\n [class.text-primary-700]=\"i <= activeIndex()\"\n [class.text-neutral-700]=\"i > activeIndex()\">\n {{ step.label() }}\n </p>\n @if (step.description()) {\n <p class=\"text-xs text-neutral-500\">{{ step.description() }}</p>\n }\n </div>\n </button>\n @if (!last) {\n <div\n class=\"flex-1 h-0.5 mx-3 rounded-full transition-colors duration-200\"\n [class.bg-primary-600]=\"i < activeIndex()\"\n [class.bg-neutral-200]=\"i >= activeIndex()\"></div>\n }\n </div>\n }\n</div>\n<!-- Step content -->\n<ng-content />\n", styles: [":host{display:block}\n"] }]
|
|
3866
3865
|
}], ctorParameters: () => [], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TailwindStep), { isSignal: true }] }] } });
|
|
3867
3866
|
|
|
3868
3867
|
class TailwindAccordionItem extends TailwindComponent {
|
|
@@ -4046,19 +4045,19 @@ class TailwindNotification extends TailwindComponent {
|
|
|
4046
4045
|
onDismiss = output();
|
|
4047
4046
|
computedClasses = computed(() => {
|
|
4048
4047
|
const variantMap = {
|
|
4049
|
-
success: 'bg-success-50 border-success-200 text-success-
|
|
4050
|
-
warning: 'bg-warning-50 border-warning-200 text-warning-
|
|
4051
|
-
danger: 'bg-danger-50 border-danger-200 text-danger-
|
|
4052
|
-
info: 'bg-info-50 border-info-200 text-info-
|
|
4048
|
+
success: 'bg-success-50 border-success-200 text-on-success-50',
|
|
4049
|
+
warning: 'bg-warning-50 border-warning-200 text-on-warning-50',
|
|
4050
|
+
danger: 'bg-danger-50 border-danger-200 text-on-danger-50',
|
|
4051
|
+
info: 'bg-info-50 border-info-200 text-on-info-50'
|
|
4053
4052
|
};
|
|
4054
4053
|
return `flex items-start rounded-lg border p-4 ${variantMap[this.severity()]}`;
|
|
4055
4054
|
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
|
|
4056
4055
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindNotification, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4057
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindNotification, isStandalone: true, selector: "tailwind-notification", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDismiss: "onDismiss" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"computedClasses()\" role=\"alert\">\n <div class=\"flex-1 min-w-0\">\n @if (title()) {\n <p class=\"text-sm font-semibold mb-0.5\">{{ title() }}</p>\n }\n <p class=\"text-sm\"><ng-content /></p>\n @if (showActions()) {\n <div class=\"pt-3\">\n <ng-content select=\"[tailwind-notification-actions]\" />\n </div>\n }\n </div>\n @if (dismissible()) {\n <tailwind-button\n kind=\"ghost\"\n color=\"
|
|
4056
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindNotification, isStandalone: true, selector: "tailwind-notification", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDismiss: "onDismiss" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"computedClasses()\" role=\"alert\">\n <div class=\"flex-1 min-w-0\">\n @if (title()) {\n <p class=\"text-sm font-semibold mb-0.5\">{{ title() }}</p>\n }\n <p class=\"text-sm\"><ng-content /></p>\n @if (showActions()) {\n <div class=\"pt-3\">\n <ng-content select=\"[tailwind-notification-actions]\" />\n </div>\n }\n </div>\n @if (dismissible()) {\n <tailwind-button\n kind=\"ghost\"\n color=\"secondary\"\n size=\"sm\"\n icon=\"x-mark\"\n class=\"shrink-0 -m-1\"\n ariaLabel=\"Dismiss\"\n (onClick)=\"onDismiss.emit()\" />\n }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4058
4057
|
}
|
|
4059
4058
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindNotification, decorators: [{
|
|
4060
4059
|
type: Component,
|
|
4061
|
-
args: [{ imports: [TailwindButton], selector: 'tailwind-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"computedClasses()\" role=\"alert\">\n <div class=\"flex-1 min-w-0\">\n @if (title()) {\n <p class=\"text-sm font-semibold mb-0.5\">{{ title() }}</p>\n }\n <p class=\"text-sm\"><ng-content /></p>\n @if (showActions()) {\n <div class=\"pt-3\">\n <ng-content select=\"[tailwind-notification-actions]\" />\n </div>\n }\n </div>\n @if (dismissible()) {\n <tailwind-button\n kind=\"ghost\"\n color=\"
|
|
4060
|
+
args: [{ imports: [TailwindButton], selector: 'tailwind-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"computedClasses()\" role=\"alert\">\n <div class=\"flex-1 min-w-0\">\n @if (title()) {\n <p class=\"text-sm font-semibold mb-0.5\">{{ title() }}</p>\n }\n <p class=\"text-sm\"><ng-content /></p>\n @if (showActions()) {\n <div class=\"pt-3\">\n <ng-content select=\"[tailwind-notification-actions]\" />\n </div>\n }\n </div>\n @if (dismissible()) {\n <tailwind-button\n kind=\"ghost\"\n color=\"secondary\"\n size=\"sm\"\n icon=\"x-mark\"\n class=\"shrink-0 -m-1\"\n ariaLabel=\"Dismiss\"\n (onClick)=\"onDismiss.emit()\" />\n }\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
4062
4061
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], onDismiss: [{ type: i0.Output, args: ["onDismiss"] }] } });
|
|
4063
4062
|
|
|
4064
4063
|
class TailwindMessage extends TailwindComponent {
|
|
@@ -4337,11 +4336,11 @@ class TailwindMeter extends TailwindComponent {
|
|
|
4337
4336
|
return map[variant] ?? map['primary'];
|
|
4338
4337
|
}
|
|
4339
4338
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMeter, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4340
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindMeter, isStandalone: true, selector: "tailwind-meter", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full space-y-2\">\n <div\n [class]=\"trackContainerClasses()\"\n role=\"meter\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"scaleMax()\"\n [attr.aria-valuenow]=\"totalValue()\"\n [attr.aria-label]=\"'Meter'\">\n @for (seg of segmentLayouts(); track $index) {\n @if (seg.widthPct > 0) {\n <div\n class=\"h-full min-w-0 transition-all duration-300 ease-out\"\n [class]=\"seg.barClass\"\n [style.width.%]=\"seg.widthPct\"\n [attr.title]=\"seg.label + ': ' + seg.value\"></div>\n }\n }\n </div>\n\n @if (showLabels()) {\n <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs
|
|
4339
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindMeter, isStandalone: true, selector: "tailwind-meter", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full space-y-2\">\n <div\n [class]=\"trackContainerClasses()\"\n role=\"meter\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"scaleMax()\"\n [attr.aria-valuenow]=\"totalValue()\"\n [attr.aria-label]=\"'Meter'\">\n @for (seg of segmentLayouts(); track $index) {\n @if (seg.widthPct > 0) {\n <div\n class=\"h-full min-w-0 transition-all duration-300 ease-out\"\n [class]=\"seg.barClass\"\n [style.width.%]=\"seg.widthPct\"\n [attr.title]=\"seg.label + ': ' + seg.value\"></div>\n }\n }\n </div>\n\n @if (showLabels()) {\n <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs\">\n @for (seg of segments(); track $index) {\n <span class=\"inline-flex items-center gap-1.5\">\n <span class=\"inline-block size-2 rounded-sm shrink-0\" [class]=\"legendSwatchClass(seg.variant)\"></span>\n <span class=\"text-neutral-700\">{{ seg.label }}</span>\n <span class=\"text-neutral-500\">({{ seg.value }})</span>\n </span>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4341
4340
|
}
|
|
4342
4341
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMeter, decorators: [{
|
|
4343
4342
|
type: Component,
|
|
4344
|
-
args: [{ selector: 'tailwind-meter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full space-y-2\">\n <div\n [class]=\"trackContainerClasses()\"\n role=\"meter\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"scaleMax()\"\n [attr.aria-valuenow]=\"totalValue()\"\n [attr.aria-label]=\"'Meter'\">\n @for (seg of segmentLayouts(); track $index) {\n @if (seg.widthPct > 0) {\n <div\n class=\"h-full min-w-0 transition-all duration-300 ease-out\"\n [class]=\"seg.barClass\"\n [style.width.%]=\"seg.widthPct\"\n [attr.title]=\"seg.label + ': ' + seg.value\"></div>\n }\n }\n </div>\n\n @if (showLabels()) {\n <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs
|
|
4343
|
+
args: [{ selector: 'tailwind-meter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full space-y-2\">\n <div\n [class]=\"trackContainerClasses()\"\n role=\"meter\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"scaleMax()\"\n [attr.aria-valuenow]=\"totalValue()\"\n [attr.aria-label]=\"'Meter'\">\n @for (seg of segmentLayouts(); track $index) {\n @if (seg.widthPct > 0) {\n <div\n class=\"h-full min-w-0 transition-all duration-300 ease-out\"\n [class]=\"seg.barClass\"\n [style.width.%]=\"seg.widthPct\"\n [attr.title]=\"seg.label + ': ' + seg.value\"></div>\n }\n }\n </div>\n\n @if (showLabels()) {\n <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs\">\n @for (seg of segments(); track $index) {\n <span class=\"inline-flex items-center gap-1.5\">\n <span class=\"inline-block size-2 rounded-sm shrink-0\" [class]=\"legendSwatchClass(seg.variant)\"></span>\n <span class=\"text-neutral-700\">{{ seg.label }}</span>\n <span class=\"text-neutral-500\">({{ seg.value }})</span>\n </span>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
4345
4344
|
}], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
4346
4345
|
|
|
4347
4346
|
class TailwindSlider extends TailwindComponent {
|