angular-tailwind-components 1.4.0 → 1.5.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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, Directive, signal, inject, NgZone, ElementRef, viewChild, computed, Component, ViewContainerRef, HostListener, Input, TemplateRef, InjectionToken, Renderer2, ApplicationRef, EnvironmentInjector, Injector, DestroyRef, afterNextRender, createComponent, output, model, forwardRef, viewChildren, effect, contentChildren, contentChild, Injectable, booleanAttribute, makeEnvironmentProviders } from '@angular/core';
|
|
2
|
+
import { input, Directive, signal, inject, NgZone, ElementRef, viewChild, computed, Component, ViewContainerRef, HostListener, Input, TemplateRef, InjectionToken, Renderer2, ApplicationRef, EnvironmentInjector, Injector, DestroyRef, afterNextRender, createComponent, output, model, forwardRef, viewChildren, effect, contentChildren, contentChild, Injectable, booleanAttribute, makeEnvironmentProviders, provideAppInitializer, PLATFORM_ID } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
|
-
import { DOCUMENT, NgClass, NgTemplateOutlet, formatDate, CommonModule } from '@angular/common';
|
|
4
|
+
import { DOCUMENT, NgClass, NgTemplateOutlet, formatDate, CommonModule, isPlatformBrowser } from '@angular/common';
|
|
5
5
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
6
|
import { Overlay } from '@angular/cdk/overlay';
|
|
7
7
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
@@ -378,7 +378,7 @@ class TailwindTooltip extends TailwindComponent {
|
|
|
378
378
|
tooltipClasses = computed(() => {
|
|
379
379
|
const base = [
|
|
380
380
|
'fixed z-[1070] px-3 py-1.5',
|
|
381
|
-
'text-xs font-medium text-white bg-
|
|
381
|
+
'text-xs font-medium text-white bg-neutral-900 rounded-lg',
|
|
382
382
|
'shadow-lg whitespace-nowrap pointer-events-none',
|
|
383
383
|
'transition-opacity duration-150',
|
|
384
384
|
this.isVisible() ? 'opacity-100' : 'opacity-0'
|
|
@@ -386,7 +386,7 @@ class TailwindTooltip extends TailwindComponent {
|
|
|
386
386
|
return base.join(' ');
|
|
387
387
|
}, ...(ngDevMode ? [{ debugName: "tooltipClasses" }] : /* istanbul ignore next */ []));
|
|
388
388
|
arrowClasses = computed(() => {
|
|
389
|
-
const base = 'absolute w-2 h-2 bg-
|
|
389
|
+
const base = 'absolute w-2 h-2 bg-neutral-900 rotate-45';
|
|
390
390
|
const posMap = {
|
|
391
391
|
top: 'top-full left-1/2 -translate-x-1/2 -mt-1',
|
|
392
392
|
bottom: 'bottom-full left-1/2 -translate-x-1/2 -mb-1',
|
|
@@ -667,7 +667,7 @@ class TailwindSortHeaderDirective {
|
|
|
667
667
|
const icon = active ? (asc ? 'chevron-up' : 'chevron-down') : 'chevron-up-down';
|
|
668
668
|
this.iconRef.setInput('icon', icon);
|
|
669
669
|
this.iconRef.setInput('size', 14);
|
|
670
|
-
this.iconRef.setInput('class', active ? 'shrink-0 text-primary-600' : 'shrink-0 text-
|
|
670
|
+
this.iconRef.setInput('class', active ? 'shrink-0 text-primary-600' : 'shrink-0 text-neutral-400');
|
|
671
671
|
this.renderer.setAttribute(this.host.nativeElement, 'aria-label', active ? `Sorted ${asc ? 'ascending' : 'descending'}, activate to reverse` : `Sort by ${columnKey}`);
|
|
672
672
|
this.iconRef.changeDetectorRef.detectChanges();
|
|
673
673
|
};
|
|
@@ -687,7 +687,7 @@ class TailwindSortHeaderDirective {
|
|
|
687
687
|
});
|
|
688
688
|
}
|
|
689
689
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSortHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
690
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: TailwindSortHeaderDirective, isStandalone: true, selector: "[tailwindSortHeader]", inputs: { sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.tabindex": "0", "attr.data-sort-key": "sortKey()" }, classAttribute: "flex cursor-pointer items-center gap-1.5 justify-start whitespace-nowrap text-left select-none hover:text-
|
|
690
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: TailwindSortHeaderDirective, isStandalone: true, selector: "[tailwindSortHeader]", inputs: { sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.tabindex": "0", "attr.data-sort-key": "sortKey()" }, classAttribute: "flex cursor-pointer items-center gap-1.5 justify-start whitespace-nowrap text-left select-none hover:text-neutral-900" }, ngImport: i0 });
|
|
691
691
|
}
|
|
692
692
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSortHeaderDirective, decorators: [{
|
|
693
693
|
type: Directive,
|
|
@@ -695,7 +695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
695
695
|
selector: '[tailwindSortHeader]',
|
|
696
696
|
standalone: true,
|
|
697
697
|
host: {
|
|
698
|
-
class: 'flex cursor-pointer items-center gap-1.5 justify-start whitespace-nowrap text-left select-none hover:text-
|
|
698
|
+
class: 'flex cursor-pointer items-center gap-1.5 justify-start whitespace-nowrap text-left select-none hover:text-neutral-900',
|
|
699
699
|
'[attr.tabindex]': '0',
|
|
700
700
|
'[attr.data-sort-key]': 'sortKey()'
|
|
701
701
|
}
|
|
@@ -728,15 +728,15 @@ class TailwindButton extends TailwindComponent {
|
|
|
728
728
|
];
|
|
729
729
|
const solidMap = {
|
|
730
730
|
primary: 'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 border-transparent focus-visible:outline-primary-600 shadow-sm',
|
|
731
|
-
secondary: 'bg-
|
|
731
|
+
secondary: 'bg-neutral-100 text-neutral-800 hover:bg-neutral-200 active:bg-neutral-300 border-neutral-300 focus-visible:outline-neutral-500 shadow-sm',
|
|
732
732
|
danger: 'bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-800 border-transparent focus-visible:outline-danger-600 shadow-sm',
|
|
733
733
|
success: 'bg-success-600 text-white hover:bg-success-700 active:bg-success-800 border-transparent focus-visible:outline-success-600 shadow-sm',
|
|
734
|
-
warning: 'bg-warning-500 text-
|
|
734
|
+
warning: 'bg-warning-500 text-neutral-900 hover:bg-warning-600 active:bg-warning-700 border-transparent focus-visible:outline-warning-500 shadow-sm',
|
|
735
735
|
info: 'bg-info-600 text-white hover:bg-info-700 active:bg-info-800 border-transparent focus-visible:outline-info-600 shadow-sm'
|
|
736
736
|
};
|
|
737
737
|
const outlinedMap = {
|
|
738
738
|
primary: 'bg-transparent text-primary-600 border-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:outline-primary-600',
|
|
739
|
-
secondary: 'bg-transparent text-
|
|
739
|
+
secondary: 'bg-transparent text-neutral-700 border-neutral-300 hover:bg-neutral-50 active:bg-neutral-100 focus-visible:outline-neutral-500',
|
|
740
740
|
danger: 'bg-transparent text-danger-600 border-danger-600 hover:bg-danger-50 active:bg-danger-100 focus-visible:outline-danger-600',
|
|
741
741
|
success: 'bg-transparent text-success-600 border-success-600 hover:bg-success-50 active:bg-success-100 focus-visible:outline-success-600',
|
|
742
742
|
warning: 'bg-transparent text-warning-600 border-warning-500 hover:bg-warning-50 active:bg-warning-100 focus-visible:outline-warning-500',
|
|
@@ -745,7 +745,7 @@ class TailwindButton extends TailwindComponent {
|
|
|
745
745
|
/** Transparent + hover/active background tint (former `text` look). */
|
|
746
746
|
const ghostMap = {
|
|
747
747
|
primary: 'bg-transparent text-primary-600 border-transparent hover:bg-primary-50 active:bg-primary-100 focus-visible:outline-primary-600',
|
|
748
|
-
secondary: 'bg-transparent text-
|
|
748
|
+
secondary: 'bg-transparent text-neutral-700 border-transparent hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-neutral-500',
|
|
749
749
|
danger: 'bg-transparent text-danger-600 border-transparent hover:bg-danger-50 active:bg-danger-100 focus-visible:outline-danger-600',
|
|
750
750
|
success: 'bg-transparent text-success-600 border-transparent hover:bg-success-50 active:bg-success-100 focus-visible:outline-success-600',
|
|
751
751
|
warning: 'bg-transparent text-warning-600 border-transparent hover:bg-warning-50 active:bg-warning-100 focus-visible:outline-warning-500',
|
|
@@ -754,7 +754,7 @@ class TailwindButton extends TailwindComponent {
|
|
|
754
754
|
/** Text color from severity only; background stays transparent on hover/active. */
|
|
755
755
|
const textMap = {
|
|
756
756
|
primary: 'bg-transparent text-primary-600 border-transparent focus-visible:outline-primary-600',
|
|
757
|
-
secondary: 'bg-transparent text-
|
|
757
|
+
secondary: 'bg-transparent text-neutral-700 border-transparent focus-visible:outline-neutral-500',
|
|
758
758
|
danger: 'bg-transparent text-danger-600 border-transparent focus-visible:outline-danger-600',
|
|
759
759
|
success: 'bg-transparent text-success-600 border-transparent focus-visible:outline-success-600',
|
|
760
760
|
warning: 'bg-transparent text-warning-600 border-transparent focus-visible:outline-warning-500',
|
|
@@ -821,9 +821,9 @@ class TailwindInput extends TailwindComponent {
|
|
|
821
821
|
const base = [
|
|
822
822
|
'block w-full bg-white',
|
|
823
823
|
'border transition-colors duration-150',
|
|
824
|
-
'placeholder:text-
|
|
824
|
+
'placeholder:text-neutral-400',
|
|
825
825
|
'outline-none focus:outline focus:outline-2 focus:outline-offset-2',
|
|
826
|
-
'disabled:bg-
|
|
826
|
+
'disabled:bg-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed'
|
|
827
827
|
];
|
|
828
828
|
const sizeMap = {
|
|
829
829
|
xs: 'text-xs px-2 py-1 rounded-sm',
|
|
@@ -834,7 +834,7 @@ class TailwindInput extends TailwindComponent {
|
|
|
834
834
|
};
|
|
835
835
|
const stateClass = this.hasError()
|
|
836
836
|
? 'border-danger-400 focus:outline-danger-500 text-danger-900'
|
|
837
|
-
: 'border-
|
|
837
|
+
: 'border-neutral-300 focus:outline-primary-500 text-neutral-900';
|
|
838
838
|
return [...base, sizeMap[this.size()], stateClass].join(' ');
|
|
839
839
|
}, ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
|
|
840
840
|
// CVA
|
|
@@ -867,7 +867,7 @@ class TailwindInput extends TailwindComponent {
|
|
|
867
867
|
useExisting: forwardRef(() => TailwindInput),
|
|
868
868
|
multi: true
|
|
869
869
|
}
|
|
870
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-wrapper flex flex-col gap-1.5\">\n @if (label()) {\n <label\n [attr.for]=\"id() ? id() + '-inner' : null\"\n class=\"text-sm font-medium text-
|
|
870
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-wrapper flex flex-col gap-1.5\">\n @if (label()) {\n <label\n [attr.for]=\"id() ? id() + '-inner' : null\"\n class=\"text-sm font-medium text-neutral-700\"\n [class.text-danger-600]=\"hasError()\">\n {{ label() }}\n </label>\n }\n\n <input\n [attr.id]=\"id() ? id() + '-inner' : null\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n [value]=\"value()\"\n [class]=\"inputClasses()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur()\" />\n\n @if (helperText() && !hasError()) {\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\n {{ helperText() }}\n </p>\n }\n @if (errorText() && hasError()) {\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n {{ errorText() }}\n </p>\n }\n</div>\n", styles: [":host{display:block}\n"] });
|
|
871
871
|
}
|
|
872
872
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindInput, decorators: [{
|
|
873
873
|
type: Component,
|
|
@@ -877,7 +877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
877
877
|
useExisting: forwardRef(() => TailwindInput),
|
|
878
878
|
multi: true
|
|
879
879
|
}
|
|
880
|
-
], template: "<div class=\"tailwind-input-wrapper flex flex-col gap-1.5\">\n @if (label()) {\n <label\n [attr.for]=\"id() ? id() + '-inner' : null\"\n class=\"text-sm font-medium text-
|
|
880
|
+
], template: "<div class=\"tailwind-input-wrapper flex flex-col gap-1.5\">\n @if (label()) {\n <label\n [attr.for]=\"id() ? id() + '-inner' : null\"\n class=\"text-sm font-medium text-neutral-700\"\n [class.text-danger-600]=\"hasError()\">\n {{ label() }}\n </label>\n }\n\n <input\n [attr.id]=\"id() ? id() + '-inner' : null\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n [value]=\"value()\"\n [class]=\"inputClasses()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur()\" />\n\n @if (helperText() && !hasError()) {\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\n {{ helperText() }}\n </p>\n }\n @if (errorText() && hasError()) {\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n {{ errorText() }}\n </p>\n }\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
881
881
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
882
882
|
|
|
883
883
|
class TailwindTextarea extends TailwindComponent {
|
|
@@ -912,9 +912,9 @@ class TailwindTextarea extends TailwindComponent {
|
|
|
912
912
|
const base = [
|
|
913
913
|
'block w-full bg-white',
|
|
914
914
|
'border transition-colors duration-150',
|
|
915
|
-
'placeholder:text-
|
|
915
|
+
'placeholder:text-neutral-400',
|
|
916
916
|
'outline-none focus:outline focus:outline-2 focus:outline-offset-2',
|
|
917
|
-
'disabled:bg-
|
|
917
|
+
'disabled:bg-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed'
|
|
918
918
|
];
|
|
919
919
|
const sizeMap = {
|
|
920
920
|
xs: 'text-xs px-2 py-1 rounded-sm min-h-[4.5rem]',
|
|
@@ -931,7 +931,7 @@ class TailwindTextarea extends TailwindComponent {
|
|
|
931
931
|
};
|
|
932
932
|
const stateClass = this.hasError()
|
|
933
933
|
? 'border-danger-400 focus:outline-danger-500 text-danger-900'
|
|
934
|
-
: 'border-
|
|
934
|
+
: 'border-neutral-300 focus:outline-primary-500 text-neutral-900';
|
|
935
935
|
return [...base, sizeMap[this.size()], resizeMap[this.resize()], stateClass].join(' ');
|
|
936
936
|
}, ...(ngDevMode ? [{ debugName: "textareaClasses" }] : /* istanbul ignore next */ []));
|
|
937
937
|
onChange = () => { };
|
|
@@ -963,7 +963,7 @@ class TailwindTextarea extends TailwindComponent {
|
|
|
963
963
|
useExisting: forwardRef(() => TailwindTextarea),
|
|
964
964
|
multi: true
|
|
965
965
|
}
|
|
966
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\r\n @if (label()) {\r\n <label\r\n [attr.for]=\"id() ? id() + '-inner' : null\"\r\n class=\"text-sm font-medium text-
|
|
966
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\r\n @if (label()) {\r\n <label\r\n [attr.for]=\"id() ? id() + '-inner' : null\"\r\n class=\"text-sm font-medium text-neutral-700\"\r\n [class.text-danger-600]=\"hasError()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n\r\n <textarea\r\n [attr.id]=\"id() ? id() + '-inner' : null\"\r\n [placeholder]=\"placeholder()\"\r\n [rows]=\"rows()\"\r\n [attr.cols]=\"cols() ?? null\"\r\n [attr.maxlength]=\"maxlength() ?? null\"\r\n [disabled]=\"isDisabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-invalid]=\"hasError() || null\"\r\n [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n [value]=\"value()\"\r\n [class]=\"textareaClasses()\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onBlur()\"></textarea>\r\n\r\n @if (helperText() && !hasError()) {\r\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\r\n {{ helperText() }}\r\n </p>\r\n }\r\n @if (errorText() && hasError()) {\r\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n {{ errorText() }}\r\n </p>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
|
|
967
967
|
}
|
|
968
968
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTextarea, decorators: [{
|
|
969
969
|
type: Component,
|
|
@@ -973,7 +973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
973
973
|
useExisting: forwardRef(() => TailwindTextarea),
|
|
974
974
|
multi: true
|
|
975
975
|
}
|
|
976
|
-
], template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\r\n @if (label()) {\r\n <label\r\n [attr.for]=\"id() ? id() + '-inner' : null\"\r\n class=\"text-sm font-medium text-
|
|
976
|
+
], template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\r\n @if (label()) {\r\n <label\r\n [attr.for]=\"id() ? id() + '-inner' : null\"\r\n class=\"text-sm font-medium text-neutral-700\"\r\n [class.text-danger-600]=\"hasError()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n\r\n <textarea\r\n [attr.id]=\"id() ? id() + '-inner' : null\"\r\n [placeholder]=\"placeholder()\"\r\n [rows]=\"rows()\"\r\n [attr.cols]=\"cols() ?? null\"\r\n [attr.maxlength]=\"maxlength() ?? null\"\r\n [disabled]=\"isDisabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-invalid]=\"hasError() || null\"\r\n [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n [value]=\"value()\"\r\n [class]=\"textareaClasses()\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onBlur()\"></textarea>\r\n\r\n @if (helperText() && !hasError()) {\r\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\r\n {{ helperText() }}\r\n </p>\r\n }\r\n @if (errorText() && hasError()) {\r\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n {{ errorText() }}\r\n </p>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
|
|
977
977
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
978
978
|
|
|
979
979
|
class TailwindUpload extends TailwindComponent {
|
|
@@ -1024,10 +1024,13 @@ class TailwindUpload extends TailwindComponent {
|
|
|
1024
1024
|
'transition-colors duration-150 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2'
|
|
1025
1025
|
];
|
|
1026
1026
|
if (this.isDisabled()) {
|
|
1027
|
-
return [...base, 'cursor-not-allowed opacity-50 bg-
|
|
1027
|
+
return [...base, 'cursor-not-allowed opacity-50 bg-neutral-50 border-neutral-200 text-neutral-500'].join(' ');
|
|
1028
1028
|
}
|
|
1029
1029
|
if (this.isDragOver()) {
|
|
1030
|
-
return [
|
|
1030
|
+
return [
|
|
1031
|
+
...base,
|
|
1032
|
+
'cursor-pointer border-primary-500 bg-primary-50/60 text-neutral-800 focus-visible:outline-primary-500'
|
|
1033
|
+
].join(' ');
|
|
1031
1034
|
}
|
|
1032
1035
|
if (this.hasError()) {
|
|
1033
1036
|
return [
|
|
@@ -1037,7 +1040,7 @@ class TailwindUpload extends TailwindComponent {
|
|
|
1037
1040
|
}
|
|
1038
1041
|
return [
|
|
1039
1042
|
...base,
|
|
1040
|
-
'cursor-pointer border-
|
|
1043
|
+
'cursor-pointer border-neutral-300 bg-neutral-50/50 text-neutral-800 focus-visible:outline-primary-500',
|
|
1041
1044
|
'hover:border-primary-400 hover:bg-primary-50/30'
|
|
1042
1045
|
].join(' ');
|
|
1043
1046
|
}, ...(ngDevMode ? [{ debugName: "areaClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -1126,7 +1129,7 @@ class TailwindUpload extends TailwindComponent {
|
|
|
1126
1129
|
const max = this.maxFileSizeBytes();
|
|
1127
1130
|
if (max == null)
|
|
1128
1131
|
return null;
|
|
1129
|
-
const tooLarge = files.filter(
|
|
1132
|
+
const tooLarge = files.filter(f => f.size > max);
|
|
1130
1133
|
if (tooLarge.length === 0)
|
|
1131
1134
|
return null;
|
|
1132
1135
|
const maxLabel = max >= 1024 * 1024
|
|
@@ -1148,9 +1151,9 @@ class TailwindUpload extends TailwindComponent {
|
|
|
1148
1151
|
this.validationError.emit(err);
|
|
1149
1152
|
return;
|
|
1150
1153
|
}
|
|
1151
|
-
this.selectedNames.set(files.map(
|
|
1154
|
+
this.selectedNames.set(files.map(f => f.name));
|
|
1152
1155
|
try {
|
|
1153
|
-
const dataUrls = await Promise.all(files.map(
|
|
1156
|
+
const dataUrls = await Promise.all(files.map(f => this.readAsDataUrl(f)));
|
|
1154
1157
|
this.filesSelected.emit(files);
|
|
1155
1158
|
const primary = dataUrls[0] ?? '';
|
|
1156
1159
|
this.value.set(primary);
|
|
@@ -1183,7 +1186,7 @@ class TailwindUpload extends TailwindComponent {
|
|
|
1183
1186
|
useExisting: forwardRef(() => TailwindUpload),
|
|
1184
1187
|
multi: true
|
|
1185
1188
|
}
|
|
1186
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\r\n @if (label()) {\r\n <label
|
|
1189
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\r\n @if (label()) {\r\n <label [attr.for]=\"fileInputId()\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n\r\n <input\r\n #fileInput\r\n type=\"file\"\r\n class=\"sr-only\"\r\n [attr.id]=\"fileInputId()\"\r\n [accept]=\"accept() ?? null\"\r\n [attr.multiple]=\"multiple() ? '' : null\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-invalid]=\"hasError() || null\"\r\n [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\r\n (change)=\"onNativeChange($event)\"\r\n (blur)=\"blurHost()\" />\r\n\r\n @if (variant() === 'button') {\r\n <div class=\"flex flex-wrap items-center gap-2\">\r\n <tailwind-button\r\n type=\"button\"\r\n color=\"primary\"\r\n kind=\"solid\"\r\n [size]=\"size()\"\r\n [disabled]=\"isDisabled()\"\r\n (onClick)=\"triggerPicker($event)\">\r\n {{ buttonLabel() }}\r\n </tailwind-button>\r\n @if (showClear() && value()) {\r\n <button\r\n type=\"button\"\r\n class=\"text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"clear($event)\">\r\n {{ clearText() }}\r\n </button>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col gap-2\">\r\n <div\r\n role=\"button\"\r\n tabindex=\"0\"\r\n [class]=\"areaClasses()\"\r\n [attr.aria-disabled]=\"isDisabled() || null\"\r\n (click)=\"triggerPicker($event)\"\r\n (keydown)=\"onKeydownArea($event)\"\r\n (dragenter)=\"onDragEnter($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (drop)=\"onDrop($event)\">\r\n <tailwind-icon icon=\"cloud-arrow-up\" [size]=\"40\" />\r\n <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\r\n <span class=\"text-xs text-neutral-500\">{{ areaHint() }}</span>\r\n </div>\r\n @if (showClear() && value()) {\r\n <button\r\n type=\"button\"\r\n class=\"self-start text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"clear($event)\">\r\n {{ clearText() }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @if (selectedNames().length) {\r\n <p class=\"truncate text-xs text-neutral-600\" [attr.title]=\"selectedNames().join(', ')\">\r\n {{ selectedNames().join(', ') }}\r\n </p>\r\n }\r\n\r\n @if (helperText() && !hasError()) {\r\n <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-neutral-500\">\r\n {{ helperText() }}\r\n </p>\r\n }\r\n @if (errorText() && hasError()) {\r\n <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\r\n {{ errorText() }}\r\n </p>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type"], outputs: ["onClick"] }] });
|
|
1187
1190
|
}
|
|
1188
1191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindUpload, decorators: [{
|
|
1189
1192
|
type: Component,
|
|
@@ -1193,7 +1196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1193
1196
|
useExisting: forwardRef(() => TailwindUpload),
|
|
1194
1197
|
multi: true
|
|
1195
1198
|
}
|
|
1196
|
-
], template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\r\n @if (label()) {\r\n <label
|
|
1199
|
+
], template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\r\n @if (label()) {\r\n <label [attr.for]=\"fileInputId()\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n\r\n <input\r\n #fileInput\r\n type=\"file\"\r\n class=\"sr-only\"\r\n [attr.id]=\"fileInputId()\"\r\n [accept]=\"accept() ?? null\"\r\n [attr.multiple]=\"multiple() ? '' : null\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-invalid]=\"hasError() || null\"\r\n [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\r\n (change)=\"onNativeChange($event)\"\r\n (blur)=\"blurHost()\" />\r\n\r\n @if (variant() === 'button') {\r\n <div class=\"flex flex-wrap items-center gap-2\">\r\n <tailwind-button\r\n type=\"button\"\r\n color=\"primary\"\r\n kind=\"solid\"\r\n [size]=\"size()\"\r\n [disabled]=\"isDisabled()\"\r\n (onClick)=\"triggerPicker($event)\">\r\n {{ buttonLabel() }}\r\n </tailwind-button>\r\n @if (showClear() && value()) {\r\n <button\r\n type=\"button\"\r\n class=\"text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"clear($event)\">\r\n {{ clearText() }}\r\n </button>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col gap-2\">\r\n <div\r\n role=\"button\"\r\n tabindex=\"0\"\r\n [class]=\"areaClasses()\"\r\n [attr.aria-disabled]=\"isDisabled() || null\"\r\n (click)=\"triggerPicker($event)\"\r\n (keydown)=\"onKeydownArea($event)\"\r\n (dragenter)=\"onDragEnter($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (drop)=\"onDrop($event)\">\r\n <tailwind-icon icon=\"cloud-arrow-up\" [size]=\"40\" />\r\n <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\r\n <span class=\"text-xs text-neutral-500\">{{ areaHint() }}</span>\r\n </div>\r\n @if (showClear() && value()) {\r\n <button\r\n type=\"button\"\r\n class=\"self-start text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"clear($event)\">\r\n {{ clearText() }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @if (selectedNames().length) {\r\n <p class=\"truncate text-xs text-neutral-600\" [attr.title]=\"selectedNames().join(', ')\">\r\n {{ selectedNames().join(', ') }}\r\n </p>\r\n }\r\n\r\n @if (helperText() && !hasError()) {\r\n <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-neutral-500\">\r\n {{ helperText() }}\r\n </p>\r\n }\r\n @if (errorText() && hasError()) {\r\n <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\r\n {{ errorText() }}\r\n </p>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
|
|
1197
1200
|
}], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], areaTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaTitle", required: false }] }], areaHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaHint", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSizeBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeBytes", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], clearText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearText", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], validationError: [{ type: i0.Output, args: ["validationError"] }] } });
|
|
1198
1201
|
|
|
1199
1202
|
class TailwindInputOtp extends TailwindComponent {
|
|
@@ -1238,7 +1241,7 @@ class TailwindInputOtp extends TailwindComponent {
|
|
|
1238
1241
|
'block w-10 text-center font-mono tabular-nums bg-white',
|
|
1239
1242
|
'border transition-colors duration-150',
|
|
1240
1243
|
'outline-none focus:outline focus:outline-2 focus:outline-offset-2',
|
|
1241
|
-
'disabled:bg-
|
|
1244
|
+
'disabled:bg-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed'
|
|
1242
1245
|
];
|
|
1243
1246
|
const sizeMap = {
|
|
1244
1247
|
xs: 'text-xs px-1 py-1 rounded-sm min-w-7',
|
|
@@ -1249,7 +1252,7 @@ class TailwindInputOtp extends TailwindComponent {
|
|
|
1249
1252
|
};
|
|
1250
1253
|
const stateClass = this.hasError()
|
|
1251
1254
|
? 'border-danger-400 focus:outline-danger-500 text-danger-900'
|
|
1252
|
-
: 'border-
|
|
1255
|
+
: 'border-neutral-300 focus:outline-primary-500 text-neutral-900';
|
|
1253
1256
|
return [...base, sizeMap[this.size()], stateClass].join(' ');
|
|
1254
1257
|
}, ...(ngDevMode ? [{ debugName: "cellClasses" }] : /* istanbul ignore next */ []));
|
|
1255
1258
|
groupAriaLabel = computed(() => this.label() || this.ariaLabel(), ...(ngDevMode ? [{ debugName: "groupAriaLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -1416,7 +1419,7 @@ class TailwindInputOtp extends TailwindComponent {
|
|
|
1416
1419
|
useExisting: forwardRef(() => TailwindInputOtp),
|
|
1417
1420
|
multi: true
|
|
1418
1421
|
}
|
|
1419
|
-
], viewQueries: [{ propertyName: "otpInputs", predicate: ["otpDigit"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\r\n @if (label()) {\r\n <label
|
|
1422
|
+
], viewQueries: [{ propertyName: "otpInputs", predicate: ["otpDigit"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\r\n @if (label()) {\r\n <label [attr.for]=\"cellId(0)\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n\r\n <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\r\n @for (idx of slotIndexes(); track idx) {\r\n <input\r\n #otpDigit\r\n [attr.id]=\"cellId(idx)\"\r\n [type]=\"inputType()\"\r\n [attr.inputmode]=\"inputMode()\"\r\n [attr.autocomplete]=\"autocompleteForSlot(idx)\"\r\n [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\r\n [disabled]=\"isDisabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-invalid]=\"hasError() || null\"\r\n [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n maxlength=\"1\"\r\n spellcheck=\"false\"\r\n [class]=\"cellClasses()\"\r\n [value]=\"digitAt(idx)\"\r\n (input)=\"onInput($event, idx)\"\r\n (keydown)=\"onKeydown($event, idx)\"\r\n (paste)=\"onPaste($event, idx)\"\r\n (focus)=\"onSlotFocus(idx)\" />\r\n @if (showSeparatorAfter(idx)) {\r\n <span class=\"select-none text-neutral-500\" aria-hidden=\"true\">{{ separator() }}</span>\r\n }\r\n }\r\n </div>\r\n\r\n @if (helperText() && !hasError()) {\r\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\r\n {{ helperText() }}\r\n </p>\r\n }\r\n @if (errorText() && hasError()) {\r\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n {{ errorText() }}\r\n </p>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
|
|
1420
1423
|
}
|
|
1421
1424
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindInputOtp, decorators: [{
|
|
1422
1425
|
type: Component,
|
|
@@ -1426,7 +1429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1426
1429
|
useExisting: forwardRef(() => TailwindInputOtp),
|
|
1427
1430
|
multi: true
|
|
1428
1431
|
}
|
|
1429
|
-
], template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\r\n @if (label()) {\r\n <label
|
|
1432
|
+
], template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\r\n @if (label()) {\r\n <label [attr.for]=\"cellId(0)\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n\r\n <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\r\n @for (idx of slotIndexes(); track idx) {\r\n <input\r\n #otpDigit\r\n [attr.id]=\"cellId(idx)\"\r\n [type]=\"inputType()\"\r\n [attr.inputmode]=\"inputMode()\"\r\n [attr.autocomplete]=\"autocompleteForSlot(idx)\"\r\n [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\r\n [disabled]=\"isDisabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-invalid]=\"hasError() || null\"\r\n [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n maxlength=\"1\"\r\n spellcheck=\"false\"\r\n [class]=\"cellClasses()\"\r\n [value]=\"digitAt(idx)\"\r\n (input)=\"onInput($event, idx)\"\r\n (keydown)=\"onKeydown($event, idx)\"\r\n (paste)=\"onPaste($event, idx)\"\r\n (focus)=\"onSlotFocus(idx)\" />\r\n @if (showSeparatorAfter(idx)) {\r\n <span class=\"select-none text-neutral-500\" aria-hidden=\"true\">{{ separator() }}</span>\r\n }\r\n }\r\n </div>\r\n\r\n @if (helperText() && !hasError()) {\r\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\r\n {{ helperText() }}\r\n </p>\r\n }\r\n @if (errorText() && hasError()) {\r\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n {{ errorText() }}\r\n </p>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
|
|
1430
1433
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], integerOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "integerOnly", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], separatorAfterIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorAfterIndex", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], otpInputs: [{ type: i0.ViewChildren, args: ['otpDigit', { isSignal: true }] }] } });
|
|
1431
1434
|
|
|
1432
1435
|
class TailwindCheckbox extends TailwindComponent {
|
|
@@ -1480,7 +1483,7 @@ class TailwindCheckbox extends TailwindComponent {
|
|
|
1480
1483
|
useExisting: forwardRef(() => TailwindCheckbox),
|
|
1481
1484
|
multi: true
|
|
1482
1485
|
}
|
|
1483
|
-
], usesInheritance: true, ngImport: i0, template: "<div
|
|
1486
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"inline-flex items-center gap-2.5 select-none\" [class.opacity-50]=\"isDisabled()\">\n <label\n class=\"relative flex items-center justify-center shrink-0\"\n [class.cursor-pointer]=\"!isDisabled()\"\n [class.cursor-not-allowed]=\"isDisabled()\"\n [attr.for]=\"id() ? id() + '-inner' : null\">\n <input\n [attr.id]=\"id() ? id() + '-inner' : null\"\n type=\"checkbox\"\n class=\"peer sr-only\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-describedby]=\"description() && id() ? id() + '-desc' : null\"\n [attr.aria-labelledby]=\"label() && id() ? id() + '-label' : null\"\n (change)=\"onCheckboxChange($event)\" />\n <div\n class=\"w-full h-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1\"\n [class.rounded-sm]=\"size() === 'xs' || size() === 'sm'\"\n [class.rounded-md]=\"size() !== 'xs' && size() !== 'sm'\"\n [class.border-neutral-300]=\"!checked()\"\n [class.bg-white]=\"!checked()\"\n [class.border-primary-600]=\"checked()\"\n [class.bg-primary-600]=\"checked()\">\n @if (checked()) {\n <svg class=\"w-full h-full text-white p-0.5\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M13.5 4.5L6.5 11.5L3 8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </div>\n </label>\n\n <div class=\"flex flex-col gap-0.5 pt-0.5\">\n @if (label()) {\n <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800 leading-tight\">{{\n label()\n }}</span>\n }\n @if (description()) {\n <span [attr.id]=\"id() ? id() + '-desc' : null\" class=\"text-xs text-neutral-500 leading-snug\">\n {{ description() }}\n </span>\n }\n </div>\n</div>\n", styles: [":host{display:inline-block}\n"] });
|
|
1484
1487
|
}
|
|
1485
1488
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCheckbox, decorators: [{
|
|
1486
1489
|
type: Component,
|
|
@@ -1490,7 +1493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1490
1493
|
useExisting: forwardRef(() => TailwindCheckbox),
|
|
1491
1494
|
multi: true
|
|
1492
1495
|
}
|
|
1493
|
-
], template: "<div
|
|
1496
|
+
], template: "<div class=\"inline-flex items-center gap-2.5 select-none\" [class.opacity-50]=\"isDisabled()\">\n <label\n class=\"relative flex items-center justify-center shrink-0\"\n [class.cursor-pointer]=\"!isDisabled()\"\n [class.cursor-not-allowed]=\"isDisabled()\"\n [attr.for]=\"id() ? id() + '-inner' : null\">\n <input\n [attr.id]=\"id() ? id() + '-inner' : null\"\n type=\"checkbox\"\n class=\"peer sr-only\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-describedby]=\"description() && id() ? id() + '-desc' : null\"\n [attr.aria-labelledby]=\"label() && id() ? id() + '-label' : null\"\n (change)=\"onCheckboxChange($event)\" />\n <div\n class=\"w-full h-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1\"\n [class.rounded-sm]=\"size() === 'xs' || size() === 'sm'\"\n [class.rounded-md]=\"size() !== 'xs' && size() !== 'sm'\"\n [class.border-neutral-300]=\"!checked()\"\n [class.bg-white]=\"!checked()\"\n [class.border-primary-600]=\"checked()\"\n [class.bg-primary-600]=\"checked()\">\n @if (checked()) {\n <svg class=\"w-full h-full text-white p-0.5\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M13.5 4.5L6.5 11.5L3 8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </div>\n </label>\n\n <div class=\"flex flex-col gap-0.5 pt-0.5\">\n @if (label()) {\n <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800 leading-tight\">{{\n label()\n }}</span>\n }\n @if (description()) {\n <span [attr.id]=\"id() ? id() + '-desc' : null\" class=\"text-xs text-neutral-500 leading-snug\">\n {{ description() }}\n </span>\n }\n </div>\n</div>\n", styles: [":host{display:inline-block}\n"] }]
|
|
1494
1497
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
|
|
1495
1498
|
|
|
1496
1499
|
class TailwindRadioGroup extends TailwindComponent {
|
|
@@ -1559,7 +1562,7 @@ class TailwindRadioGroup extends TailwindComponent {
|
|
|
1559
1562
|
useExisting: forwardRef(() => TailwindRadioGroup),
|
|
1560
1563
|
multi: true
|
|
1561
1564
|
}
|
|
1562
|
-
], usesInheritance: true, ngImport: i0, template: "<fieldset\n class=\"flex gap-3\"\n [class.flex-col]=\"orientation() === 'vertical'\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"radiogroup\">\n @if (label()) {\n <legend class=\"text-sm font-medium text-
|
|
1565
|
+
], usesInheritance: true, ngImport: i0, template: "<fieldset\n class=\"flex gap-3\"\n [class.flex-col]=\"orientation() === 'vertical'\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"radiogroup\">\n @if (label()) {\n <legend class=\"text-sm font-medium text-neutral-700 mb-2\">{{ label() }}</legend>\n }\n\n @for (option of options(); track option.value) {\n <label\n class=\"inline-flex items-start gap-2.5 cursor-pointer select-none\"\n [class.cursor-not-allowed]=\"isDisabled() || option.disabled\"\n [class.opacity-50]=\"isDisabled() || option.disabled\">\n <div class=\"relative flex items-center justify-center shrink-0\" [class]=\"radioSizeClass()\">\n <input\n type=\"radio\"\n class=\"peer sr-only\"\n [name]=\"name()\"\n [value]=\"option.value\"\n [checked]=\"value() === option.value\"\n [disabled]=\"isDisabled() || !!option.disabled\"\n (change)=\"onRadioChange(option.value)\" />\n <div\n class=\"w-full h-full rounded-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1 flex items-center justify-center\"\n [class.border-neutral-300]=\"value() !== option.value\"\n [class.border-primary-600]=\"value() === option.value\">\n @if (value() === option.value) {\n <div\n class=\"rounded-full bg-primary-600 transition-transform duration-150 scale-100\"\n [class]=\"dotSizeClass()\"></div>\n }\n </div>\n </div>\n\n <div class=\"flex flex-col gap-0.5 pt-0.5\">\n <span class=\"text-sm font-medium text-neutral-800 leading-tight\">{{ option.label }}</span>\n @if (option.description) {\n <span class=\"text-xs text-neutral-500 leading-snug\">{{ option.description }}</span>\n }\n </div>\n </label>\n }\n</fieldset>\n", styles: [":host{display:block}\n"] });
|
|
1563
1566
|
}
|
|
1564
1567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindRadioGroup, decorators: [{
|
|
1565
1568
|
type: Component,
|
|
@@ -1569,7 +1572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1569
1572
|
useExisting: forwardRef(() => TailwindRadioGroup),
|
|
1570
1573
|
multi: true
|
|
1571
1574
|
}
|
|
1572
|
-
], template: "<fieldset\n class=\"flex gap-3\"\n [class.flex-col]=\"orientation() === 'vertical'\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"radiogroup\">\n @if (label()) {\n <legend class=\"text-sm font-medium text-
|
|
1575
|
+
], template: "<fieldset\n class=\"flex gap-3\"\n [class.flex-col]=\"orientation() === 'vertical'\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"radiogroup\">\n @if (label()) {\n <legend class=\"text-sm font-medium text-neutral-700 mb-2\">{{ label() }}</legend>\n }\n\n @for (option of options(); track option.value) {\n <label\n class=\"inline-flex items-start gap-2.5 cursor-pointer select-none\"\n [class.cursor-not-allowed]=\"isDisabled() || option.disabled\"\n [class.opacity-50]=\"isDisabled() || option.disabled\">\n <div class=\"relative flex items-center justify-center shrink-0\" [class]=\"radioSizeClass()\">\n <input\n type=\"radio\"\n class=\"peer sr-only\"\n [name]=\"name()\"\n [value]=\"option.value\"\n [checked]=\"value() === option.value\"\n [disabled]=\"isDisabled() || !!option.disabled\"\n (change)=\"onRadioChange(option.value)\" />\n <div\n class=\"w-full h-full rounded-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1 flex items-center justify-center\"\n [class.border-neutral-300]=\"value() !== option.value\"\n [class.border-primary-600]=\"value() === option.value\">\n @if (value() === option.value) {\n <div\n class=\"rounded-full bg-primary-600 transition-transform duration-150 scale-100\"\n [class]=\"dotSizeClass()\"></div>\n }\n </div>\n </div>\n\n <div class=\"flex flex-col gap-0.5 pt-0.5\">\n <span class=\"text-sm font-medium text-neutral-800 leading-tight\">{{ option.label }}</span>\n @if (option.description) {\n <span class=\"text-xs text-neutral-500 leading-snug\">{{ option.description }}</span>\n }\n </div>\n </label>\n }\n</fieldset>\n", styles: [":host{display:block}\n"] }]
|
|
1573
1576
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1574
1577
|
|
|
1575
1578
|
class TailwindSelect extends TailwindComponent {
|
|
@@ -1631,14 +1634,14 @@ class TailwindSelect extends TailwindComponent {
|
|
|
1631
1634
|
};
|
|
1632
1635
|
const stateClass = this.hasError()
|
|
1633
1636
|
? 'border-danger-400 focus:outline-danger-500 text-danger-900'
|
|
1634
|
-
: 'border-
|
|
1637
|
+
: 'border-neutral-300 focus:outline-primary-500';
|
|
1635
1638
|
const layout = this.multiple() ? 'items-start' : 'items-center';
|
|
1636
1639
|
return [
|
|
1637
1640
|
'flex justify-between w-full bg-white border transition-colors duration-150',
|
|
1638
1641
|
layout,
|
|
1639
1642
|
'pr-3 cursor-pointer text-left',
|
|
1640
1643
|
'outline-none focus:outline focus:outline-2 focus:outline-offset-2',
|
|
1641
|
-
'disabled:bg-
|
|
1644
|
+
'disabled:bg-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed',
|
|
1642
1645
|
sizeMap[this.size()],
|
|
1643
1646
|
stateClass
|
|
1644
1647
|
].join(' ');
|
|
@@ -1666,12 +1669,12 @@ class TailwindSelect extends TailwindComponent {
|
|
|
1666
1669
|
return [
|
|
1667
1670
|
'flex items-center justify-between px-3 py-2 text-sm cursor-pointer select-none',
|
|
1668
1671
|
isDisabled
|
|
1669
|
-
? 'text-
|
|
1672
|
+
? 'text-neutral-400 cursor-not-allowed'
|
|
1670
1673
|
: isSelected
|
|
1671
1674
|
? 'bg-primary-50 text-primary-700 font-medium'
|
|
1672
1675
|
: isActive
|
|
1673
|
-
? 'bg-
|
|
1674
|
-
: 'text-
|
|
1676
|
+
? 'bg-neutral-100 text-neutral-900'
|
|
1677
|
+
: 'text-neutral-800 hover:bg-neutral-50'
|
|
1675
1678
|
].join(' ');
|
|
1676
1679
|
}
|
|
1677
1680
|
// CVA
|
|
@@ -1856,7 +1859,7 @@ class TailwindSelect extends TailwindComponent {
|
|
|
1856
1859
|
useExisting: forwardRef(() => TailwindSelect),
|
|
1857
1860
|
multi: true
|
|
1858
1861
|
}
|
|
1859
|
-
], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label\n [attr.for]=\"id() ? id() + '-inner' : null\"\n class=\"text-sm font-medium text-
|
|
1862
|
+
], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label\n [attr.for]=\"id() ? id() + '-inner' : null\"\n class=\"text-sm font-medium text-neutral-700\"\n [class.text-danger-600]=\"hasError()\">\n {{ label() }}\n </label>\n }\n\n <!-- Trigger button -->\n <button\n type=\"button\"\n [attr.id]=\"id() ? id() + '-inner' : null\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n [disabled]=\"isDisabled()\"\n [class]=\"triggerClasses()\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeydown($event)\">\n @if (multiple()) {\n <span class=\"flex flex-wrap gap-1 flex-1 min-w-0 mr-2\" [class.text-neutral-400]=\"selectedOptions().length === 0\">\n @if (selectedOptions().length === 0) {\n {{ placeholder() }}\n } @else {\n @for (opt of selectedOptions(); track opt) {\n <span class=\"rounded-md bg-neutral-100 px-2 py-0.5 text-sm text-neutral-800\">{{ opt.label }}</span>\n }\n }\n </span>\n } @else {\n <span [class.text-neutral-400]=\"!selectedOption()\">\n {{ selectedOption()?.label ?? placeholder() }}\n </span>\n }\n\n <svg\n class=\"shrink-0 ml-2 w-4 h-4 text-neutral-400 transition-transform duration-150\"\n [class.rotate-180]=\"isOpen()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path\n fill-rule=\"evenodd\"\n d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n\n @if (helperText() && !hasError()) {\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">{{ helperText() }}</p>\n }\n @if (errorText() && hasError()) {\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\n }\n</div>\n\n<!-- Dropdown panel \u2014 rendered via CDK Overlay outside the component DOM -->\n<ng-template #panelTemplate>\n <ul\n role=\"listbox\"\n [attr.aria-multiselectable]=\"multiple() ? true : null\"\n class=\"w-full bg-white border border-neutral-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\n @if (placeholder()) {\n <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-neutral-400 cursor-default select-none\">\n {{ placeholder() }}\n </li>\n }\n @for (option of options(); track option.value; let i = $index) {\n <li\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [class]=\"optionClasses(i, option)\"\n (click)=\"selectOption(option)\"\n (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\n <span>{{ option.label }}</span>\n\n @if (isOptionSelected(option)) {\n <svg\n class=\"w-4 h-4 text-primary-600 shrink-0\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path\n fill-rule=\"evenodd\"\n d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block}\n"] });
|
|
1860
1863
|
}
|
|
1861
1864
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSelect, decorators: [{
|
|
1862
1865
|
type: Component,
|
|
@@ -1866,7 +1869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1866
1869
|
useExisting: forwardRef(() => TailwindSelect),
|
|
1867
1870
|
multi: true
|
|
1868
1871
|
}
|
|
1869
|
-
], template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label\n [attr.for]=\"id() ? id() + '-inner' : null\"\n class=\"text-sm font-medium text-
|
|
1872
|
+
], template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label\n [attr.for]=\"id() ? id() + '-inner' : null\"\n class=\"text-sm font-medium text-neutral-700\"\n [class.text-danger-600]=\"hasError()\">\n {{ label() }}\n </label>\n }\n\n <!-- Trigger button -->\n <button\n type=\"button\"\n [attr.id]=\"id() ? id() + '-inner' : null\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n [disabled]=\"isDisabled()\"\n [class]=\"triggerClasses()\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeydown($event)\">\n @if (multiple()) {\n <span class=\"flex flex-wrap gap-1 flex-1 min-w-0 mr-2\" [class.text-neutral-400]=\"selectedOptions().length === 0\">\n @if (selectedOptions().length === 0) {\n {{ placeholder() }}\n } @else {\n @for (opt of selectedOptions(); track opt) {\n <span class=\"rounded-md bg-neutral-100 px-2 py-0.5 text-sm text-neutral-800\">{{ opt.label }}</span>\n }\n }\n </span>\n } @else {\n <span [class.text-neutral-400]=\"!selectedOption()\">\n {{ selectedOption()?.label ?? placeholder() }}\n </span>\n }\n\n <svg\n class=\"shrink-0 ml-2 w-4 h-4 text-neutral-400 transition-transform duration-150\"\n [class.rotate-180]=\"isOpen()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path\n fill-rule=\"evenodd\"\n d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n\n @if (helperText() && !hasError()) {\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">{{ helperText() }}</p>\n }\n @if (errorText() && hasError()) {\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\n }\n</div>\n\n<!-- Dropdown panel \u2014 rendered via CDK Overlay outside the component DOM -->\n<ng-template #panelTemplate>\n <ul\n role=\"listbox\"\n [attr.aria-multiselectable]=\"multiple() ? true : null\"\n class=\"w-full bg-white border border-neutral-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\n @if (placeholder()) {\n <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-neutral-400 cursor-default select-none\">\n {{ placeholder() }}\n </li>\n }\n @for (option of options(); track option.value; let i = $index) {\n <li\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [class]=\"optionClasses(i, option)\"\n (click)=\"selectOption(option)\"\n (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\n <span>{{ option.label }}</span>\n\n @if (isOptionSelected(option)) {\n <svg\n class=\"w-4 h-4 text-primary-600 shrink-0\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path\n fill-rule=\"evenodd\"\n d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
1870
1873
|
}], propDecorators: { panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1871
1874
|
|
|
1872
1875
|
class TailwindToggle extends TailwindComponent {
|
|
@@ -1896,7 +1899,7 @@ class TailwindToggle extends TailwindComponent {
|
|
|
1896
1899
|
'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600',
|
|
1897
1900
|
'cursor-pointer disabled:cursor-not-allowed'
|
|
1898
1901
|
];
|
|
1899
|
-
const stateClass = this.checked() ? 'bg-primary-600' : 'bg-
|
|
1902
|
+
const stateClass = this.checked() ? 'bg-primary-600' : 'bg-neutral-300';
|
|
1900
1903
|
return [...base, sizeMap[this.size()], stateClass].join(' ');
|
|
1901
1904
|
}, ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
|
|
1902
1905
|
/** `aria-label` / `aria-labelledby` for the switch (label text is not a hit target) */
|
|
@@ -1963,7 +1966,7 @@ class TailwindToggle extends TailwindComponent {
|
|
|
1963
1966
|
useExisting: forwardRef(() => TailwindToggle),
|
|
1964
1967
|
multi: true
|
|
1965
1968
|
}
|
|
1966
|
-
], usesInheritance: true, ngImport: i0, template: "<div
|
|
1969
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"inline-flex items-center gap-3 select-none\" [class.opacity-50]=\"isDisabled()\">\n <button\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"switchAria().label\"\n [attr.aria-labelledby]=\"switchAria().labelledBy\"\n [disabled]=\"isDisabled()\"\n [class]=\"trackClasses()\"\n (click)=\"toggle()\">\n <span [class]=\"thumbClasses()\" aria-hidden=\"true\"></span>\n </button>\n\n @if (label()) {\n <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800\">{{ label() }}</span>\n }\n</div>\n", styles: [":host{display:inline-block}\n"] });
|
|
1967
1970
|
}
|
|
1968
1971
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToggle, decorators: [{
|
|
1969
1972
|
type: Component,
|
|
@@ -1973,7 +1976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1973
1976
|
useExisting: forwardRef(() => TailwindToggle),
|
|
1974
1977
|
multi: true
|
|
1975
1978
|
}
|
|
1976
|
-
], template: "<div
|
|
1979
|
+
], template: "<div class=\"inline-flex items-center gap-3 select-none\" [class.opacity-50]=\"isDisabled()\">\n <button\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"switchAria().label\"\n [attr.aria-labelledby]=\"switchAria().labelledBy\"\n [disabled]=\"isDisabled()\"\n [class]=\"trackClasses()\"\n (click)=\"toggle()\">\n <span [class]=\"thumbClasses()\" aria-hidden=\"true\"></span>\n </button>\n\n @if (label()) {\n <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800\">{{ label() }}</span>\n }\n</div>\n", styles: [":host{display:inline-block}\n"] }]
|
|
1977
1980
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
|
|
1978
1981
|
|
|
1979
1982
|
class TailwindBadge extends TailwindComponent {
|
|
@@ -1991,7 +1994,7 @@ class TailwindBadge extends TailwindComponent {
|
|
|
1991
1994
|
const base = ['inline-flex items-center gap-1 font-medium', 'leading-none'];
|
|
1992
1995
|
const variantMap = {
|
|
1993
1996
|
primary: 'bg-primary-100 text-primary-700',
|
|
1994
|
-
neutral: 'bg-
|
|
1997
|
+
neutral: 'bg-neutral-100 text-neutral-700',
|
|
1995
1998
|
success: 'bg-success-100 text-success-700',
|
|
1996
1999
|
warning: 'bg-warning-100 text-warning-800',
|
|
1997
2000
|
danger: 'bg-danger-100 text-danger-700',
|
|
@@ -2025,12 +2028,12 @@ class TailwindTitle extends TailwindComponent {
|
|
|
2025
2028
|
headingClasses = computed(() => {
|
|
2026
2029
|
const tag = this.titleTag();
|
|
2027
2030
|
const scale = {
|
|
2028
|
-
h1: 'text-3xl font-bold tracking-tight text-
|
|
2029
|
-
h2: 'text-2xl font-semibold tracking-tight text-
|
|
2030
|
-
h3: 'text-xl font-semibold tracking-tight text-
|
|
2031
|
-
h4: 'text-lg font-normal text-
|
|
2032
|
-
h5: 'text-base font-normal text-
|
|
2033
|
-
h6: 'text-sm font-normal text-
|
|
2031
|
+
h1: 'text-3xl font-bold tracking-tight text-neutral-900',
|
|
2032
|
+
h2: 'text-2xl font-semibold tracking-tight text-neutral-900',
|
|
2033
|
+
h3: 'text-xl font-semibold tracking-tight text-neutral-900',
|
|
2034
|
+
h4: 'text-lg font-normal text-neutral-900',
|
|
2035
|
+
h5: 'text-base font-normal text-neutral-900',
|
|
2036
|
+
h6: 'text-sm font-normal text-neutral-800 uppercase tracking-wide'
|
|
2034
2037
|
};
|
|
2035
2038
|
const layout = 'inline-flex items-center gap-2 min-w-0';
|
|
2036
2039
|
const extra = this.class();
|
|
@@ -2069,11 +2072,11 @@ class TailwindCard extends TailwindComponent {
|
|
|
2069
2072
|
/** Whether the card has a footer */
|
|
2070
2073
|
hasFooter = input(true, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
|
|
2071
2074
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCard, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2072
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindCard, isStandalone: true, selector: "tailwind-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, headerBg: { classPropertyName: "headerBg", publicName: "headerBg", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"bg-white rounded-xl border border-
|
|
2075
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindCard, isStandalone: true, selector: "tailwind-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, headerBg: { classPropertyName: "headerBg", publicName: "headerBg", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"bg-white rounded-xl border border-neutral-200 overflow-hidden transition-shadow duration-200\"\n [class.shadow-sm]=\"!elevated()\"\n [class.shadow-lg]=\"elevated()\"\n [class.hover:shadow-md]=\"hoverable() && !elevated()\"\n [class.hover:shadow-xl]=\"hoverable() && elevated()\">\n @if (hasHeader()) {\n <!-- Header slot (always rendered; only visible when content is projected) -->\n <div class=\"px-6 pt-4 pb-2 border-b border-neutral-100\" [class.bg-neutral-50]=\"headerBg()\">\n <ng-content select=\"[tailwind-card-header]\" />\n </div>\n }\n\n <!-- Image slot -->\n <ng-content select=\"[tailwind-card-image]\" />\n\n <!-- Body -->\n <div class=\"p-6\">\n <ng-content />\n </div>\n\n @if (hasFooter()) {\n <!-- Footer slot -->\n <div class=\"px-6 py-4 border-t border-neutral-100 bg-neutral-50/50\">\n <ng-content select=\"[tailwind-card-footer]\" />\n </div>\n }\n</div>\n", styles: [":host{display:block}\n"] });
|
|
2073
2076
|
}
|
|
2074
2077
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCard, decorators: [{
|
|
2075
2078
|
type: Component,
|
|
2076
|
-
args: [{ selector: 'tailwind-card', template: "<div\n class=\"bg-white rounded-xl border border-
|
|
2079
|
+
args: [{ selector: 'tailwind-card', template: "<div\n class=\"bg-white rounded-xl border border-neutral-200 overflow-hidden transition-shadow duration-200\"\n [class.shadow-sm]=\"!elevated()\"\n [class.shadow-lg]=\"elevated()\"\n [class.hover:shadow-md]=\"hoverable() && !elevated()\"\n [class.hover:shadow-xl]=\"hoverable() && elevated()\">\n @if (hasHeader()) {\n <!-- Header slot (always rendered; only visible when content is projected) -->\n <div class=\"px-6 pt-4 pb-2 border-b border-neutral-100\" [class.bg-neutral-50]=\"headerBg()\">\n <ng-content select=\"[tailwind-card-header]\" />\n </div>\n }\n\n <!-- Image slot -->\n <ng-content select=\"[tailwind-card-image]\" />\n\n <!-- Body -->\n <div class=\"p-6\">\n <ng-content />\n </div>\n\n @if (hasFooter()) {\n <!-- Footer slot -->\n <div class=\"px-6 py-4 border-t border-neutral-100 bg-neutral-50/50\">\n <ng-content select=\"[tailwind-card-footer]\" />\n </div>\n }\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
2077
2080
|
}], propDecorators: { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], headerBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBg", required: false }] }], hasHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasHeader", required: false }] }], hasFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFooter", required: false }] }] } });
|
|
2078
2081
|
|
|
2079
2082
|
class TailwindAlert extends TailwindComponent {
|
|
@@ -2216,11 +2219,11 @@ class TailwindModal extends TailwindComponent {
|
|
|
2216
2219
|
}, 200);
|
|
2217
2220
|
}
|
|
2218
2221
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2219
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindModal, isStandalone: true, selector: "tailwind-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, viewQueries: [{ propertyName: "modalPanel", first: true, predicate: ["modalPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isOpen()) {\r\n <!-- Backdrop -->\r\n <div\r\n class=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-1040 transition-opacity duration-200\"\r\n [class.opacity-100]=\"isVisible()\"\r\n [class.opacity-0]=\"!isVisible()\"\r\n (click)=\"closeOnBackdrop() && close()\"\r\n aria-hidden=\"true\"></div>\r\n\r\n <!-- Modal -->\r\n <div\r\n role=\"dialog\"\r\n class=\"fixed inset-0 z-1050 overflow-y-auto\"\r\n [attr.aria-modal]=\"true\"\r\n (keydown.escape)=\"closeOnEscape() && close()\">\r\n <div class=\"flex min-h-full items-center justify-center p-4\">\r\n <div #modalPanel [class]=\"panelClasses()\" tabindex=\"-1\">\r\n <!-- Header -->\r\n <div class=\"flex items-center justify-between px-6 py-4 border-b border-
|
|
2222
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindModal, isStandalone: true, selector: "tailwind-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, viewQueries: [{ propertyName: "modalPanel", first: true, predicate: ["modalPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isOpen()) {\r\n <!-- Backdrop -->\r\n <div\r\n class=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-1040 transition-opacity duration-200\"\r\n [class.opacity-100]=\"isVisible()\"\r\n [class.opacity-0]=\"!isVisible()\"\r\n (click)=\"closeOnBackdrop() && close()\"\r\n aria-hidden=\"true\"></div>\r\n\r\n <!-- Modal -->\r\n <div\r\n role=\"dialog\"\r\n class=\"fixed inset-0 z-1050 overflow-y-auto\"\r\n [attr.aria-modal]=\"true\"\r\n (keydown.escape)=\"closeOnEscape() && close()\">\r\n <div class=\"flex min-h-full items-center justify-center p-4\">\r\n <div #modalPanel [class]=\"panelClasses()\" tabindex=\"-1\">\r\n <!-- Header -->\r\n <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\r\n <h2 class=\"text-lg font-semibold text-neutral-900 pr-2\">\r\n <ng-content />\r\n </h2>\r\n @if (showCloseButton()) {\r\n <button\r\n type=\"button\"\r\n class=\"p-1.5 -m-1.5 shrink-0 rounded-lg text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors cursor-pointer\"\r\n aria-label=\"Close\"\r\n (click)=\"close()\">\r\n <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path\r\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- Body -->\r\n <div class=\"px-6 py-5\">\r\n <ng-content select=\"[tailwind-modal-content]\" />\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"border-t border-neutral-200 px-6 py-4\">\r\n <ng-content select=\"[tailwind-modal-footer]\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{display:contents}\n"] });
|
|
2220
2223
|
}
|
|
2221
2224
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModal, decorators: [{
|
|
2222
2225
|
type: Component,
|
|
2223
|
-
args: [{ selector: 'tailwind-modal', template: "@if (isOpen()) {\r\n <!-- Backdrop -->\r\n <div\r\n class=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-1040 transition-opacity duration-200\"\r\n [class.opacity-100]=\"isVisible()\"\r\n [class.opacity-0]=\"!isVisible()\"\r\n (click)=\"closeOnBackdrop() && close()\"\r\n aria-hidden=\"true\"></div>\r\n\r\n <!-- Modal -->\r\n <div\r\n role=\"dialog\"\r\n class=\"fixed inset-0 z-1050 overflow-y-auto\"\r\n [attr.aria-modal]=\"true\"\r\n (keydown.escape)=\"closeOnEscape() && close()\">\r\n <div class=\"flex min-h-full items-center justify-center p-4\">\r\n <div #modalPanel [class]=\"panelClasses()\" tabindex=\"-1\">\r\n <!-- Header -->\r\n <div class=\"flex items-center justify-between px-6 py-4 border-b border-
|
|
2226
|
+
args: [{ selector: 'tailwind-modal', template: "@if (isOpen()) {\r\n <!-- Backdrop -->\r\n <div\r\n class=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-1040 transition-opacity duration-200\"\r\n [class.opacity-100]=\"isVisible()\"\r\n [class.opacity-0]=\"!isVisible()\"\r\n (click)=\"closeOnBackdrop() && close()\"\r\n aria-hidden=\"true\"></div>\r\n\r\n <!-- Modal -->\r\n <div\r\n role=\"dialog\"\r\n class=\"fixed inset-0 z-1050 overflow-y-auto\"\r\n [attr.aria-modal]=\"true\"\r\n (keydown.escape)=\"closeOnEscape() && close()\">\r\n <div class=\"flex min-h-full items-center justify-center p-4\">\r\n <div #modalPanel [class]=\"panelClasses()\" tabindex=\"-1\">\r\n <!-- Header -->\r\n <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\r\n <h2 class=\"text-lg font-semibold text-neutral-900 pr-2\">\r\n <ng-content />\r\n </h2>\r\n @if (showCloseButton()) {\r\n <button\r\n type=\"button\"\r\n class=\"p-1.5 -m-1.5 shrink-0 rounded-lg text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors cursor-pointer\"\r\n aria-label=\"Close\"\r\n (click)=\"close()\">\r\n <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path\r\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- Body -->\r\n <div class=\"px-6 py-5\">\r\n <ng-content select=\"[tailwind-modal-content]\" />\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"border-t border-neutral-200 px-6 py-4\">\r\n <ng-content select=\"[tailwind-modal-footer]\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
|
|
2224
2227
|
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], modalPanel: [{ type: i0.ViewChild, args: ['modalPanel', { isSignal: true }] }] } });
|
|
2225
2228
|
|
|
2226
2229
|
class TailwindTab extends TailwindComponent {
|
|
@@ -2261,11 +2264,11 @@ class TailwindTabGroup extends TailwindComponent {
|
|
|
2261
2264
|
this.activeIndex.set(index);
|
|
2262
2265
|
}
|
|
2263
2266
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2264
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTabGroup, isStandalone: true, selector: "tailwind-tab-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "tabs", predicate: TailwindTab, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Tab Headers -->\n<div class=\"border-b border-
|
|
2267
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTabGroup, isStandalone: true, selector: "tailwind-tab-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "tabs", predicate: TailwindTab, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Tab Headers -->\n<div class=\"border-b border-neutral-200\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n <nav class=\"flex -mb-px gap-1\" [class.overflow-x-auto]=\"scrollable()\">\n @for (tab of tabs(); track $index; let i = $index) {\n <button\n type=\"button\"\n role=\"tab\"\n [attr.id]=\"tab.id() ? 'tab-' + tab.id() : null\"\n [attr.aria-selected]=\"activeIndex() === i\"\n [attr.aria-controls]=\"tab.id() ? tab.id() : null\"\n [disabled]=\"tab.disabled()\"\n class=\"group relative px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:rounded-t-lg\"\n [class.text-primary-600]=\"activeIndex() === i\"\n [class.text-neutral-500]=\"activeIndex() !== i\"\n [class.hover:text-neutral-700]=\"activeIndex() !== i && !tab.disabled()\"\n [class.opacity-50]=\"tab.disabled()\"\n [class.cursor-not-allowed]=\"tab.disabled()\"\n (click)=\"!tab.disabled() && selectTab(i)\">\n {{ tab.label() }}\n <!-- Active indicator -->\n <span\n class=\"absolute bottom-0 left-0 right-0 h-0.5 rounded-full transition-all duration-200\"\n [class.bg-primary-600]=\"activeIndex() === i\"\n [class.scale-x-100]=\"activeIndex() === i\"\n [class.scale-x-0]=\"activeIndex() !== i\"></span>\n </button>\n }\n </nav>\n</div>\n\n<!-- Tab Content -->\n<div class=\"pt-4\">\n <ng-content />\n</div>\n", styles: [":host{display:block}\n"] });
|
|
2265
2268
|
}
|
|
2266
2269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTabGroup, decorators: [{
|
|
2267
2270
|
type: Component,
|
|
2268
|
-
args: [{ selector: 'tailwind-tab-group', template: "<!-- Tab Headers -->\n<div class=\"border-b border-
|
|
2271
|
+
args: [{ selector: 'tailwind-tab-group', template: "<!-- Tab Headers -->\n<div class=\"border-b border-neutral-200\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n <nav class=\"flex -mb-px gap-1\" [class.overflow-x-auto]=\"scrollable()\">\n @for (tab of tabs(); track $index; let i = $index) {\n <button\n type=\"button\"\n role=\"tab\"\n [attr.id]=\"tab.id() ? 'tab-' + tab.id() : null\"\n [attr.aria-selected]=\"activeIndex() === i\"\n [attr.aria-controls]=\"tab.id() ? tab.id() : null\"\n [disabled]=\"tab.disabled()\"\n class=\"group relative px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:rounded-t-lg\"\n [class.text-primary-600]=\"activeIndex() === i\"\n [class.text-neutral-500]=\"activeIndex() !== i\"\n [class.hover:text-neutral-700]=\"activeIndex() !== i && !tab.disabled()\"\n [class.opacity-50]=\"tab.disabled()\"\n [class.cursor-not-allowed]=\"tab.disabled()\"\n (click)=\"!tab.disabled() && selectTab(i)\">\n {{ tab.label() }}\n <!-- Active indicator -->\n <span\n class=\"absolute bottom-0 left-0 right-0 h-0.5 rounded-full transition-all duration-200\"\n [class.bg-primary-600]=\"activeIndex() === i\"\n [class.scale-x-100]=\"activeIndex() === i\"\n [class.scale-x-0]=\"activeIndex() !== i\"></span>\n </button>\n }\n </nav>\n</div>\n\n<!-- Tab Content -->\n<div class=\"pt-4\">\n <ng-content />\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
2269
2272
|
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TailwindTab), { isSignal: true }] }] } });
|
|
2270
2273
|
|
|
2271
2274
|
class TailwindProgressBar extends TailwindComponent {
|
|
@@ -2294,7 +2297,7 @@ class TailwindProgressBar extends TailwindComponent {
|
|
|
2294
2297
|
lg: 'h-4',
|
|
2295
2298
|
xl: 'h-5'
|
|
2296
2299
|
};
|
|
2297
|
-
return `w-full bg-
|
|
2300
|
+
return `w-full bg-neutral-200 rounded-full overflow-hidden ${sizeMap[this.size()]}`;
|
|
2298
2301
|
}, ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
|
|
2299
2302
|
barClasses = computed(() => {
|
|
2300
2303
|
const variantMap = {
|
|
@@ -2317,11 +2320,11 @@ class TailwindProgressBar extends TailwindComponent {
|
|
|
2317
2320
|
return base.join(' ');
|
|
2318
2321
|
}, ...(ngDevMode ? [{ debugName: "barClasses" }] : /* istanbul ignore next */ []));
|
|
2319
2322
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindProgressBar, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2320
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindProgressBar, isStandalone: true, selector: "tailwind-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full\">\n @if (showLabel()) {\n <div class=\"flex justify-between items-center mb-1.5\">\n @if (label()) {\n <span class=\"text-sm font-medium text-
|
|
2323
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindProgressBar, isStandalone: true, selector: "tailwind-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full\">\n @if (showLabel()) {\n <div class=\"flex justify-between items-center mb-1.5\">\n @if (label()) {\n <span class=\"text-sm font-medium text-neutral-700\">{{ label() }}</span>\n }\n @if (showValue()) {\n <span class=\"text-sm font-medium text-neutral-600\">{{ clampedValue() }}%</span>\n }\n </div>\n }\n\n <div\n [class]=\"trackClasses()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"label() || 'Progress'\">\n <div [class]=\"barClasses()\" [style.width.%]=\"indeterminate() ? 100 : clampedValue()\"></div>\n </div>\n</div>\n", styles: [":host{display:block}@keyframes tailwind-indeterminate{0%{transform:translate(-100%)}to{transform:translate(200%)}}.tailwind-progress-indeterminate{animation:tailwind-indeterminate 1.5s ease-in-out infinite;width:40%!important}\n"] });
|
|
2321
2324
|
}
|
|
2322
2325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindProgressBar, decorators: [{
|
|
2323
2326
|
type: Component,
|
|
2324
|
-
args: [{ selector: 'tailwind-progress-bar', template: "<div class=\"w-full\">\n @if (showLabel()) {\n <div class=\"flex justify-between items-center mb-1.5\">\n @if (label()) {\n <span class=\"text-sm font-medium text-
|
|
2327
|
+
args: [{ selector: 'tailwind-progress-bar', template: "<div class=\"w-full\">\n @if (showLabel()) {\n <div class=\"flex justify-between items-center mb-1.5\">\n @if (label()) {\n <span class=\"text-sm font-medium text-neutral-700\">{{ label() }}</span>\n }\n @if (showValue()) {\n <span class=\"text-sm font-medium text-neutral-600\">{{ clampedValue() }}%</span>\n }\n </div>\n }\n\n <div\n [class]=\"trackClasses()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"label() || 'Progress'\">\n <div [class]=\"barClasses()\" [style.width.%]=\"indeterminate() ? 100 : clampedValue()\"></div>\n </div>\n</div>\n", styles: [":host{display:block}@keyframes tailwind-indeterminate{0%{transform:translate(-100%)}to{transform:translate(200%)}}.tailwind-progress-indeterminate{animation:tailwind-indeterminate 1.5s ease-in-out infinite;width:40%!important}\n"] }]
|
|
2325
2328
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }] } });
|
|
2326
2329
|
|
|
2327
2330
|
/** Matches previous `min-w-48` floor when the anchor is narrower. */
|
|
@@ -2495,11 +2498,11 @@ class TailwindMenu extends TailwindComponent {
|
|
|
2495
2498
|
return document.documentElement;
|
|
2496
2499
|
}
|
|
2497
2500
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2498
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindMenu, isStandalone: true, selector: "tailwind-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { listeners: { "document:keydown.escape": "onDocumentEscape()", "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isOpen() && panelLayout(); as layout) {\n <div\n #panel\n role=\"menu\"\n class=\"fixed z-1000 bg-white rounded-xl border border-
|
|
2501
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindMenu, isStandalone: true, selector: "tailwind-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { listeners: { "document:keydown.escape": "onDocumentEscape()", "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isOpen() && panelLayout(); as layout) {\n <div\n #panel\n role=\"menu\"\n class=\"fixed z-1000 bg-white rounded-xl border border-neutral-200 shadow-lg py-1 animate-in fade-in slide-in-from-top-1\"\n [style.top.px]=\"layout.top\"\n [style.left.px]=\"layout.left ?? null\"\n [style.right.px]=\"layout.right ?? null\"\n [style.minWidth.px]=\"layout.minWidth\">\n @for (item of items(); track $index) {\n @if (item.divider) {\n <hr class=\"my-1 border-neutral-100\" />\n } @else {\n <button\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"!!item.disabled\"\n class=\"w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer\"\n (click)=\"selectItem(item)\">\n {{ item.label }}\n </button>\n }\n }\n </div>\n}\n", styles: [":host{display:contents}\n"] });
|
|
2499
2502
|
}
|
|
2500
2503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMenu, decorators: [{
|
|
2501
2504
|
type: Component,
|
|
2502
|
-
args: [{ selector: 'tailwind-menu', template: "@if (isOpen() && panelLayout(); as layout) {\n <div\n #panel\n role=\"menu\"\n class=\"fixed z-1000 bg-white rounded-xl border border-
|
|
2505
|
+
args: [{ selector: 'tailwind-menu', template: "@if (isOpen() && panelLayout(); as layout) {\n <div\n #panel\n role=\"menu\"\n class=\"fixed z-1000 bg-white rounded-xl border border-neutral-200 shadow-lg py-1 animate-in fade-in slide-in-from-top-1\"\n [style.top.px]=\"layout.top\"\n [style.left.px]=\"layout.left ?? null\"\n [style.right.px]=\"layout.right ?? null\"\n [style.minWidth.px]=\"layout.minWidth\">\n @for (item of items(); track $index) {\n @if (item.divider) {\n <hr class=\"my-1 border-neutral-100\" />\n } @else {\n <button\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"!!item.disabled\"\n class=\"w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer\"\n (click)=\"selectItem(item)\">\n {{ item.label }}\n </button>\n }\n }\n </div>\n}\n", styles: [":host{display:contents}\n"] }]
|
|
2503
2506
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onDocumentEscape: [{
|
|
2504
2507
|
type: HostListener,
|
|
2505
2508
|
args: ['document:keydown.escape']
|
|
@@ -2558,11 +2561,11 @@ class TailwindDrawer extends TailwindComponent {
|
|
|
2558
2561
|
}, 300);
|
|
2559
2562
|
}
|
|
2560
2563
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDrawer, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2561
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDrawer, isStandalone: true, selector: "tailwind-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, usesInheritance: true, ngImport: i0, template: "@if (isOpen()) {\n <!-- Backdrop -->\n <div\n class=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-1040 transition-opacity duration-300\"\n [class.opacity-100]=\"isVisible()\"\n [class.opacity-0]=\"!isVisible()\"\n (click)=\"closeOnBackdrop() && close()\"\n aria-hidden=\"true\"></div>\n\n <!-- Drawer Panel -->\n <div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"true\" [attr.aria-label]=\"title()\">\n <!-- Header -->\n <div class=\"flex items-center justify-between px-6 py-4 border-b border-
|
|
2564
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDrawer, isStandalone: true, selector: "tailwind-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, usesInheritance: true, ngImport: i0, template: "@if (isOpen()) {\n <!-- Backdrop -->\n <div\n class=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-1040 transition-opacity duration-300\"\n [class.opacity-100]=\"isVisible()\"\n [class.opacity-0]=\"!isVisible()\"\n (click)=\"closeOnBackdrop() && close()\"\n aria-hidden=\"true\"></div>\n\n <!-- Drawer Panel -->\n <div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"true\" [attr.aria-label]=\"title()\">\n <!-- Header -->\n <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\n @if (title()) {\n <h2 class=\"text-lg font-semibold text-neutral-900\">{{ title() }}</h2>\n }\n <button\n type=\"button\"\n class=\"p-1.5 -m-1.5 rounded-lg text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors ml-auto cursor-pointer\"\n aria-label=\"Close\"\n (click)=\"close()\">\n <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n </svg>\n </button>\n </div>\n\n <!-- Body -->\n <div class=\"flex-1 overflow-y-auto px-6 py-5\">\n <ng-content />\n </div>\n\n <!-- Footer -->\n <ng-content select=\"[tailwind-drawer-footer]\" />\n </div>\n}\n", styles: [":host{display:contents}\n"] });
|
|
2562
2565
|
}
|
|
2563
2566
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDrawer, decorators: [{
|
|
2564
2567
|
type: Component,
|
|
2565
|
-
args: [{ selector: 'tailwind-drawer', template: "@if (isOpen()) {\n <!-- Backdrop -->\n <div\n class=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-1040 transition-opacity duration-300\"\n [class.opacity-100]=\"isVisible()\"\n [class.opacity-0]=\"!isVisible()\"\n (click)=\"closeOnBackdrop() && close()\"\n aria-hidden=\"true\"></div>\n\n <!-- Drawer Panel -->\n <div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"true\" [attr.aria-label]=\"title()\">\n <!-- Header -->\n <div class=\"flex items-center justify-between px-6 py-4 border-b border-
|
|
2568
|
+
args: [{ selector: 'tailwind-drawer', template: "@if (isOpen()) {\n <!-- Backdrop -->\n <div\n class=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-1040 transition-opacity duration-300\"\n [class.opacity-100]=\"isVisible()\"\n [class.opacity-0]=\"!isVisible()\"\n (click)=\"closeOnBackdrop() && close()\"\n aria-hidden=\"true\"></div>\n\n <!-- Drawer Panel -->\n <div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"true\" [attr.aria-label]=\"title()\">\n <!-- Header -->\n <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\n @if (title()) {\n <h2 class=\"text-lg font-semibold text-neutral-900\">{{ title() }}</h2>\n }\n <button\n type=\"button\"\n class=\"p-1.5 -m-1.5 rounded-lg text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors ml-auto cursor-pointer\"\n aria-label=\"Close\"\n (click)=\"close()\">\n <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n </svg>\n </button>\n </div>\n\n <!-- Body -->\n <div class=\"flex-1 overflow-y-auto px-6 py-5\">\n <ng-content />\n </div>\n\n <!-- Footer -->\n <ng-content select=\"[tailwind-drawer-footer]\" />\n </div>\n}\n", styles: [":host{display:contents}\n"] }]
|
|
2566
2569
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
|
|
2567
2570
|
|
|
2568
2571
|
class TailwindBreadcrumb extends TailwindComponent {
|
|
@@ -2570,11 +2573,11 @@ class TailwindBreadcrumb extends TailwindComponent {
|
|
|
2570
2573
|
separator = input('>', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
|
|
2571
2574
|
ariaLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
2572
2575
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindBreadcrumb, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2573
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindBreadcrumb, isStandalone: true, selector: "tailwind-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\r\n <ol class=\"inline-flex items-center text-sm\">\r\n @for (item of items(); track item.label; let last = $last; let first = $first) {\r\n <li class=\"inline-flex items-center\">\r\n @if (!first) {\r\n <span class=\"mx-2 text-
|
|
2576
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindBreadcrumb, isStandalone: true, selector: "tailwind-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\r\n <ol class=\"inline-flex items-center text-sm\">\r\n @for (item of items(); track item.label; let last = $last; let first = $first) {\r\n <li class=\"inline-flex items-center\">\r\n @if (!first) {\r\n <span class=\"mx-2 text-neutral-400\" aria-hidden=\"true\">\r\n {{ separator() }}\r\n </span>\r\n }\r\n @if (item.link && !last) {\r\n <a\r\n [routerLink]=\"item.link\"\r\n class=\"inline-flex items-center gap-1 text-neutral-500 hover:text-primary-600 transition-colors font-medium\">\r\n @if (item.icon) {\r\n <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n }\r\n {{ item.label }}\r\n </a>\r\n } @else {\r\n <span\r\n class=\"inline-flex items-center gap-1 font-medium\"\r\n [class.text-neutral-900]=\"last\"\r\n [class.text-neutral-500]=\"!last\"\r\n [attr.aria-current]=\"last ? 'page' : null\">\r\n @if (item.icon) {\r\n <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n }\r\n {{ item.label }}\r\n </span>\r\n }\r\n </li>\r\n }\r\n </ol>\r\n</nav>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }] });
|
|
2574
2577
|
}
|
|
2575
2578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindBreadcrumb, decorators: [{
|
|
2576
2579
|
type: Component,
|
|
2577
|
-
args: [{ imports: [RouterLink, TailwindIcon], selector: 'tailwind-breadcrumb', template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\r\n <ol class=\"inline-flex items-center text-sm\">\r\n @for (item of items(); track item.label; let last = $last; let first = $first) {\r\n <li class=\"inline-flex items-center\">\r\n @if (!first) {\r\n <span class=\"mx-2 text-
|
|
2580
|
+
args: [{ imports: [RouterLink, TailwindIcon], selector: 'tailwind-breadcrumb', template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\r\n <ol class=\"inline-flex items-center text-sm\">\r\n @for (item of items(); track item.label; let last = $last; let first = $first) {\r\n <li class=\"inline-flex items-center\">\r\n @if (!first) {\r\n <span class=\"mx-2 text-neutral-400\" aria-hidden=\"true\">\r\n {{ separator() }}\r\n </span>\r\n }\r\n @if (item.link && !last) {\r\n <a\r\n [routerLink]=\"item.link\"\r\n class=\"inline-flex items-center gap-1 text-neutral-500 hover:text-primary-600 transition-colors font-medium\">\r\n @if (item.icon) {\r\n <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n }\r\n {{ item.label }}\r\n </a>\r\n } @else {\r\n <span\r\n class=\"inline-flex items-center gap-1 font-medium\"\r\n [class.text-neutral-900]=\"last\"\r\n [class.text-neutral-500]=\"!last\"\r\n [attr.aria-current]=\"last ? 'page' : null\">\r\n @if (item.icon) {\r\n <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n }\r\n {{ item.label }}\r\n </span>\r\n }\r\n </li>\r\n }\r\n </ol>\r\n</nav>\r\n", styles: [":host{display:block}\n"] }]
|
|
2578
2581
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
2579
2582
|
|
|
2580
2583
|
class TailwindPagination extends TailwindComponent {
|
|
@@ -2609,11 +2612,11 @@ class TailwindPagination extends TailwindComponent {
|
|
|
2609
2612
|
}
|
|
2610
2613
|
}
|
|
2611
2614
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindPagination, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2612
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindPagination, isStandalone: true, selector: "tailwind-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", onPageChange: "onPageChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n @if (summary()) {\n <span class=\"text-sm text-
|
|
2615
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindPagination, isStandalone: true, selector: "tailwind-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", onPageChange: "onPageChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n @if (summary()) {\n <span class=\"text-sm text-neutral-700 dark:text-neutral-300\">\n {{ summaryText() }}\n </span>\n }\n\n <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n <!-- Previous -->\n <button\n type=\"button\"\n [disabled]=\"currentPage() <= 1\"\n (click)=\"goToPage(currentPage() - 1)\"\n class=\"p-2 rounded-lg text-neutral-500 hover:bg-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n\n @for (page of visiblePages(); track page) {\n <button\n type=\"button\"\n (click)=\"goToPage(page)\"\n class=\"min-w-8 h-8 px-2 rounded-lg text-sm font-medium transition-colors cursor-pointer\"\n [class.bg-primary-600]=\"page === currentPage()\"\n [class.text-white]=\"page === currentPage()\"\n [class.text-neutral-600]=\"page !== currentPage()\"\n [class.hover:bg-neutral-100]=\"page !== currentPage()\">\n {{ page }}\n </button>\n }\n\n <!-- Next -->\n <button\n type=\"button\"\n [disabled]=\"currentPage() >= totalPages()\"\n (click)=\"goToPage(currentPage() + 1)\"\n class=\"p-2 rounded-lg text-neutral-500 hover:bg-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </nav>\n</div>\n", styles: [":host{display:block}\n"] });
|
|
2613
2616
|
}
|
|
2614
2617
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindPagination, decorators: [{
|
|
2615
2618
|
type: Component,
|
|
2616
|
-
args: [{ selector: 'tailwind-pagination', template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n @if (summary()) {\n <span class=\"text-sm text-
|
|
2619
|
+
args: [{ selector: 'tailwind-pagination', template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n @if (summary()) {\n <span class=\"text-sm text-neutral-700 dark:text-neutral-300\">\n {{ summaryText() }}\n </span>\n }\n\n <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n <!-- Previous -->\n <button\n type=\"button\"\n [disabled]=\"currentPage() <= 1\"\n (click)=\"goToPage(currentPage() - 1)\"\n class=\"p-2 rounded-lg text-neutral-500 hover:bg-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n\n @for (page of visiblePages(); track page) {\n <button\n type=\"button\"\n (click)=\"goToPage(page)\"\n class=\"min-w-8 h-8 px-2 rounded-lg text-sm font-medium transition-colors cursor-pointer\"\n [class.bg-primary-600]=\"page === currentPage()\"\n [class.text-white]=\"page === currentPage()\"\n [class.text-neutral-600]=\"page !== currentPage()\"\n [class.hover:bg-neutral-100]=\"page !== currentPage()\">\n {{ page }}\n </button>\n }\n\n <!-- Next -->\n <button\n type=\"button\"\n [disabled]=\"currentPage() >= totalPages()\"\n (click)=\"goToPage(currentPage() + 1)\"\n class=\"p-2 rounded-lg text-neutral-500 hover:bg-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </nav>\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
2617
2620
|
}], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: false }] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }] } });
|
|
2618
2621
|
|
|
2619
2622
|
class TailwindTag extends TailwindComponent {
|
|
@@ -2621,9 +2624,9 @@ class TailwindTag extends TailwindComponent {
|
|
|
2621
2624
|
computedClasses = computed(() => {
|
|
2622
2625
|
const variantMap = {
|
|
2623
2626
|
primary: 'bg-primary-600 text-white',
|
|
2624
|
-
neutral: 'bg-
|
|
2627
|
+
neutral: 'bg-neutral-600 text-white',
|
|
2625
2628
|
success: 'bg-success-600 text-white',
|
|
2626
|
-
warning: 'bg-warning-500 text-
|
|
2629
|
+
warning: 'bg-warning-500 text-neutral-900',
|
|
2627
2630
|
danger: 'bg-danger-600 text-white',
|
|
2628
2631
|
info: 'bg-info-600 text-white'
|
|
2629
2632
|
};
|
|
@@ -2750,14 +2753,14 @@ class TailwindTable extends TailwindComponent {
|
|
|
2750
2753
|
this.sort(key);
|
|
2751
2754
|
}
|
|
2752
2755
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2753
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTable, isStandalone: true, selector: "tailwind-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyColspan: { classPropertyName: "emptyColspan", publicName: "emptyColspan", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSortChange: "onSortChange", onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "onSortZoneClick($event)", "keydown": "onSortZoneKeydown($event)" }, properties: { "attr.data-tw-sort-key": "sortKey()", "attr.data-tw-sort-dir": "sortDir()" } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: TailwindTableRowDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-full overflow-x-auto rounded-lg border border-
|
|
2756
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTable, isStandalone: true, selector: "tailwind-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyColspan: { classPropertyName: "emptyColspan", publicName: "emptyColspan", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSortChange: "onSortChange", onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "onSortZoneClick($event)", "keydown": "onSortZoneKeydown($event)" }, properties: { "attr.data-tw-sort-key": "sortKey()", "attr.data-tw-sort-dir": "sortDir()" } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: TailwindTableRowDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-full overflow-x-auto rounded-lg border border-neutral-200\">\n @if (loading()) {\n <div class=\"flex items-center justify-center py-16 text-neutral-400\">\n <svg class=\"animate-spin w-6 h-6 mr-2\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n </svg>\n Loading...\n </div>\n } @else {\n <!-- `table-fixed`: consente `w-*` / `min-w-*` / `max-w-*` sulle celle e sugli `th` proiettati. -->\n <table class=\"w-full min-w-0 table-fixed text-sm text-left divide-y divide-neutral-100\">\n <ng-content select=\"thead\" />\n @for (row of displayedData(); track row; let i = $index) {\n <ng-container *ngTemplateOutlet=\"rowTemplate().templateRef; context: rowContext(row, i)\" />\n } @empty {\n <tbody>\n <tr>\n <td [attr.colspan]=\"emptyColspan()\">\n {{ emptyMessage() }}\n </td>\n </tr>\n </tbody>\n }\n </table>\n\n @if (paginated() && data().length > 0) {\n <div class=\"px-4 py-3 border-t border-neutral-200 bg-white\">\n <tailwind-pagination\n [totalItems]=\"pagination()?.totalItems ?? data().length\"\n [pageSize]=\"pagination()?.pageSize ?? 10\"\n [currentPage]=\"currentPage()\"\n (onPageChange)=\"currentPage.set($event)\"\n [ariaLabel]=\"pagination()?.ariaLabel ?? 'Pagination'\"\n [summary]=\"paginationSummary()\">\n </tailwind-pagination>\n </div>\n }\n }\n</div>\n", styles: ["@layer components{:host{display:block}:host ::ng-deep :where(thead){background-color:var(--color-neutral-50);border-bottom:1px solid var(--color-neutral-200)}:host ::ng-deep :where(thead th){padding:.75rem 1rem;font-weight:600;color:var(--color-neutral-700);text-align:left;white-space:nowrap;vertical-align:middle}:host ::ng-deep :where(tbody td){padding:.75rem 1rem;color:var(--color-neutral-700)}:host ::ng-deep :where(tbody td[colspan]){padding:2rem 1rem;text-align:center;color:var(--color-neutral-400)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TailwindPagination, selector: "tailwind-pagination", inputs: ["totalItems", "pageSize", "currentPage", "ariaLabel", "summary"], outputs: ["currentPageChange", "onPageChange"] }] });
|
|
2754
2757
|
}
|
|
2755
2758
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTable, decorators: [{
|
|
2756
2759
|
type: Component,
|
|
2757
2760
|
args: [{ selector: 'tailwind-table', imports: [NgTemplateOutlet, TailwindPagination], host: {
|
|
2758
2761
|
'[attr.data-tw-sort-key]': 'sortKey()',
|
|
2759
2762
|
'[attr.data-tw-sort-dir]': 'sortDir()'
|
|
2760
|
-
}, template: "<div class=\"w-full overflow-x-auto rounded-lg border border-
|
|
2763
|
+
}, template: "<div class=\"w-full overflow-x-auto rounded-lg border border-neutral-200\">\n @if (loading()) {\n <div class=\"flex items-center justify-center py-16 text-neutral-400\">\n <svg class=\"animate-spin w-6 h-6 mr-2\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n </svg>\n Loading...\n </div>\n } @else {\n <!-- `table-fixed`: consente `w-*` / `min-w-*` / `max-w-*` sulle celle e sugli `th` proiettati. -->\n <table class=\"w-full min-w-0 table-fixed text-sm text-left divide-y divide-neutral-100\">\n <ng-content select=\"thead\" />\n @for (row of displayedData(); track row; let i = $index) {\n <ng-container *ngTemplateOutlet=\"rowTemplate().templateRef; context: rowContext(row, i)\" />\n } @empty {\n <tbody>\n <tr>\n <td [attr.colspan]=\"emptyColspan()\">\n {{ emptyMessage() }}\n </td>\n </tr>\n </tbody>\n }\n </table>\n\n @if (paginated() && data().length > 0) {\n <div class=\"px-4 py-3 border-t border-neutral-200 bg-white\">\n <tailwind-pagination\n [totalItems]=\"pagination()?.totalItems ?? data().length\"\n [pageSize]=\"pagination()?.pageSize ?? 10\"\n [currentPage]=\"currentPage()\"\n (onPageChange)=\"currentPage.set($event)\"\n [ariaLabel]=\"pagination()?.ariaLabel ?? 'Pagination'\"\n [summary]=\"paginationSummary()\">\n </tailwind-pagination>\n </div>\n }\n }\n</div>\n", styles: ["@layer components{:host{display:block}:host ::ng-deep :where(thead){background-color:var(--color-neutral-50);border-bottom:1px solid var(--color-neutral-200)}:host ::ng-deep :where(thead th){padding:.75rem 1rem;font-weight:600;color:var(--color-neutral-700);text-align:left;white-space:nowrap;vertical-align:middle}:host ::ng-deep :where(tbody td){padding:.75rem 1rem;color:var(--color-neutral-700)}:host ::ng-deep :where(tbody td[colspan]){padding:2rem 1rem;text-align:center;color:var(--color-neutral-400)}}\n"] }]
|
|
2761
2764
|
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyColspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyColspan", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], onSortChange: [{ type: i0.Output, args: ["onSortChange"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], rowTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TailwindTableRowDirective), { isSignal: true }] }], onSortZoneClick: [{
|
|
2762
2765
|
type: HostListener,
|
|
2763
2766
|
args: ['click', ['$event']]
|
|
@@ -2905,11 +2908,11 @@ class TailwindDatePicker extends TailwindComponent {
|
|
|
2905
2908
|
this.showCalendar.set(false);
|
|
2906
2909
|
}
|
|
2907
2910
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDatePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2908
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDatePicker, isStandalone: true, selector: "tailwind-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-
|
|
2911
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDatePicker, isStandalone: true, selector: "tailwind-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n }\n <div class=\"relative\">\n <input\n [attr.id]=\"id() ? id() + '-inner' : null\"\n type=\"text\"\n readonly\n [value]=\"displayValue()\"\n [placeholder]=\"effectivePlaceholder()\"\n class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggleCalendar()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n clip-rule=\"evenodd\" />\n </svg>\n </div>\n\n @if (showCalendar()) {\n <div class=\"absolute z-popover mt-1 bg-white rounded-xl border border-neutral-200 shadow-xl p-4 w-72\">\n <!-- Month/Year nav -->\n <div class=\"flex items-center justify-between mb-3\">\n <button\n type=\"button\"\n (click)=\"prevMonth()\"\n class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-neutral-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n <button\n type=\"button\"\n (click)=\"nextMonth()\"\n class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-neutral-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n <!-- Weekdays -->\n <div class=\"grid grid-cols-7 gap-0 mb-1\">\n @for (day of weekDays; track $index) {\n <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n }\n </div>\n <!-- Days -->\n <div class=\"grid grid-cols-7 gap-0\">\n @for (day of calendarDays(); track $index) {\n @if (day === 0) {\n <div></div>\n } @else {\n <button\n type=\"button\"\n (click)=\"selectDay(day)\"\n class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n [class.bg-primary-600]=\"isSelected(day)\"\n [class.text-white]=\"isSelected(day)\"\n [class.hover:bg-primary-700]=\"isSelected(day)\"\n [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n [class.font-semibold]=\"isToday(day)\"\n [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n {{ day }}\n </button>\n }\n }\n </div>\n <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToToday()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.today }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled() || !draft()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n {{ i18n.confirm }}\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}\n"] });
|
|
2909
2912
|
}
|
|
2910
2913
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDatePicker, decorators: [{
|
|
2911
2914
|
type: Component,
|
|
2912
|
-
args: [{ selector: 'tailwind-date-picker', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-
|
|
2915
|
+
args: [{ selector: 'tailwind-date-picker', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n }\n <div class=\"relative\">\n <input\n [attr.id]=\"id() ? id() + '-inner' : null\"\n type=\"text\"\n readonly\n [value]=\"displayValue()\"\n [placeholder]=\"effectivePlaceholder()\"\n class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggleCalendar()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n clip-rule=\"evenodd\" />\n </svg>\n </div>\n\n @if (showCalendar()) {\n <div class=\"absolute z-popover mt-1 bg-white rounded-xl border border-neutral-200 shadow-xl p-4 w-72\">\n <!-- Month/Year nav -->\n <div class=\"flex items-center justify-between mb-3\">\n <button\n type=\"button\"\n (click)=\"prevMonth()\"\n class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-neutral-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n <button\n type=\"button\"\n (click)=\"nextMonth()\"\n class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-neutral-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n <!-- Weekdays -->\n <div class=\"grid grid-cols-7 gap-0 mb-1\">\n @for (day of weekDays; track $index) {\n <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n }\n </div>\n <!-- Days -->\n <div class=\"grid grid-cols-7 gap-0\">\n @for (day of calendarDays(); track $index) {\n @if (day === 0) {\n <div></div>\n } @else {\n <button\n type=\"button\"\n (click)=\"selectDay(day)\"\n class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n [class.bg-primary-600]=\"isSelected(day)\"\n [class.text-white]=\"isSelected(day)\"\n [class.hover:bg-primary-700]=\"isSelected(day)\"\n [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n [class.font-semibold]=\"isToday(day)\"\n [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n {{ day }}\n </button>\n }\n }\n </div>\n <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToToday()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.today }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled() || !draft()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n {{ i18n.confirm }}\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}\n"] }]
|
|
2913
2916
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onDocumentPointerDown: [{
|
|
2914
2917
|
type: HostListener,
|
|
2915
2918
|
args: ['document:pointerdown', ['$event']]
|
|
@@ -3004,11 +3007,11 @@ class TailwindTimePicker extends TailwindComponent {
|
|
|
3004
3007
|
this.showPanel.set(false);
|
|
3005
3008
|
}
|
|
3006
3009
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3007
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTimePicker, isStandalone: true, selector: "tailwind-time-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-
|
|
3010
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTimePicker, isStandalone: true, selector: "tailwind-time-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n }\n <div class=\"relative\">\n <input\n [attr.id]=\"id() ? id() + '-inner' : null\"\n type=\"text\"\n readonly\n [value]=\"displayValue()\"\n [placeholder]=\"i18n.placeholder\"\n [disabled]=\"isDisabled()\"\n class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n (click)=\"togglePanel()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\"\n clip-rule=\"evenodd\" />\n </svg>\n\n @if (showPanel()) {\n <div\n class=\"absolute left-0 top-full z-popover mt-1 w-52 rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n <div class=\"flex items-center gap-2\">\n <select\n class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n [disabled]=\"isDisabled()\"\n (change)=\"onHourChange($event)\">\n @for (h of hours; track h) {\n <option [value]=\"h\" [selected]=\"h === (draft()?.h ?? 0)\">\n {{ h.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n <span class=\"text-neutral-400 text-sm shrink-0\">:</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n [disabled]=\"isDisabled()\"\n (change)=\"onMinuteChange($event)\">\n @for (m of minutes; track m) {\n <option [value]=\"m\" [selected]=\"m === (draft()?.m ?? 0)\">\n {{ m.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n </div>\n <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToNow()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.now }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n {{ i18n.apply }}\n </button>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block}\n"] });
|
|
3008
3011
|
}
|
|
3009
3012
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTimePicker, decorators: [{
|
|
3010
3013
|
type: Component,
|
|
3011
|
-
args: [{ selector: 'tailwind-time-picker', imports: [], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-
|
|
3014
|
+
args: [{ selector: 'tailwind-time-picker', imports: [], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n }\n <div class=\"relative\">\n <input\n [attr.id]=\"id() ? id() + '-inner' : null\"\n type=\"text\"\n readonly\n [value]=\"displayValue()\"\n [placeholder]=\"i18n.placeholder\"\n [disabled]=\"isDisabled()\"\n class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n (click)=\"togglePanel()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\"\n clip-rule=\"evenodd\" />\n </svg>\n\n @if (showPanel()) {\n <div\n class=\"absolute left-0 top-full z-popover mt-1 w-52 rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n <div class=\"flex items-center gap-2\">\n <select\n class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n [disabled]=\"isDisabled()\"\n (change)=\"onHourChange($event)\">\n @for (h of hours; track h) {\n <option [value]=\"h\" [selected]=\"h === (draft()?.h ?? 0)\">\n {{ h.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n <span class=\"text-neutral-400 text-sm shrink-0\">:</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n [disabled]=\"isDisabled()\"\n (change)=\"onMinuteChange($event)\">\n @for (m of minutes; track m) {\n <option [value]=\"m\" [selected]=\"m === (draft()?.m ?? 0)\">\n {{ m.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n </div>\n <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToNow()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.now }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n {{ i18n.apply }}\n </button>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
3012
3015
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onDocumentPointerDown: [{
|
|
3013
3016
|
type: HostListener,
|
|
3014
3017
|
args: ['document:pointerdown', ['$event']]
|
|
@@ -3187,11 +3190,11 @@ class TailwindDateTimePicker extends TailwindComponent {
|
|
|
3187
3190
|
this.showPanel.set(false);
|
|
3188
3191
|
}
|
|
3189
3192
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDateTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3190
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDateTimePicker, isStandalone: true, selector: "tailwind-datetime-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-
|
|
3193
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDateTimePicker, isStandalone: true, selector: "tailwind-datetime-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n }\n <div class=\"relative\">\n <input\n [attr.id]=\"id() ? id() + '-inner' : null\"\n type=\"text\"\n readonly\n [value]=\"displayValue()\"\n [placeholder]=\"effectivePlaceholder()\"\n class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n [disabled]=\"isDisabled()\"\n (click)=\"togglePanel()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n clip-rule=\"evenodd\" />\n </svg>\n\n @if (showPanel()) {\n <div\n class=\"absolute left-0 top-full z-popover mt-1 w-80 max-w-full rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n <div class=\"flex items-center justify-between mb-3\">\n <button\n type=\"button\"\n (click)=\"prevMonth()\"\n class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-neutral-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n <button\n type=\"button\"\n (click)=\"nextMonth()\"\n class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-neutral-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n <div class=\"grid grid-cols-7 gap-0 mb-1\">\n @for (day of weekDays; track day) {\n <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n }\n </div>\n <div class=\"grid grid-cols-7 gap-0\">\n @for (day of calendarDays(); track $index) {\n @if (day === 0) {\n <div></div>\n } @else {\n <button\n type=\"button\"\n (click)=\"selectDay(day)\"\n class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n [class.bg-primary-600]=\"isSelected(day)\"\n [class.text-white]=\"isSelected(day)\"\n [class.hover:bg-primary-700]=\"isSelected(day)\"\n [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n [class.font-semibold]=\"isToday(day)\"\n [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n {{ day }}\n </button>\n }\n }\n </div>\n <div class=\"mt-3 pt-3 border-t border-neutral-100 flex items-center gap-2\">\n <span class=\"text-xs font-medium text-neutral-600 shrink-0\">{{ i18n.time }}</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n [disabled]=\"isDisabled() || !draft()\"\n (change)=\"onHourChange($event)\">\n @for (h of hours; track h) {\n <option [value]=\"h\" [selected]=\"h === (draft()?.getHours() ?? 0)\">\n {{ h.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n <span class=\"text-neutral-400 text-sm\">:</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n [disabled]=\"isDisabled() || !draft()\"\n (change)=\"onMinuteChange($event)\">\n @for (m of minutes; track m) {\n <option [value]=\"m\" [selected]=\"m === (draft()?.getMinutes() ?? 0)\">\n {{ m.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n </div>\n <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToToday()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.today }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled() || !draft()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n {{ i18n.confirm }}\n </button>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\n"] });
|
|
3191
3194
|
}
|
|
3192
3195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDateTimePicker, decorators: [{
|
|
3193
3196
|
type: Component,
|
|
3194
|
-
args: [{ selector: 'tailwind-datetime-picker', imports: [], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-
|
|
3197
|
+
args: [{ selector: 'tailwind-datetime-picker', imports: [], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n }\n <div class=\"relative\">\n <input\n [attr.id]=\"id() ? id() + '-inner' : null\"\n type=\"text\"\n readonly\n [value]=\"displayValue()\"\n [placeholder]=\"effectivePlaceholder()\"\n class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n [disabled]=\"isDisabled()\"\n (click)=\"togglePanel()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n clip-rule=\"evenodd\" />\n </svg>\n\n @if (showPanel()) {\n <div\n class=\"absolute left-0 top-full z-popover mt-1 w-80 max-w-full rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n <div class=\"flex items-center justify-between mb-3\">\n <button\n type=\"button\"\n (click)=\"prevMonth()\"\n class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-neutral-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n <button\n type=\"button\"\n (click)=\"nextMonth()\"\n class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-neutral-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n <div class=\"grid grid-cols-7 gap-0 mb-1\">\n @for (day of weekDays; track day) {\n <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n }\n </div>\n <div class=\"grid grid-cols-7 gap-0\">\n @for (day of calendarDays(); track $index) {\n @if (day === 0) {\n <div></div>\n } @else {\n <button\n type=\"button\"\n (click)=\"selectDay(day)\"\n class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n [class.bg-primary-600]=\"isSelected(day)\"\n [class.text-white]=\"isSelected(day)\"\n [class.hover:bg-primary-700]=\"isSelected(day)\"\n [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n [class.font-semibold]=\"isToday(day)\"\n [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n {{ day }}\n </button>\n }\n }\n </div>\n <div class=\"mt-3 pt-3 border-t border-neutral-100 flex items-center gap-2\">\n <span class=\"text-xs font-medium text-neutral-600 shrink-0\">{{ i18n.time }}</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n [disabled]=\"isDisabled() || !draft()\"\n (change)=\"onHourChange($event)\">\n @for (h of hours; track h) {\n <option [value]=\"h\" [selected]=\"h === (draft()?.getHours() ?? 0)\">\n {{ h.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n <span class=\"text-neutral-400 text-sm\">:</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n [disabled]=\"isDisabled() || !draft()\"\n (change)=\"onMinuteChange($event)\">\n @for (m of minutes; track m) {\n <option [value]=\"m\" [selected]=\"m === (draft()?.getMinutes() ?? 0)\">\n {{ m.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n </div>\n <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToToday()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.today }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled() || !draft()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n {{ i18n.confirm }}\n </button>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\n"] }]
|
|
3195
3198
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], onDocumentPointerDown: [{
|
|
3196
3199
|
type: HostListener,
|
|
3197
3200
|
args: ['document:pointerdown', ['$event']]
|
|
@@ -3243,11 +3246,11 @@ class TailwindStepper extends TailwindComponent {
|
|
|
3243
3246
|
this.activeIndex.update(v => v - 1);
|
|
3244
3247
|
}
|
|
3245
3248
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3246
|
-
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-white]=\"i <= activeIndex()\"\n [class.border-
|
|
3249
|
+
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-white]=\"i <= activeIndex()\"\n [class.border-neutral-300]=\"i > activeIndex()\"\n [class.text-neutral-500]=\"i > activeIndex()\">\n @if (step.completed()) {\n <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n clip-rule=\"evenodd\" />\n </svg>\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-600]=\"i <= activeIndex()\"\n [class.text-neutral-500]=\"i > activeIndex()\">\n {{ step.label() }}\n </p>\n @if (step.description()) {\n <p class=\"text-xs text-neutral-400\">{{ 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"] });
|
|
3247
3250
|
}
|
|
3248
3251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindStepper, decorators: [{
|
|
3249
3252
|
type: Component,
|
|
3250
|
-
args: [{ selector: 'tailwind-stepper', 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-white]=\"i <= activeIndex()\"\n [class.border-
|
|
3253
|
+
args: [{ selector: 'tailwind-stepper', 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-white]=\"i <= activeIndex()\"\n [class.border-neutral-300]=\"i > activeIndex()\"\n [class.text-neutral-500]=\"i > activeIndex()\">\n @if (step.completed()) {\n <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n clip-rule=\"evenodd\" />\n </svg>\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-600]=\"i <= activeIndex()\"\n [class.text-neutral-500]=\"i > activeIndex()\">\n {{ step.label() }}\n </p>\n @if (step.description()) {\n <p class=\"text-xs text-neutral-400\">{{ 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"] }]
|
|
3251
3254
|
}], 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 }] }] } });
|
|
3252
3255
|
|
|
3253
3256
|
class TailwindAccordionItem extends TailwindComponent {
|
|
@@ -3262,21 +3265,21 @@ class TailwindAccordionItem extends TailwindComponent {
|
|
|
3262
3265
|
}
|
|
3263
3266
|
}
|
|
3264
3267
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAccordionItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3265
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindAccordionItem, isStandalone: true, selector: "tailwind-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onToggle: "onToggle" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"id()\" [ngClass]=\"class()\" class=\"border-b border-
|
|
3268
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindAccordionItem, isStandalone: true, selector: "tailwind-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onToggle: "onToggle" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"id()\" [ngClass]=\"class()\" class=\"border-b border-neutral-200 last:border-b-0\">\r\n <button\r\n type=\"button\"\r\n (click)=\"toggle()\"\r\n class=\"flex items-center justify-between w-full px-5 py-4 text-left text-sm font-medium text-neutral-800 hover:bg-neutral-50 transition-colors cursor-pointer\"\r\n [attr.aria-expanded]=\"isExpanded()\">\r\n <span>{{ title() }}</span>\r\n <svg\r\n class=\"w-4 h-4 text-neutral-400 transition-transform duration-200\"\r\n [class.rotate-180]=\"isExpanded()\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"currentColor\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n @if (isExpanded()) {\r\n <div class=\"px-5 py-4 text-sm text-neutral-600\">\r\n <ng-content />\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3266
3269
|
}
|
|
3267
3270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAccordionItem, decorators: [{
|
|
3268
3271
|
type: Component,
|
|
3269
|
-
args: [{ imports: [CommonModule], selector: 'tailwind-accordion-item', template: "<div [id]=\"id()\" [ngClass]=\"class()\" class=\"border-b border-
|
|
3272
|
+
args: [{ imports: [CommonModule], selector: 'tailwind-accordion-item', template: "<div [id]=\"id()\" [ngClass]=\"class()\" class=\"border-b border-neutral-200 last:border-b-0\">\r\n <button\r\n type=\"button\"\r\n (click)=\"toggle()\"\r\n class=\"flex items-center justify-between w-full px-5 py-4 text-left text-sm font-medium text-neutral-800 hover:bg-neutral-50 transition-colors cursor-pointer\"\r\n [attr.aria-expanded]=\"isExpanded()\">\r\n <span>{{ title() }}</span>\r\n <svg\r\n class=\"w-4 h-4 text-neutral-400 transition-transform duration-200\"\r\n [class.rotate-180]=\"isExpanded()\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"currentColor\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n @if (isExpanded()) {\r\n <div class=\"px-5 py-4 text-sm text-neutral-600\">\r\n <ng-content />\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
|
|
3270
3273
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onToggle: [{ type: i0.Output, args: ["onToggle"] }] } });
|
|
3271
3274
|
|
|
3272
3275
|
class TailwindAccordion extends TailwindComponent {
|
|
3273
3276
|
items = contentChildren(TailwindAccordionItem, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
3274
3277
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAccordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3275
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: TailwindAccordion, isStandalone: true, selector: "tailwind-accordion", queries: [{ propertyName: "items", predicate: TailwindAccordionItem, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n [id]=\"id()\"\r\n [ngClass]=\"class()\"\r\n class=\"border border-
|
|
3278
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: TailwindAccordion, isStandalone: true, selector: "tailwind-accordion", queries: [{ propertyName: "items", predicate: TailwindAccordionItem, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n [id]=\"id()\"\r\n [ngClass]=\"class()\"\r\n class=\"border border-neutral-200 rounded-md overflow-hidden divide-y divide-neutral-200\">\r\n <ng-content />\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3276
3279
|
}
|
|
3277
3280
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAccordion, decorators: [{
|
|
3278
3281
|
type: Component,
|
|
3279
|
-
args: [{ imports: [CommonModule], selector: 'tailwind-accordion', template: "<div\r\n [id]=\"id()\"\r\n [ngClass]=\"class()\"\r\n class=\"border border-
|
|
3282
|
+
args: [{ imports: [CommonModule], selector: 'tailwind-accordion', template: "<div\r\n [id]=\"id()\"\r\n [ngClass]=\"class()\"\r\n class=\"border border-neutral-200 rounded-md overflow-hidden divide-y divide-neutral-200\">\r\n <ng-content />\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
|
|
3280
3283
|
}], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TailwindAccordionItem), { isSignal: true }] }] } });
|
|
3281
3284
|
|
|
3282
3285
|
class TailwindModalRef {
|
|
@@ -3480,11 +3483,11 @@ class TailwindSkeleton extends TailwindComponent {
|
|
|
3480
3483
|
return `${base} ${variantMap[this.variant()]}`;
|
|
3481
3484
|
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
|
|
3482
3485
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSkeleton, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3483
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindSkeleton, isStandalone: true, selector: "tailwind-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n [style.width]=\"width()\"\n [style.height]=\"height() || (variant() === 'circle' ? width() : '1.5rem')\"\n [class]=\"computedClasses()\"\n aria-hidden=\"true\"></div>\n", styles: [":host{display:block}@keyframes tailwind-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tailwind-skeleton-pulse{animation:tailwind-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-
|
|
3486
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindSkeleton, isStandalone: true, selector: "tailwind-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n [style.width]=\"width()\"\n [style.height]=\"height() || (variant() === 'circle' ? width() : '1.5rem')\"\n [class]=\"computedClasses()\"\n aria-hidden=\"true\"></div>\n", styles: [":host{display:block}@keyframes tailwind-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tailwind-skeleton-pulse{animation:tailwind-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-neutral-200) 25%,var(--color-neutral-100) 50%,var(--color-neutral-200) 75%);background-size:200% 100%}\n"] });
|
|
3484
3487
|
}
|
|
3485
3488
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSkeleton, decorators: [{
|
|
3486
3489
|
type: Component,
|
|
3487
|
-
args: [{ selector: 'tailwind-skeleton', template: "<div\n [style.width]=\"width()\"\n [style.height]=\"height() || (variant() === 'circle' ? width() : '1.5rem')\"\n [class]=\"computedClasses()\"\n aria-hidden=\"true\"></div>\n", styles: [":host{display:block}@keyframes tailwind-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tailwind-skeleton-pulse{animation:tailwind-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-
|
|
3490
|
+
args: [{ selector: 'tailwind-skeleton', template: "<div\n [style.width]=\"width()\"\n [style.height]=\"height() || (variant() === 'circle' ? width() : '1.5rem')\"\n [class]=\"computedClasses()\"\n aria-hidden=\"true\"></div>\n", styles: [":host{display:block}@keyframes tailwind-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tailwind-skeleton-pulse{animation:tailwind-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-neutral-200) 25%,var(--color-neutral-100) 50%,var(--color-neutral-200) 75%);background-size:200% 100%}\n"] }]
|
|
3488
3491
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
|
|
3489
3492
|
|
|
3490
3493
|
class TailwindToolbar extends TailwindComponent {
|
|
@@ -3507,8 +3510,8 @@ class TailwindToolbar extends TailwindComponent {
|
|
|
3507
3510
|
? 'min-w-0 flex-1 flex flex-row flex-wrap items-center gap-1'
|
|
3508
3511
|
: 'min-w-0 flex-1 flex flex-col gap-1.5 overflow-y-auto min-h-0', ...(ngDevMode ? [{ debugName: "menuContainerClasses" }] : /* istanbul ignore next */ []));
|
|
3509
3512
|
menuItemButtonClasses = computed(() => this.orientation() === 'horizontal'
|
|
3510
|
-
? 'inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-
|
|
3511
|
-
: 'inline-flex w-full items-center gap-2 rounded-md px-3 py-3 text-left text-sm font-medium text-
|
|
3513
|
+
? 'inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer border-0 bg-transparent'
|
|
3514
|
+
: 'inline-flex w-full items-center gap-2 rounded-md px-3 py-3 text-left text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer border-0 bg-transparent', ...(ngDevMode ? [{ debugName: "menuItemButtonClasses" }] : /* istanbul ignore next */ []));
|
|
3512
3515
|
rootClasses = computed(() => {
|
|
3513
3516
|
const horizontal = this.orientation() === 'horizontal';
|
|
3514
3517
|
const sizeClasses = horizontal
|
|
@@ -3517,7 +3520,7 @@ class TailwindToolbar extends TailwindComponent {
|
|
|
3517
3520
|
: 'container mx-auto h-16'
|
|
3518
3521
|
: 'h-full w-full';
|
|
3519
3522
|
const base = [
|
|
3520
|
-
'bg-white border border-
|
|
3523
|
+
'bg-white border border-neutral-200',
|
|
3521
3524
|
'flex',
|
|
3522
3525
|
sizeClasses,
|
|
3523
3526
|
this.rounded() ? 'rounded-xl' : 'rounded-none',
|
|
@@ -3554,11 +3557,11 @@ class TailwindToolbar extends TailwindComponent {
|
|
|
3554
3557
|
return item.value ?? item.label ?? String(index);
|
|
3555
3558
|
}
|
|
3556
3559
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToolbar, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3557
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindToolbar, isStandalone: true, selector: "tailwind-toolbar", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMenuSelect: "onMenuSelect" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"rootClasses()\">\r\n <div class=\"shrink-0\">\r\n <ng-content select=\"[tailwind-toolbar-logo]\" />\r\n </div>\r\n @if (orientation() === 'horizontal') {\r\n <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\r\n @if (menu().length) {\r\n <div class=\"flex shrink-0 items-center md:hidden\">\r\n <button\r\n type=\"button\"\r\n class=\"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-2 text-
|
|
3560
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindToolbar, isStandalone: true, selector: "tailwind-toolbar", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMenuSelect: "onMenuSelect" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"rootClasses()\">\r\n <div class=\"shrink-0\">\r\n <ng-content select=\"[tailwind-toolbar-logo]\" />\r\n </div>\r\n @if (orientation() === 'horizontal') {\r\n <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\r\n @if (menu().length) {\r\n <div class=\"flex shrink-0 items-center md:hidden\">\r\n <button\r\n type=\"button\"\r\n class=\"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-2 text-neutral-700 transition-colors hover:bg-neutral-100 hover:text-neutral-900\"\r\n [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\r\n aria-haspopup=\"menu\"\r\n aria-label=\"Open navigation menu\"\r\n (click)=\"mobileToolbarMenu.toggle($event)\">\r\n <tailwind-icon icon=\"bars-3\" [size]=\"22\" />\r\n </button>\r\n <tailwind-menu #mobileToolbarMenu [items]=\"menu()\" align=\"left\" (onSelect)=\"selectMenuItem($event)\" />\r\n </div>\r\n }\r\n <div class=\"hidden min-w-0 flex-1 flex-row flex-wrap items-center gap-1 md:flex\">\r\n @for (item of menu(); track menuTrackKey($index, item)) {\r\n @if (item.divider) {\r\n <span class=\"mx-0.5 h-5 w-px shrink-0 self-center bg-neutral-200\" aria-hidden=\"true\"></span>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"!!item.disabled\"\r\n [class]=\"menuItemButtonClasses()\"\r\n [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n (click)=\"selectMenuItem(item)\">\r\n @if (item.icon) {\r\n <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" />\r\n }\r\n @if (menuItemHasVisibleLabel(item)) {\r\n {{ item.label }}\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n </nav>\r\n } @else {\r\n <nav [class]=\"menuContainerClasses()\" [attr.aria-label]=\"'Toolbar menu'\">\r\n @for (item of menu(); track menuTrackKey($index, item)) {\r\n @if (item.divider) {\r\n <hr class=\"my-1 w-full border-0 border-t border-neutral-100\" />\r\n } @else {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"!!item.disabled\"\r\n [class]=\"menuItemButtonClasses()\"\r\n [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\r\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n (click)=\"selectMenuItem(item)\">\r\n @if (item.icon) {\r\n <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" />\r\n }\r\n @if (menuItemHasVisibleLabel(item)) {\r\n {{ item.label }}\r\n }\r\n </button>\r\n }\r\n }\r\n </nav>\r\n }\r\n <div\r\n class=\"flex flex-wrap items-center gap-2 shrink-0\"\r\n [class.justify-end]=\"orientation() === 'horizontal'\"\r\n [class.mt-auto]=\"orientation() === 'vertical'\">\r\n <ng-content select=\"[tailwind-toolbar-end]\" />\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindMenu, selector: "tailwind-menu", inputs: ["items", "align"], outputs: ["onSelect"] }] });
|
|
3558
3561
|
}
|
|
3559
3562
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToolbar, decorators: [{
|
|
3560
3563
|
type: Component,
|
|
3561
|
-
args: [{ imports: [TailwindIcon, TailwindMenu], selector: 'tailwind-toolbar', template: "<div [class]=\"rootClasses()\">\r\n <div class=\"shrink-0\">\r\n <ng-content select=\"[tailwind-toolbar-logo]\" />\r\n </div>\r\n @if (orientation() === 'horizontal') {\r\n <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\r\n @if (menu().length) {\r\n <div class=\"flex shrink-0 items-center md:hidden\">\r\n <button\r\n type=\"button\"\r\n class=\"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-2 text-
|
|
3564
|
+
args: [{ imports: [TailwindIcon, TailwindMenu], selector: 'tailwind-toolbar', template: "<div [class]=\"rootClasses()\">\r\n <div class=\"shrink-0\">\r\n <ng-content select=\"[tailwind-toolbar-logo]\" />\r\n </div>\r\n @if (orientation() === 'horizontal') {\r\n <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\r\n @if (menu().length) {\r\n <div class=\"flex shrink-0 items-center md:hidden\">\r\n <button\r\n type=\"button\"\r\n class=\"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-2 text-neutral-700 transition-colors hover:bg-neutral-100 hover:text-neutral-900\"\r\n [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\r\n aria-haspopup=\"menu\"\r\n aria-label=\"Open navigation menu\"\r\n (click)=\"mobileToolbarMenu.toggle($event)\">\r\n <tailwind-icon icon=\"bars-3\" [size]=\"22\" />\r\n </button>\r\n <tailwind-menu #mobileToolbarMenu [items]=\"menu()\" align=\"left\" (onSelect)=\"selectMenuItem($event)\" />\r\n </div>\r\n }\r\n <div class=\"hidden min-w-0 flex-1 flex-row flex-wrap items-center gap-1 md:flex\">\r\n @for (item of menu(); track menuTrackKey($index, item)) {\r\n @if (item.divider) {\r\n <span class=\"mx-0.5 h-5 w-px shrink-0 self-center bg-neutral-200\" aria-hidden=\"true\"></span>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"!!item.disabled\"\r\n [class]=\"menuItemButtonClasses()\"\r\n [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n (click)=\"selectMenuItem(item)\">\r\n @if (item.icon) {\r\n <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" />\r\n }\r\n @if (menuItemHasVisibleLabel(item)) {\r\n {{ item.label }}\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n </nav>\r\n } @else {\r\n <nav [class]=\"menuContainerClasses()\" [attr.aria-label]=\"'Toolbar menu'\">\r\n @for (item of menu(); track menuTrackKey($index, item)) {\r\n @if (item.divider) {\r\n <hr class=\"my-1 w-full border-0 border-t border-neutral-100\" />\r\n } @else {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"!!item.disabled\"\r\n [class]=\"menuItemButtonClasses()\"\r\n [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\r\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n (click)=\"selectMenuItem(item)\">\r\n @if (item.icon) {\r\n <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" />\r\n }\r\n @if (menuItemHasVisibleLabel(item)) {\r\n {{ item.label }}\r\n }\r\n </button>\r\n }\r\n }\r\n </nav>\r\n }\r\n <div\r\n class=\"flex flex-wrap items-center gap-2 shrink-0\"\r\n [class.justify-end]=\"orientation() === 'horizontal'\"\r\n [class.mt-auto]=\"orientation() === 'vertical'\">\r\n <ng-content select=\"[tailwind-toolbar-end]\" />\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
|
|
3562
3565
|
}], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: false }] }], onMenuSelect: [{ type: i0.Output, args: ["onMenuSelect"] }] } });
|
|
3563
3566
|
|
|
3564
3567
|
class TailwindDivider extends TailwindComponent {
|
|
@@ -3575,25 +3578,22 @@ class TailwindDivider extends TailwindComponent {
|
|
|
3575
3578
|
const inset = this.inset() && this.orientation() === 'horizontal' ? 'mx-4' : '';
|
|
3576
3579
|
const variant = this.variant() === 'dashed' ? 'border-dashed' : 'border-solid';
|
|
3577
3580
|
if (this.orientation() === 'vertical') {
|
|
3578
|
-
return ['self-stretch shrink-0 w-px min-h-full border-0 border-l', variant, 'border-
|
|
3579
|
-
.join(' ');
|
|
3581
|
+
return ['self-stretch shrink-0 w-px min-h-full border-0 border-l', variant, 'border-neutral-200'].join(' ');
|
|
3580
3582
|
}
|
|
3581
|
-
return ['w-full border-0 border-t', variant, 'border-
|
|
3582
|
-
.filter(Boolean)
|
|
3583
|
-
.join(' ');
|
|
3583
|
+
return ['w-full border-0 border-t', variant, 'border-neutral-200', 'my-4', inset].filter(Boolean).join(' ');
|
|
3584
3584
|
}, ...(ngDevMode ? [{ debugName: "ruleClasses" }] : /* istanbul ignore next */ []));
|
|
3585
3585
|
/** Top rule for labeled horizontal layout */
|
|
3586
3586
|
ruleLineClass = computed(() => {
|
|
3587
3587
|
const variant = this.variant() === 'dashed' ? 'border-dashed' : 'border-solid';
|
|
3588
|
-
return ['border-
|
|
3588
|
+
return ['border-neutral-200', variant].join(' ');
|
|
3589
3589
|
}, ...(ngDevMode ? [{ debugName: "ruleLineClass" }] : /* istanbul ignore next */ []));
|
|
3590
3590
|
labeledRowClass = computed(() => ['flex items-center gap-3 w-full my-4', this.inset() ? 'mx-4' : ''].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "labeledRowClass" }] : /* istanbul ignore next */ []));
|
|
3591
3591
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDivider, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3592
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDivider, isStandalone: true, selector: "tailwind-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (isLabeledHorizontal()) {\r\n <div [class]=\"labeledRowClass()\" role=\"separator\" [attr.aria-label]=\"label()\">\r\n <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n <span class=\"text-xs font-medium text-
|
|
3592
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDivider, isStandalone: true, selector: "tailwind-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (isLabeledHorizontal()) {\r\n <div [class]=\"labeledRowClass()\" role=\"separator\" [attr.aria-label]=\"label()\">\r\n <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n <span class=\"text-xs font-medium text-neutral-500 shrink-0\">{{ label() }}</span>\r\n <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n </div>\r\n} @else {\r\n <div [class]=\"ruleClasses()\" role=\"separator\"></div>\r\n}\r\n", styles: [":host{display:block}\n"] });
|
|
3593
3593
|
}
|
|
3594
3594
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDivider, decorators: [{
|
|
3595
3595
|
type: Component,
|
|
3596
|
-
args: [{ selector: 'tailwind-divider', template: "@if (isLabeledHorizontal()) {\r\n <div [class]=\"labeledRowClass()\" role=\"separator\" [attr.aria-label]=\"label()\">\r\n <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n <span class=\"text-xs font-medium text-
|
|
3596
|
+
args: [{ selector: 'tailwind-divider', template: "@if (isLabeledHorizontal()) {\r\n <div [class]=\"labeledRowClass()\" role=\"separator\" [attr.aria-label]=\"label()\">\r\n <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n <span class=\"text-xs font-medium text-neutral-500 shrink-0\">{{ label() }}</span>\r\n <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n </div>\r\n} @else {\r\n <div [class]=\"ruleClasses()\" role=\"separator\"></div>\r\n}\r\n", styles: [":host{display:block}\n"] }]
|
|
3597
3597
|
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
3598
3598
|
|
|
3599
3599
|
class TailwindMeter extends TailwindComponent {
|
|
@@ -3635,7 +3635,7 @@ class TailwindMeter extends TailwindComponent {
|
|
|
3635
3635
|
return { ...seg, widthPct: pct, barClass: this.variantToBarClass(variant) };
|
|
3636
3636
|
});
|
|
3637
3637
|
}, ...(ngDevMode ? [{ debugName: "segmentLayouts" }] : /* istanbul ignore next */ []));
|
|
3638
|
-
trackContainerClasses = computed(() => `flex w-full overflow-hidden rounded-full bg-
|
|
3638
|
+
trackContainerClasses = computed(() => `flex w-full overflow-hidden rounded-full bg-neutral-200 ${this.trackHeightClass()}`, ...(ngDevMode ? [{ debugName: "trackContainerClasses" }] : /* istanbul ignore next */ []));
|
|
3639
3639
|
legendSwatchClass(variant) {
|
|
3640
3640
|
return this.variantToBarClass(variant ?? 'primary');
|
|
3641
3641
|
}
|
|
@@ -3650,11 +3650,11 @@ class TailwindMeter extends TailwindComponent {
|
|
|
3650
3650
|
return map[variant] ?? map['primary'];
|
|
3651
3651
|
}
|
|
3652
3652
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMeter, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3653
|
-
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\">\r\n <div\r\n [class]=\"trackContainerClasses()\"\r\n role=\"meter\"\r\n [attr.aria-valuemin]=\"0\"\r\n [attr.aria-valuemax]=\"scaleMax()\"\r\n [attr.aria-valuenow]=\"totalValue()\"\r\n [attr.aria-label]=\"'Meter'\">\r\n @for (seg of segmentLayouts(); track $index) {\r\n @if (seg.widthPct > 0) {\r\n <div\r\n class=\"h-full min-w-0 transition-all duration-300 ease-out\"\r\n [class]=\"seg.barClass\"\r\n [style.width.%]=\"seg.widthPct\"\r\n [attr.title]=\"seg.label + ': ' + seg.value\"></div>\r\n }\r\n }\r\n </div>\r\n\r\n @if (showLabels()) {\r\n <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-
|
|
3653
|
+
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\">\r\n <div\r\n [class]=\"trackContainerClasses()\"\r\n role=\"meter\"\r\n [attr.aria-valuemin]=\"0\"\r\n [attr.aria-valuemax]=\"scaleMax()\"\r\n [attr.aria-valuenow]=\"totalValue()\"\r\n [attr.aria-label]=\"'Meter'\">\r\n @for (seg of segmentLayouts(); track $index) {\r\n @if (seg.widthPct > 0) {\r\n <div\r\n class=\"h-full min-w-0 transition-all duration-300 ease-out\"\r\n [class]=\"seg.barClass\"\r\n [style.width.%]=\"seg.widthPct\"\r\n [attr.title]=\"seg.label + ': ' + seg.value\"></div>\r\n }\r\n }\r\n </div>\r\n\r\n @if (showLabels()) {\r\n <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-neutral-600\">\r\n @for (seg of segments(); track $index) {\r\n <span class=\"inline-flex items-center gap-1.5\">\r\n <span class=\"inline-block size-2 rounded-sm shrink-0\" [class]=\"legendSwatchClass(seg.variant)\"></span>\r\n <span>{{ seg.label }}</span>\r\n <span class=\"text-neutral-400\">({{ seg.value }})</span>\r\n </span>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
|
|
3654
3654
|
}
|
|
3655
3655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMeter, decorators: [{
|
|
3656
3656
|
type: Component,
|
|
3657
|
-
args: [{ selector: 'tailwind-meter', template: "<div class=\"w-full space-y-2\">\r\n <div\r\n [class]=\"trackContainerClasses()\"\r\n role=\"meter\"\r\n [attr.aria-valuemin]=\"0\"\r\n [attr.aria-valuemax]=\"scaleMax()\"\r\n [attr.aria-valuenow]=\"totalValue()\"\r\n [attr.aria-label]=\"'Meter'\">\r\n @for (seg of segmentLayouts(); track $index) {\r\n @if (seg.widthPct > 0) {\r\n <div\r\n class=\"h-full min-w-0 transition-all duration-300 ease-out\"\r\n [class]=\"seg.barClass\"\r\n [style.width.%]=\"seg.widthPct\"\r\n [attr.title]=\"seg.label + ': ' + seg.value\"></div>\r\n }\r\n }\r\n </div>\r\n\r\n @if (showLabels()) {\r\n <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-
|
|
3657
|
+
args: [{ selector: 'tailwind-meter', template: "<div class=\"w-full space-y-2\">\r\n <div\r\n [class]=\"trackContainerClasses()\"\r\n role=\"meter\"\r\n [attr.aria-valuemin]=\"0\"\r\n [attr.aria-valuemax]=\"scaleMax()\"\r\n [attr.aria-valuenow]=\"totalValue()\"\r\n [attr.aria-label]=\"'Meter'\">\r\n @for (seg of segmentLayouts(); track $index) {\r\n @if (seg.widthPct > 0) {\r\n <div\r\n class=\"h-full min-w-0 transition-all duration-300 ease-out\"\r\n [class]=\"seg.barClass\"\r\n [style.width.%]=\"seg.widthPct\"\r\n [attr.title]=\"seg.label + ': ' + seg.value\"></div>\r\n }\r\n }\r\n </div>\r\n\r\n @if (showLabels()) {\r\n <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-neutral-600\">\r\n @for (seg of segments(); track $index) {\r\n <span class=\"inline-flex items-center gap-1.5\">\r\n <span class=\"inline-block size-2 rounded-sm shrink-0\" [class]=\"legendSwatchClass(seg.variant)\"></span>\r\n <span>{{ seg.label }}</span>\r\n <span class=\"text-neutral-400\">({{ seg.value }})</span>\r\n </span>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
|
|
3658
3658
|
}], 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 }] }] } });
|
|
3659
3659
|
|
|
3660
3660
|
class TailwindSlider extends TailwindComponent {
|
|
@@ -3939,7 +3939,7 @@ class TailwindSlider extends TailwindComponent {
|
|
|
3939
3939
|
useExisting: forwardRef(() => TailwindSlider),
|
|
3940
3940
|
multi: true
|
|
3941
3941
|
}
|
|
3942
|
-
], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (orientation() === 'horizontal') {\r\n <div\r\n #track\r\n class=\"relative w-full touch-none select-none py-3\"\r\n [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n <div class=\"relative h-6 w-full\">\r\n <!-- rail -->\r\n <div\r\n class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-
|
|
3942
|
+
], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (orientation() === 'horizontal') {\r\n <div\r\n #track\r\n class=\"relative w-full touch-none select-none py-3\"\r\n [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n <div class=\"relative h-6 w-full\">\r\n <!-- rail -->\r\n <div\r\n class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-neutral-200\"\r\n [class]=\"trackThickness()\"></div>\r\n\r\n @if (showTicks()) {\r\n @for (p of tickPositions(); track $index) {\r\n <div\r\n class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-neutral-300\"\r\n [style.left.%]=\"p\"></div>\r\n }\r\n }\r\n\r\n <!-- fill -->\r\n <div\r\n class=\"pointer-events-none absolute top-1/2 z-1 -translate-y-1/2 rounded-full\"\r\n [class]=\"trackThickness()\"\r\n [style.background-color]=\"accentVars().fill\"\r\n [style.left.%]=\"fillStartPct()\"\r\n [style.width.%]=\"fillWidthPct()\"></div>\r\n\r\n @if (range()) {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.left.%]=\"lowPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeLow()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.left.%]=\"highPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeHigh()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n (keydown)=\"onKeyDown($event, 1)\"></button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.left.%]=\"singlePct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"singleValue()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n }\r\n </div>\r\n </div>\r\n} @else {\r\n <div\r\n #track\r\n class=\"relative mx-auto h-52 w-10 touch-none select-none\"\r\n [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n <div class=\"relative h-full w-full\">\r\n <div\r\n class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-neutral-200\"\r\n [class]=\"verticalTrackThickness()\"></div>\r\n\r\n @if (showTicks()) {\r\n @for (p of tickPositions(); track $index) {\r\n <div\r\n class=\"pointer-events-none absolute left-1/2 w-2 h-px -translate-x-1/2 translate-y-1/2 bg-neutral-300\"\r\n [style.bottom.%]=\"p\"></div>\r\n }\r\n }\r\n\r\n <div\r\n class=\"pointer-events-none absolute bottom-0 left-1/2 z-1 -translate-x-1/2 rounded-full\"\r\n [class]=\"verticalTrackThickness()\"\r\n [style.background-color]=\"accentVars().fill\"\r\n [style.bottom.%]=\"fillStartPct()\"\r\n [style.height.%]=\"fillWidthPct()\"></div>\r\n\r\n @if (range()) {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.bottom.%]=\"lowPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeLow()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.bottom.%]=\"highPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeHigh()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n (keydown)=\"onKeyDown($event, 1)\"></button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.bottom.%]=\"singlePct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"singleValue()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{display:block}.tailwind-slider-thumb{cursor:pointer}.tailwind-slider-thumb:focus-visible{outline:2px solid var(--slider-ring);outline-offset:2px}.tailwind-slider-thumb:focus:not(:focus-visible){outline:none}.tailwind-slider-thumb:disabled{cursor:not-allowed}\n"] });
|
|
3943
3943
|
}
|
|
3944
3944
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSlider, decorators: [{
|
|
3945
3945
|
type: Component,
|
|
@@ -3949,16 +3949,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
3949
3949
|
useExisting: forwardRef(() => TailwindSlider),
|
|
3950
3950
|
multi: true
|
|
3951
3951
|
}
|
|
3952
|
-
], template: "@if (orientation() === 'horizontal') {\r\n <div\r\n #track\r\n class=\"relative w-full touch-none select-none py-3\"\r\n [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n <div class=\"relative h-6 w-full\">\r\n <!-- rail -->\r\n <div\r\n class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-
|
|
3952
|
+
], template: "@if (orientation() === 'horizontal') {\r\n <div\r\n #track\r\n class=\"relative w-full touch-none select-none py-3\"\r\n [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n <div class=\"relative h-6 w-full\">\r\n <!-- rail -->\r\n <div\r\n class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-neutral-200\"\r\n [class]=\"trackThickness()\"></div>\r\n\r\n @if (showTicks()) {\r\n @for (p of tickPositions(); track $index) {\r\n <div\r\n class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-neutral-300\"\r\n [style.left.%]=\"p\"></div>\r\n }\r\n }\r\n\r\n <!-- fill -->\r\n <div\r\n class=\"pointer-events-none absolute top-1/2 z-1 -translate-y-1/2 rounded-full\"\r\n [class]=\"trackThickness()\"\r\n [style.background-color]=\"accentVars().fill\"\r\n [style.left.%]=\"fillStartPct()\"\r\n [style.width.%]=\"fillWidthPct()\"></div>\r\n\r\n @if (range()) {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.left.%]=\"lowPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeLow()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.left.%]=\"highPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeHigh()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n (keydown)=\"onKeyDown($event, 1)\"></button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.left.%]=\"singlePct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"singleValue()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n }\r\n </div>\r\n </div>\r\n} @else {\r\n <div\r\n #track\r\n class=\"relative mx-auto h-52 w-10 touch-none select-none\"\r\n [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n <div class=\"relative h-full w-full\">\r\n <div\r\n class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-neutral-200\"\r\n [class]=\"verticalTrackThickness()\"></div>\r\n\r\n @if (showTicks()) {\r\n @for (p of tickPositions(); track $index) {\r\n <div\r\n class=\"pointer-events-none absolute left-1/2 w-2 h-px -translate-x-1/2 translate-y-1/2 bg-neutral-300\"\r\n [style.bottom.%]=\"p\"></div>\r\n }\r\n }\r\n\r\n <div\r\n class=\"pointer-events-none absolute bottom-0 left-1/2 z-1 -translate-x-1/2 rounded-full\"\r\n [class]=\"verticalTrackThickness()\"\r\n [style.background-color]=\"accentVars().fill\"\r\n [style.bottom.%]=\"fillStartPct()\"\r\n [style.height.%]=\"fillWidthPct()\"></div>\r\n\r\n @if (range()) {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.bottom.%]=\"lowPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeLow()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.bottom.%]=\"highPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeHigh()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n (keydown)=\"onKeyDown($event, 1)\"></button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.bottom.%]=\"singlePct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"singleValue()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{display:block}.tailwind-slider-thumb{cursor:pointer}.tailwind-slider-thumb:focus-visible{outline:2px solid var(--slider-ring);outline-offset:2px}.tailwind-slider-thumb:focus:not(:focus-visible){outline:none}.tailwind-slider-thumb:disabled{cursor:not-allowed}\n"] }]
|
|
3953
3953
|
}], propDecorators: { 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 }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], hostDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
3954
3954
|
|
|
3955
3955
|
// Batch 1 — Foundation
|
|
3956
3956
|
|
|
3957
3957
|
/**
|
|
3958
|
-
*
|
|
3959
|
-
*
|
|
3958
|
+
* Builds `Provider` entries for each set field on `config`.
|
|
3959
|
+
* Used by {@link defineTheme} and {@link provideTailwindComponents}.
|
|
3960
3960
|
*/
|
|
3961
|
-
function
|
|
3961
|
+
function providersFromTailwindComponentsConfig(config) {
|
|
3962
3962
|
const providers = [];
|
|
3963
3963
|
if (config.iconSize !== undefined) {
|
|
3964
3964
|
providers.push({ provide: TAILWIND_ICON_SIZE, useValue: config.iconSize });
|
|
@@ -3972,10 +3972,101 @@ function provideTailwindComponents(config) {
|
|
|
3972
3972
|
if (config.paginationSummary !== undefined) {
|
|
3973
3973
|
providers.push({ provide: TAILWIND_PAGINATION_SUMMARY, useValue: config.paginationSummary });
|
|
3974
3974
|
}
|
|
3975
|
-
|
|
3976
|
-
|
|
3975
|
+
return providers;
|
|
3976
|
+
}
|
|
3977
|
+
/**
|
|
3978
|
+
* Registers environment-scoped providers for library injection tokens only (no theme `colors`).
|
|
3979
|
+
* Prefer {@link defineTheme}, which registers the same tokens when set plus optional CSS variables.
|
|
3980
|
+
*
|
|
3981
|
+
* @deprecated Use {@link defineTheme} with the same fields (`iconSize`, `datetimeLanguage`, etc.).
|
|
3982
|
+
*/
|
|
3983
|
+
function provideTailwindComponents(config) {
|
|
3984
|
+
return makeEnvironmentProviders(providersFromTailwindComponentsConfig(config));
|
|
3985
|
+
}
|
|
3986
|
+
const SHADES_WITH_950 = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
3987
|
+
const SHADES_TO_900 = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
|
3988
|
+
function shadesForSemantic(semantic) {
|
|
3989
|
+
switch (semantic) {
|
|
3990
|
+
case 'success':
|
|
3991
|
+
case 'warning':
|
|
3992
|
+
case 'danger':
|
|
3993
|
+
case 'info':
|
|
3994
|
+
return SHADES_TO_900;
|
|
3995
|
+
default:
|
|
3996
|
+
return SHADES_WITH_950;
|
|
3977
3997
|
}
|
|
3978
|
-
|
|
3998
|
+
}
|
|
3999
|
+
function isShadeRecord(value) {
|
|
4000
|
+
return typeof value === 'object' && value !== null;
|
|
4001
|
+
}
|
|
4002
|
+
/**
|
|
4003
|
+
* Builds `[CSS custom property name, value]` pairs for {@link defineTheme}.
|
|
4004
|
+
* Exported for unit tests.
|
|
4005
|
+
*/
|
|
4006
|
+
function buildTailwindThemeVariableEntries(config) {
|
|
4007
|
+
const colors = config.colors;
|
|
4008
|
+
if (!colors) {
|
|
4009
|
+
return [];
|
|
4010
|
+
}
|
|
4011
|
+
const entries = [];
|
|
4012
|
+
const dangerOrError = colors.danger ?? colors.error;
|
|
4013
|
+
const pairs = [
|
|
4014
|
+
['primary', colors.primary],
|
|
4015
|
+
['neutral', colors.neutral],
|
|
4016
|
+
['success', colors.success],
|
|
4017
|
+
['warning', colors.warning],
|
|
4018
|
+
['danger', dangerOrError],
|
|
4019
|
+
['info', colors.info]
|
|
4020
|
+
];
|
|
4021
|
+
for (const [semantic, value] of pairs) {
|
|
4022
|
+
if (value === undefined) {
|
|
4023
|
+
continue;
|
|
4024
|
+
}
|
|
4025
|
+
if (typeof value === 'string') {
|
|
4026
|
+
const palette = value.trim();
|
|
4027
|
+
if (!palette) {
|
|
4028
|
+
continue;
|
|
4029
|
+
}
|
|
4030
|
+
for (const shade of shadesForSemantic(semantic)) {
|
|
4031
|
+
entries.push([`--color-${semantic}-${shade}`, `var(--color-${palette}-${shade})`]);
|
|
4032
|
+
}
|
|
4033
|
+
}
|
|
4034
|
+
else if (isShadeRecord(value)) {
|
|
4035
|
+
for (const [shade, color] of Object.entries(value)) {
|
|
4036
|
+
if (color !== undefined && color !== '') {
|
|
4037
|
+
entries.push([`--color-${semantic}-${shade}`, color]);
|
|
4038
|
+
}
|
|
4039
|
+
}
|
|
4040
|
+
}
|
|
4041
|
+
}
|
|
4042
|
+
return entries;
|
|
4043
|
+
}
|
|
4044
|
+
function applyTailwindThemeToElement(element, config) {
|
|
4045
|
+
for (const [prop, val] of buildTailwindThemeVariableEntries(config)) {
|
|
4046
|
+
element.style.setProperty(prop, val);
|
|
4047
|
+
}
|
|
4048
|
+
}
|
|
4049
|
+
/**
|
|
4050
|
+
* Registers environment-scoped library defaults: optional **injection tokens** from {@link TailwindComponentsConfig}
|
|
4051
|
+
* plus an app initializer that applies optional **`colors`** on
|
|
4052
|
+
* `document.documentElement` in the browser. Add as a single entry in `providers` (no spread).
|
|
4053
|
+
*
|
|
4054
|
+
* Palette **strings** (e.g. `'indigo'`) rely on `--color-indigo-*` existing in the CSS bundle; the
|
|
4055
|
+
* library stylesheet safelists Tailwind’s default palette names for that reason.
|
|
4056
|
+
*/
|
|
4057
|
+
function defineTheme(config) {
|
|
4058
|
+
const tokenProviders = providersFromTailwindComponentsConfig(config);
|
|
4059
|
+
return makeEnvironmentProviders([
|
|
4060
|
+
...tokenProviders,
|
|
4061
|
+
provideAppInitializer(() => {
|
|
4062
|
+
const platformId = inject(PLATFORM_ID);
|
|
4063
|
+
if (!isPlatformBrowser(platformId)) {
|
|
4064
|
+
return;
|
|
4065
|
+
}
|
|
4066
|
+
const doc = inject(DOCUMENT);
|
|
4067
|
+
applyTailwindThemeToElement(doc.documentElement, config);
|
|
4068
|
+
})
|
|
4069
|
+
]);
|
|
3979
4070
|
}
|
|
3980
4071
|
|
|
3981
4072
|
/*
|
|
@@ -3987,5 +4078,5 @@ function provideTailwindComponents(config) {
|
|
|
3987
4078
|
* Generated bundle index. Do not edit.
|
|
3988
4079
|
*/
|
|
3989
4080
|
|
|
3990
|
-
export { TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_HEROICON_NAMES, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_PAGINATION_SUMMARY, TW_TABLE_SORT_DIR_ATTR, TW_TABLE_SORT_KEY_ATTR, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSortHeaderDirective, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTableRowDirective, TailwindTableRowDirective as TailwindTableRowTemplateDirective, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload, provideTailwindComponents };
|
|
4081
|
+
export { TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_HEROICON_NAMES, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_PAGINATION_SUMMARY, TW_TABLE_SORT_DIR_ATTR, TW_TABLE_SORT_KEY_ATTR, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSortHeaderDirective, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTableRowDirective, TailwindTableRowDirective as TailwindTableRowTemplateDirective, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload, defineTheme, provideTailwindComponents };
|
|
3991
4082
|
//# sourceMappingURL=angular-tailwind-components.mjs.map
|