angular-tailwind-components 1.1.2 → 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 {
|
|
@@ -2296,11 +2312,11 @@ class TailwindCard extends TailwindComponent {
|
|
|
2296
2312
|
/** Whether the card has a footer */
|
|
2297
2313
|
hasFooter = input(true, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
|
|
2298
2314
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCard, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2299
|
-
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"] });
|
|
2300
2316
|
}
|
|
2301
2317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCard, decorators: [{
|
|
2302
2318
|
type: Component,
|
|
2303
|
-
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"] }]
|
|
2304
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 }] }] } });
|
|
2305
2321
|
|
|
2306
2322
|
class TailwindAlert extends TailwindComponent {
|
|
@@ -2963,6 +2979,7 @@ const I18N$2 = {
|
|
|
2963
2979
|
}
|
|
2964
2980
|
};
|
|
2965
2981
|
class TailwindDatePicker extends TailwindComponent {
|
|
2982
|
+
host = inject(ElementRef);
|
|
2966
2983
|
lang = inject(TAILWIND_DATETIME_LANGUAGE, { optional: true }) ?? 'it';
|
|
2967
2984
|
i18n = I18N$2[this.lang];
|
|
2968
2985
|
weekDays = this.i18n.weekDays;
|
|
@@ -3069,19 +3086,40 @@ class TailwindDatePicker extends TailwindComponent {
|
|
|
3069
3086
|
this.viewYear.set(t.getFullYear());
|
|
3070
3087
|
this.selectDay(t.getDate());
|
|
3071
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
|
+
}
|
|
3072
3103
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDatePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3073
|
-
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"] });
|
|
3074
3105
|
}
|
|
3075
3106
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDatePicker, decorators: [{
|
|
3076
3107
|
type: Component,
|
|
3077
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"] }]
|
|
3078
|
-
}], 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
|
+
}] } });
|
|
3079
3116
|
|
|
3080
3117
|
const I18N$1 = {
|
|
3081
3118
|
it: { placeholder: 'Seleziona ora', now: 'Adesso', apply: 'Applica' },
|
|
3082
3119
|
en: { placeholder: 'Select time', now: 'Now', apply: 'Apply' }
|
|
3083
3120
|
};
|
|
3084
3121
|
class TailwindTimePicker extends TailwindComponent {
|
|
3122
|
+
host = inject(ElementRef);
|
|
3085
3123
|
lang = inject(TAILWIND_DATETIME_LANGUAGE, { optional: true }) ?? 'it';
|
|
3086
3124
|
i18n = I18N$1[this.lang];
|
|
3087
3125
|
hours = Array.from({ length: 24 }, (_, i) => i);
|
|
@@ -3147,13 +3185,33 @@ class TailwindTimePicker extends TailwindComponent {
|
|
|
3147
3185
|
return;
|
|
3148
3186
|
this.draft.set({ ...cur, m: Number(e.target.value) });
|
|
3149
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
|
+
}
|
|
3150
3202
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3151
|
-
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"] });
|
|
3152
3204
|
}
|
|
3153
3205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTimePicker, decorators: [{
|
|
3154
3206
|
type: Component,
|
|
3155
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"] }]
|
|
3156
|
-
}], 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
|
+
}] } });
|
|
3157
3215
|
|
|
3158
3216
|
const I18N = {
|
|
3159
3217
|
it: {
|
|
@@ -3174,6 +3232,7 @@ const I18N = {
|
|
|
3174
3232
|
}
|
|
3175
3233
|
};
|
|
3176
3234
|
class TailwindDateTimePicker extends TailwindComponent {
|
|
3235
|
+
host = inject(ElementRef);
|
|
3177
3236
|
lang = inject(TAILWIND_DATETIME_LANGUAGE, { optional: true }) ?? 'it';
|
|
3178
3237
|
i18n = I18N[this.lang];
|
|
3179
3238
|
weekDays = this.i18n.weekDays;
|
|
@@ -3309,13 +3368,33 @@ class TailwindDateTimePicker extends TailwindComponent {
|
|
|
3309
3368
|
this.onChange(d ? new Date(d.getTime()) : null);
|
|
3310
3369
|
this.onTouched();
|
|
3311
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
|
+
}
|
|
3312
3385
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDateTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3313
|
-
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"] });
|
|
3314
3387
|
}
|
|
3315
3388
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDateTimePicker, decorators: [{
|
|
3316
3389
|
type: Component,
|
|
3317
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"] }]
|
|
3318
|
-
}], 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
|
+
}] } });
|
|
3319
3398
|
|
|
3320
3399
|
class TailwindStep extends TailwindComponent {
|
|
3321
3400
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
@@ -3774,6 +3853,8 @@ class TailwindSlider extends TailwindComponent {
|
|
|
3774
3853
|
showTicks = input(false, ...(ngDevMode ? [{ debugName: "showTicks" }] : /* istanbul ignore next */ []));
|
|
3775
3854
|
/** Control size */
|
|
3776
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 */ []));
|
|
3777
3858
|
trackRef = viewChild('track', ...(ngDevMode ? [{ debugName: "trackRef" }] : /* istanbul ignore next */ []));
|
|
3778
3859
|
/** Single-thumb value */
|
|
3779
3860
|
singleValue = signal(0, ...(ngDevMode ? [{ debugName: "singleValue" }] : /* istanbul ignore next */ []));
|
|
@@ -3818,6 +3899,18 @@ class TailwindSlider extends TailwindComponent {
|
|
|
3818
3899
|
};
|
|
3819
3900
|
return map[this.size()];
|
|
3820
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 */ []));
|
|
3821
3914
|
singlePct = computed(() => this.valueToPct(this.singleValue()), ...(ngDevMode ? [{ debugName: "singlePct" }] : /* istanbul ignore next */ []));
|
|
3822
3915
|
lowPct = computed(() => this.valueToPct(this.rangeLow()), ...(ngDevMode ? [{ debugName: "lowPct" }] : /* istanbul ignore next */ []));
|
|
3823
3916
|
highPct = computed(() => this.valueToPct(this.rangeHigh()), ...(ngDevMode ? [{ debugName: "highPct" }] : /* istanbul ignore next */ []));
|
|
@@ -4021,13 +4114,13 @@ class TailwindSlider extends TailwindComponent {
|
|
|
4021
4114
|
}
|
|
4022
4115
|
}
|
|
4023
4116
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4024
|
-
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: [
|
|
4025
4118
|
{
|
|
4026
4119
|
provide: NG_VALUE_ACCESSOR,
|
|
4027
4120
|
useExisting: forwardRef(() => TailwindSlider),
|
|
4028
4121
|
multi: true
|
|
4029
4122
|
}
|
|
4030
|
-
], 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"] });
|
|
4031
4124
|
}
|
|
4032
4125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSlider, decorators: [{
|
|
4033
4126
|
type: Component,
|
|
@@ -4037,8 +4130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
4037
4130
|
useExisting: forwardRef(() => TailwindSlider),
|
|
4038
4131
|
multi: true
|
|
4039
4132
|
}
|
|
4040
|
-
], 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
|
|
4041
|
-
}], 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 }] }] } });
|
|
4042
4135
|
|
|
4043
4136
|
// Batch 1 — Foundation
|
|
4044
4137
|
|