angular-tailwind-components 1.8.3-RC3 → 1.8.3-RC5
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.
|
@@ -348,10 +348,10 @@ class TailwindComponent {
|
|
|
348
348
|
id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
349
349
|
/** Custom CSS classes to append */
|
|
350
350
|
class = input(undefined, { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
351
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
352
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
351
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
352
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: TailwindComponent, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id() || null", "class": "class() || null" } }, ngImport: i0 });
|
|
353
353
|
}
|
|
354
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
354
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindComponent, decorators: [{
|
|
355
355
|
type: Directive,
|
|
356
356
|
args: [{
|
|
357
357
|
host: {
|
|
@@ -463,10 +463,10 @@ class TailwindTooltip extends TailwindComponent {
|
|
|
463
463
|
window.removeEventListener('scroll', this.scrollListener, true);
|
|
464
464
|
window.removeEventListener('resize', this.scrollListener, true);
|
|
465
465
|
}
|
|
466
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
467
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
466
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTooltip, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
467
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: TailwindTooltip, isStandalone: true, selector: "tailwind-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltipEl", first: true, predicate: ["tooltipEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #tooltipEl role=\"tooltip\" [class]=\"tooltipClasses()\" [style.top.px]=\"topPos()\" [style.left.px]=\"leftPos()\">\n {{ text() }}\n <!-- Arrow -->\n <div [class]=\"arrowClasses()\"></div>\n</div>\n", styles: [":host{display:inline-flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
468
468
|
}
|
|
469
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
469
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTooltip, decorators: [{
|
|
470
470
|
type: Component,
|
|
471
471
|
args: [{ selector: 'tailwind-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tooltipEl role=\"tooltip\" [class]=\"tooltipClasses()\" [style.top.px]=\"topPos()\" [style.left.px]=\"leftPos()\">\n {{ text() }}\n <!-- Arrow -->\n <div [class]=\"arrowClasses()\"></div>\n</div>\n", styles: [":host{display:inline-flex}\n"] }]
|
|
472
472
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], tooltipEl: [{ type: i0.ViewChild, args: ['tooltipEl', { isSignal: true }] }] } });
|
|
@@ -568,10 +568,10 @@ class TailwindTooltipDirective {
|
|
|
568
568
|
this.clearHideTimeout();
|
|
569
569
|
this.destroyComponent();
|
|
570
570
|
}
|
|
571
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
572
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
571
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
572
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: TailwindTooltipDirective, isStandalone: true, selector: "[tooltip]", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "focusin": "show()", "mouseleave": "hideFromPointer()", "focusout": "hideFromFocus($event)" } }, ngImport: i0 });
|
|
573
573
|
}
|
|
574
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
574
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTooltipDirective, decorators: [{
|
|
575
575
|
type: Directive,
|
|
576
576
|
args: [{
|
|
577
577
|
selector: '[tooltip]',
|
|
@@ -599,10 +599,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
599
599
|
*/
|
|
600
600
|
class TailwindTableRowDirective {
|
|
601
601
|
templateRef = inject((TemplateRef));
|
|
602
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
603
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
602
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTableRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
603
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: TailwindTableRowDirective, isStandalone: true, selector: "[tailwindTableRow]", ngImport: i0 });
|
|
604
604
|
}
|
|
605
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
605
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTableRowDirective, decorators: [{
|
|
606
606
|
type: Directive,
|
|
607
607
|
args: [{
|
|
608
608
|
selector: '[tailwindTableRow]',
|
|
@@ -645,10 +645,10 @@ class TailwindIcon extends TailwindComponent {
|
|
|
645
645
|
return custom ? `tailwind-icon-glyph ${custom}` : 'tailwind-icon-glyph';
|
|
646
646
|
}, ...(ngDevMode ? [{ debugName: "glyphClasses" }] : /* istanbul ignore next */ []));
|
|
647
647
|
maskImage = computed(() => `url("${this.src()}")`, ...(ngDevMode ? [{ debugName: "maskImage" }] : /* istanbul ignore next */ []));
|
|
648
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
649
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
648
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindIcon, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
649
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TailwindIcon, isStandalone: true, selector: "tailwind-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, usesInheritance: true, ngImport: i0, template: "<span\n [class]=\"glyphClasses()\"\n [style.width.px]=\"pixelSize()\"\n [style.height.px]=\"pixelSize()\"\n [style.mask-image]=\"maskImage()\"\n [style.-webkit-mask-image]=\"maskImage()\"\n [attr.aria-hidden]=\"true\"\n [attr.aria-label]=\"icon()\"></span>\n", styles: [".tailwind-icon-glyph{display:block;flex-shrink:0;background-color:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
650
650
|
}
|
|
651
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
651
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindIcon, decorators: [{
|
|
652
652
|
type: Component,
|
|
653
653
|
args: [{ selector: 'tailwind-icon', host: {
|
|
654
654
|
'[class]': 'hostClasses()'
|
|
@@ -757,14 +757,13 @@ class TailwindSortHeaderDirective {
|
|
|
757
757
|
this.labelWrapper = wrapper;
|
|
758
758
|
return wrapper;
|
|
759
759
|
}
|
|
760
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
761
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
760
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindSortHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
761
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", 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: "cursor-pointer whitespace-nowrap text-left select-none hover:text-neutral-900" }, ngImport: i0 });
|
|
762
762
|
}
|
|
763
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
763
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindSortHeaderDirective, decorators: [{
|
|
764
764
|
type: Directive,
|
|
765
765
|
args: [{
|
|
766
766
|
selector: '[tailwindSortHeader]',
|
|
767
|
-
standalone: true,
|
|
768
767
|
host: {
|
|
769
768
|
class: 'cursor-pointer whitespace-nowrap text-left select-none hover:text-neutral-900',
|
|
770
769
|
'[attr.tabindex]': '0',
|
|
@@ -899,10 +898,10 @@ class TailwindButton extends TailwindComponent {
|
|
|
899
898
|
this.onClick.emit(event);
|
|
900
899
|
}
|
|
901
900
|
}
|
|
902
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
903
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
901
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
902
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindButton, isStandalone: true, selector: "tailwind-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: "<button\n [ngClass]=\"computedClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n (click)=\"handleClick($event)\">\n <span class=\"inline-flex min-w-0 items-center justify-center gap-2\">\n @if (icon() && iconPosition() === 'left') {\n <tailwind-icon [icon]=\"icon()!\" [size]=\"iconPixelSize()\" class=\"shrink-0\" />\n }\n <span class=\"tailwind-button-label inline-flex min-w-0 items-center empty:hidden\">\n <ng-content />\n </span>\n @if (icon() && iconPosition() === 'right') {\n <tailwind-icon [icon]=\"icon()!\" [size]=\"iconPixelSize()\" class=\"shrink-0\" />\n }\n </span>\n</button>\n", styles: [":host{display:inline-block}.tailwind-btn-spinner{animation:tailwind-spin 1s linear infinite;width:1em;height:1em}@keyframes tailwind-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
904
903
|
}
|
|
905
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
904
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindButton, decorators: [{
|
|
906
905
|
type: Component,
|
|
907
906
|
args: [{ imports: [NgClass, TailwindIcon], selector: 'tailwind-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [ngClass]=\"computedClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n (click)=\"handleClick($event)\">\n <span class=\"inline-flex min-w-0 items-center justify-center gap-2\">\n @if (icon() && iconPosition() === 'left') {\n <tailwind-icon [icon]=\"icon()!\" [size]=\"iconPixelSize()\" class=\"shrink-0\" />\n }\n <span class=\"tailwind-button-label inline-flex min-w-0 items-center empty:hidden\">\n <ng-content />\n </span>\n @if (icon() && iconPosition() === 'right') {\n <tailwind-icon [icon]=\"icon()!\" [size]=\"iconPixelSize()\" class=\"shrink-0\" />\n }\n </span>\n</button>\n", styles: [":host{display:inline-block}.tailwind-btn-spinner{animation:tailwind-spin 1s linear infinite;width:1em;height:1em}@keyframes tailwind-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
908
907
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
|
|
@@ -972,8 +971,8 @@ class TailwindInput extends TailwindComponent {
|
|
|
972
971
|
onBlur() {
|
|
973
972
|
this.onTouched();
|
|
974
973
|
}
|
|
975
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
976
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
974
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
975
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindInput, isStandalone: true, selector: "tailwind-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
|
|
977
976
|
{
|
|
978
977
|
provide: NG_VALUE_ACCESSOR,
|
|
979
978
|
useExisting: forwardRef(() => TailwindInput),
|
|
@@ -981,7 +980,7 @@ class TailwindInput extends TailwindComponent {
|
|
|
981
980
|
}
|
|
982
981
|
], 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
983
982
|
}
|
|
984
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
983
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindInput, decorators: [{
|
|
985
984
|
type: Component,
|
|
986
985
|
args: [{ selector: 'tailwind-input', providers: [
|
|
987
986
|
{
|
|
@@ -1068,8 +1067,8 @@ class TailwindTextarea extends TailwindComponent {
|
|
|
1068
1067
|
onBlur() {
|
|
1069
1068
|
this.onTouched();
|
|
1070
1069
|
}
|
|
1071
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1072
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1070
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTextarea, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1071
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindTextarea, isStandalone: true, selector: "tailwind-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
|
|
1073
1072
|
{
|
|
1074
1073
|
provide: NG_VALUE_ACCESSOR,
|
|
1075
1074
|
useExisting: forwardRef(() => TailwindTextarea),
|
|
@@ -1077,7 +1076,7 @@ class TailwindTextarea extends TailwindComponent {
|
|
|
1077
1076
|
}
|
|
1078
1077
|
], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-textarea-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 <textarea\n [attr.id]=\"id() ? id() + '-inner' : null\"\n [placeholder]=\"placeholder()\"\n [rows]=\"rows()\"\n [attr.cols]=\"cols() ?? null\"\n [attr.maxlength]=\"maxlength() ?? null\"\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]=\"textareaClasses()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"></textarea>\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1079
1078
|
}
|
|
1080
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1079
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTextarea, decorators: [{
|
|
1081
1080
|
type: Component,
|
|
1082
1081
|
args: [{ selector: 'tailwind-textarea', providers: [
|
|
1083
1082
|
{
|
|
@@ -1291,8 +1290,8 @@ class TailwindUpload extends TailwindComponent {
|
|
|
1291
1290
|
reader.readAsDataURL(file);
|
|
1292
1291
|
});
|
|
1293
1292
|
}
|
|
1294
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1295
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1293
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1294
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindUpload, isStandalone: true, selector: "tailwind-upload", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, areaTitle: { classPropertyName: "areaTitle", publicName: "areaTitle", isSignal: true, isRequired: false, transformFunction: null }, areaHint: { classPropertyName: "areaHint", publicName: "areaHint", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeBytes: { classPropertyName: "maxFileSizeBytes", publicName: "maxFileSizeBytes", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, clearText: { classPropertyName: "clearText", publicName: "clearText", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", filesSelected: "filesSelected", validationError: "validationError" }, providers: [
|
|
1296
1295
|
{
|
|
1297
1296
|
provide: NG_VALUE_ACCESSOR,
|
|
1298
1297
|
useExisting: forwardRef(() => TailwindUpload),
|
|
@@ -1300,7 +1299,7 @@ class TailwindUpload extends TailwindComponent {
|
|
|
1300
1299
|
}
|
|
1301
1300
|
], 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\">\n @if (label()) {\n <label [attr.for]=\"fileInputId()\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\n {{ label() }}\n </label>\n }\n\n <input\n #fileInput\n type=\"file\"\n class=\"sr-only\"\n [attr.id]=\"fileInputId()\"\n [accept]=\"accept() ?? null\"\n [attr.multiple]=\"multiple() ? '' : null\"\n [disabled]=\"isDisabled()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"blurHost()\" />\n\n @if (variant() === 'button') {\n <div class=\"flex flex-wrap items-center gap-2\">\n <tailwind-button\n type=\"button\"\n color=\"primary\"\n kind=\"solid\"\n [size]=\"size()\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"triggerPicker($event)\">\n {{ buttonLabel() }}\n </tailwind-button>\n @if (showClear() && value()) {\n <tailwind-button\n kind=\"text\"\n color=\"primary\"\n size=\"sm\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"clear($event)\">\n {{ clearText() }}\n </tailwind-button>\n }\n </div>\n } @else {\n <div class=\"flex flex-col gap-2\">\n <div\n role=\"button\"\n tabindex=\"0\"\n [class]=\"areaClasses()\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n (click)=\"triggerPicker($event)\"\n (keydown)=\"onKeydownArea($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event)\">\n <tailwind-icon icon=\"cloud-arrow-up\" [size]=\"40\" />\n <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\n <span class=\"text-xs text-neutral-500\">{{ areaHint() }}</span>\n </div>\n @if (showClear() && value()) {\n <tailwind-button\n kind=\"text\"\n color=\"primary\"\n size=\"sm\"\n class=\"self-start\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"clear($event)\">\n {{ clearText() }}\n </tailwind-button>\n }\n </div>\n }\n\n @if (selectedNames().length) {\n <p class=\"truncate text-xs text-neutral-600\" [attr.title]=\"selectedNames().join(', ')\">\n {{ selectedNames().join(', ') }}\n </p>\n }\n\n @if (helperText() && !hasError()) {\n <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-neutral-500\">\n {{ helperText() }}\n </p>\n }\n @if (errorText() && hasError()) {\n <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\n {{ errorText() }}\n </p>\n }\n</div>\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", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1302
1301
|
}
|
|
1303
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1302
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindUpload, decorators: [{
|
|
1304
1303
|
type: Component,
|
|
1305
1304
|
args: [{ selector: 'tailwind-upload', imports: [TailwindIcon, TailwindButton], providers: [
|
|
1306
1305
|
{
|
|
@@ -1524,8 +1523,8 @@ class TailwindInputOtp extends TailwindComponent {
|
|
|
1524
1523
|
el?.select();
|
|
1525
1524
|
});
|
|
1526
1525
|
}
|
|
1527
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1528
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1526
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindInputOtp, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1527
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindInputOtp, isStandalone: true, selector: "tailwind-input-otp", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, integerOnly: { classPropertyName: "integerOnly", publicName: "integerOnly", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, separatorAfterIndex: { classPropertyName: "separatorAfterIndex", publicName: "separatorAfterIndex", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed" }, providers: [
|
|
1529
1528
|
{
|
|
1530
1529
|
provide: NG_VALUE_ACCESSOR,
|
|
1531
1530
|
useExisting: forwardRef(() => TailwindInputOtp),
|
|
@@ -1533,7 +1532,7 @@ class TailwindInputOtp extends TailwindComponent {
|
|
|
1533
1532
|
}
|
|
1534
1533
|
], 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\">\n @if (label()) {\n <label [attr.for]=\"cellId(0)\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\n {{ label() }}\n </label>\n }\n\n <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\n @for (idx of slotIndexes(); track idx) {\n <input\n #otpDigit\n [attr.id]=\"cellId(idx)\"\n [type]=\"inputType()\"\n [attr.inputmode]=\"inputMode()\"\n [attr.autocomplete]=\"autocompleteForSlot(idx)\"\n [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n maxlength=\"1\"\n spellcheck=\"false\"\n [class]=\"cellClasses()\"\n [value]=\"digitAt(idx)\"\n (input)=\"onInput($event, idx)\"\n (keydown)=\"onKeydown($event, idx)\"\n (paste)=\"onPaste($event, idx)\"\n (focus)=\"onSlotFocus(idx)\" />\n @if (showSeparatorAfter(idx)) {\n <span class=\"select-none text-neutral-500\" aria-hidden=\"true\">{{ separator() }}</span>\n }\n }\n </div>\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1535
1534
|
}
|
|
1536
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1535
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindInputOtp, decorators: [{
|
|
1537
1536
|
type: Component,
|
|
1538
1537
|
args: [{ selector: 'tailwind-input-otp', providers: [
|
|
1539
1538
|
{
|
|
@@ -1598,8 +1597,8 @@ class TailwindCheckbox extends TailwindComponent {
|
|
|
1598
1597
|
this.onChange(val);
|
|
1599
1598
|
this.onTouched();
|
|
1600
1599
|
}
|
|
1601
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1602
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1600
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1601
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindCheckbox, isStandalone: true, selector: "tailwind-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [
|
|
1603
1602
|
{
|
|
1604
1603
|
provide: NG_VALUE_ACCESSOR,
|
|
1605
1604
|
useExisting: forwardRef(() => TailwindCheckbox),
|
|
@@ -1607,7 +1606,7 @@ class TailwindCheckbox extends TailwindComponent {
|
|
|
1607
1606
|
}
|
|
1608
1607
|
], 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 flex items-center justify-center 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 <tailwind-icon icon=\"check\" [size]=\"checkIconSize()\" class=\"text-white shrink-0\" />\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"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1609
1608
|
}
|
|
1610
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1609
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindCheckbox, decorators: [{
|
|
1611
1610
|
type: Component,
|
|
1612
1611
|
args: [{ imports: [TailwindIcon], selector: 'tailwind-checkbox', providers: [
|
|
1613
1612
|
{
|
|
@@ -1677,8 +1676,8 @@ class TailwindRadioGroup extends TailwindComponent {
|
|
|
1677
1676
|
this.onChange(optionValue);
|
|
1678
1677
|
this.onTouched();
|
|
1679
1678
|
}
|
|
1680
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1681
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1679
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindRadioGroup, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1680
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindRadioGroup, isStandalone: true, selector: "tailwind-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
|
|
1682
1681
|
{
|
|
1683
1682
|
provide: NG_VALUE_ACCESSOR,
|
|
1684
1683
|
useExisting: forwardRef(() => TailwindRadioGroup),
|
|
@@ -1686,7 +1685,7 @@ class TailwindRadioGroup extends TailwindComponent {
|
|
|
1686
1685
|
}
|
|
1687
1686
|
], 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1688
1687
|
}
|
|
1689
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1688
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindRadioGroup, decorators: [{
|
|
1690
1689
|
type: Component,
|
|
1691
1690
|
args: [{ selector: 'tailwind-radio-group', providers: [
|
|
1692
1691
|
{
|
|
@@ -1990,8 +1989,8 @@ class TailwindSelect extends TailwindComponent {
|
|
|
1990
1989
|
}
|
|
1991
1990
|
}
|
|
1992
1991
|
}
|
|
1993
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1994
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1992
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1993
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindSelect, isStandalone: true, selector: "tailwind-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
|
|
1995
1994
|
{
|
|
1996
1995
|
provide: NG_VALUE_ACCESSOR,
|
|
1997
1996
|
useExisting: forwardRef(() => TailwindSelect),
|
|
@@ -1999,7 +1998,7 @@ class TailwindSelect extends TailwindComponent {
|
|
|
1999
1998
|
}
|
|
2000
1999
|
], 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-label]=\"comboboxAriaLabel()\"\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 <tailwind-icon\n icon=\"chevron-down\"\n [size]=\"16\"\n class=\"shrink-0 ml-2 text-neutral-600 transition-transform duration-150\"\n [class.rotate-180]=\"isOpen()\"\n aria-hidden=\"true\" />\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 <tailwind-icon icon=\"check\" [size]=\"16\" class=\"text-primary-600 shrink-0\" aria-hidden=\"true\" />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2001
2000
|
}
|
|
2002
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2001
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindSelect, decorators: [{
|
|
2003
2002
|
type: Component,
|
|
2004
2003
|
args: [{ imports: [TailwindIcon], selector: 'tailwind-select', providers: [
|
|
2005
2004
|
{
|
|
@@ -2347,8 +2346,8 @@ class TailwindAutocomplete extends TailwindComponent {
|
|
|
2347
2346
|
this.isOpen.set(false);
|
|
2348
2347
|
this.activeIndex.set(-1);
|
|
2349
2348
|
}
|
|
2350
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2351
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2349
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2350
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindAutocomplete, isStandalone: true, selector: "tailwind-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, filterLocally: { classPropertyName: "filterLocally", publicName: "filterLocally", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch" }, providers: [
|
|
2352
2351
|
{
|
|
2353
2352
|
provide: NG_VALUE_ACCESSOR,
|
|
2354
2353
|
useExisting: forwardRef(() => TailwindAutocomplete),
|
|
@@ -2356,7 +2355,7 @@ class TailwindAutocomplete extends TailwindComponent {
|
|
|
2356
2355
|
}
|
|
2357
2356
|
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"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 <input\r\n type=\"text\"\r\n role=\"combobox\"\r\n aria-autocomplete=\"list\"\r\n [attr.id]=\"id() ? id() + '-inner' : null\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-controls]=\"listboxId()\"\r\n [attr.aria-activedescendant]=\"\r\n isOpen() && activeIndex() >= 0 ? listboxId() + '-option-' + activeIndex() : null\r\n \"\r\n [attr.aria-invalid]=\"hasError() || null\"\r\n [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n [placeholder]=\"placeholder()\"\r\n [disabled]=\"isDisabled()\"\r\n [value]=\"searchQuery()\"\r\n [class]=\"inputClasses()\"\r\n (input)=\"onInputChange($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n (keydown)=\"onKeydown($event)\" />\r\n\r\n <ng-content />\r\n\r\n @if (helperText() && !hasError()) {\r\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">{{ helperText() }}</p>\r\n }\r\n @if (errorText() && hasError()) {\r\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\r\n }\r\n</div>\r\n\r\n<ng-template #panelTemplate>\r\n <ul\r\n role=\"listbox\"\r\n [attr.id]=\"listboxId()\"\r\n class=\"w-full bg-white border border-neutral-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\r\n @for (option of filteredOptions(); track option.value; let i = $index) {\r\n <li\r\n role=\"option\"\r\n [attr.id]=\"listboxId() + '-option-' + i\"\r\n [attr.aria-selected]=\"isOptionSelected(option)\"\r\n [attr.aria-disabled]=\"option.disabled || null\"\r\n [class]=\"optionClasses(i, option)\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"selectOption(option)\"\r\n (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\r\n @if (itemTemplate()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"itemTemplate()!; context: itemContext(option, i)\" />\r\n } @else {\r\n <span>{{ option.label }}</span>\r\n @if (isOptionSelected(option)) {\r\n <tailwind-icon icon=\"check\" [size]=\"16\" class=\"text-primary-600 shrink-0\" aria-hidden=\"true\" />\r\n }\r\n }\r\n </li>\r\n } @empty {\r\n <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-neutral-400 cursor-default select-none\">\r\n {{ placeholder() || 'Nessun risultato' }}\r\n </li>\r\n }\r\n </ul>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2358
2357
|
}
|
|
2359
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2358
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindAutocomplete, decorators: [{
|
|
2360
2359
|
type: Component,
|
|
2361
2360
|
args: [{ imports: [NgTemplateOutlet, TailwindIcon], selector: 'tailwind-autocomplete', providers: [
|
|
2362
2361
|
{
|
|
@@ -2454,8 +2453,8 @@ class TailwindToggle extends TailwindComponent {
|
|
|
2454
2453
|
this.onChange(newValue);
|
|
2455
2454
|
this.onTouched();
|
|
2456
2455
|
}
|
|
2457
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2458
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2456
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindToggle, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2457
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindToggle, isStandalone: true, selector: "tailwind-toggle", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [
|
|
2459
2458
|
{
|
|
2460
2459
|
provide: NG_VALUE_ACCESSOR,
|
|
2461
2460
|
useExisting: forwardRef(() => TailwindToggle),
|
|
@@ -2463,7 +2462,7 @@ class TailwindToggle extends TailwindComponent {
|
|
|
2463
2462
|
}
|
|
2464
2463
|
], 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2465
2464
|
}
|
|
2466
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2465
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindToggle, decorators: [{
|
|
2467
2466
|
type: Component,
|
|
2468
2467
|
args: [{ selector: 'tailwind-toggle', providers: [
|
|
2469
2468
|
{
|
|
@@ -2505,10 +2504,10 @@ class TailwindBadge extends TailwindComponent {
|
|
|
2505
2504
|
const shape = this.rounded() ? 'rounded-full' : 'rounded-md';
|
|
2506
2505
|
return [...base, variantMap[this.variant()] ?? variantMap['primary'], sizeMap[this.size()], shape].join(' ');
|
|
2507
2506
|
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
|
|
2508
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2509
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2507
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindBadge, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2508
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindBadge, isStandalone: true, selector: "tailwind-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<span [class]=\"computedClasses()\" [attr.aria-label]=\"ariaLabel()\">\n @if (dot()) {\n <span class=\"w-1.5 h-1.5 rounded-full bg-current\"></span>\n }\n <ng-content />\n</span>\n", styles: [":host{display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2510
2509
|
}
|
|
2511
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2510
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindBadge, decorators: [{
|
|
2512
2511
|
type: Component,
|
|
2513
2512
|
args: [{ selector: 'tailwind-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"computedClasses()\" [attr.aria-label]=\"ariaLabel()\">\n @if (dot()) {\n <span class=\"w-1.5 h-1.5 rounded-full bg-current\"></span>\n }\n <ng-content />\n</span>\n", styles: [":host{display:inline-block}\n"] }]
|
|
2514
2513
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
@@ -2547,10 +2546,10 @@ class TailwindTitle extends TailwindComponent {
|
|
|
2547
2546
|
};
|
|
2548
2547
|
return size[tag];
|
|
2549
2548
|
}, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
2550
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2551
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2549
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTitle, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2550
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindTitle, isStandalone: true, selector: "tailwind-title", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, titleTag: { classPropertyName: "titleTag", publicName: "titleTag", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@switch (titleTag()) {\n @case ('h1') {\n <h1 [class]=\"headingClasses()\">\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\n </h1>\n }\n @case ('h2') {\n <h2 [class]=\"headingClasses()\">\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\n </h2>\n }\n @case ('h3') {\n <h3 [class]=\"headingClasses()\">\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\n </h3>\n }\n @case ('h4') {\n <h4 [class]=\"headingClasses()\">\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\n </h4>\n }\n @case ('h5') {\n <h5 [class]=\"headingClasses()\">\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\n </h5>\n }\n @case ('h6') {\n <h6 [class]=\"headingClasses()\">\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\n </h6>\n }\n}\n\n<ng-template #titleBody>\n @if (icon()) {\n <tailwind-icon [icon]=\"icon()!\" [size]=\"iconSize()\" />\n }\n <span class=\"min-w-0\">{{ text() }}</span>\n</ng-template>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2552
2551
|
}
|
|
2553
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2552
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTitle, decorators: [{
|
|
2554
2553
|
type: Component,
|
|
2555
2554
|
args: [{ selector: 'tailwind-title', imports: [NgTemplateOutlet, TailwindIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (titleTag()) {\n @case ('h1') {\n <h1 [class]=\"headingClasses()\">\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\n </h1>\n }\n @case ('h2') {\n <h2 [class]=\"headingClasses()\">\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\n </h2>\n }\n @case ('h3') {\n <h3 [class]=\"headingClasses()\">\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\n </h3>\n }\n @case ('h4') {\n <h4 [class]=\"headingClasses()\">\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\n </h4>\n }\n @case ('h5') {\n <h5 [class]=\"headingClasses()\">\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\n </h5>\n }\n @case ('h6') {\n <h6 [class]=\"headingClasses()\">\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\n </h6>\n }\n}\n\n<ng-template #titleBody>\n @if (icon()) {\n <tailwind-icon [icon]=\"icon()!\" [size]=\"iconSize()\" />\n }\n <span class=\"min-w-0\">{{ text() }}</span>\n</ng-template>\n", styles: [":host{display:contents}\n"] }]
|
|
2556
2555
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], titleTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleTag", required: false }] }] } });
|
|
@@ -2566,10 +2565,10 @@ class TailwindCard extends TailwindComponent {
|
|
|
2566
2565
|
hasHeader = input(true, ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
|
|
2567
2566
|
/** Whether the card has a footer */
|
|
2568
2567
|
hasFooter = input(true, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
|
|
2569
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2570
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2568
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindCard, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2569
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2571
2570
|
}
|
|
2572
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2571
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindCard, decorators: [{
|
|
2573
2572
|
type: Component,
|
|
2574
2573
|
args: [{ selector: 'tailwind-card', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
2575
2574
|
}], 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 }] }] } });
|
|
@@ -2602,10 +2601,10 @@ class TailwindAlert extends TailwindComponent {
|
|
|
2602
2601
|
this.dismissed.set(true);
|
|
2603
2602
|
this.onDismiss.emit();
|
|
2604
2603
|
}
|
|
2605
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2606
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2604
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindAlert, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2605
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindAlert, isStandalone: true, selector: "tailwind-alert", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDismiss: "onDismiss" }, usesInheritance: true, ngImport: i0, template: "@if (!dismissed()) {\n <div [class]=\"computedClasses()\" role=\"alert\" [attr.aria-live]=\"severity() === 'danger' ? 'assertive' : 'polite'\">\n <!-- Icon -->\n <div class=\"shrink-0 mt-0.5\">\n @switch (severity()) {\n @case ('success') {\n <tailwind-icon icon=\"check-circle\" [size]=\"20\" />\n }\n @case ('warning') {\n <tailwind-icon icon=\"exclamation-triangle\" [size]=\"20\" />\n }\n @case ('danger') {\n <tailwind-icon icon=\"x-circle\" [size]=\"20\" />\n }\n @case ('info') {\n <tailwind-icon icon=\"information-circle\" [size]=\"20\" />\n }\n }\n </div>\n\n <!-- Content -->\n <div class=\"flex-1 min-w-0\">\n @if (title()) {\n <h3 class=\"text-sm font-semibold mb-0.5\">{{ title() }}</h3>\n }\n <div class=\"text-sm\">\n <ng-content />\n </div>\n </div>\n\n <!-- Dismiss button -->\n @if (dismissible()) {\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"x-mark\"\n class=\"shrink-0 -m-1 opacity-70 hover:opacity-100\"\n ariaLabel=\"Dismiss alert\"\n (onClick)=\"dismiss()\" />\n }\n </div>\n}\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", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2607
2606
|
}
|
|
2608
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2607
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindAlert, decorators: [{
|
|
2609
2608
|
type: Component,
|
|
2610
2609
|
args: [{ imports: [TailwindIcon, TailwindButton], selector: 'tailwind-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!dismissed()) {\n <div [class]=\"computedClasses()\" role=\"alert\" [attr.aria-live]=\"severity() === 'danger' ? 'assertive' : 'polite'\">\n <!-- Icon -->\n <div class=\"shrink-0 mt-0.5\">\n @switch (severity()) {\n @case ('success') {\n <tailwind-icon icon=\"check-circle\" [size]=\"20\" />\n }\n @case ('warning') {\n <tailwind-icon icon=\"exclamation-triangle\" [size]=\"20\" />\n }\n @case ('danger') {\n <tailwind-icon icon=\"x-circle\" [size]=\"20\" />\n }\n @case ('info') {\n <tailwind-icon icon=\"information-circle\" [size]=\"20\" />\n }\n }\n </div>\n\n <!-- Content -->\n <div class=\"flex-1 min-w-0\">\n @if (title()) {\n <h3 class=\"text-sm font-semibold mb-0.5\">{{ title() }}</h3>\n }\n <div class=\"text-sm\">\n <ng-content />\n </div>\n </div>\n\n <!-- Dismiss button -->\n @if (dismissible()) {\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"x-mark\"\n class=\"shrink-0 -m-1 opacity-70 hover:opacity-100\"\n ariaLabel=\"Dismiss alert\"\n (onClick)=\"dismiss()\" />\n }\n </div>\n}\n", styles: [":host{display:block}\n"] }]
|
|
2611
2610
|
}], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], onDismiss: [{ type: i0.Output, args: ["onDismiss"] }] } });
|
|
@@ -2658,10 +2657,10 @@ class TailwindSpinner extends TailwindComponent {
|
|
|
2658
2657
|
};
|
|
2659
2658
|
return `${sizeMap[this.size()]} ${this.color()} font-medium`;
|
|
2660
2659
|
}, ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
|
|
2661
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2662
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2660
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindSpinner, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2661
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindSpinner, isStandalone: true, selector: "tailwind-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"containerClasses()\" role=\"status\" [attr.aria-label]=\"ariaLabel()\">\n <tailwind-icon icon=\"arrow-path\" [size]=\"iconPixelSize()\" [class]=\"iconClasses()\" />\n\n @if (label()) {\n <span [class]=\"labelClasses()\">{{ label() }}</span>\n }\n</div>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2663
2662
|
}
|
|
2664
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindSpinner, decorators: [{
|
|
2665
2664
|
type: Component,
|
|
2666
2665
|
args: [{ imports: [TailwindIcon], selector: 'tailwind-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"containerClasses()\" role=\"status\" [attr.aria-label]=\"ariaLabel()\">\n <tailwind-icon icon=\"arrow-path\" [size]=\"iconPixelSize()\" [class]=\"iconClasses()\" />\n\n @if (label()) {\n <span [class]=\"labelClasses()\">{{ label() }}</span>\n }\n</div>\n", styles: [":host{display:inline-flex}\n"] }]
|
|
2667
2666
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
|
|
@@ -2717,10 +2716,10 @@ class TailwindModal extends TailwindComponent {
|
|
|
2717
2716
|
this.onClose.emit();
|
|
2718
2717
|
}, 200);
|
|
2719
2718
|
}
|
|
2720
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2721
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2719
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2720
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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()) {\n <!-- Backdrop -->\n <div\n class=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-1040 transition-opacity duration-200\"\n [class.opacity-100]=\"isVisible()\"\n [class.opacity-0]=\"!isVisible()\"\n (click)=\"closeOnBackdrop() && close()\"\n aria-hidden=\"true\"></div>\n\n <!-- Modal -->\n <div\n role=\"dialog\"\n class=\"fixed inset-0 z-1050 overflow-y-auto\"\n [attr.aria-modal]=\"true\"\n (keydown.escape)=\"closeOnEscape() && close()\">\n <div class=\"flex min-h-full items-center justify-center p-4\">\n <div #modalPanel [class]=\"panelClasses()\" tabindex=\"-1\">\n <!-- Header -->\n <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\n <h2 class=\"text-lg font-semibold text-neutral-900 pr-2\">\n <ng-content />\n </h2>\n @if (showCloseButton()) {\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"x-mark\"\n class=\"shrink-0 -m-1.5\"\n ariaLabel=\"Close\"\n (onClick)=\"close()\" />\n }\n </div>\n\n <!-- Body -->\n <div class=\"px-6 py-5\">\n <ng-content select=\"[tailwind-modal-content]\" />\n </div>\n\n <!-- Footer -->\n <div class=\"border-t border-neutral-200 px-6 py-4\">\n <ng-content select=\"[tailwind-modal-footer]\" />\n </div>\n </div>\n </div>\n </div>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2722
2721
|
}
|
|
2723
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2722
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindModal, decorators: [{
|
|
2724
2723
|
type: Component,
|
|
2725
2724
|
args: [{ imports: [TailwindButton], selector: 'tailwind-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n <!-- Backdrop -->\n <div\n class=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-1040 transition-opacity duration-200\"\n [class.opacity-100]=\"isVisible()\"\n [class.opacity-0]=\"!isVisible()\"\n (click)=\"closeOnBackdrop() && close()\"\n aria-hidden=\"true\"></div>\n\n <!-- Modal -->\n <div\n role=\"dialog\"\n class=\"fixed inset-0 z-1050 overflow-y-auto\"\n [attr.aria-modal]=\"true\"\n (keydown.escape)=\"closeOnEscape() && close()\">\n <div class=\"flex min-h-full items-center justify-center p-4\">\n <div #modalPanel [class]=\"panelClasses()\" tabindex=\"-1\">\n <!-- Header -->\n <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\n <h2 class=\"text-lg font-semibold text-neutral-900 pr-2\">\n <ng-content />\n </h2>\n @if (showCloseButton()) {\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"x-mark\"\n class=\"shrink-0 -m-1.5\"\n ariaLabel=\"Close\"\n (onClick)=\"close()\" />\n }\n </div>\n\n <!-- Body -->\n <div class=\"px-6 py-5\">\n <ng-content select=\"[tailwind-modal-content]\" />\n </div>\n\n <!-- Footer -->\n <div class=\"border-t border-neutral-200 px-6 py-4\">\n <ng-content select=\"[tailwind-modal-footer]\" />\n </div>\n </div>\n </div>\n </div>\n}\n", styles: [":host{display:contents}\n"] }]
|
|
2726
2725
|
}], 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 }] }] } });
|
|
@@ -2734,10 +2733,10 @@ class TailwindTab extends TailwindComponent {
|
|
|
2734
2733
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2735
2734
|
/** Whether this tab is the currently active one (set by parent) */
|
|
2736
2735
|
isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
2737
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2738
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2736
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTab, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2737
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindTab, isStandalone: true, selector: "tailwind-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (isActive()) {\n <div role=\"tabpanel\" [attr.aria-labelledby]=\"id() ? 'tab-' + id() : null\">\n <ng-content />\n </div>\n}\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2739
2738
|
}
|
|
2740
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2739
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTab, decorators: [{
|
|
2741
2740
|
type: Component,
|
|
2742
2741
|
args: [{ selector: 'tailwind-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isActive()) {\n <div role=\"tabpanel\" [attr.aria-labelledby]=\"id() ? 'tab-' + id() : null\">\n <ng-content />\n </div>\n}\n", styles: [":host{display:block}\n"] }]
|
|
2743
2742
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
@@ -2762,10 +2761,10 @@ class TailwindTabGroup extends TailwindComponent {
|
|
|
2762
2761
|
selectTab(index) {
|
|
2763
2762
|
this.activeIndex.set(index);
|
|
2764
2763
|
}
|
|
2765
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2766
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2764
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2765
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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\">\n <nav\n class=\"flex -mb-px gap-1\"\n [class.overflow-x-auto]=\"scrollable()\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel() || null\">\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2767
2766
|
}
|
|
2768
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2767
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTabGroup, decorators: [{
|
|
2769
2768
|
type: Component,
|
|
2770
2769
|
args: [{ selector: 'tailwind-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Tab Headers -->\n<div class=\"border-b border-neutral-200\">\n <nav\n class=\"flex -mb-px gap-1\"\n [class.overflow-x-auto]=\"scrollable()\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel() || null\">\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"] }]
|
|
2771
2770
|
}], 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 }] }] } });
|
|
@@ -2818,10 +2817,10 @@ class TailwindProgressBar extends TailwindComponent {
|
|
|
2818
2817
|
}
|
|
2819
2818
|
return base.join(' ');
|
|
2820
2819
|
}, ...(ngDevMode ? [{ debugName: "barClasses" }] : /* istanbul ignore next */ []));
|
|
2821
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2822
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2820
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindProgressBar, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2821
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2823
2822
|
}
|
|
2824
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2823
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindProgressBar, decorators: [{
|
|
2825
2824
|
type: Component,
|
|
2826
2825
|
args: [{ selector: 'tailwind-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
2827
2826
|
}], 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 }] }] } });
|
|
@@ -3006,10 +3005,10 @@ class TailwindMenu extends TailwindComponent {
|
|
|
3006
3005
|
}
|
|
3007
3006
|
return document.documentElement;
|
|
3008
3007
|
}
|
|
3009
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3010
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3008
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3009
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 }, placement: { classPropertyName: "placement", publicName: "placement", 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3011
3010
|
}
|
|
3012
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3011
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindMenu, decorators: [{
|
|
3013
3012
|
type: Component,
|
|
3014
3013
|
args: [{ selector: 'tailwind-menu', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
3015
3014
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onDocumentEscape: [{
|
|
@@ -3069,10 +3068,10 @@ class TailwindDrawer extends TailwindComponent {
|
|
|
3069
3068
|
this.onClose.emit();
|
|
3070
3069
|
}, 300);
|
|
3071
3070
|
}
|
|
3072
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3073
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3071
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindDrawer, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3072
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"x-mark\"\n class=\"ml-auto shrink-0 -m-1.5\"\n ariaLabel=\"Close\"\n (onClick)=\"close()\" />\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"], dependencies: [{ kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3074
3073
|
}
|
|
3075
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3074
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindDrawer, decorators: [{
|
|
3076
3075
|
type: Component,
|
|
3077
3076
|
args: [{ imports: [TailwindButton], selector: 'tailwind-drawer', changeDetection: ChangeDetectionStrategy.OnPush, 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 <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"x-mark\"\n class=\"ml-auto shrink-0 -m-1.5\"\n ariaLabel=\"Close\"\n (onClick)=\"close()\" />\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"] }]
|
|
3078
3077
|
}], 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"] }] } });
|
|
@@ -3081,10 +3080,10 @@ class TailwindBreadcrumb extends TailwindComponent {
|
|
|
3081
3080
|
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
3082
3081
|
separator = input('>', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
|
|
3083
3082
|
ariaLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
3084
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3085
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3083
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindBreadcrumb, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3084
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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\">\n <ol class=\"inline-flex items-center text-sm\">\n @for (item of items(); track item.label; let last = $last; let first = $first) {\n <li class=\"inline-flex items-center\">\n @if (!first) {\n <span class=\"mx-2 text-neutral-400\" aria-hidden=\"true\">\n {{ separator() }}\n </span>\n }\n @if (item.link && !last) {\n <a\n [routerLink]=\"item.link\"\n class=\"inline-flex items-center gap-1 text-neutral-500 hover:text-primary-600 transition-colors font-medium\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\n }\n {{ item.label }}\n </a>\n } @else {\n <span\n class=\"inline-flex items-center gap-1 font-medium\"\n [class.text-neutral-900]=\"last\"\n [class.text-neutral-500]=\"!last\"\n [attr.aria-current]=\"last ? 'page' : null\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\n }\n {{ item.label }}\n </span>\n }\n </li>\n }\n </ol>\n</nav>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3086
3085
|
}
|
|
3087
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3086
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindBreadcrumb, decorators: [{
|
|
3088
3087
|
type: Component,
|
|
3089
3088
|
args: [{ imports: [RouterLink, TailwindIcon], selector: 'tailwind-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\n <ol class=\"inline-flex items-center text-sm\">\n @for (item of items(); track item.label; let last = $last; let first = $first) {\n <li class=\"inline-flex items-center\">\n @if (!first) {\n <span class=\"mx-2 text-neutral-400\" aria-hidden=\"true\">\n {{ separator() }}\n </span>\n }\n @if (item.link && !last) {\n <a\n [routerLink]=\"item.link\"\n class=\"inline-flex items-center gap-1 text-neutral-500 hover:text-primary-600 transition-colors font-medium\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\n }\n {{ item.label }}\n </a>\n } @else {\n <span\n class=\"inline-flex items-center gap-1 font-medium\"\n [class.text-neutral-900]=\"last\"\n [class.text-neutral-500]=\"!last\"\n [attr.aria-current]=\"last ? 'page' : null\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\n }\n {{ item.label }}\n </span>\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":host{display:block}\n"] }]
|
|
3090
3089
|
}], 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 }] }] } });
|
|
@@ -3151,10 +3150,10 @@ class TailwindPagination extends TailwindComponent {
|
|
|
3151
3150
|
this.onPageChange.emit(1);
|
|
3152
3151
|
}
|
|
3153
3152
|
}
|
|
3154
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3155
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3153
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindPagination, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3154
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 }, lengthOptions: { classPropertyName: "lengthOptions", publicName: "lengthOptions", 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: { pageSize: "pageSizeChange", currentPage: "currentPageChange", onPageChange: "onPageChange", onPageSizeChange: "onPageSizeChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n <div class=\"flex flex-wrap items-center gap-3 min-w-0\">\n @if (summary()) {\n <span class=\"text-sm text-neutral-700 dark:text-neutral-300\">\n {{ summaryText() }}\n </span>\n }\n\n @if (lengthOptions().length > 0) {\n <div class=\"w-20 shrink-0\">\n <tailwind-select\n size=\"sm\"\n ariaLabel=\"Rows per page\"\n [options]=\"pageSizeSelectOptions()\"\n [value]=\"pageSize()\"\n (valueChange)=\"onPageSizeValueChange($event)\" />\n </div>\n }\n </div>\n\n <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n <!-- Previous -->\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-left\"\n [disabled]=\"currentPage() <= 1\"\n ariaLabel=\"Previous page\"\n (onClick)=\"goToPage(currentPage() - 1)\" />\n\n @for (page of visiblePages(); track page) {\n <tailwind-button\n size=\"sm\"\n [kind]=\"page === currentPage() ? 'flat' : 'ghost'\"\n [color]=\"page === currentPage() ? 'primary' : 'secondary'\"\n class=\"min-w-8\"\n [ariaLabel]=\"pageButtonAriaLabel(page)\"\n (onClick)=\"goToPage(page)\">\n {{ page }}\n </tailwind-button>\n }\n\n <!-- Next -->\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-right\"\n [disabled]=\"currentPage() >= totalPages()\"\n ariaLabel=\"Next page\"\n (onClick)=\"goToPage(currentPage() + 1)\" />\n </nav>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindSelect, selector: "tailwind-select", inputs: ["label", "ariaLabel", "placeholder", "options", "size", "helperText", "errorText", "hasError", "multiple", "value"], outputs: ["valueChange"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3156
3155
|
}
|
|
3157
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindPagination, decorators: [{
|
|
3158
3157
|
type: Component,
|
|
3159
3158
|
args: [{ selector: 'tailwind-pagination', imports: [TailwindSelect, TailwindButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n <div class=\"flex flex-wrap items-center gap-3 min-w-0\">\n @if (summary()) {\n <span class=\"text-sm text-neutral-700 dark:text-neutral-300\">\n {{ summaryText() }}\n </span>\n }\n\n @if (lengthOptions().length > 0) {\n <div class=\"w-20 shrink-0\">\n <tailwind-select\n size=\"sm\"\n ariaLabel=\"Rows per page\"\n [options]=\"pageSizeSelectOptions()\"\n [value]=\"pageSize()\"\n (valueChange)=\"onPageSizeValueChange($event)\" />\n </div>\n }\n </div>\n\n <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n <!-- Previous -->\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-left\"\n [disabled]=\"currentPage() <= 1\"\n ariaLabel=\"Previous page\"\n (onClick)=\"goToPage(currentPage() - 1)\" />\n\n @for (page of visiblePages(); track page) {\n <tailwind-button\n size=\"sm\"\n [kind]=\"page === currentPage() ? 'flat' : 'ghost'\"\n [color]=\"page === currentPage() ? 'primary' : 'secondary'\"\n class=\"min-w-8\"\n [ariaLabel]=\"pageButtonAriaLabel(page)\"\n (onClick)=\"goToPage(page)\">\n {{ page }}\n </tailwind-button>\n }\n\n <!-- Next -->\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-right\"\n [disabled]=\"currentPage() >= totalPages()\"\n ariaLabel=\"Next page\"\n (onClick)=\"goToPage(currentPage() + 1)\" />\n </nav>\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
3160
3159
|
}], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], lengthOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "lengthOptions", 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"] }], onPageSizeChange: [{ type: i0.Output, args: ["onPageSizeChange"] }] } });
|
|
@@ -3172,10 +3171,10 @@ class TailwindTag extends TailwindComponent {
|
|
|
3172
3171
|
};
|
|
3173
3172
|
return `inline-flex items-center text-[11px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded ${variantMap[this.variant()]}`;
|
|
3174
3173
|
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
|
|
3175
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3176
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
3174
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTag, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3175
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TailwindTag, isStandalone: true, selector: "tailwind-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<span [class]=\"computedClasses()\"><ng-content /></span>\n", styles: [":host{display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3177
3176
|
}
|
|
3178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3177
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTag, decorators: [{
|
|
3179
3178
|
type: Component,
|
|
3180
3179
|
args: [{ selector: 'tailwind-tag', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"computedClasses()\"><ng-content /></span>\n", styles: [":host{display:inline-block}\n"] }]
|
|
3181
3180
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
@@ -3300,10 +3299,10 @@ class TailwindTable extends TailwindComponent {
|
|
|
3300
3299
|
if (key)
|
|
3301
3300
|
this.sort(key);
|
|
3302
3301
|
}
|
|
3303
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3304
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3302
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3303
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 <tailwind-icon icon=\"arrow-path\" [size]=\"24\" class=\"animate-spin mr-2 text-neutral-400\" />\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 $index; 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]=\"pageSize()\"\n (pageSizeChange)=\"pageSize.set($event)\"\n [lengthOptions]=\"paginationLengthOptions()\"\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", "lengthOptions", "currentPage", "ariaLabel", "summary"], outputs: ["pageSizeChange", "currentPageChange", "onPageChange", "onPageSizeChange"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3305
3304
|
}
|
|
3306
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3305
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTable, decorators: [{
|
|
3307
3306
|
type: Component,
|
|
3308
3307
|
args: [{ selector: 'tailwind-table', imports: [NgTemplateOutlet, TailwindPagination, TailwindIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3309
3308
|
'[attr.data-tw-sort-key]': 'sortKey()',
|
|
@@ -3487,10 +3486,10 @@ class TailwindDatePicker extends TailwindComponent {
|
|
|
3487
3486
|
event.stopPropagation();
|
|
3488
3487
|
this.showCalendar.set(false);
|
|
3489
3488
|
}
|
|
3490
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3491
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3489
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindDatePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3490
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 <tailwind-icon\n icon=\"calendar-days\"\n [size]=\"16\"\n class=\"absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none\" />\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 <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-left\"\n ariaLabel=\"Previous month\"\n (onClick)=\"prevMonth()\" />\n <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"nextMonth()\" />\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 <tailwind-button\n kind=\"text\"\n color=\"primary\"\n size=\"xs\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"goToToday()\">\n {{ i18n.today }}\n </tailwind-button>\n <tailwind-button\n kind=\"solid\"\n color=\"primary\"\n size=\"sm\"\n [disabled]=\"isDisabled() || !draft()\"\n (onClick)=\"apply()\">\n {{ i18n.confirm }}\n </tailwind-button>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}\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", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3492
3491
|
}
|
|
3493
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindDatePicker, decorators: [{
|
|
3494
3493
|
type: Component,
|
|
3495
3494
|
args: [{ imports: [TailwindIcon, TailwindButton], selector: 'tailwind-date-picker', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], changeDetection: ChangeDetectionStrategy.OnPush, 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 <tailwind-icon\n icon=\"calendar-days\"\n [size]=\"16\"\n class=\"absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none\" />\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 <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-left\"\n ariaLabel=\"Previous month\"\n (onClick)=\"prevMonth()\" />\n <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"nextMonth()\" />\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 <tailwind-button\n kind=\"text\"\n color=\"primary\"\n size=\"xs\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"goToToday()\">\n {{ i18n.today }}\n </tailwind-button>\n <tailwind-button\n kind=\"solid\"\n color=\"primary\"\n size=\"sm\"\n [disabled]=\"isDisabled() || !draft()\"\n (onClick)=\"apply()\">\n {{ i18n.confirm }}\n </tailwind-button>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}\n"] }]
|
|
3496
3495
|
}], 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: [{
|
|
@@ -3586,10 +3585,10 @@ class TailwindTimePicker extends TailwindComponent {
|
|
|
3586
3585
|
event.stopPropagation();
|
|
3587
3586
|
this.showPanel.set(false);
|
|
3588
3587
|
}
|
|
3589
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3590
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3588
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3589
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 <tailwind-icon\n icon=\"clock\"\n [size]=\"16\"\n class=\"absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none\" />\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 <tailwind-button\n kind=\"text\"\n color=\"primary\"\n size=\"xs\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"goToNow()\">\n {{ i18n.now }}\n </tailwind-button>\n <tailwind-button\n kind=\"solid\"\n color=\"primary\"\n size=\"sm\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"apply()\">\n {{ i18n.apply }}\n </tailwind-button>\n </div>\n </div>\n }\n </div>\n</div>\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", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3591
3590
|
}
|
|
3592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3591
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindTimePicker, decorators: [{
|
|
3593
3592
|
type: Component,
|
|
3594
3593
|
args: [{ selector: 'tailwind-time-picker', imports: [TailwindIcon, TailwindButton], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], changeDetection: ChangeDetectionStrategy.OnPush, 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 <tailwind-icon\n icon=\"clock\"\n [size]=\"16\"\n class=\"absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none\" />\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 <tailwind-button\n kind=\"text\"\n color=\"primary\"\n size=\"xs\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"goToNow()\">\n {{ i18n.now }}\n </tailwind-button>\n <tailwind-button\n kind=\"solid\"\n color=\"primary\"\n size=\"sm\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"apply()\">\n {{ i18n.apply }}\n </tailwind-button>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
3595
3594
|
}], 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: [{
|
|
@@ -3801,10 +3800,10 @@ class TailwindDateTimePicker extends TailwindComponent {
|
|
|
3801
3800
|
event.stopPropagation();
|
|
3802
3801
|
this.showPanel.set(false);
|
|
3803
3802
|
}
|
|
3804
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3805
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3803
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindDateTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3804
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 <tailwind-icon\n icon=\"calendar-days\"\n [size]=\"16\"\n class=\"absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none\" />\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 <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-left\"\n ariaLabel=\"Previous month\"\n (onClick)=\"prevMonth()\" />\n <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"nextMonth()\" />\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 <tailwind-button\n kind=\"text\"\n color=\"primary\"\n size=\"xs\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"goToToday()\">\n {{ i18n.today }}\n </tailwind-button>\n <tailwind-button\n kind=\"solid\"\n color=\"primary\"\n size=\"sm\"\n [disabled]=\"isDisabled() || !draft()\"\n (onClick)=\"apply()\">\n {{ i18n.confirm }}\n </tailwind-button>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\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", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3806
3805
|
}
|
|
3807
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3806
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindDateTimePicker, decorators: [{
|
|
3808
3807
|
type: Component,
|
|
3809
3808
|
args: [{ selector: 'tailwind-datetime-picker', imports: [TailwindIcon, TailwindButton], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], changeDetection: ChangeDetectionStrategy.OnPush, 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 <tailwind-icon\n icon=\"calendar-days\"\n [size]=\"16\"\n class=\"absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none\" />\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 <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-left\"\n ariaLabel=\"Previous month\"\n (onClick)=\"prevMonth()\" />\n <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"nextMonth()\" />\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 <tailwind-button\n kind=\"text\"\n color=\"primary\"\n size=\"xs\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"goToToday()\">\n {{ i18n.today }}\n </tailwind-button>\n <tailwind-button\n kind=\"solid\"\n color=\"primary\"\n size=\"sm\"\n [disabled]=\"isDisabled() || !draft()\"\n (onClick)=\"apply()\">\n {{ i18n.confirm }}\n </tailwind-button>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\n"] }]
|
|
3810
3809
|
}], 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: [{
|
|
@@ -3821,10 +3820,10 @@ class TailwindStep extends TailwindComponent {
|
|
|
3821
3820
|
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
3822
3821
|
completed = signal(false, ...(ngDevMode ? [{ debugName: "completed" }] : /* istanbul ignore next */ []));
|
|
3823
3822
|
isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
3824
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3825
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3823
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindStep, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3824
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindStep, isStandalone: true, selector: "tailwind-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (isActive()) {\n <div class=\"py-4\"><ng-content /></div>\n}\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3826
3825
|
}
|
|
3827
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3826
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindStep, decorators: [{
|
|
3828
3827
|
type: Component,
|
|
3829
3828
|
args: [{ selector: 'tailwind-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isActive()) {\n <div class=\"py-4\"><ng-content /></div>\n}\n", styles: [":host{display:block}\n"] }]
|
|
3830
3829
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }] } });
|
|
@@ -3857,10 +3856,10 @@ class TailwindStepper extends TailwindComponent {
|
|
|
3857
3856
|
if (this.activeIndex() > 0)
|
|
3858
3857
|
this.activeIndex.update(v => v - 1);
|
|
3859
3858
|
}
|
|
3860
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3861
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3859
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3860
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindStepper, isStandalone: true, selector: "tailwind-stepper", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "steps", predicate: TailwindStep, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Step indicators -->\n<div class=\"flex items-center mb-6\">\n @for (step of steps(); track step.label(); let i = $index; let last = $last) {\n <div class=\"flex items-center\" [class.flex-1]=\"!last\">\n <button\n type=\"button\"\n (click)=\"goToStep(i)\"\n class=\"flex items-center gap-2 cursor-pointer group\"\n [attr.aria-current]=\"activeIndex() === i ? 'step' : null\">\n <div\n class=\"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-200\"\n [class.bg-primary-600]=\"i <= activeIndex()\"\n [class.border-primary-600]=\"i <= activeIndex()\"\n [class.text-on-primary-600]=\"i <= activeIndex()\"\n [class.border-neutral-300]=\"i > activeIndex()\"\n [class.text-neutral-600]=\"i > activeIndex()\">\n @if (step.completed()) {\n <tailwind-icon icon=\"check\" [size]=\"16\" />\n } @else {\n {{ i + 1 }}\n }\n </div>\n <div class=\"hidden sm:block\">\n <p\n class=\"text-sm font-medium\"\n [class.text-primary-700]=\"i <= activeIndex()\"\n [class.text-neutral-700]=\"i > activeIndex()\">\n {{ step.label() }}\n </p>\n @if (step.description()) {\n <p class=\"text-xs text-neutral-500\">{{ step.description() }}</p>\n }\n </div>\n </button>\n @if (!last) {\n <div\n class=\"flex-1 h-0.5 mx-3 rounded-full transition-colors duration-200\"\n [class.bg-primary-600]=\"i < activeIndex()\"\n [class.bg-neutral-200]=\"i >= activeIndex()\"></div>\n }\n </div>\n }\n</div>\n<!-- Step content -->\n<ng-content />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3862
3861
|
}
|
|
3863
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3862
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindStepper, decorators: [{
|
|
3864
3863
|
type: Component,
|
|
3865
3864
|
args: [{ imports: [TailwindIcon], selector: 'tailwind-stepper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Step indicators -->\n<div class=\"flex items-center mb-6\">\n @for (step of steps(); track step.label(); let i = $index; let last = $last) {\n <div class=\"flex items-center\" [class.flex-1]=\"!last\">\n <button\n type=\"button\"\n (click)=\"goToStep(i)\"\n class=\"flex items-center gap-2 cursor-pointer group\"\n [attr.aria-current]=\"activeIndex() === i ? 'step' : null\">\n <div\n class=\"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-200\"\n [class.bg-primary-600]=\"i <= activeIndex()\"\n [class.border-primary-600]=\"i <= activeIndex()\"\n [class.text-on-primary-600]=\"i <= activeIndex()\"\n [class.border-neutral-300]=\"i > activeIndex()\"\n [class.text-neutral-600]=\"i > activeIndex()\">\n @if (step.completed()) {\n <tailwind-icon icon=\"check\" [size]=\"16\" />\n } @else {\n {{ i + 1 }}\n }\n </div>\n <div class=\"hidden sm:block\">\n <p\n class=\"text-sm font-medium\"\n [class.text-primary-700]=\"i <= activeIndex()\"\n [class.text-neutral-700]=\"i > activeIndex()\">\n {{ step.label() }}\n </p>\n @if (step.description()) {\n <p class=\"text-xs text-neutral-500\">{{ step.description() }}</p>\n }\n </div>\n </button>\n @if (!last) {\n <div\n class=\"flex-1 h-0.5 mx-3 rounded-full transition-colors duration-200\"\n [class.bg-primary-600]=\"i < activeIndex()\"\n [class.bg-neutral-200]=\"i >= activeIndex()\"></div>\n }\n </div>\n }\n</div>\n<!-- Step content -->\n<ng-content />\n", styles: [":host{display:block}\n"] }]
|
|
3866
3865
|
}], ctorParameters: () => [], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TailwindStep), { isSignal: true }] }] } });
|
|
@@ -3876,20 +3875,20 @@ class TailwindAccordionItem extends TailwindComponent {
|
|
|
3876
3875
|
this.onToggle.emit();
|
|
3877
3876
|
}
|
|
3878
3877
|
}
|
|
3879
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3880
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3878
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindAccordionItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3879
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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\">\n <button\n type=\"button\"\n (click)=\"toggle()\"\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\"\n [attr.aria-expanded]=\"isExpanded()\">\n <span>{{ title() }}</span>\n <tailwind-icon\n icon=\"chevron-down\"\n [size]=\"16\"\n class=\"text-neutral-400 transition-transform duration-200\"\n [class.rotate-180]=\"isExpanded()\" />\n </button>\n @if (isExpanded()) {\n <div class=\"px-5 py-4 text-sm text-neutral-600\">\n <ng-content />\n </div>\n }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3881
3880
|
}
|
|
3882
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindAccordionItem, decorators: [{
|
|
3883
3882
|
type: Component,
|
|
3884
3883
|
args: [{ imports: [CommonModule, TailwindIcon], selector: 'tailwind-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [id]=\"id()\" [ngClass]=\"class()\" class=\"border-b border-neutral-200 last:border-b-0\">\n <button\n type=\"button\"\n (click)=\"toggle()\"\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\"\n [attr.aria-expanded]=\"isExpanded()\">\n <span>{{ title() }}</span>\n <tailwind-icon\n icon=\"chevron-down\"\n [size]=\"16\"\n class=\"text-neutral-400 transition-transform duration-200\"\n [class.rotate-180]=\"isExpanded()\" />\n </button>\n @if (isExpanded()) {\n <div class=\"px-5 py-4 text-sm text-neutral-600\">\n <ng-content />\n </div>\n }\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
3885
3884
|
}], 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"] }] } });
|
|
3886
3885
|
|
|
3887
3886
|
class TailwindAccordion extends TailwindComponent {
|
|
3888
3887
|
items = contentChildren(TailwindAccordionItem, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
3889
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3890
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
3888
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindAccordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3889
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: TailwindAccordion, isStandalone: true, selector: "tailwind-accordion", queries: [{ propertyName: "items", predicate: TailwindAccordionItem, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n [id]=\"id()\"\n [ngClass]=\"class()\"\n class=\"border border-neutral-200 rounded-md overflow-hidden divide-y divide-neutral-200\">\n <ng-content />\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3891
3890
|
}
|
|
3892
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3891
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindAccordion, decorators: [{
|
|
3893
3892
|
type: Component,
|
|
3894
3893
|
args: [{ imports: [CommonModule], selector: 'tailwind-accordion', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [id]=\"id()\"\n [ngClass]=\"class()\"\n class=\"border border-neutral-200 rounded-md overflow-hidden divide-y divide-neutral-200\">\n <ng-content />\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
3895
3894
|
}], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TailwindAccordionItem), { isSignal: true }] }] } });
|
|
@@ -3982,10 +3981,10 @@ class TailwindModalService {
|
|
|
3982
3981
|
modalComp.instance.open();
|
|
3983
3982
|
});
|
|
3984
3983
|
}
|
|
3985
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3986
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
3984
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3985
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindModalService, providedIn: 'root' });
|
|
3987
3986
|
}
|
|
3988
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3987
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindModalService, decorators: [{
|
|
3989
3988
|
type: Injectable,
|
|
3990
3989
|
args: [{ providedIn: 'root' }]
|
|
3991
3990
|
}] });
|
|
@@ -4020,20 +4019,20 @@ class TailwindToastService {
|
|
|
4020
4019
|
clear() {
|
|
4021
4020
|
this.toasts.set([]);
|
|
4022
4021
|
}
|
|
4023
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4024
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
4022
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4023
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindToastService, providedIn: 'root' });
|
|
4025
4024
|
}
|
|
4026
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindToastService, decorators: [{
|
|
4027
4026
|
type: Injectable,
|
|
4028
4027
|
args: [{ providedIn: 'root' }]
|
|
4029
4028
|
}] });
|
|
4030
4029
|
|
|
4031
4030
|
class TailwindToast extends TailwindComponent {
|
|
4032
4031
|
toastService = inject(TailwindToastService);
|
|
4033
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4034
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4032
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindToast, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4033
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindToast, isStandalone: true, selector: "tailwind-toast", usesInheritance: true, ngImport: i0, template: "<div class=\"fixed bottom-4 right-4 z-1080 flex flex-col gap-2 max-w-sm w-full pointer-events-none\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"pointer-events-auto rounded-xl border shadow-lg p-4 flex gap-3 animate-in slide-in-from-right-full duration-300\"\n [class.bg-success-50]=\"toast.severity === 'success'\"\n [class.border-success-200]=\"toast.severity === 'success'\"\n [class.bg-warning-50]=\"toast.severity === 'warning'\"\n [class.border-warning-200]=\"toast.severity === 'warning'\"\n [class.bg-danger-50]=\"toast.severity === 'danger'\"\n [class.border-danger-200]=\"toast.severity === 'danger'\"\n [class.bg-info-50]=\"toast.severity === 'info'\"\n [class.border-info-200]=\"toast.severity === 'info'\"\n role=\"alert\">\n <div class=\"flex-1 min-w-0\">\n @if (toast.title) {\n <p class=\"text-sm font-semibold mb-0.5\">{{ toast.title }}</p>\n }\n <p class=\"text-sm\">{{ toast.message }}</p>\n </div>\n @if (toast.dismissible) {\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"x-mark\"\n class=\"shrink-0 opacity-60 hover:opacity-100\"\n ariaLabel=\"Dismiss\"\n (onClick)=\"toastService.dismiss(toast.id)\" />\n }\n </div>\n }\n</div>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4035
4034
|
}
|
|
4036
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindToast, decorators: [{
|
|
4037
4036
|
type: Component,
|
|
4038
4037
|
args: [{ imports: [TailwindButton], selector: 'tailwind-toast', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fixed bottom-4 right-4 z-1080 flex flex-col gap-2 max-w-sm w-full pointer-events-none\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"pointer-events-auto rounded-xl border shadow-lg p-4 flex gap-3 animate-in slide-in-from-right-full duration-300\"\n [class.bg-success-50]=\"toast.severity === 'success'\"\n [class.border-success-200]=\"toast.severity === 'success'\"\n [class.bg-warning-50]=\"toast.severity === 'warning'\"\n [class.border-warning-200]=\"toast.severity === 'warning'\"\n [class.bg-danger-50]=\"toast.severity === 'danger'\"\n [class.border-danger-200]=\"toast.severity === 'danger'\"\n [class.bg-info-50]=\"toast.severity === 'info'\"\n [class.border-info-200]=\"toast.severity === 'info'\"\n role=\"alert\">\n <div class=\"flex-1 min-w-0\">\n @if (toast.title) {\n <p class=\"text-sm font-semibold mb-0.5\">{{ toast.title }}</p>\n }\n <p class=\"text-sm\">{{ toast.message }}</p>\n </div>\n @if (toast.dismissible) {\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"x-mark\"\n class=\"shrink-0 opacity-60 hover:opacity-100\"\n ariaLabel=\"Dismiss\"\n (onClick)=\"toastService.dismiss(toast.id)\" />\n }\n </div>\n }\n</div>\n", styles: [":host{display:contents}\n"] }]
|
|
4039
4038
|
}] });
|
|
@@ -4053,10 +4052,10 @@ class TailwindNotification extends TailwindComponent {
|
|
|
4053
4052
|
};
|
|
4054
4053
|
return `flex items-start rounded-lg border p-4 ${variantMap[this.severity()]}`;
|
|
4055
4054
|
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
|
|
4056
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4057
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4055
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindNotification, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4056
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindNotification, isStandalone: true, selector: "tailwind-notification", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDismiss: "onDismiss" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"computedClasses()\" role=\"alert\">\n <div class=\"flex-1 min-w-0\">\n @if (title()) {\n <p class=\"text-sm font-semibold mb-0.5\">{{ title() }}</p>\n }\n <p class=\"text-sm\"><ng-content /></p>\n @if (showActions()) {\n <div class=\"pt-3\">\n <ng-content select=\"[tailwind-notification-actions]\" />\n </div>\n }\n </div>\n @if (dismissible()) {\n <tailwind-button\n kind=\"ghost\"\n color=\"secondary\"\n size=\"sm\"\n icon=\"x-mark\"\n class=\"shrink-0 -m-1\"\n ariaLabel=\"Dismiss\"\n (onClick)=\"onDismiss.emit()\" />\n }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4058
4057
|
}
|
|
4059
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindNotification, decorators: [{
|
|
4060
4059
|
type: Component,
|
|
4061
4060
|
args: [{ imports: [TailwindButton], selector: 'tailwind-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"computedClasses()\" role=\"alert\">\n <div class=\"flex-1 min-w-0\">\n @if (title()) {\n <p class=\"text-sm font-semibold mb-0.5\">{{ title() }}</p>\n }\n <p class=\"text-sm\"><ng-content /></p>\n @if (showActions()) {\n <div class=\"pt-3\">\n <ng-content select=\"[tailwind-notification-actions]\" />\n </div>\n }\n </div>\n @if (dismissible()) {\n <tailwind-button\n kind=\"ghost\"\n color=\"secondary\"\n size=\"sm\"\n icon=\"x-mark\"\n class=\"shrink-0 -m-1\"\n ariaLabel=\"Dismiss\"\n (onClick)=\"onDismiss.emit()\" />\n }\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
4062
4061
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], onDismiss: [{ type: i0.Output, args: ["onDismiss"] }] } });
|
|
@@ -4072,10 +4071,10 @@ class TailwindMessage extends TailwindComponent {
|
|
|
4072
4071
|
};
|
|
4073
4072
|
return `text-sm px-3 py-2 rounded-lg border ${variantMap[this.severity()]}`;
|
|
4074
4073
|
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
|
|
4075
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4076
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
4074
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindMessage, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4075
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TailwindMessage, isStandalone: true, selector: "tailwind-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"computedClasses()\" role=\"status\">\n <ng-content />\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4077
4076
|
}
|
|
4078
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4077
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindMessage, decorators: [{
|
|
4079
4078
|
type: Component,
|
|
4080
4079
|
args: [{ selector: 'tailwind-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"computedClasses()\" role=\"status\">\n <ng-content />\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
4081
4080
|
}], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }] } });
|
|
@@ -4094,10 +4093,10 @@ class TailwindSkeleton extends TailwindComponent {
|
|
|
4094
4093
|
};
|
|
4095
4094
|
return `${base} ${variantMap[this.variant()]}`;
|
|
4096
4095
|
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
|
|
4097
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4098
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
4096
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindSkeleton, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4097
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4099
4098
|
}
|
|
4100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4099
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindSkeleton, decorators: [{
|
|
4101
4100
|
type: Component,
|
|
4102
4101
|
args: [{ selector: 'tailwind-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
4103
4102
|
}], 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 }] }] } });
|
|
@@ -4243,10 +4242,10 @@ class TailwindToolbar extends TailwindComponent {
|
|
|
4243
4242
|
menuTrackKey(index, item) {
|
|
4244
4243
|
return item.value ?? item.label ?? String(index);
|
|
4245
4244
|
}
|
|
4246
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4245
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindToolbar, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4246
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 }, variant: { classPropertyName: "variant", publicName: "variant", 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()\">\n <div class=\"shrink-0\">\n <ng-content select=\"[tailwind-toolbar-logo]\" />\n </div>\n @if (orientation() === 'horizontal') {\n <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\n @if (menu().length) {\n <div class=\"flex shrink-0 items-center md:hidden\">\n <button\n type=\"button\"\n [class]=\"mobileMenuToggleClasses()\"\n [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\n aria-haspopup=\"menu\"\n aria-label=\"Open navigation menu\"\n (click)=\"mobileToolbarMenu.toggle($event)\">\n <tailwind-icon icon=\"bars-3\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n </button>\n <tailwind-menu\n #mobileToolbarMenu\n [items]=\"mobileMenuItems()\"\n align=\"left\"\n (onSelect)=\"selectMenuItem($event)\" />\n </div>\n }\n <div class=\"hidden min-w-0 flex-1 flex-row flex-wrap items-center gap-1 md:flex\">\n @for (item of menu(); track menuTrackKey($index, item)) {\n @if (item.divider) {\n <span [class]=\"menuDividerLineClasses()\" aria-hidden=\"true\"></span>\n } @else if (hasSubmenu(item)) {\n <div [class]=\"menuItemWithSubmenuClasses()\">\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n [attr.aria-expanded]=\"itemMenu.isOpen()\"\n aria-haspopup=\"menu\"\n (click)=\"itemMenu.toggle($event)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n {{ item.label }}\n }\n <tailwind-icon [icon]=\"submenuChevronIcon()\" [size]=\"16\" [class]=\"menuItemIconClasses()\" />\n </button>\n <tailwind-menu\n #itemMenu\n [items]=\"item.items!\"\n [placement]=\"submenuPlacement()\"\n align=\"left\"\n (onSelect)=\"selectMenuItem($event)\" />\n </div>\n } @else {\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n (click)=\"selectMenuItem(item)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n {{ item.label }}\n }\n </button>\n }\n }\n </div>\n </nav>\n } @else {\n <nav [class]=\"menuContainerClasses()\" [attr.aria-label]=\"'Toolbar menu'\">\n @for (item of menu(); track menuTrackKey($index, item)) {\n @if (item.divider) {\n <hr [class]=\"menuDividerRuleClasses()\" />\n } @else if (hasSubmenu(item)) {\n <div [class]=\"menuItemWithSubmenuClasses()\">\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n [attr.aria-expanded]=\"itemMenu.isOpen()\"\n aria-haspopup=\"menu\"\n (click)=\"itemMenu.toggle($event)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n <span class=\"min-w-0 flex-1\">{{ item.label }}</span>\n }\n <tailwind-icon\n [icon]=\"submenuChevronIcon()\"\n [size]=\"18\"\n [class]=\"menuItemIconClasses()\"\n [class.ml-auto]=\"menuItemHasVisibleLabel(item)\" />\n </button>\n <tailwind-menu\n #itemMenu\n [items]=\"item.items!\"\n [placement]=\"submenuPlacement()\"\n align=\"left\"\n (onSelect)=\"selectMenuItem($event)\" />\n </div>\n } @else {\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n (click)=\"selectMenuItem(item)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n {{ item.label }}\n }\n </button>\n }\n }\n </nav>\n }\n <div\n class=\"flex flex-wrap items-center gap-2 shrink-0\"\n [class.toolbar-end-vertical]=\"orientation() === 'vertical'\"\n [class.justify-end]=\"orientation() === 'horizontal'\"\n [class.mt-auto]=\"orientation() === 'vertical'\"\n [class.w-full]=\"orientation() === 'vertical'\"\n [class.justify-center]=\"orientation() === 'vertical'\">\n <ng-content select=\"[tailwind-toolbar-end]\" />\n </div>\n</div>\n", styles: [":host{display:block}:host .toolbar-menu-icon-on-light .tailwind-icon-glyph{filter:brightness(0) invert(1)}:host .toolbar-end-vertical tailwind-button{display:block;width:100%}:host .toolbar-end-vertical tailwind-button>button{width:100%;justify-content:center}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindMenu, selector: "tailwind-menu", inputs: ["items", "align", "placement"], outputs: ["onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4248
4247
|
}
|
|
4249
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4248
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindToolbar, decorators: [{
|
|
4250
4249
|
type: Component,
|
|
4251
4250
|
args: [{ imports: [TailwindIcon, TailwindMenu], selector: 'tailwind-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"rootClasses()\">\n <div class=\"shrink-0\">\n <ng-content select=\"[tailwind-toolbar-logo]\" />\n </div>\n @if (orientation() === 'horizontal') {\n <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\n @if (menu().length) {\n <div class=\"flex shrink-0 items-center md:hidden\">\n <button\n type=\"button\"\n [class]=\"mobileMenuToggleClasses()\"\n [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\n aria-haspopup=\"menu\"\n aria-label=\"Open navigation menu\"\n (click)=\"mobileToolbarMenu.toggle($event)\">\n <tailwind-icon icon=\"bars-3\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n </button>\n <tailwind-menu\n #mobileToolbarMenu\n [items]=\"mobileMenuItems()\"\n align=\"left\"\n (onSelect)=\"selectMenuItem($event)\" />\n </div>\n }\n <div class=\"hidden min-w-0 flex-1 flex-row flex-wrap items-center gap-1 md:flex\">\n @for (item of menu(); track menuTrackKey($index, item)) {\n @if (item.divider) {\n <span [class]=\"menuDividerLineClasses()\" aria-hidden=\"true\"></span>\n } @else if (hasSubmenu(item)) {\n <div [class]=\"menuItemWithSubmenuClasses()\">\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n [attr.aria-expanded]=\"itemMenu.isOpen()\"\n aria-haspopup=\"menu\"\n (click)=\"itemMenu.toggle($event)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n {{ item.label }}\n }\n <tailwind-icon [icon]=\"submenuChevronIcon()\" [size]=\"16\" [class]=\"menuItemIconClasses()\" />\n </button>\n <tailwind-menu\n #itemMenu\n [items]=\"item.items!\"\n [placement]=\"submenuPlacement()\"\n align=\"left\"\n (onSelect)=\"selectMenuItem($event)\" />\n </div>\n } @else {\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n (click)=\"selectMenuItem(item)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n {{ item.label }}\n }\n </button>\n }\n }\n </div>\n </nav>\n } @else {\n <nav [class]=\"menuContainerClasses()\" [attr.aria-label]=\"'Toolbar menu'\">\n @for (item of menu(); track menuTrackKey($index, item)) {\n @if (item.divider) {\n <hr [class]=\"menuDividerRuleClasses()\" />\n } @else if (hasSubmenu(item)) {\n <div [class]=\"menuItemWithSubmenuClasses()\">\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n [attr.aria-expanded]=\"itemMenu.isOpen()\"\n aria-haspopup=\"menu\"\n (click)=\"itemMenu.toggle($event)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n <span class=\"min-w-0 flex-1\">{{ item.label }}</span>\n }\n <tailwind-icon\n [icon]=\"submenuChevronIcon()\"\n [size]=\"18\"\n [class]=\"menuItemIconClasses()\"\n [class.ml-auto]=\"menuItemHasVisibleLabel(item)\" />\n </button>\n <tailwind-menu\n #itemMenu\n [items]=\"item.items!\"\n [placement]=\"submenuPlacement()\"\n align=\"left\"\n (onSelect)=\"selectMenuItem($event)\" />\n </div>\n } @else {\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n (click)=\"selectMenuItem(item)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n {{ item.label }}\n }\n </button>\n }\n }\n </nav>\n }\n <div\n class=\"flex flex-wrap items-center gap-2 shrink-0\"\n [class.toolbar-end-vertical]=\"orientation() === 'vertical'\"\n [class.justify-end]=\"orientation() === 'horizontal'\"\n [class.mt-auto]=\"orientation() === 'vertical'\"\n [class.w-full]=\"orientation() === 'vertical'\"\n [class.justify-center]=\"orientation() === 'vertical'\">\n <ng-content select=\"[tailwind-toolbar-end]\" />\n </div>\n</div>\n", styles: [":host{display:block}:host .toolbar-menu-icon-on-light .tailwind-icon-glyph{filter:brightness(0) invert(1)}:host .toolbar-end-vertical tailwind-button{display:block;width:100%}:host .toolbar-end-vertical tailwind-button>button{width:100%;justify-content:center}\n"] }]
|
|
4252
4251
|
}], 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 }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", 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"] }] } });
|
|
@@ -4275,10 +4274,10 @@ class TailwindDivider extends TailwindComponent {
|
|
|
4275
4274
|
return ['border-neutral-200', variant].join(' ');
|
|
4276
4275
|
}, ...(ngDevMode ? [{ debugName: "ruleLineClass" }] : /* istanbul ignore next */ []));
|
|
4277
4276
|
labeledRowClass = computed(() => ['flex items-center gap-3 w-full my-4', this.inset() ? 'mx-4' : ''].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "labeledRowClass" }] : /* istanbul ignore next */ []));
|
|
4278
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4279
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4277
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindDivider, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4278
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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()) {\n <div [class]=\"labeledRowClass()\" role=\"separator\" [attr.aria-label]=\"label()\">\n <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\n <span class=\"text-xs font-medium text-neutral-500 shrink-0\">{{ label() }}</span>\n <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\n </div>\n} @else {\n <div [class]=\"ruleClasses()\" role=\"separator\"></div>\n}\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4280
4279
|
}
|
|
4281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4280
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindDivider, decorators: [{
|
|
4282
4281
|
type: Component,
|
|
4283
4282
|
args: [{ selector: 'tailwind-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isLabeledHorizontal()) {\n <div [class]=\"labeledRowClass()\" role=\"separator\" [attr.aria-label]=\"label()\">\n <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\n <span class=\"text-xs font-medium text-neutral-500 shrink-0\">{{ label() }}</span>\n <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\n </div>\n} @else {\n <div [class]=\"ruleClasses()\" role=\"separator\"></div>\n}\n", styles: [":host{display:block}\n"] }]
|
|
4284
4283
|
}], 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 }] }] } });
|
|
@@ -4336,10 +4335,10 @@ class TailwindMeter extends TailwindComponent {
|
|
|
4336
4335
|
};
|
|
4337
4336
|
return map[variant] ?? map['primary'];
|
|
4338
4337
|
}
|
|
4339
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4340
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4338
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindMeter, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4339
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindMeter, isStandalone: true, selector: "tailwind-meter", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full space-y-2\">\n <div\n [class]=\"trackContainerClasses()\"\n role=\"meter\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"scaleMax()\"\n [attr.aria-valuenow]=\"totalValue()\"\n [attr.aria-label]=\"'Meter'\">\n @for (seg of segmentLayouts(); track $index) {\n @if (seg.widthPct > 0) {\n <div\n class=\"h-full min-w-0 transition-all duration-300 ease-out\"\n [class]=\"seg.barClass\"\n [style.width.%]=\"seg.widthPct\"\n [attr.title]=\"seg.label + ': ' + seg.value\"></div>\n }\n }\n </div>\n\n @if (showLabels()) {\n <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs\">\n @for (seg of segments(); track $index) {\n <span class=\"inline-flex items-center gap-1.5\">\n <span class=\"inline-block size-2 rounded-sm shrink-0\" [class]=\"legendSwatchClass(seg.variant)\"></span>\n <span class=\"text-neutral-700\">{{ seg.label }}</span>\n <span class=\"text-neutral-500\">({{ seg.value }})</span>\n </span>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4341
4340
|
}
|
|
4342
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4341
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindMeter, decorators: [{
|
|
4343
4342
|
type: Component,
|
|
4344
4343
|
args: [{ selector: 'tailwind-meter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full space-y-2\">\n <div\n [class]=\"trackContainerClasses()\"\n role=\"meter\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"scaleMax()\"\n [attr.aria-valuenow]=\"totalValue()\"\n [attr.aria-label]=\"'Meter'\">\n @for (seg of segmentLayouts(); track $index) {\n @if (seg.widthPct > 0) {\n <div\n class=\"h-full min-w-0 transition-all duration-300 ease-out\"\n [class]=\"seg.barClass\"\n [style.width.%]=\"seg.widthPct\"\n [attr.title]=\"seg.label + ': ' + seg.value\"></div>\n }\n }\n </div>\n\n @if (showLabels()) {\n <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs\">\n @for (seg of segments(); track $index) {\n <span class=\"inline-flex items-center gap-1.5\">\n <span class=\"inline-block size-2 rounded-sm shrink-0\" [class]=\"legendSwatchClass(seg.variant)\"></span>\n <span class=\"text-neutral-700\">{{ seg.label }}</span>\n <span class=\"text-neutral-500\">({{ seg.value }})</span>\n </span>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
4345
4344
|
}], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
@@ -4619,8 +4618,8 @@ class TailwindSlider extends TailwindComponent {
|
|
|
4619
4618
|
this.onChange(this.singleValue());
|
|
4620
4619
|
}
|
|
4621
4620
|
}
|
|
4622
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4623
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4621
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4622
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindSlider, isStandalone: true, selector: "tailwind-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hostDisabled: { classPropertyName: "hostDisabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
4624
4623
|
{
|
|
4625
4624
|
provide: NG_VALUE_ACCESSOR,
|
|
4626
4625
|
useExisting: forwardRef(() => TailwindSlider),
|
|
@@ -4628,7 +4627,7 @@ class TailwindSlider extends TailwindComponent {
|
|
|
4628
4627
|
}
|
|
4629
4628
|
], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (orientation() === 'horizontal') {\n <div\n #track\n class=\"relative w-full touch-none select-none py-3\"\n [class.opacity-50]=\"isEffectivelyDisabled()\"\n [class.pointer-events-none]=\"isEffectivelyDisabled()\"\n (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\n <div class=\"relative h-6 w-full\">\n <!-- rail -->\n <div\n class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-neutral-200\"\n [class]=\"trackThickness()\"></div>\n\n @if (showTicks()) {\n @for (p of tickPositions(); track $index) {\n <div\n class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-neutral-300\"\n [style.left.%]=\"p\"></div>\n }\n }\n\n <!-- fill -->\n <div\n class=\"pointer-events-none absolute top-1/2 z-1 -translate-y-1/2 rounded-full\"\n [class]=\"trackThickness()\"\n [style.background-color]=\"accentVars().fill\"\n [style.left.%]=\"fillStartPct()\"\n [style.width.%]=\"fillWidthPct()\"></div>\n\n @if (range()) {\n <button\n type=\"button\"\n [disabled]=\"isEffectivelyDisabled()\"\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\"\n [class]=\"thumbSizeClass()\"\n [style.background-color]=\"accentVars().thumb\"\n [style.--slider-ring]=\"accentVars().ring\"\n [style.left.%]=\"lowPct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"rangeLow()\"\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\n (keydown)=\"onKeyDown($event, 0)\"></button>\n <button\n type=\"button\"\n [disabled]=\"isEffectivelyDisabled()\"\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\"\n [class]=\"thumbSizeClass()\"\n [style.background-color]=\"accentVars().thumb\"\n [style.--slider-ring]=\"accentVars().ring\"\n [style.left.%]=\"highPct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"rangeHigh()\"\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n (pointerdown)=\"onThumbPointerDown($event, 1)\"\n (keydown)=\"onKeyDown($event, 1)\"></button>\n } @else {\n <button\n type=\"button\"\n [disabled]=\"isEffectivelyDisabled()\"\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\"\n [class]=\"thumbSizeClass()\"\n [style.background-color]=\"accentVars().thumb\"\n [style.--slider-ring]=\"accentVars().ring\"\n [style.left.%]=\"singlePct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"singleValue()\"\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\n (keydown)=\"onKeyDown($event, 0)\"></button>\n }\n </div>\n </div>\n} @else {\n <div\n #track\n class=\"relative mx-auto h-52 w-10 touch-none select-none\"\n [class.opacity-50]=\"isEffectivelyDisabled()\"\n [class.pointer-events-none]=\"isEffectivelyDisabled()\"\n (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\n <div class=\"relative h-full w-full\">\n <div\n class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-neutral-200\"\n [class]=\"verticalTrackThickness()\"></div>\n\n @if (showTicks()) {\n @for (p of tickPositions(); track $index) {\n <div\n class=\"pointer-events-none absolute left-1/2 w-2 h-px -translate-x-1/2 translate-y-1/2 bg-neutral-300\"\n [style.bottom.%]=\"p\"></div>\n }\n }\n\n <div\n class=\"pointer-events-none absolute bottom-0 left-1/2 z-1 -translate-x-1/2 rounded-full\"\n [class]=\"verticalTrackThickness()\"\n [style.background-color]=\"accentVars().fill\"\n [style.bottom.%]=\"fillStartPct()\"\n [style.height.%]=\"fillWidthPct()\"></div>\n\n @if (range()) {\n <button\n type=\"button\"\n [disabled]=\"isEffectivelyDisabled()\"\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\"\n [class]=\"thumbSizeClass()\"\n [style.background-color]=\"accentVars().thumb\"\n [style.--slider-ring]=\"accentVars().ring\"\n [style.bottom.%]=\"lowPct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"rangeLow()\"\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\n (keydown)=\"onKeyDown($event, 0)\"></button>\n <button\n type=\"button\"\n [disabled]=\"isEffectivelyDisabled()\"\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\"\n [class]=\"thumbSizeClass()\"\n [style.background-color]=\"accentVars().thumb\"\n [style.--slider-ring]=\"accentVars().ring\"\n [style.bottom.%]=\"highPct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"rangeHigh()\"\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n (pointerdown)=\"onThumbPointerDown($event, 1)\"\n (keydown)=\"onKeyDown($event, 1)\"></button>\n } @else {\n <button\n type=\"button\"\n [disabled]=\"isEffectivelyDisabled()\"\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\"\n [class]=\"thumbSizeClass()\"\n [style.background-color]=\"accentVars().thumb\"\n [style.--slider-ring]=\"accentVars().ring\"\n [style.bottom.%]=\"singlePct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"singleValue()\"\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\n (keydown)=\"onKeyDown($event, 0)\"></button>\n }\n </div>\n </div>\n}\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4630
4629
|
}
|
|
4631
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4630
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindSlider, decorators: [{
|
|
4632
4631
|
type: Component,
|
|
4633
4632
|
args: [{ selector: 'tailwind-slider', providers: [
|
|
4634
4633
|
{
|