angular-tailwind-components 1.1.1 → 1.1.3
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.
|
@@ -1723,7 +1723,7 @@ class TailwindCheckbox extends TailwindComponent {
|
|
|
1723
1723
|
useExisting: forwardRef(() => TailwindCheckbox),
|
|
1724
1724
|
multi: true
|
|
1725
1725
|
}
|
|
1726
|
-
], usesInheritance: true, ngImport: i0, template: "<
|
|
1726
|
+
], usesInheritance: true, ngImport: i0, template: "<div\n class=\"inline-flex items-center gap-2.5 select-none\"\n [class.opacity-50]=\"isDisabled()\">\n <label\n class=\"relative flex items-center justify-center shrink-0\"\n [class.cursor-pointer]=\"!isDisabled()\"\n [class.cursor-not-allowed]=\"isDisabled()\"\n [attr.for]=\"id() ? id() + '-inner' : null\">\n <input\n [attr.id]=\"id() ? id() + '-inner' : null\"\n type=\"checkbox\"\n class=\"peer sr-only\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-describedby]=\"description() && id() ? id() + '-desc' : null\"\n [attr.aria-labelledby]=\"label() && id() ? id() + '-label' : null\"\n (change)=\"onCheckboxChange($event)\" />\n <div\n class=\"w-full h-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1\"\n [class.rounded-sm]=\"size() === 'xs' || size() === 'sm'\"\n [class.rounded-md]=\"size() !== 'xs' && size() !== 'sm'\"\n [class.border-surface-300]=\"!checked()\"\n [class.bg-white]=\"!checked()\"\n [class.border-primary-600]=\"checked()\"\n [class.bg-primary-600]=\"checked()\">\n @if (checked()) {\n <svg class=\"w-full h-full text-white p-0.5\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M13.5 4.5L6.5 11.5L3 8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </div>\n </label>\n\n <div class=\"flex flex-col gap-0.5 pt-0.5\">\n @if (label()) {\n <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-surface-800 leading-tight\">{{\n label()\n }}</span>\n }\n @if (description()) {\n <span [attr.id]=\"id() ? id() + '-desc' : null\" class=\"text-xs text-surface-500 leading-snug\">\n {{ description() }}\n </span>\n }\n </div>\n</div>\n", styles: [":host{display:inline-block}\n"] });
|
|
1727
1727
|
}
|
|
1728
1728
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCheckbox, decorators: [{
|
|
1729
1729
|
type: Component,
|
|
@@ -1733,7 +1733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1733
1733
|
useExisting: forwardRef(() => TailwindCheckbox),
|
|
1734
1734
|
multi: true
|
|
1735
1735
|
}
|
|
1736
|
-
], template: "<
|
|
1736
|
+
], template: "<div\n class=\"inline-flex items-center gap-2.5 select-none\"\n [class.opacity-50]=\"isDisabled()\">\n <label\n class=\"relative flex items-center justify-center shrink-0\"\n [class.cursor-pointer]=\"!isDisabled()\"\n [class.cursor-not-allowed]=\"isDisabled()\"\n [attr.for]=\"id() ? id() + '-inner' : null\">\n <input\n [attr.id]=\"id() ? id() + '-inner' : null\"\n type=\"checkbox\"\n class=\"peer sr-only\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-describedby]=\"description() && id() ? id() + '-desc' : null\"\n [attr.aria-labelledby]=\"label() && id() ? id() + '-label' : null\"\n (change)=\"onCheckboxChange($event)\" />\n <div\n class=\"w-full h-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1\"\n [class.rounded-sm]=\"size() === 'xs' || size() === 'sm'\"\n [class.rounded-md]=\"size() !== 'xs' && size() !== 'sm'\"\n [class.border-surface-300]=\"!checked()\"\n [class.bg-white]=\"!checked()\"\n [class.border-primary-600]=\"checked()\"\n [class.bg-primary-600]=\"checked()\">\n @if (checked()) {\n <svg class=\"w-full h-full text-white p-0.5\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M13.5 4.5L6.5 11.5L3 8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </div>\n </label>\n\n <div class=\"flex flex-col gap-0.5 pt-0.5\">\n @if (label()) {\n <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-surface-800 leading-tight\">{{\n label()\n }}</span>\n }\n @if (description()) {\n <span [attr.id]=\"id() ? id() + '-desc' : null\" class=\"text-xs text-surface-500 leading-snug\">\n {{ description() }}\n </span>\n }\n </div>\n</div>\n", styles: [":host{display:inline-block}\n"] }]
|
|
1737
1737
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
|
|
1738
1738
|
|
|
1739
1739
|
class TailwindRadioGroup extends TailwindComponent {
|
|
@@ -2142,6 +2142,22 @@ class TailwindToggle extends TailwindComponent {
|
|
|
2142
2142
|
const stateClass = this.checked() ? 'bg-primary-600' : 'bg-surface-300';
|
|
2143
2143
|
return [...base, sizeMap[this.size()], stateClass].join(' ');
|
|
2144
2144
|
}, ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
|
|
2145
|
+
/** `aria-label` / `aria-labelledby` for the switch (label text is not a hit target) */
|
|
2146
|
+
switchAria = computed(() => {
|
|
2147
|
+
const al = this.ariaLabel();
|
|
2148
|
+
if (al) {
|
|
2149
|
+
return { label: al, labelledBy: null };
|
|
2150
|
+
}
|
|
2151
|
+
const lb = this.label();
|
|
2152
|
+
const sid = this.id();
|
|
2153
|
+
if (lb && sid) {
|
|
2154
|
+
return { label: null, labelledBy: `${sid}-label` };
|
|
2155
|
+
}
|
|
2156
|
+
if (lb) {
|
|
2157
|
+
return { label: lb, labelledBy: null };
|
|
2158
|
+
}
|
|
2159
|
+
return { label: 'Toggle', labelledBy: null };
|
|
2160
|
+
}, ...(ngDevMode ? [{ debugName: "switchAria" }] : /* istanbul ignore next */ []));
|
|
2145
2161
|
/** Thumb (knob) classes */
|
|
2146
2162
|
thumbClasses = computed(() => {
|
|
2147
2163
|
const sizeMap = {
|
|
@@ -2190,7 +2206,7 @@ class TailwindToggle extends TailwindComponent {
|
|
|
2190
2206
|
useExisting: forwardRef(() => TailwindToggle),
|
|
2191
2207
|
multi: true
|
|
2192
2208
|
}
|
|
2193
|
-
], usesInheritance: true, ngImport: i0, template: "<
|
|
2209
|
+
], usesInheritance: true, ngImport: i0, template: "<div\n class=\"inline-flex items-center gap-3 select-none\"\n [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-surface-800\">{{ label() }}</span>\n }\n</div>\n", styles: [":host{display:inline-block}\n"] });
|
|
2194
2210
|
}
|
|
2195
2211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToggle, decorators: [{
|
|
2196
2212
|
type: Component,
|
|
@@ -2200,7 +2216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
2200
2216
|
useExisting: forwardRef(() => TailwindToggle),
|
|
2201
2217
|
multi: true
|
|
2202
2218
|
}
|
|
2203
|
-
], template: "<
|
|
2219
|
+
], template: "<div\n class=\"inline-flex items-center gap-3 select-none\"\n [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-surface-800\">{{ label() }}</span>\n }\n</div>\n", styles: [":host{display:inline-block}\n"] }]
|
|
2204
2220
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
|
|
2205
2221
|
|
|
2206
2222
|
class TailwindBadge extends TailwindComponent {
|
|
@@ -2264,12 +2280,24 @@ class TailwindTitle extends TailwindComponent {
|
|
|
2264
2280
|
const base = `${scale[tag]} ${layout}`.trim();
|
|
2265
2281
|
return extra ? `${base} ${extra}`.trim() : base;
|
|
2266
2282
|
}, ...(ngDevMode ? [{ debugName: "headingClasses" }] : /* istanbul ignore next */ []));
|
|
2283
|
+
iconSize = computed(() => {
|
|
2284
|
+
const tag = this.titleTag();
|
|
2285
|
+
const size = {
|
|
2286
|
+
h1: 32,
|
|
2287
|
+
h2: 24,
|
|
2288
|
+
h3: 20,
|
|
2289
|
+
h4: 18,
|
|
2290
|
+
h5: 16,
|
|
2291
|
+
h6: 14
|
|
2292
|
+
};
|
|
2293
|
+
return size[tag];
|
|
2294
|
+
}, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
2267
2295
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTitle, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2268
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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()) {\r\n @case ('h1') {\r\n <h1 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h1>\r\n }\r\n @case ('h2') {\r\n <h2 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h2>\r\n }\r\n @case ('h3') {\r\n <h3 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h3>\r\n }\r\n @case ('h4') {\r\n <h4 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h4>\r\n }\r\n @case ('h5') {\r\n <h5 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h5>\r\n }\r\n @case ('h6') {\r\n <h6 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h6>\r\n }\r\n}\r\n\r\n<ng-template #titleBody>\r\n @if (icon()) {\r\n <tailwind-icon [icon]=\"icon()!\" [size]=\"
|
|
2296
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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()) {\r\n @case ('h1') {\r\n <h1 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h1>\r\n }\r\n @case ('h2') {\r\n <h2 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h2>\r\n }\r\n @case ('h3') {\r\n <h3 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h3>\r\n }\r\n @case ('h4') {\r\n <h4 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h4>\r\n }\r\n @case ('h5') {\r\n <h5 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h5>\r\n }\r\n @case ('h6') {\r\n <h6 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h6>\r\n }\r\n}\r\n\r\n<ng-template #titleBody>\r\n @if (icon()) {\r\n <tailwind-icon [icon]=\"icon()!\" [size]=\"iconSize()\" />\r\n }\r\n <span class=\"min-w-0\">{{ text() }}</span>\r\n</ng-template>\r\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"] }] });
|
|
2269
2297
|
}
|
|
2270
2298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTitle, decorators: [{
|
|
2271
2299
|
type: Component,
|
|
2272
|
-
args: [{ selector: 'tailwind-title', imports: [NgTemplateOutlet, TailwindIcon], template: "@switch (titleTag()) {\r\n @case ('h1') {\r\n <h1 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h1>\r\n }\r\n @case ('h2') {\r\n <h2 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h2>\r\n }\r\n @case ('h3') {\r\n <h3 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h3>\r\n }\r\n @case ('h4') {\r\n <h4 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h4>\r\n }\r\n @case ('h5') {\r\n <h5 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h5>\r\n }\r\n @case ('h6') {\r\n <h6 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h6>\r\n }\r\n}\r\n\r\n<ng-template #titleBody>\r\n @if (icon()) {\r\n <tailwind-icon [icon]=\"icon()!\" [size]=\"
|
|
2300
|
+
args: [{ selector: 'tailwind-title', imports: [NgTemplateOutlet, TailwindIcon], template: "@switch (titleTag()) {\r\n @case ('h1') {\r\n <h1 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h1>\r\n }\r\n @case ('h2') {\r\n <h2 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h2>\r\n }\r\n @case ('h3') {\r\n <h3 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h3>\r\n }\r\n @case ('h4') {\r\n <h4 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h4>\r\n }\r\n @case ('h5') {\r\n <h5 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h5>\r\n }\r\n @case ('h6') {\r\n <h6 [class]=\"headingClasses()\">\r\n <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n </h6>\r\n }\r\n}\r\n\r\n<ng-template #titleBody>\r\n @if (icon()) {\r\n <tailwind-icon [icon]=\"icon()!\" [size]=\"iconSize()\" />\r\n }\r\n <span class=\"min-w-0\">{{ text() }}</span>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"] }]
|
|
2273
2301
|
}], 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 }] }] } });
|
|
2274
2302
|
|
|
2275
2303
|
class TailwindCard extends TailwindComponent {
|
|
@@ -2284,11 +2312,11 @@ class TailwindCard extends TailwindComponent {
|
|
|
2284
2312
|
/** Whether the card has a footer */
|
|
2285
2313
|
hasFooter = input(true, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
|
|
2286
2314
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCard, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2287
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindCard, isStandalone: true, selector: "tailwind-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, headerBg: { classPropertyName: "headerBg", publicName: "headerBg", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"bg-white rounded-xl border border-surface-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
|
|
2315
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindCard, isStandalone: true, selector: "tailwind-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, headerBg: { classPropertyName: "headerBg", publicName: "headerBg", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"bg-white rounded-xl border border-surface-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 border-b border-surface-100\" [class.bg-surface-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-surface-100 bg-surface-50/50\">\n <ng-content select=\"[tailwind-card-footer]\" />\n </div>\n }\n</div>\n", styles: [":host{display:block}\n"] });
|
|
2288
2316
|
}
|
|
2289
2317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCard, decorators: [{
|
|
2290
2318
|
type: Component,
|
|
2291
|
-
args: [{ selector: 'tailwind-card', template: "<div\n class=\"bg-white rounded-xl border border-surface-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
|
|
2319
|
+
args: [{ selector: 'tailwind-card', template: "<div\n class=\"bg-white rounded-xl border border-surface-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 border-b border-surface-100\" [class.bg-surface-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-surface-100 bg-surface-50/50\">\n <ng-content select=\"[tailwind-card-footer]\" />\n </div>\n }\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
2292
2320
|
}], 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 }] }] } });
|
|
2293
2321
|
|
|
2294
2322
|
class TailwindAlert extends TailwindComponent {
|
|
@@ -2951,6 +2979,7 @@ const I18N$2 = {
|
|
|
2951
2979
|
}
|
|
2952
2980
|
};
|
|
2953
2981
|
class TailwindDatePicker extends TailwindComponent {
|
|
2982
|
+
host = inject(ElementRef);
|
|
2954
2983
|
lang = inject(TAILWIND_DATETIME_LANGUAGE, { optional: true }) ?? 'it';
|
|
2955
2984
|
i18n = I18N$2[this.lang];
|
|
2956
2985
|
weekDays = this.i18n.weekDays;
|
|
@@ -3057,19 +3086,40 @@ class TailwindDatePicker extends TailwindComponent {
|
|
|
3057
3086
|
this.viewYear.set(t.getFullYear());
|
|
3058
3087
|
this.selectDay(t.getDate());
|
|
3059
3088
|
}
|
|
3089
|
+
onDocumentPointerDown(event) {
|
|
3090
|
+
if (!this.showCalendar())
|
|
3091
|
+
return;
|
|
3092
|
+
const t = event.target;
|
|
3093
|
+
if (t instanceof Node && this.host.nativeElement.contains(t))
|
|
3094
|
+
return;
|
|
3095
|
+
this.showCalendar.set(false);
|
|
3096
|
+
}
|
|
3097
|
+
onDocumentKeydown(event) {
|
|
3098
|
+
if (event.key !== 'Escape' || !this.showCalendar())
|
|
3099
|
+
return;
|
|
3100
|
+
event.stopPropagation();
|
|
3101
|
+
this.showCalendar.set(false);
|
|
3102
|
+
}
|
|
3060
3103
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDatePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3061
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDatePicker, isStandalone: true, selector: "tailwind-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, 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-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggleCalendar()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n clip-rule=\"evenodd\" />\n </svg>\n </div>\n\n @if (showCalendar()) {\n <div class=\"absolute z-popover mt-1 bg-white rounded-xl border border-surface-200 shadow-xl p-4 w-72\">\n <!-- Month/Year nav -->\n <div class=\"flex items-center justify-between mb-3\">\n <button\n type=\"button\"\n (click)=\"prevMonth()\"\n class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-surface-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n <span class=\"text-sm font-semibold text-surface-800\">{{ monthYearLabel() }}</span>\n <button\n type=\"button\"\n (click)=\"nextMonth()\"\n class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-surface-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n <!-- Weekdays -->\n <div class=\"grid grid-cols-7 gap-0 mb-1\">\n @for (day of weekDays; track $index) {\n <div class=\"text-center text-xs font-medium text-surface-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-surface-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-surface-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-surface-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToToday()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.today }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled() || !draft()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n {{ i18n.confirm }}\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}\n"] });
|
|
3104
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDatePicker, isStandalone: true, selector: "tailwind-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggleCalendar()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n clip-rule=\"evenodd\" />\n </svg>\n </div>\n\n @if (showCalendar()) {\n <div class=\"absolute z-popover mt-1 bg-white rounded-xl border border-surface-200 shadow-xl p-4 w-72\">\n <!-- Month/Year nav -->\n <div class=\"flex items-center justify-between mb-3\">\n <button\n type=\"button\"\n (click)=\"prevMonth()\"\n class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-surface-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n <span class=\"text-sm font-semibold text-surface-800\">{{ monthYearLabel() }}</span>\n <button\n type=\"button\"\n (click)=\"nextMonth()\"\n class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-surface-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n <!-- Weekdays -->\n <div class=\"grid grid-cols-7 gap-0 mb-1\">\n @for (day of weekDays; track $index) {\n <div class=\"text-center text-xs font-medium text-surface-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-surface-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-surface-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-surface-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToToday()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.today }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled() || !draft()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n {{ i18n.confirm }}\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}\n"] });
|
|
3062
3105
|
}
|
|
3063
3106
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDatePicker, decorators: [{
|
|
3064
3107
|
type: Component,
|
|
3065
3108
|
args: [{ selector: 'tailwind-date-picker', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggleCalendar()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n clip-rule=\"evenodd\" />\n </svg>\n </div>\n\n @if (showCalendar()) {\n <div class=\"absolute z-popover mt-1 bg-white rounded-xl border border-surface-200 shadow-xl p-4 w-72\">\n <!-- Month/Year nav -->\n <div class=\"flex items-center justify-between mb-3\">\n <button\n type=\"button\"\n (click)=\"prevMonth()\"\n class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-surface-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n <span class=\"text-sm font-semibold text-surface-800\">{{ monthYearLabel() }}</span>\n <button\n type=\"button\"\n (click)=\"nextMonth()\"\n class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-surface-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n <!-- Weekdays -->\n <div class=\"grid grid-cols-7 gap-0 mb-1\">\n @for (day of weekDays; track $index) {\n <div class=\"text-center text-xs font-medium text-surface-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-surface-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-surface-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-surface-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToToday()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.today }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled() || !draft()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n {{ i18n.confirm }}\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}\n"] }]
|
|
3066
|
-
}], 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"] }]
|
|
3109
|
+
}], 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: [{
|
|
3110
|
+
type: HostListener,
|
|
3111
|
+
args: ['document:pointerdown', ['$event']]
|
|
3112
|
+
}], onDocumentKeydown: [{
|
|
3113
|
+
type: HostListener,
|
|
3114
|
+
args: ['document:keydown', ['$event']]
|
|
3115
|
+
}] } });
|
|
3067
3116
|
|
|
3068
3117
|
const I18N$1 = {
|
|
3069
3118
|
it: { placeholder: 'Seleziona ora', now: 'Adesso', apply: 'Applica' },
|
|
3070
3119
|
en: { placeholder: 'Select time', now: 'Now', apply: 'Apply' }
|
|
3071
3120
|
};
|
|
3072
3121
|
class TailwindTimePicker extends TailwindComponent {
|
|
3122
|
+
host = inject(ElementRef);
|
|
3073
3123
|
lang = inject(TAILWIND_DATETIME_LANGUAGE, { optional: true }) ?? 'it';
|
|
3074
3124
|
i18n = I18N$1[this.lang];
|
|
3075
3125
|
hours = Array.from({ length: 24 }, (_, i) => i);
|
|
@@ -3135,13 +3185,33 @@ class TailwindTimePicker extends TailwindComponent {
|
|
|
3135
3185
|
return;
|
|
3136
3186
|
this.draft.set({ ...cur, m: Number(e.target.value) });
|
|
3137
3187
|
}
|
|
3188
|
+
onDocumentPointerDown(event) {
|
|
3189
|
+
if (!this.showPanel())
|
|
3190
|
+
return;
|
|
3191
|
+
const t = event.target;
|
|
3192
|
+
if (t instanceof Node && this.host.nativeElement.contains(t))
|
|
3193
|
+
return;
|
|
3194
|
+
this.showPanel.set(false);
|
|
3195
|
+
}
|
|
3196
|
+
onDocumentKeydown(event) {
|
|
3197
|
+
if (event.key !== 'Escape' || !this.showPanel())
|
|
3198
|
+
return;
|
|
3199
|
+
event.stopPropagation();
|
|
3200
|
+
this.showPanel.set(false);
|
|
3201
|
+
}
|
|
3138
3202
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3139
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTimePicker, isStandalone: true, selector: "tailwind-time-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, 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-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n (click)=\"togglePanel()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\"\n clip-rule=\"evenodd\" />\n </svg>\n\n @if (showPanel()) {\n <div\n class=\"absolute left-0 top-full z-popover mt-1 w-52 rounded-xl border border-surface-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-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-400 text-sm shrink-0\">:</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToNow()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.now }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n {{ i18n.apply }}\n </button>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block}\n"] });
|
|
3203
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTimePicker, isStandalone: true, selector: "tailwind-time-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n (click)=\"togglePanel()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\"\n clip-rule=\"evenodd\" />\n </svg>\n\n @if (showPanel()) {\n <div\n class=\"absolute left-0 top-full z-popover mt-1 w-52 rounded-xl border border-surface-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-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-400 text-sm shrink-0\">:</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToNow()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.now }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n {{ i18n.apply }}\n </button>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block}\n"] });
|
|
3140
3204
|
}
|
|
3141
3205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTimePicker, decorators: [{
|
|
3142
3206
|
type: Component,
|
|
3143
3207
|
args: [{ selector: 'tailwind-time-picker', imports: [], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n (click)=\"togglePanel()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\"\n clip-rule=\"evenodd\" />\n </svg>\n\n @if (showPanel()) {\n <div\n class=\"absolute left-0 top-full z-popover mt-1 w-52 rounded-xl border border-surface-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-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-400 text-sm shrink-0\">:</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToNow()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.now }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n {{ i18n.apply }}\n </button>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
3144
|
-
}], 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"] }]
|
|
3208
|
+
}], 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: [{
|
|
3209
|
+
type: HostListener,
|
|
3210
|
+
args: ['document:pointerdown', ['$event']]
|
|
3211
|
+
}], onDocumentKeydown: [{
|
|
3212
|
+
type: HostListener,
|
|
3213
|
+
args: ['document:keydown', ['$event']]
|
|
3214
|
+
}] } });
|
|
3145
3215
|
|
|
3146
3216
|
const I18N = {
|
|
3147
3217
|
it: {
|
|
@@ -3162,6 +3232,7 @@ const I18N = {
|
|
|
3162
3232
|
}
|
|
3163
3233
|
};
|
|
3164
3234
|
class TailwindDateTimePicker extends TailwindComponent {
|
|
3235
|
+
host = inject(ElementRef);
|
|
3165
3236
|
lang = inject(TAILWIND_DATETIME_LANGUAGE, { optional: true }) ?? 'it';
|
|
3166
3237
|
i18n = I18N[this.lang];
|
|
3167
3238
|
weekDays = this.i18n.weekDays;
|
|
@@ -3297,13 +3368,33 @@ class TailwindDateTimePicker extends TailwindComponent {
|
|
|
3297
3368
|
this.onChange(d ? new Date(d.getTime()) : null);
|
|
3298
3369
|
this.onTouched();
|
|
3299
3370
|
}
|
|
3371
|
+
onDocumentPointerDown(event) {
|
|
3372
|
+
if (!this.showPanel())
|
|
3373
|
+
return;
|
|
3374
|
+
const t = event.target;
|
|
3375
|
+
if (t instanceof Node && this.host.nativeElement.contains(t))
|
|
3376
|
+
return;
|
|
3377
|
+
this.showPanel.set(false);
|
|
3378
|
+
}
|
|
3379
|
+
onDocumentKeydown(event) {
|
|
3380
|
+
if (event.key !== 'Escape' || !this.showPanel())
|
|
3381
|
+
return;
|
|
3382
|
+
event.stopPropagation();
|
|
3383
|
+
this.showPanel.set(false);
|
|
3384
|
+
}
|
|
3300
3385
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDateTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3301
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDateTimePicker, isStandalone: true, selector: "tailwind-datetime-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, 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-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n [disabled]=\"isDisabled()\"\n (click)=\"togglePanel()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n clip-rule=\"evenodd\" />\n </svg>\n\n @if (showPanel()) {\n <div\n class=\"absolute left-0 top-full z-popover mt-1 w-80 max-w-full rounded-xl border border-surface-200 bg-white p-4 shadow-xl\">\n <div class=\"flex items-center justify-between mb-3\">\n <button\n type=\"button\"\n (click)=\"prevMonth()\"\n class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-surface-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n <span class=\"text-sm font-semibold text-surface-800\">{{ monthYearLabel() }}</span>\n <button\n type=\"button\"\n (click)=\"nextMonth()\"\n class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-surface-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n <div class=\"grid grid-cols-7 gap-0 mb-1\">\n @for (day of weekDays; track day) {\n <div class=\"text-center text-xs font-medium text-surface-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-surface-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-surface-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-surface-100 flex items-center gap-2\">\n <span class=\"text-xs font-medium text-surface-600 shrink-0\">{{ i18n.time }}</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-400 text-sm\">:</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToToday()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.today }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled() || !draft()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n {{ i18n.confirm }}\n </button>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\n"] });
|
|
3386
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDateTimePicker, isStandalone: true, selector: "tailwind-datetime-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n [disabled]=\"isDisabled()\"\n (click)=\"togglePanel()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n clip-rule=\"evenodd\" />\n </svg>\n\n @if (showPanel()) {\n <div\n class=\"absolute left-0 top-full z-popover mt-1 w-80 max-w-full rounded-xl border border-surface-200 bg-white p-4 shadow-xl\">\n <div class=\"flex items-center justify-between mb-3\">\n <button\n type=\"button\"\n (click)=\"prevMonth()\"\n class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-surface-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n <span class=\"text-sm font-semibold text-surface-800\">{{ monthYearLabel() }}</span>\n <button\n type=\"button\"\n (click)=\"nextMonth()\"\n class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-surface-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n <div class=\"grid grid-cols-7 gap-0 mb-1\">\n @for (day of weekDays; track day) {\n <div class=\"text-center text-xs font-medium text-surface-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-surface-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-surface-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-surface-100 flex items-center gap-2\">\n <span class=\"text-xs font-medium text-surface-600 shrink-0\">{{ i18n.time }}</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-400 text-sm\">:</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToToday()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.today }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled() || !draft()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n {{ i18n.confirm }}\n </button>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\n"] });
|
|
3302
3387
|
}
|
|
3303
3388
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDateTimePicker, decorators: [{
|
|
3304
3389
|
type: Component,
|
|
3305
3390
|
args: [{ selector: 'tailwind-datetime-picker', imports: [], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n [disabled]=\"isDisabled()\"\n (click)=\"togglePanel()\" />\n <svg\n class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n clip-rule=\"evenodd\" />\n </svg>\n\n @if (showPanel()) {\n <div\n class=\"absolute left-0 top-full z-popover mt-1 w-80 max-w-full rounded-xl border border-surface-200 bg-white p-4 shadow-xl\">\n <div class=\"flex items-center justify-between mb-3\">\n <button\n type=\"button\"\n (click)=\"prevMonth()\"\n class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-surface-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n <span class=\"text-sm font-semibold text-surface-800\">{{ monthYearLabel() }}</span>\n <button\n type=\"button\"\n (click)=\"nextMonth()\"\n class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n <svg\n class=\"w-4 h-4 text-surface-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n <div class=\"grid grid-cols-7 gap-0 mb-1\">\n @for (day of weekDays; track day) {\n <div class=\"text-center text-xs font-medium text-surface-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-surface-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-surface-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-surface-100 flex items-center gap-2\">\n <span class=\"text-xs font-medium text-surface-600 shrink-0\">{{ i18n.time }}</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-400 text-sm\">:</span>\n <select\n class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-100 flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n (click)=\"goToToday()\"\n [disabled]=\"isDisabled()\"\n class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n {{ i18n.today }}\n </button>\n <button\n type=\"button\"\n (click)=\"apply()\"\n [disabled]=\"isDisabled() || !draft()\"\n class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n {{ i18n.confirm }}\n </button>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\n"] }]
|
|
3306
|
-
}], 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 }] }]
|
|
3391
|
+
}], 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: [{
|
|
3392
|
+
type: HostListener,
|
|
3393
|
+
args: ['document:pointerdown', ['$event']]
|
|
3394
|
+
}], onDocumentKeydown: [{
|
|
3395
|
+
type: HostListener,
|
|
3396
|
+
args: ['document:keydown', ['$event']]
|
|
3397
|
+
}] } });
|
|
3307
3398
|
|
|
3308
3399
|
class TailwindStep extends TailwindComponent {
|
|
3309
3400
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
@@ -3762,6 +3853,8 @@ class TailwindSlider extends TailwindComponent {
|
|
|
3762
3853
|
showTicks = input(false, ...(ngDevMode ? [{ debugName: "showTicks" }] : /* istanbul ignore next */ []));
|
|
3763
3854
|
/** Control size */
|
|
3764
3855
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
3856
|
+
/** Track fill / thumb color */
|
|
3857
|
+
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
3765
3858
|
trackRef = viewChild('track', ...(ngDevMode ? [{ debugName: "trackRef" }] : /* istanbul ignore next */ []));
|
|
3766
3859
|
/** Single-thumb value */
|
|
3767
3860
|
singleValue = signal(0, ...(ngDevMode ? [{ debugName: "singleValue" }] : /* istanbul ignore next */ []));
|
|
@@ -3806,6 +3899,18 @@ class TailwindSlider extends TailwindComponent {
|
|
|
3806
3899
|
};
|
|
3807
3900
|
return map[this.size()];
|
|
3808
3901
|
}, ...(ngDevMode ? [{ debugName: "verticalTrackThickness" }] : /* istanbul ignore next */ []));
|
|
3902
|
+
/**
|
|
3903
|
+
* Uses theme CSS variables (`--color-*`) so accent colors work even when dynamic
|
|
3904
|
+
* `bg-*` utilities are not present in the compiled stylesheet (Tailwind content scan).
|
|
3905
|
+
*/
|
|
3906
|
+
accentVars = computed(() => {
|
|
3907
|
+
const name = this.variant();
|
|
3908
|
+
return {
|
|
3909
|
+
fill: `var(--color-${name}-500)`,
|
|
3910
|
+
thumb: `var(--color-${name}-600)`,
|
|
3911
|
+
ring: `var(--color-${name}-500)`
|
|
3912
|
+
};
|
|
3913
|
+
}, ...(ngDevMode ? [{ debugName: "accentVars" }] : /* istanbul ignore next */ []));
|
|
3809
3914
|
singlePct = computed(() => this.valueToPct(this.singleValue()), ...(ngDevMode ? [{ debugName: "singlePct" }] : /* istanbul ignore next */ []));
|
|
3810
3915
|
lowPct = computed(() => this.valueToPct(this.rangeLow()), ...(ngDevMode ? [{ debugName: "lowPct" }] : /* istanbul ignore next */ []));
|
|
3811
3916
|
highPct = computed(() => this.valueToPct(this.rangeHigh()), ...(ngDevMode ? [{ debugName: "highPct" }] : /* istanbul ignore next */ []));
|
|
@@ -4009,13 +4114,13 @@ class TailwindSlider extends TailwindComponent {
|
|
|
4009
4114
|
}
|
|
4010
4115
|
}
|
|
4011
4116
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4012
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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 }, hostDisabled: { classPropertyName: "hostDisabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
4117
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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: [
|
|
4013
4118
|
{
|
|
4014
4119
|
provide: NG_VALUE_ACCESSOR,
|
|
4015
4120
|
useExisting: forwardRef(() => TailwindSlider),
|
|
4016
4121
|
multi: true
|
|
4017
4122
|
}
|
|
4018
|
-
], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (orientation() === 'horizontal') {\r\n <div\r\n #track\r\n class=\"relative w-full touch-none select-none py-3\"\r\n [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n <div class=\"relative h-6 w-full\">\r\n <!-- rail -->\r\n <div\r\n class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-surface-200\"\r\n [class]=\"trackThickness()\"></div>\r\n\r\n @if (showTicks()) {\r\n @for (p of tickPositions(); track $index) {\r\n <div\r\n class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-surface-300\"\r\n [style.left.%]=\"p\"></div>\r\n }\r\n }\r\n\r\n <!-- fill -->\r\n <div\r\n class=\"pointer-events-none absolute top-1/2 -translate-y-1/2 rounded-full
|
|
4123
|
+
], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (orientation() === 'horizontal') {\r\n <div\r\n #track\r\n class=\"relative w-full touch-none select-none py-3\"\r\n [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n <div class=\"relative h-6 w-full\">\r\n <!-- rail -->\r\n <div\r\n class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-surface-200\"\r\n [class]=\"trackThickness()\"></div>\r\n\r\n @if (showTicks()) {\r\n @for (p of tickPositions(); track $index) {\r\n <div\r\n class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-surface-300\"\r\n [style.left.%]=\"p\"></div>\r\n }\r\n }\r\n\r\n <!-- fill -->\r\n <div\r\n class=\"pointer-events-none absolute top-1/2 z-1 -translate-y-1/2 rounded-full\"\r\n [class]=\"trackThickness()\"\r\n [style.background-color]=\"accentVars().fill\"\r\n [style.left.%]=\"fillStartPct()\"\r\n [style.width.%]=\"fillWidthPct()\"></div>\r\n\r\n @if (range()) {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.left.%]=\"lowPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeLow()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.left.%]=\"highPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeHigh()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n (keydown)=\"onKeyDown($event, 1)\"></button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.left.%]=\"singlePct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"singleValue()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n }\r\n </div>\r\n </div>\r\n} @else {\r\n <div\r\n #track\r\n class=\"relative mx-auto h-52 w-10 touch-none select-none\"\r\n [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n <div class=\"relative h-full w-full\">\r\n <div\r\n class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-surface-200\"\r\n [class]=\"verticalTrackThickness()\"></div>\r\n\r\n @if (showTicks()) {\r\n @for (p of tickPositions(); track $index) {\r\n <div\r\n class=\"pointer-events-none absolute left-1/2 w-2 h-px -translate-x-1/2 translate-y-1/2 bg-surface-300\"\r\n [style.bottom.%]=\"p\"></div>\r\n }\r\n }\r\n\r\n <div\r\n class=\"pointer-events-none absolute bottom-0 left-1/2 z-1 -translate-x-1/2 rounded-full\"\r\n [class]=\"verticalTrackThickness()\"\r\n [style.background-color]=\"accentVars().fill\"\r\n [style.bottom.%]=\"fillStartPct()\"\r\n [style.height.%]=\"fillWidthPct()\"></div>\r\n\r\n @if (range()) {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.bottom.%]=\"lowPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeLow()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.bottom.%]=\"highPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeHigh()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n (keydown)=\"onKeyDown($event, 1)\"></button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.bottom.%]=\"singlePct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"singleValue()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{display:block}.tailwind-slider-thumb{cursor:pointer}.tailwind-slider-thumb:focus-visible{outline:2px solid var(--slider-ring);outline-offset:2px}.tailwind-slider-thumb:focus:not(:focus-visible){outline:none}.tailwind-slider-thumb:disabled{cursor:not-allowed}\n"] });
|
|
4019
4124
|
}
|
|
4020
4125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSlider, decorators: [{
|
|
4021
4126
|
type: Component,
|
|
@@ -4025,8 +4130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
4025
4130
|
useExisting: forwardRef(() => TailwindSlider),
|
|
4026
4131
|
multi: true
|
|
4027
4132
|
}
|
|
4028
|
-
], template: "@if (orientation() === 'horizontal') {\r\n <div\r\n #track\r\n class=\"relative w-full touch-none select-none py-3\"\r\n [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n <div class=\"relative h-6 w-full\">\r\n <!-- rail -->\r\n <div\r\n class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-surface-200\"\r\n [class]=\"trackThickness()\"></div>\r\n\r\n @if (showTicks()) {\r\n @for (p of tickPositions(); track $index) {\r\n <div\r\n class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-surface-300\"\r\n [style.left.%]=\"p\"></div>\r\n }\r\n }\r\n\r\n <!-- fill -->\r\n <div\r\n class=\"pointer-events-none absolute top-1/2 -translate-y-1/2 rounded-full
|
|
4029
|
-
}], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], hostDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
4133
|
+
], template: "@if (orientation() === 'horizontal') {\r\n <div\r\n #track\r\n class=\"relative w-full touch-none select-none py-3\"\r\n [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n <div class=\"relative h-6 w-full\">\r\n <!-- rail -->\r\n <div\r\n class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-surface-200\"\r\n [class]=\"trackThickness()\"></div>\r\n\r\n @if (showTicks()) {\r\n @for (p of tickPositions(); track $index) {\r\n <div\r\n class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-surface-300\"\r\n [style.left.%]=\"p\"></div>\r\n }\r\n }\r\n\r\n <!-- fill -->\r\n <div\r\n class=\"pointer-events-none absolute top-1/2 z-1 -translate-y-1/2 rounded-full\"\r\n [class]=\"trackThickness()\"\r\n [style.background-color]=\"accentVars().fill\"\r\n [style.left.%]=\"fillStartPct()\"\r\n [style.width.%]=\"fillWidthPct()\"></div>\r\n\r\n @if (range()) {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.left.%]=\"lowPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeLow()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.left.%]=\"highPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeHigh()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n (keydown)=\"onKeyDown($event, 1)\"></button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.left.%]=\"singlePct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"singleValue()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n }\r\n </div>\r\n </div>\r\n} @else {\r\n <div\r\n #track\r\n class=\"relative mx-auto h-52 w-10 touch-none select-none\"\r\n [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n <div class=\"relative h-full w-full\">\r\n <div\r\n class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-surface-200\"\r\n [class]=\"verticalTrackThickness()\"></div>\r\n\r\n @if (showTicks()) {\r\n @for (p of tickPositions(); track $index) {\r\n <div\r\n class=\"pointer-events-none absolute left-1/2 w-2 h-px -translate-x-1/2 translate-y-1/2 bg-surface-300\"\r\n [style.bottom.%]=\"p\"></div>\r\n }\r\n }\r\n\r\n <div\r\n class=\"pointer-events-none absolute bottom-0 left-1/2 z-1 -translate-x-1/2 rounded-full\"\r\n [class]=\"verticalTrackThickness()\"\r\n [style.background-color]=\"accentVars().fill\"\r\n [style.bottom.%]=\"fillStartPct()\"\r\n [style.height.%]=\"fillWidthPct()\"></div>\r\n\r\n @if (range()) {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.bottom.%]=\"lowPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeLow()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.bottom.%]=\"highPct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"rangeHigh()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n (keydown)=\"onKeyDown($event, 1)\"></button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n [disabled]=\"isEffectivelyDisabled()\"\r\n class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n [class]=\"thumbSizeClass()\"\r\n [style.background-color]=\"accentVars().thumb\"\r\n [style.--slider-ring]=\"accentVars().ring\"\r\n [style.bottom.%]=\"singlePct()\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"singleValue()\"\r\n [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n (keydown)=\"onKeyDown($event, 0)\"></button>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{display:block}.tailwind-slider-thumb{cursor:pointer}.tailwind-slider-thumb:focus-visible{outline:2px solid var(--slider-ring);outline-offset:2px}.tailwind-slider-thumb:focus:not(:focus-visible){outline:none}.tailwind-slider-thumb:disabled{cursor:not-allowed}\n"] }]
|
|
4134
|
+
}], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], hostDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
4030
4135
|
|
|
4031
4136
|
// Batch 1 — Foundation
|
|
4032
4137
|
|