angular-tailwind-components 1.8.3-RC1 → 1.8.3-RC3
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.
|
@@ -842,30 +842,30 @@ class TailwindButton extends TailwindComponent {
|
|
|
842
842
|
const outlinedMap = {
|
|
843
843
|
primary: 'bg-transparent text-primary-600 border-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:outline-primary-600',
|
|
844
844
|
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-
|
|
845
|
+
danger: 'bg-transparent text-danger-800 border-danger-700 hover:bg-danger-50 active:bg-danger-100 focus-visible:outline-danger-600',
|
|
846
|
+
success: 'bg-transparent text-success-800 border-success-700 hover:bg-success-50 active:bg-success-100 focus-visible:outline-success-600',
|
|
847
|
+
warning: 'bg-transparent text-warning-800 border-warning-700 hover:bg-warning-50 active:bg-warning-100 focus-visible:outline-warning-700',
|
|
848
|
+
info: 'bg-transparent text-info-800 border-info-700 hover:bg-info-50 active:bg-info-100 focus-visible:outline-info-600',
|
|
849
849
|
transparent: transparentColorClasses
|
|
850
850
|
};
|
|
851
851
|
/** Transparent + hover/active background tint (former `text` look). */
|
|
852
852
|
const ghostMap = {
|
|
853
853
|
primary: 'bg-transparent text-primary-600 border-transparent hover:bg-primary-50 active:bg-primary-100 focus-visible:outline-primary-600',
|
|
854
854
|
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-
|
|
855
|
+
danger: 'bg-transparent text-danger-800 border-transparent hover:bg-danger-50 active:bg-danger-100 focus-visible:outline-danger-600',
|
|
856
|
+
success: 'bg-transparent text-success-800 border-transparent hover:bg-success-50 active:bg-success-100 focus-visible:outline-success-600',
|
|
857
|
+
warning: 'bg-transparent text-warning-800 border-transparent hover:bg-warning-50 active:bg-warning-100 focus-visible:outline-warning-700',
|
|
858
|
+
info: 'bg-transparent text-info-800 border-transparent hover:bg-info-50 active:bg-info-100 focus-visible:outline-info-600',
|
|
859
859
|
transparent: transparentColorClasses
|
|
860
860
|
};
|
|
861
861
|
/** Text color from severity only; background stays transparent on hover/active. */
|
|
862
862
|
const textMap = {
|
|
863
863
|
primary: 'bg-transparent text-primary-600 border-transparent focus-visible:outline-primary-600',
|
|
864
864
|
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-
|
|
865
|
+
danger: 'bg-transparent text-danger-800 border-transparent focus-visible:outline-danger-600',
|
|
866
|
+
success: 'bg-transparent text-success-800 border-transparent focus-visible:outline-success-600',
|
|
867
|
+
warning: 'bg-transparent text-warning-800 border-transparent focus-visible:outline-warning-700',
|
|
868
|
+
info: 'bg-transparent text-info-800 border-transparent focus-visible:outline-info-600',
|
|
869
869
|
transparent: transparentColorClasses
|
|
870
870
|
};
|
|
871
871
|
const styleMap = {
|
|
@@ -3858,11 +3858,11 @@ class TailwindStepper extends TailwindComponent {
|
|
|
3858
3858
|
this.activeIndex.update(v => v - 1);
|
|
3859
3859
|
}
|
|
3860
3860
|
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-
|
|
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-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
3862
|
}
|
|
3863
3863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindStepper, decorators: [{
|
|
3864
3864
|
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-
|
|
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-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
3866
|
}], 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
3867
|
|
|
3868
3868
|
class TailwindAccordionItem extends TailwindComponent {
|
|
@@ -4046,19 +4046,19 @@ class TailwindNotification extends TailwindComponent {
|
|
|
4046
4046
|
onDismiss = output();
|
|
4047
4047
|
computedClasses = computed(() => {
|
|
4048
4048
|
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-
|
|
4049
|
+
success: 'bg-success-50 border-success-200 text-on-success-50',
|
|
4050
|
+
warning: 'bg-warning-50 border-warning-200 text-on-warning-50',
|
|
4051
|
+
danger: 'bg-danger-50 border-danger-200 text-on-danger-50',
|
|
4052
|
+
info: 'bg-info-50 border-info-200 text-on-info-50'
|
|
4053
4053
|
};
|
|
4054
4054
|
return `flex items-start rounded-lg border p-4 ${variantMap[this.severity()]}`;
|
|
4055
4055
|
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
|
|
4056
4056
|
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=\"
|
|
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=\"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
4058
|
}
|
|
4059
4059
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindNotification, decorators: [{
|
|
4060
4060
|
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=\"
|
|
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=\"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
4062
|
}], 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
4063
|
|
|
4064
4064
|
class TailwindMessage extends TailwindComponent {
|
|
@@ -4337,11 +4337,11 @@ class TailwindMeter extends TailwindComponent {
|
|
|
4337
4337
|
return map[variant] ?? map['primary'];
|
|
4338
4338
|
}
|
|
4339
4339
|
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
|
|
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\">\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
4341
|
}
|
|
4342
4342
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMeter, decorators: [{
|
|
4343
4343
|
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
|
|
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\">\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
4345
|
}], 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
4346
|
|
|
4347
4347
|
class TailwindSlider extends TailwindComponent {
|