angular-tailwind-components 1.8.2 → 1.8.3-RC2
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.
|
@@ -714,7 +714,7 @@ class TailwindSortHeaderDirective {
|
|
|
714
714
|
const icon = active ? (asc ? 'chevron-up' : 'chevron-down') : 'chevron-up-down';
|
|
715
715
|
this.iconRef.setInput('icon', icon);
|
|
716
716
|
this.iconRef.setInput('size', 14);
|
|
717
|
-
this.iconRef.setInput('class', active ? 'shrink-0 text-primary-600' : 'shrink-0 text-neutral-
|
|
717
|
+
this.iconRef.setInput('class', active ? 'shrink-0 text-primary-600' : 'shrink-0 text-neutral-600');
|
|
718
718
|
this.renderer.setAttribute(this.host.nativeElement, 'aria-label', active ? `Sorted ${asc ? 'ascending' : 'descending'}, activate to reverse` : `Sort by ${columnKey}`);
|
|
719
719
|
this.iconRef.changeDetectorRef.detectChanges();
|
|
720
720
|
};
|
|
@@ -781,7 +781,7 @@ const iconPixelSizeMap = {
|
|
|
781
781
|
xl: 22
|
|
782
782
|
};
|
|
783
783
|
/** Always transparent background; no tint on hover, focus, or active. */
|
|
784
|
-
const transparentColorClasses = 'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent border-transparent shadow-none text-neutral-
|
|
784
|
+
const transparentColorClasses = 'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent border-transparent shadow-none text-neutral-600 focus-visible:outline-neutral-400';
|
|
785
785
|
class TailwindButton extends TailwindComponent {
|
|
786
786
|
defaultKind = inject(TAILWIND_BUTTON_KIND, { optional: true });
|
|
787
787
|
/** Visual color */
|
|
@@ -823,9 +823,9 @@ class TailwindButton extends TailwindComponent {
|
|
|
823
823
|
const solidMap = {
|
|
824
824
|
primary: 'bg-primary-600 text-on-primary-600 hover:bg-primary-700 hover:text-on-primary-700 active:bg-primary-800 active:text-on-primary-800 border-transparent focus-visible:outline-primary-600 shadow-sm',
|
|
825
825
|
secondary: 'bg-neutral-100 text-neutral-800 hover:bg-neutral-200 active:bg-neutral-300 border-neutral-300 focus-visible:outline-neutral-500 shadow-sm',
|
|
826
|
-
danger: 'bg-danger-600 text-on-danger-600 hover:bg-danger-700 hover:text-on-danger-700 active:bg-danger-800 active:text-on-danger-800 border-transparent focus-visible:outline-danger-
|
|
827
|
-
success: 'bg-success-
|
|
828
|
-
warning: 'bg-warning-500 text-on-warning-500 hover:bg-warning-600 hover:text-on-warning-600 active:bg-warning-700 active:text-on-warning-700 border-transparent focus-visible:outline-warning-
|
|
826
|
+
danger: 'bg-danger-600 text-on-danger-600 hover:bg-danger-700 hover:text-on-danger-700 active:bg-danger-800 active:text-on-danger-800 border-transparent focus-visible:outline-danger-700 shadow-sm',
|
|
827
|
+
success: 'bg-success-700 text-on-success-700 hover:bg-success-800 hover:text-on-success-800 active:bg-success-900 active:text-on-success-900 border-transparent focus-visible:outline-success-600 shadow-sm',
|
|
828
|
+
warning: 'bg-warning-500 text-on-warning-500 hover:bg-warning-600 hover:text-on-warning-600 active:bg-warning-700 active:text-on-warning-700 border-transparent focus-visible:outline-warning-600 shadow-sm',
|
|
829
829
|
info: 'bg-info-600 text-on-info-600 hover:bg-info-700 hover:text-on-info-700 active:bg-info-800 active:text-on-info-800 border-transparent focus-visible:outline-info-600 shadow-sm',
|
|
830
830
|
transparent: transparentColorClasses
|
|
831
831
|
};
|
|
@@ -834,8 +834,8 @@ class TailwindButton extends TailwindComponent {
|
|
|
834
834
|
primary: 'bg-primary-600 text-on-primary-600 border-0 shadow-none focus-visible:outline-primary-600',
|
|
835
835
|
secondary: 'bg-neutral-100 text-neutral-800 border-0 shadow-none focus-visible:outline-neutral-500',
|
|
836
836
|
danger: 'bg-danger-600 text-on-danger-600 border-0 shadow-none focus-visible:outline-danger-600',
|
|
837
|
-
success: 'bg-success-
|
|
838
|
-
warning: 'bg-warning-500 text-on-warning-500 border-0 shadow-none focus-visible:outline-warning-
|
|
837
|
+
success: 'bg-success-700 text-on-success-700 border-0 shadow-none focus-visible:outline-success-600',
|
|
838
|
+
warning: 'bg-warning-500 text-on-warning-500 border-0 shadow-none focus-visible:outline-warning-600',
|
|
839
839
|
info: 'bg-info-600 text-on-info-600 border-0 shadow-none focus-visible:outline-info-600',
|
|
840
840
|
transparent: transparentColorClasses
|
|
841
841
|
};
|
|
@@ -1706,6 +1706,8 @@ class TailwindSelect extends TailwindComponent {
|
|
|
1706
1706
|
outsideSub = null;
|
|
1707
1707
|
/** Label text */
|
|
1708
1708
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1709
|
+
/** Accessible name for the combobox when `label` is omitted */
|
|
1710
|
+
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1709
1711
|
/** Placeholder text */
|
|
1710
1712
|
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1711
1713
|
/** Available options */
|
|
@@ -1737,6 +1739,20 @@ class TailwindSelect extends TailwindComponent {
|
|
|
1737
1739
|
return null;
|
|
1738
1740
|
return this.options().find(o => this.optionValueEquals(o.value, v)) ?? null;
|
|
1739
1741
|
}, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
|
|
1742
|
+
/** Accessible name for the combobox when there is no visible `label` */
|
|
1743
|
+
comboboxAriaLabel = computed(() => {
|
|
1744
|
+
if (this.label())
|
|
1745
|
+
return null;
|
|
1746
|
+
const base = this.ariaLabel();
|
|
1747
|
+
if (!base)
|
|
1748
|
+
return null;
|
|
1749
|
+
if (this.multiple()) {
|
|
1750
|
+
const count = this.selectedOptions().length;
|
|
1751
|
+
return count > 0 ? `${base}, ${count} selected` : base;
|
|
1752
|
+
}
|
|
1753
|
+
const selected = this.selectedOption();
|
|
1754
|
+
return selected ? `${base}, ${selected.label}` : base;
|
|
1755
|
+
}, ...(ngDevMode ? [{ debugName: "comboboxAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1740
1756
|
/** Selected option objects in `options()` order (multiple mode only) */
|
|
1741
1757
|
selectedOptions = computed(() => {
|
|
1742
1758
|
if (!this.multiple())
|
|
@@ -1975,13 +1991,13 @@ class TailwindSelect extends TailwindComponent {
|
|
|
1975
1991
|
}
|
|
1976
1992
|
}
|
|
1977
1993
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1978
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindSelect, isStandalone: true, selector: "tailwind-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
|
|
1994
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindSelect, isStandalone: true, selector: "tailwind-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
|
|
1979
1995
|
{
|
|
1980
1996
|
provide: NG_VALUE_ACCESSOR,
|
|
1981
1997
|
useExisting: forwardRef(() => TailwindSelect),
|
|
1982
1998
|
multi: true
|
|
1983
1999
|
}
|
|
1984
|
-
], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label\n [attr.for]=\"id() ? id() + '-inner' : null\"\n class=\"text-sm font-medium text-neutral-700\"\n [class.text-danger-600]=\"hasError()\">\n {{ label() }}\n </label>\n }\n\n <!-- Trigger button -->\n <button\n type=\"button\"\n [attr.id]=\"id() ? id() + '-inner' : null\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n [disabled]=\"isDisabled()\"\n [class]=\"triggerClasses()\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeydown($event)\">\n @if (multiple()) {\n <span class=\"flex flex-wrap gap-1 flex-1 min-w-0 mr-2\" [class.text-neutral-400]=\"selectedOptions().length === 0\">\n @if (selectedOptions().length === 0) {\n {{ placeholder() }}\n } @else {\n @for (opt of selectedOptions(); track opt) {\n <span class=\"rounded-md bg-neutral-100 px-2 py-0.5 text-sm text-neutral-800\">{{ opt.label }}</span>\n }\n }\n </span>\n } @else {\n <span [class.text-neutral-400]=\"!selectedOption()\">\n {{ selectedOption()?.label ?? placeholder() }}\n </span>\n }\n\n <tailwind-icon\n icon=\"chevron-down\"\n [size]=\"16\"\n class=\"shrink-0 ml-2 text-neutral-
|
|
2000
|
+
], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label\n [attr.for]=\"id() ? id() + '-inner' : null\"\n class=\"text-sm font-medium text-neutral-700\"\n [class.text-danger-600]=\"hasError()\">\n {{ label() }}\n </label>\n }\n\n <!-- Trigger button -->\n <button\n type=\"button\"\n [attr.id]=\"id() ? id() + '-inner' : null\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"comboboxAriaLabel()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n [disabled]=\"isDisabled()\"\n [class]=\"triggerClasses()\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeydown($event)\">\n @if (multiple()) {\n <span class=\"flex flex-wrap gap-1 flex-1 min-w-0 mr-2\" [class.text-neutral-400]=\"selectedOptions().length === 0\">\n @if (selectedOptions().length === 0) {\n {{ placeholder() }}\n } @else {\n @for (opt of selectedOptions(); track opt) {\n <span class=\"rounded-md bg-neutral-100 px-2 py-0.5 text-sm text-neutral-800\">{{ opt.label }}</span>\n }\n }\n </span>\n } @else {\n <span [class.text-neutral-400]=\"!selectedOption()\">\n {{ selectedOption()?.label ?? placeholder() }}\n </span>\n }\n\n <tailwind-icon\n icon=\"chevron-down\"\n [size]=\"16\"\n class=\"shrink-0 ml-2 text-neutral-600 transition-transform duration-150\"\n [class.rotate-180]=\"isOpen()\"\n aria-hidden=\"true\" />\n </button>\n\n @if (helperText() && !hasError()) {\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">{{ helperText() }}</p>\n }\n @if (errorText() && hasError()) {\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\n }\n</div>\n\n<!-- Dropdown panel \u2014 rendered via CDK Overlay outside the component DOM -->\n<ng-template #panelTemplate>\n <ul\n role=\"listbox\"\n [attr.aria-multiselectable]=\"multiple() ? true : null\"\n class=\"w-full bg-white border border-neutral-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\n @if (placeholder()) {\n <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-neutral-400 cursor-default select-none\">\n {{ placeholder() }}\n </li>\n }\n @for (option of options(); track option.value; let i = $index) {\n <li\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [class]=\"optionClasses(i, option)\"\n (click)=\"selectOption(option)\"\n (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\n <span>{{ option.label }}</span>\n\n @if (isOptionSelected(option)) {\n <tailwind-icon icon=\"check\" [size]=\"16\" class=\"text-primary-600 shrink-0\" aria-hidden=\"true\" />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1985
2001
|
}
|
|
1986
2002
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSelect, decorators: [{
|
|
1987
2003
|
type: Component,
|
|
@@ -1991,8 +2007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1991
2007
|
useExisting: forwardRef(() => TailwindSelect),
|
|
1992
2008
|
multi: true
|
|
1993
2009
|
}
|
|
1994
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label\n [attr.for]=\"id() ? id() + '-inner' : null\"\n class=\"text-sm font-medium text-neutral-700\"\n [class.text-danger-600]=\"hasError()\">\n {{ label() }}\n </label>\n }\n\n <!-- Trigger button -->\n <button\n type=\"button\"\n [attr.id]=\"id() ? id() + '-inner' : null\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n [disabled]=\"isDisabled()\"\n [class]=\"triggerClasses()\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeydown($event)\">\n @if (multiple()) {\n <span class=\"flex flex-wrap gap-1 flex-1 min-w-0 mr-2\" [class.text-neutral-400]=\"selectedOptions().length === 0\">\n @if (selectedOptions().length === 0) {\n {{ placeholder() }}\n } @else {\n @for (opt of selectedOptions(); track opt) {\n <span class=\"rounded-md bg-neutral-100 px-2 py-0.5 text-sm text-neutral-800\">{{ opt.label }}</span>\n }\n }\n </span>\n } @else {\n <span [class.text-neutral-400]=\"!selectedOption()\">\n {{ selectedOption()?.label ?? placeholder() }}\n </span>\n }\n\n <tailwind-icon\n icon=\"chevron-down\"\n [size]=\"16\"\n class=\"shrink-0 ml-2 text-neutral-
|
|
1995
|
-
}], propDecorators: { panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
2010
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1.5\">\n @if (label()) {\n <label\n [attr.for]=\"id() ? id() + '-inner' : null\"\n class=\"text-sm font-medium text-neutral-700\"\n [class.text-danger-600]=\"hasError()\">\n {{ label() }}\n </label>\n }\n\n <!-- Trigger button -->\n <button\n type=\"button\"\n [attr.id]=\"id() ? id() + '-inner' : null\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"comboboxAriaLabel()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n [disabled]=\"isDisabled()\"\n [class]=\"triggerClasses()\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeydown($event)\">\n @if (multiple()) {\n <span class=\"flex flex-wrap gap-1 flex-1 min-w-0 mr-2\" [class.text-neutral-400]=\"selectedOptions().length === 0\">\n @if (selectedOptions().length === 0) {\n {{ placeholder() }}\n } @else {\n @for (opt of selectedOptions(); track opt) {\n <span class=\"rounded-md bg-neutral-100 px-2 py-0.5 text-sm text-neutral-800\">{{ opt.label }}</span>\n }\n }\n </span>\n } @else {\n <span [class.text-neutral-400]=\"!selectedOption()\">\n {{ selectedOption()?.label ?? placeholder() }}\n </span>\n }\n\n <tailwind-icon\n icon=\"chevron-down\"\n [size]=\"16\"\n class=\"shrink-0 ml-2 text-neutral-600 transition-transform duration-150\"\n [class.rotate-180]=\"isOpen()\"\n aria-hidden=\"true\" />\n </button>\n\n @if (helperText() && !hasError()) {\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">{{ helperText() }}</p>\n }\n @if (errorText() && hasError()) {\n <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\n }\n</div>\n\n<!-- Dropdown panel \u2014 rendered via CDK Overlay outside the component DOM -->\n<ng-template #panelTemplate>\n <ul\n role=\"listbox\"\n [attr.aria-multiselectable]=\"multiple() ? true : null\"\n class=\"w-full bg-white border border-neutral-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\n @if (placeholder()) {\n <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-neutral-400 cursor-default select-none\">\n {{ placeholder() }}\n </li>\n }\n @for (option of options(); track option.value; let i = $index) {\n <li\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [class]=\"optionClasses(i, option)\"\n (click)=\"selectOption(option)\"\n (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\n <span>{{ option.label }}</span>\n\n @if (isOptionSelected(option)) {\n <tailwind-icon icon=\"check\" [size]=\"16\" class=\"text-primary-600 shrink-0\" aria-hidden=\"true\" />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
2011
|
+
}], propDecorators: { panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1996
2012
|
|
|
1997
2013
|
class TailwindAutocomplete extends TailwindComponent {
|
|
1998
2014
|
static nextId = 0;
|
|
@@ -2747,11 +2763,11 @@ class TailwindTabGroup extends TailwindComponent {
|
|
|
2747
2763
|
this.activeIndex.set(index);
|
|
2748
2764
|
}
|
|
2749
2765
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2750
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTabGroup, isStandalone: true, selector: "tailwind-tab-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "tabs", predicate: TailwindTab, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Tab Headers -->\n<div class=\"border-b border-neutral-200\"
|
|
2766
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTabGroup, isStandalone: true, selector: "tailwind-tab-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "tabs", predicate: TailwindTab, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Tab Headers -->\n<div class=\"border-b border-neutral-200\">\n <nav\n class=\"flex -mb-px gap-1\"\n [class.overflow-x-auto]=\"scrollable()\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel() || null\">\n @for (tab of tabs(); track $index; let i = $index) {\n <button\n type=\"button\"\n role=\"tab\"\n [attr.id]=\"tab.id() ? 'tab-' + tab.id() : null\"\n [attr.aria-selected]=\"activeIndex() === i\"\n [attr.aria-controls]=\"tab.id() ? tab.id() : null\"\n [disabled]=\"tab.disabled()\"\n class=\"group relative px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:rounded-t-lg\"\n [class.text-primary-600]=\"activeIndex() === i\"\n [class.text-neutral-500]=\"activeIndex() !== i\"\n [class.hover:text-neutral-700]=\"activeIndex() !== i && !tab.disabled()\"\n [class.opacity-50]=\"tab.disabled()\"\n [class.cursor-not-allowed]=\"tab.disabled()\"\n (click)=\"!tab.disabled() && selectTab(i)\">\n {{ tab.label() }}\n <!-- Active indicator -->\n <span\n class=\"absolute bottom-0 left-0 right-0 h-0.5 rounded-full transition-all duration-200\"\n [class.bg-primary-600]=\"activeIndex() === i\"\n [class.scale-x-100]=\"activeIndex() === i\"\n [class.scale-x-0]=\"activeIndex() !== i\"></span>\n </button>\n }\n </nav>\n</div>\n\n<!-- Tab Content -->\n<div class=\"pt-4\">\n <ng-content />\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2751
2767
|
}
|
|
2752
2768
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTabGroup, decorators: [{
|
|
2753
2769
|
type: Component,
|
|
2754
|
-
args: [{ selector: 'tailwind-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Tab Headers -->\n<div class=\"border-b border-neutral-200\"
|
|
2770
|
+
args: [{ selector: 'tailwind-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Tab Headers -->\n<div class=\"border-b border-neutral-200\">\n <nav\n class=\"flex -mb-px gap-1\"\n [class.overflow-x-auto]=\"scrollable()\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel() || null\">\n @for (tab of tabs(); track $index; let i = $index) {\n <button\n type=\"button\"\n role=\"tab\"\n [attr.id]=\"tab.id() ? 'tab-' + tab.id() : null\"\n [attr.aria-selected]=\"activeIndex() === i\"\n [attr.aria-controls]=\"tab.id() ? tab.id() : null\"\n [disabled]=\"tab.disabled()\"\n class=\"group relative px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:rounded-t-lg\"\n [class.text-primary-600]=\"activeIndex() === i\"\n [class.text-neutral-500]=\"activeIndex() !== i\"\n [class.hover:text-neutral-700]=\"activeIndex() !== i && !tab.disabled()\"\n [class.opacity-50]=\"tab.disabled()\"\n [class.cursor-not-allowed]=\"tab.disabled()\"\n (click)=\"!tab.disabled() && selectTab(i)\">\n {{ tab.label() }}\n <!-- Active indicator -->\n <span\n class=\"absolute bottom-0 left-0 right-0 h-0.5 rounded-full transition-all duration-200\"\n [class.bg-primary-600]=\"activeIndex() === i\"\n [class.scale-x-100]=\"activeIndex() === i\"\n [class.scale-x-0]=\"activeIndex() !== i\"></span>\n </button>\n }\n </nav>\n</div>\n\n<!-- Tab Content -->\n<div class=\"pt-4\">\n <ng-content />\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
2755
2771
|
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TailwindTab), { isSignal: true }] }] } });
|
|
2756
2772
|
|
|
2757
2773
|
class TailwindProgressBar extends TailwindComponent {
|
|
@@ -2822,6 +2838,8 @@ class TailwindMenu extends TailwindComponent {
|
|
|
2822
2838
|
};
|
|
2823
2839
|
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
2824
2840
|
align = input('left', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
2841
|
+
/** `bottom` opens under the anchor; `right` opens beside it (e.g. vertical toolbar rail). */
|
|
2842
|
+
placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
2825
2843
|
onSelect = output();
|
|
2826
2844
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
2827
2845
|
/** Popover box in coordinates relative to the `position: fixed` containing block (often viewport, not under transformed Docs wrappers). */
|
|
@@ -2906,6 +2924,14 @@ class TailwindMenu extends TailwindComponent {
|
|
|
2906
2924
|
const cbRect = cbRoot.getBoundingClientRect();
|
|
2907
2925
|
const rect = anchor.getBoundingClientRect();
|
|
2908
2926
|
const minWidth = Math.max(rect.width, MIN_PANEL_WIDTH_PX);
|
|
2927
|
+
if (this.placement() === 'right') {
|
|
2928
|
+
this.panelLayout.set({
|
|
2929
|
+
top: rect.top - cbRect.top,
|
|
2930
|
+
left: rect.right - cbRect.left,
|
|
2931
|
+
minWidth
|
|
2932
|
+
});
|
|
2933
|
+
return;
|
|
2934
|
+
}
|
|
2909
2935
|
const top = rect.bottom - cbRect.top;
|
|
2910
2936
|
if (this.align() === 'right') {
|
|
2911
2937
|
this.panelLayout.set({
|
|
@@ -2981,12 +3007,12 @@ class TailwindMenu extends TailwindComponent {
|
|
|
2981
3007
|
return document.documentElement;
|
|
2982
3008
|
}
|
|
2983
3009
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2984
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindMenu, isStandalone: true, selector: "tailwind-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { listeners: { "document:keydown.escape": "onDocumentEscape()", "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isOpen() && panelLayout(); as layout) {\n <div\n #panel\n role=\"menu\"\n class=\"fixed z-1000 bg-white rounded-xl border border-neutral-200 shadow-lg py-1 animate-in fade-in slide-in-from-top-1\"\n [style.top.px]=\"layout.top\"\n [style.left.px]=\"layout.left ?? null\"\n [style.right.px]=\"layout.right ?? null\"\n [style.minWidth.px]=\"layout.minWidth\">\n @for (item of items(); track $index) {\n @if (item.divider) {\n <hr class=\"my-1 border-neutral-100\" />\n } @else {\n <button\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"!!item.disabled\"\n class=\"w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer\"\n (click)=\"selectItem(item)\">\n {{ item.label }}\n </button>\n }\n }\n </div>\n}\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3010
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindMenu, isStandalone: true, selector: "tailwind-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { listeners: { "document:keydown.escape": "onDocumentEscape()", "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isOpen() && panelLayout(); as layout) {\n <div\n #panel\n role=\"menu\"\n class=\"fixed z-1000 bg-white rounded-xl border border-neutral-200 shadow-lg py-1 animate-in fade-in slide-in-from-top-1\"\n [style.top.px]=\"layout.top\"\n [style.left.px]=\"layout.left ?? null\"\n [style.right.px]=\"layout.right ?? null\"\n [style.minWidth.px]=\"layout.minWidth\">\n @for (item of items(); track $index) {\n @if (item.divider) {\n <hr class=\"my-1 border-neutral-100\" />\n } @else {\n <button\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"!!item.disabled\"\n class=\"w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer\"\n (click)=\"selectItem(item)\">\n {{ item.label }}\n </button>\n }\n }\n </div>\n}\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2985
3011
|
}
|
|
2986
3012
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMenu, decorators: [{
|
|
2987
3013
|
type: Component,
|
|
2988
3014
|
args: [{ selector: 'tailwind-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen() && panelLayout(); as layout) {\n <div\n #panel\n role=\"menu\"\n class=\"fixed z-1000 bg-white rounded-xl border border-neutral-200 shadow-lg py-1 animate-in fade-in slide-in-from-top-1\"\n [style.top.px]=\"layout.top\"\n [style.left.px]=\"layout.left ?? null\"\n [style.right.px]=\"layout.right ?? null\"\n [style.minWidth.px]=\"layout.minWidth\">\n @for (item of items(); track $index) {\n @if (item.divider) {\n <hr class=\"my-1 border-neutral-100\" />\n } @else {\n <button\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"!!item.disabled\"\n class=\"w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer\"\n (click)=\"selectItem(item)\">\n {{ item.label }}\n </button>\n }\n }\n </div>\n}\n", styles: [":host{display:contents}\n"] }]
|
|
2989
|
-
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onDocumentEscape: [{
|
|
3015
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onDocumentEscape: [{
|
|
2990
3016
|
type: HostListener,
|
|
2991
3017
|
args: ['document:keydown.escape']
|
|
2992
3018
|
}], onDocumentClick: [{
|
|
@@ -3107,6 +3133,9 @@ class TailwindPagination extends TailwindComponent {
|
|
|
3107
3133
|
this.onPageChange.emit(page);
|
|
3108
3134
|
}
|
|
3109
3135
|
}
|
|
3136
|
+
pageButtonAriaLabel(page) {
|
|
3137
|
+
return page === this.currentPage() ? `Page ${page}, current page` : `Page ${page}`;
|
|
3138
|
+
}
|
|
3110
3139
|
onPageSizeValueChange(value) {
|
|
3111
3140
|
if (typeof value !== 'number')
|
|
3112
3141
|
return;
|
|
@@ -3123,11 +3152,11 @@ class TailwindPagination extends TailwindComponent {
|
|
|
3123
3152
|
}
|
|
3124
3153
|
}
|
|
3125
3154
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindPagination, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3126
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindPagination, isStandalone: true, selector: "tailwind-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, lengthOptions: { classPropertyName: "lengthOptions", publicName: "lengthOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", currentPage: "currentPageChange", onPageChange: "onPageChange", onPageSizeChange: "onPageSizeChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n <div class=\"flex flex-wrap items-center gap-3 min-w-0\">\n @if (summary()) {\n <span class=\"text-sm text-neutral-700 dark:text-neutral-300\">\n {{ summaryText() }}\n </span>\n }\n\n @if (lengthOptions().length > 0) {\n <div class=\"w-20 shrink-0\">\n <tailwind-select\n size=\"sm\"\n [options]=\"pageSizeSelectOptions()\"\n [value]=\"pageSize()\"\n (valueChange)=\"onPageSizeValueChange($event)\" />\n </div>\n }\n </div>\n\n <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n <!-- Previous -->\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-left\"\n [disabled]=\"currentPage() <= 1\"\n ariaLabel=\"Previous page\"\n (onClick)=\"goToPage(currentPage() - 1)\" />\n\n @for (page of visiblePages(); track page) {\n <tailwind-button\n size=\"sm\"\n [kind]=\"page === currentPage() ? 'flat' : 'ghost'\"\n [color]=\"page === currentPage() ? 'primary' : 'secondary'\"\n class=\"min-w-8\"\n (onClick)=\"goToPage(page)\">\n {{ page }}\n </tailwind-button>\n }\n\n <!-- Next -->\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-right\"\n [disabled]=\"currentPage() >= totalPages()\"\n ariaLabel=\"Next page\"\n (onClick)=\"goToPage(currentPage() + 1)\" />\n </nav>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindSelect, selector: "tailwind-select", inputs: ["label", "placeholder", "options", "size", "helperText", "errorText", "hasError", "multiple", "value"], outputs: ["valueChange"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3155
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindPagination, isStandalone: true, selector: "tailwind-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, lengthOptions: { classPropertyName: "lengthOptions", publicName: "lengthOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", currentPage: "currentPageChange", onPageChange: "onPageChange", onPageSizeChange: "onPageSizeChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n <div class=\"flex flex-wrap items-center gap-3 min-w-0\">\n @if (summary()) {\n <span class=\"text-sm text-neutral-700 dark:text-neutral-300\">\n {{ summaryText() }}\n </span>\n }\n\n @if (lengthOptions().length > 0) {\n <div class=\"w-20 shrink-0\">\n <tailwind-select\n size=\"sm\"\n ariaLabel=\"Rows per page\"\n [options]=\"pageSizeSelectOptions()\"\n [value]=\"pageSize()\"\n (valueChange)=\"onPageSizeValueChange($event)\" />\n </div>\n }\n </div>\n\n <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n <!-- Previous -->\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-left\"\n [disabled]=\"currentPage() <= 1\"\n ariaLabel=\"Previous page\"\n (onClick)=\"goToPage(currentPage() - 1)\" />\n\n @for (page of visiblePages(); track page) {\n <tailwind-button\n size=\"sm\"\n [kind]=\"page === currentPage() ? 'flat' : 'ghost'\"\n [color]=\"page === currentPage() ? 'primary' : 'secondary'\"\n class=\"min-w-8\"\n [ariaLabel]=\"pageButtonAriaLabel(page)\"\n (onClick)=\"goToPage(page)\">\n {{ page }}\n </tailwind-button>\n }\n\n <!-- Next -->\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-right\"\n [disabled]=\"currentPage() >= totalPages()\"\n ariaLabel=\"Next page\"\n (onClick)=\"goToPage(currentPage() + 1)\" />\n </nav>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindSelect, selector: "tailwind-select", inputs: ["label", "ariaLabel", "placeholder", "options", "size", "helperText", "errorText", "hasError", "multiple", "value"], outputs: ["valueChange"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3127
3156
|
}
|
|
3128
3157
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindPagination, decorators: [{
|
|
3129
3158
|
type: Component,
|
|
3130
|
-
args: [{ selector: 'tailwind-pagination', imports: [TailwindSelect, TailwindButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n <div class=\"flex flex-wrap items-center gap-3 min-w-0\">\n @if (summary()) {\n <span class=\"text-sm text-neutral-700 dark:text-neutral-300\">\n {{ summaryText() }}\n </span>\n }\n\n @if (lengthOptions().length > 0) {\n <div class=\"w-20 shrink-0\">\n <tailwind-select\n size=\"sm\"\n [options]=\"pageSizeSelectOptions()\"\n [value]=\"pageSize()\"\n (valueChange)=\"onPageSizeValueChange($event)\" />\n </div>\n }\n </div>\n\n <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n <!-- Previous -->\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-left\"\n [disabled]=\"currentPage() <= 1\"\n ariaLabel=\"Previous page\"\n (onClick)=\"goToPage(currentPage() - 1)\" />\n\n @for (page of visiblePages(); track page) {\n <tailwind-button\n size=\"sm\"\n [kind]=\"page === currentPage() ? 'flat' : 'ghost'\"\n [color]=\"page === currentPage() ? 'primary' : 'secondary'\"\n class=\"min-w-8\"\n (onClick)=\"goToPage(page)\">\n {{ page }}\n </tailwind-button>\n }\n\n <!-- Next -->\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-right\"\n [disabled]=\"currentPage() >= totalPages()\"\n ariaLabel=\"Next page\"\n (onClick)=\"goToPage(currentPage() + 1)\" />\n </nav>\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
3159
|
+
args: [{ selector: 'tailwind-pagination', imports: [TailwindSelect, TailwindButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n <div class=\"flex flex-wrap items-center gap-3 min-w-0\">\n @if (summary()) {\n <span class=\"text-sm text-neutral-700 dark:text-neutral-300\">\n {{ summaryText() }}\n </span>\n }\n\n @if (lengthOptions().length > 0) {\n <div class=\"w-20 shrink-0\">\n <tailwind-select\n size=\"sm\"\n ariaLabel=\"Rows per page\"\n [options]=\"pageSizeSelectOptions()\"\n [value]=\"pageSize()\"\n (valueChange)=\"onPageSizeValueChange($event)\" />\n </div>\n }\n </div>\n\n <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n <!-- Previous -->\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-left\"\n [disabled]=\"currentPage() <= 1\"\n ariaLabel=\"Previous page\"\n (onClick)=\"goToPage(currentPage() - 1)\" />\n\n @for (page of visiblePages(); track page) {\n <tailwind-button\n size=\"sm\"\n [kind]=\"page === currentPage() ? 'flat' : 'ghost'\"\n [color]=\"page === currentPage() ? 'primary' : 'secondary'\"\n class=\"min-w-8\"\n [ariaLabel]=\"pageButtonAriaLabel(page)\"\n (onClick)=\"goToPage(page)\">\n {{ page }}\n </tailwind-button>\n }\n\n <!-- Next -->\n <tailwind-button\n kind=\"ghost\"\n color=\"transparent\"\n size=\"sm\"\n icon=\"chevron-right\"\n [disabled]=\"currentPage() >= totalPages()\"\n ariaLabel=\"Next page\"\n (onClick)=\"goToPage(currentPage() + 1)\" />\n </nav>\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
3131
3160
|
}], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], lengthOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "lengthOptions", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: false }] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }], onPageSizeChange: [{ type: i0.Output, args: ["onPageSizeChange"] }] } });
|
|
3132
3161
|
|
|
3133
3162
|
class TailwindTag extends TailwindComponent {
|
|
@@ -3136,9 +3165,9 @@ class TailwindTag extends TailwindComponent {
|
|
|
3136
3165
|
const variantMap = {
|
|
3137
3166
|
primary: 'bg-primary-600 text-on-primary-600',
|
|
3138
3167
|
neutral: 'bg-neutral-600 text-on-neutral-600',
|
|
3139
|
-
success: 'bg-success-
|
|
3168
|
+
success: 'bg-success-700 text-on-success-700',
|
|
3140
3169
|
warning: 'bg-warning-500 text-on-warning-500',
|
|
3141
|
-
danger: 'bg-danger-
|
|
3170
|
+
danger: 'bg-danger-700 text-on-danger-700',
|
|
3142
3171
|
info: 'bg-info-600 text-on-info-600'
|
|
3143
3172
|
};
|
|
3144
3173
|
return `inline-flex items-center text-[11px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded ${variantMap[this.variant()]}`;
|
|
@@ -4094,6 +4123,14 @@ class TailwindToolbar extends TailwindComponent {
|
|
|
4094
4123
|
menu = input([], ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
|
|
4095
4124
|
/** Emitted when a non-disabled, non-divider menu entry is activated. */
|
|
4096
4125
|
onMenuSelect = output();
|
|
4126
|
+
/** Flat list for the mobile hamburger (submenu children promoted one level). */
|
|
4127
|
+
mobileMenuItems = computed(() => this.flattenMenuItems(this.menu()), ...(ngDevMode ? [{ debugName: "mobileMenuItems" }] : /* istanbul ignore next */ []));
|
|
4128
|
+
submenuPlacement = computed(() => this.orientation() === 'horizontal' ? 'bottom' : 'right', ...(ngDevMode ? [{ debugName: "submenuPlacement" }] : /* istanbul ignore next */ []));
|
|
4129
|
+
submenuChevronIcon = computed(() => this.orientation() === 'horizontal' ? 'chevron-down' : 'chevron-right', ...(ngDevMode ? [{ debugName: "submenuChevronIcon" }] : /* istanbul ignore next */ []));
|
|
4130
|
+
menuItemWithSubmenuClasses = computed(() => {
|
|
4131
|
+
const horizontal = this.orientation() === 'horizontal';
|
|
4132
|
+
return horizontal ? 'relative inline-flex shrink-0' : 'relative w-full';
|
|
4133
|
+
}, ...(ngDevMode ? [{ debugName: "menuItemWithSubmenuClasses" }] : /* istanbul ignore next */ []));
|
|
4097
4134
|
menuContainerClasses = computed(() => this.orientation() === 'horizontal'
|
|
4098
4135
|
? 'min-w-0 flex-1 flex flex-row flex-wrap items-center gap-1'
|
|
4099
4136
|
: 'min-w-0 flex-1 flex flex-col gap-1.5 overflow-y-auto min-h-0', ...(ngDevMode ? [{ debugName: "menuContainerClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -4169,12 +4206,27 @@ class TailwindToolbar extends TailwindComponent {
|
|
|
4169
4206
|
}
|
|
4170
4207
|
return base.filter(Boolean).join(' ');
|
|
4171
4208
|
}, ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
|
|
4209
|
+
hasSubmenu(item) {
|
|
4210
|
+
return Array.isArray(item.items) && item.items.length > 0;
|
|
4211
|
+
}
|
|
4172
4212
|
selectMenuItem(item) {
|
|
4173
|
-
if (item.divider || item.disabled) {
|
|
4213
|
+
if (item.divider || item.disabled || this.hasSubmenu(item)) {
|
|
4174
4214
|
return;
|
|
4175
4215
|
}
|
|
4176
4216
|
this.onMenuSelect.emit(item);
|
|
4177
4217
|
}
|
|
4218
|
+
flattenMenuItems(items) {
|
|
4219
|
+
const flat = [];
|
|
4220
|
+
for (const item of items) {
|
|
4221
|
+
if (this.hasSubmenu(item)) {
|
|
4222
|
+
flat.push(...item.items);
|
|
4223
|
+
}
|
|
4224
|
+
else {
|
|
4225
|
+
flat.push(item);
|
|
4226
|
+
}
|
|
4227
|
+
}
|
|
4228
|
+
return flat;
|
|
4229
|
+
}
|
|
4178
4230
|
/** True when `label` is a non-empty string after trim (icon-only entries omit or blank `label`). */
|
|
4179
4231
|
menuItemHasVisibleLabel(item) {
|
|
4180
4232
|
const label = item.label;
|
|
@@ -4192,11 +4244,11 @@ class TailwindToolbar extends TailwindComponent {
|
|
|
4192
4244
|
return item.value ?? item.label ?? String(index);
|
|
4193
4245
|
}
|
|
4194
4246
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToolbar, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4195
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindToolbar, isStandalone: true, selector: "tailwind-toolbar", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMenuSelect: "onMenuSelect" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"rootClasses()\">\n <div class=\"shrink-0\">\n <ng-content select=\"[tailwind-toolbar-logo]\" />\n </div>\n @if (orientation() === 'horizontal') {\n <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\n @if (menu().length) {\n <div class=\"flex shrink-0 items-center md:hidden\">\n <button\n type=\"button\"\n [class]=\"mobileMenuToggleClasses()\"\n [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\n aria-haspopup=\"menu\"\n aria-label=\"Open navigation menu\"\n (click)=\"mobileToolbarMenu.toggle($event)\">\n <tailwind-icon icon=\"bars-3\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n </button>\n <tailwind-menu
|
|
4247
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindToolbar, isStandalone: true, selector: "tailwind-toolbar", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMenuSelect: "onMenuSelect" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"rootClasses()\">\n <div class=\"shrink-0\">\n <ng-content select=\"[tailwind-toolbar-logo]\" />\n </div>\n @if (orientation() === 'horizontal') {\n <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\n @if (menu().length) {\n <div class=\"flex shrink-0 items-center md:hidden\">\n <button\n type=\"button\"\n [class]=\"mobileMenuToggleClasses()\"\n [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\n aria-haspopup=\"menu\"\n aria-label=\"Open navigation menu\"\n (click)=\"mobileToolbarMenu.toggle($event)\">\n <tailwind-icon icon=\"bars-3\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n </button>\n <tailwind-menu\n #mobileToolbarMenu\n [items]=\"mobileMenuItems()\"\n align=\"left\"\n (onSelect)=\"selectMenuItem($event)\" />\n </div>\n }\n <div class=\"hidden min-w-0 flex-1 flex-row flex-wrap items-center gap-1 md:flex\">\n @for (item of menu(); track menuTrackKey($index, item)) {\n @if (item.divider) {\n <span [class]=\"menuDividerLineClasses()\" aria-hidden=\"true\"></span>\n } @else if (hasSubmenu(item)) {\n <div [class]=\"menuItemWithSubmenuClasses()\">\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n [attr.aria-expanded]=\"itemMenu.isOpen()\"\n aria-haspopup=\"menu\"\n (click)=\"itemMenu.toggle($event)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n {{ item.label }}\n }\n <tailwind-icon [icon]=\"submenuChevronIcon()\" [size]=\"16\" [class]=\"menuItemIconClasses()\" />\n </button>\n <tailwind-menu\n #itemMenu\n [items]=\"item.items!\"\n [placement]=\"submenuPlacement()\"\n align=\"left\"\n (onSelect)=\"selectMenuItem($event)\" />\n </div>\n } @else {\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n (click)=\"selectMenuItem(item)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n {{ item.label }}\n }\n </button>\n }\n }\n </div>\n </nav>\n } @else {\n <nav [class]=\"menuContainerClasses()\" [attr.aria-label]=\"'Toolbar menu'\">\n @for (item of menu(); track menuTrackKey($index, item)) {\n @if (item.divider) {\n <hr [class]=\"menuDividerRuleClasses()\" />\n } @else if (hasSubmenu(item)) {\n <div [class]=\"menuItemWithSubmenuClasses()\">\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n [attr.aria-expanded]=\"itemMenu.isOpen()\"\n aria-haspopup=\"menu\"\n (click)=\"itemMenu.toggle($event)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n <span class=\"min-w-0 flex-1\">{{ item.label }}</span>\n }\n <tailwind-icon\n [icon]=\"submenuChevronIcon()\"\n [size]=\"18\"\n [class]=\"menuItemIconClasses()\"\n [class.ml-auto]=\"menuItemHasVisibleLabel(item)\" />\n </button>\n <tailwind-menu\n #itemMenu\n [items]=\"item.items!\"\n [placement]=\"submenuPlacement()\"\n align=\"left\"\n (onSelect)=\"selectMenuItem($event)\" />\n </div>\n } @else {\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n (click)=\"selectMenuItem(item)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n {{ item.label }}\n }\n </button>\n }\n }\n </nav>\n }\n <div\n class=\"flex flex-wrap items-center gap-2 shrink-0\"\n [class.toolbar-end-vertical]=\"orientation() === 'vertical'\"\n [class.justify-end]=\"orientation() === 'horizontal'\"\n [class.mt-auto]=\"orientation() === 'vertical'\"\n [class.w-full]=\"orientation() === 'vertical'\"\n [class.justify-center]=\"orientation() === 'vertical'\">\n <ng-content select=\"[tailwind-toolbar-end]\" />\n </div>\n</div>\n", styles: [":host{display:block}:host .toolbar-menu-icon-on-light .tailwind-icon-glyph{filter:brightness(0) invert(1)}:host .toolbar-end-vertical tailwind-button{display:block;width:100%}:host .toolbar-end-vertical tailwind-button>button{width:100%;justify-content:center}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindMenu, selector: "tailwind-menu", inputs: ["items", "align", "placement"], outputs: ["onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4196
4248
|
}
|
|
4197
4249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToolbar, decorators: [{
|
|
4198
4250
|
type: Component,
|
|
4199
|
-
args: [{ imports: [TailwindIcon, TailwindMenu], selector: 'tailwind-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"rootClasses()\">\n <div class=\"shrink-0\">\n <ng-content select=\"[tailwind-toolbar-logo]\" />\n </div>\n @if (orientation() === 'horizontal') {\n <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\n @if (menu().length) {\n <div class=\"flex shrink-0 items-center md:hidden\">\n <button\n type=\"button\"\n [class]=\"mobileMenuToggleClasses()\"\n [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\n aria-haspopup=\"menu\"\n aria-label=\"Open navigation menu\"\n (click)=\"mobileToolbarMenu.toggle($event)\">\n <tailwind-icon icon=\"bars-3\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n </button>\n <tailwind-menu
|
|
4251
|
+
args: [{ imports: [TailwindIcon, TailwindMenu], selector: 'tailwind-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"rootClasses()\">\n <div class=\"shrink-0\">\n <ng-content select=\"[tailwind-toolbar-logo]\" />\n </div>\n @if (orientation() === 'horizontal') {\n <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\n @if (menu().length) {\n <div class=\"flex shrink-0 items-center md:hidden\">\n <button\n type=\"button\"\n [class]=\"mobileMenuToggleClasses()\"\n [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\n aria-haspopup=\"menu\"\n aria-label=\"Open navigation menu\"\n (click)=\"mobileToolbarMenu.toggle($event)\">\n <tailwind-icon icon=\"bars-3\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n </button>\n <tailwind-menu\n #mobileToolbarMenu\n [items]=\"mobileMenuItems()\"\n align=\"left\"\n (onSelect)=\"selectMenuItem($event)\" />\n </div>\n }\n <div class=\"hidden min-w-0 flex-1 flex-row flex-wrap items-center gap-1 md:flex\">\n @for (item of menu(); track menuTrackKey($index, item)) {\n @if (item.divider) {\n <span [class]=\"menuDividerLineClasses()\" aria-hidden=\"true\"></span>\n } @else if (hasSubmenu(item)) {\n <div [class]=\"menuItemWithSubmenuClasses()\">\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n [attr.aria-expanded]=\"itemMenu.isOpen()\"\n aria-haspopup=\"menu\"\n (click)=\"itemMenu.toggle($event)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n {{ item.label }}\n }\n <tailwind-icon [icon]=\"submenuChevronIcon()\" [size]=\"16\" [class]=\"menuItemIconClasses()\" />\n </button>\n <tailwind-menu\n #itemMenu\n [items]=\"item.items!\"\n [placement]=\"submenuPlacement()\"\n align=\"left\"\n (onSelect)=\"selectMenuItem($event)\" />\n </div>\n } @else {\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n (click)=\"selectMenuItem(item)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n {{ item.label }}\n }\n </button>\n }\n }\n </div>\n </nav>\n } @else {\n <nav [class]=\"menuContainerClasses()\" [attr.aria-label]=\"'Toolbar menu'\">\n @for (item of menu(); track menuTrackKey($index, item)) {\n @if (item.divider) {\n <hr [class]=\"menuDividerRuleClasses()\" />\n } @else if (hasSubmenu(item)) {\n <div [class]=\"menuItemWithSubmenuClasses()\">\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n [attr.aria-expanded]=\"itemMenu.isOpen()\"\n aria-haspopup=\"menu\"\n (click)=\"itemMenu.toggle($event)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n <span class=\"min-w-0 flex-1\">{{ item.label }}</span>\n }\n <tailwind-icon\n [icon]=\"submenuChevronIcon()\"\n [size]=\"18\"\n [class]=\"menuItemIconClasses()\"\n [class.ml-auto]=\"menuItemHasVisibleLabel(item)\" />\n </button>\n <tailwind-menu\n #itemMenu\n [items]=\"item.items!\"\n [placement]=\"submenuPlacement()\"\n align=\"left\"\n (onSelect)=\"selectMenuItem($event)\" />\n </div>\n } @else {\n <button\n type=\"button\"\n [disabled]=\"!!item.disabled\"\n [class]=\"menuItemButtonClasses()\"\n [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\n [attr.aria-label]=\"menuItemAriaLabel(item)\"\n (click)=\"selectMenuItem(item)\">\n @if (item.icon) {\n <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n }\n @if (menuItemHasVisibleLabel(item)) {\n {{ item.label }}\n }\n </button>\n }\n }\n </nav>\n }\n <div\n class=\"flex flex-wrap items-center gap-2 shrink-0\"\n [class.toolbar-end-vertical]=\"orientation() === 'vertical'\"\n [class.justify-end]=\"orientation() === 'horizontal'\"\n [class.mt-auto]=\"orientation() === 'vertical'\"\n [class.w-full]=\"orientation() === 'vertical'\"\n [class.justify-center]=\"orientation() === 'vertical'\">\n <ng-content select=\"[tailwind-toolbar-end]\" />\n </div>\n</div>\n", styles: [":host{display:block}:host .toolbar-menu-icon-on-light .tailwind-icon-glyph{filter:brightness(0) invert(1)}:host .toolbar-end-vertical tailwind-button{display:block;width:100%}:host .toolbar-end-vertical tailwind-button>button{width:100%;justify-content:center}\n"] }]
|
|
4200
4252
|
}], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: false }] }], onMenuSelect: [{ type: i0.Output, args: ["onMenuSelect"] }] } });
|
|
4201
4253
|
|
|
4202
4254
|
class TailwindDivider extends TailwindComponent {
|