@area8975/ui 0.2.0 → 0.2.1-dev.29
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.
package/fesm2022/area8975-ui.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
|
|
|
2
2
|
import { ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideAppInitializer, signal, untracked, viewChild } from "@angular/core";
|
|
3
3
|
import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
|
|
4
4
|
import { NgIcon, provideIcons } from "@ng-icons/core";
|
|
5
|
-
import { heroArrowUp, heroArrowUpTray, heroBars2, heroBars3, heroCalendar, heroCalendarDateRange, heroCheck, heroChevronDoubleLeft, heroChevronDown, heroChevronLeft, heroChevronRight,
|
|
5
|
+
import { heroArrowUp, heroArrowUpTray, heroBars2, heroBars3, heroCalendar, heroCalendarDateRange, heroCheck, heroChevronDoubleLeft, heroChevronDown, heroChevronLeft, heroChevronRight, heroClock, heroDocument, heroEye, heroEyeSlash, heroFunnel, heroMagnifyingGlass, heroMinus, heroPlus, heroQuestionMarkCircle, heroViewColumns, heroXMark } from "@ng-icons/heroicons/outline";
|
|
6
6
|
import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
|
|
7
7
|
import { Subject, catchError, debounceTime, filter, of, skip, switchMap } from "rxjs";
|
|
8
8
|
import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
|
|
@@ -4259,7 +4259,7 @@ var UiBadgeComponent = class UiBadgeComponent {
|
|
|
4259
4259
|
host: { properties: { "class": "generatedClasses()" } },
|
|
4260
4260
|
ngImport: i0,
|
|
4261
4261
|
template: "<ng-content />\n",
|
|
4262
|
-
styles: ["@layer properties;:host(.ui-badge){display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1px}:host(.ui-badge--xs){padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}:host(.ui-badge--sm){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}:host(.ui-badge--md){padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}:host(.ui-badge--lg){padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}:host(.ui-badge--primary-solid){border-color:var(--primary-line);background-color:var(--primary);color:var(--primary-foreground)}:host(.ui-badge--primary-outline){border-color:var(--primary);background-color:transparent;color:var(--primary)}:host(.ui-badge--primary-soft){border-color:transparent;background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}:host(.ui-badge--secondary-solid){border-color:var(--secondary-line);background-color:var(--secondary);color:var(--secondary-foreground)}:host(.ui-badge--secondary-outline){border-color:var(--secondary);background-color:transparent;color:var(--secondary)}:host(.ui-badge--secondary-soft){border-color:transparent;background-color:var(--
|
|
4262
|
+
styles: ["@layer properties;:host(.ui-badge){display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1px}:host(.ui-badge--xs){padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}:host(.ui-badge--sm){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}:host(.ui-badge--md){padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}:host(.ui-badge--lg){padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}:host(.ui-badge--primary-solid){border-color:var(--primary-line);background-color:var(--primary);color:var(--primary-foreground)}:host(.ui-badge--primary-outline){border-color:var(--primary);background-color:transparent;color:var(--primary)}:host(.ui-badge--primary-soft){border-color:transparent;background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}:host(.ui-badge--secondary-solid){border-color:var(--secondary-line);background-color:var(--secondary);color:var(--secondary-foreground)}:host(.ui-badge--secondary-outline){border-color:var(--secondary);background-color:transparent;color:var(--secondary)}:host(.ui-badge--secondary-soft){border-color:transparent;background-color:var(--color-secondary-50, var(--color-gray-50));color:var(--foreground)}:host(.ui-badge--success-solid){border-color:var(--color-success-500, var(--color-teal-500));background-color:var(--color-success-500, var(--color-teal-500));color:var(--foreground-inverse)}:host(.ui-badge--success-outline){border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}:host(.ui-badge--success-soft){border-color:transparent;background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}:host(.ui-badge--warning-solid){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--foreground-inverse)}:host(.ui-badge--warning-outline){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}:host(.ui-badge--warning-soft){border-color:transparent;background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}:host(.ui-badge--danger-solid){border-color:var(--color-danger-500, var(--color-red-500));background-color:var(--color-danger-500, var(--color-red-500));color:var(--foreground-inverse)}:host(.ui-badge--danger-outline){border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500))}:host(.ui-badge--danger-soft){border-color:transparent;background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
4263
4263
|
});
|
|
4264
4264
|
};
|
|
4265
4265
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -4273,7 +4273,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
4273
4273
|
selector: "ui-badge",
|
|
4274
4274
|
host: { "[class]": "generatedClasses()" },
|
|
4275
4275
|
template: "<ng-content />\n",
|
|
4276
|
-
styles: ["@layer properties;:host(.ui-badge){display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1px}:host(.ui-badge--xs){padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}:host(.ui-badge--sm){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}:host(.ui-badge--md){padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}:host(.ui-badge--lg){padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}:host(.ui-badge--primary-solid){border-color:var(--primary-line);background-color:var(--primary);color:var(--primary-foreground)}:host(.ui-badge--primary-outline){border-color:var(--primary);background-color:transparent;color:var(--primary)}:host(.ui-badge--primary-soft){border-color:transparent;background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}:host(.ui-badge--secondary-solid){border-color:var(--secondary-line);background-color:var(--secondary);color:var(--secondary-foreground)}:host(.ui-badge--secondary-outline){border-color:var(--secondary);background-color:transparent;color:var(--secondary)}:host(.ui-badge--secondary-soft){border-color:transparent;background-color:var(--
|
|
4276
|
+
styles: ["@layer properties;:host(.ui-badge){display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1px}:host(.ui-badge--xs){padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}:host(.ui-badge--sm){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}:host(.ui-badge--md){padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}:host(.ui-badge--lg){padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}:host(.ui-badge--primary-solid){border-color:var(--primary-line);background-color:var(--primary);color:var(--primary-foreground)}:host(.ui-badge--primary-outline){border-color:var(--primary);background-color:transparent;color:var(--primary)}:host(.ui-badge--primary-soft){border-color:transparent;background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}:host(.ui-badge--secondary-solid){border-color:var(--secondary-line);background-color:var(--secondary);color:var(--secondary-foreground)}:host(.ui-badge--secondary-outline){border-color:var(--secondary);background-color:transparent;color:var(--secondary)}:host(.ui-badge--secondary-soft){border-color:transparent;background-color:var(--color-secondary-50, var(--color-gray-50));color:var(--foreground)}:host(.ui-badge--success-solid){border-color:var(--color-success-500, var(--color-teal-500));background-color:var(--color-success-500, var(--color-teal-500));color:var(--foreground-inverse)}:host(.ui-badge--success-outline){border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}:host(.ui-badge--success-soft){border-color:transparent;background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}:host(.ui-badge--warning-solid){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--foreground-inverse)}:host(.ui-badge--warning-outline){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}:host(.ui-badge--warning-soft){border-color:transparent;background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}:host(.ui-badge--danger-solid){border-color:var(--color-danger-500, var(--color-red-500));background-color:var(--color-danger-500, var(--color-red-500));color:var(--foreground-inverse)}:host(.ui-badge--danger-outline){border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500))}:host(.ui-badge--danger-soft){border-color:transparent;background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
4277
4277
|
}]
|
|
4278
4278
|
}],
|
|
4279
4279
|
propDecorators: {
|
|
@@ -6493,6 +6493,7 @@ var UiButtonComponent = class UiButtonComponent {
|
|
|
6493
6493
|
transformFunction: null
|
|
6494
6494
|
}
|
|
6495
6495
|
},
|
|
6496
|
+
host: { properties: { "class.pointer-events-none": "isDisabled()" } },
|
|
6496
6497
|
ngImport: i0,
|
|
6497
6498
|
template: "<button\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [class]=\"generatedClasses()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-busy]=\"loading() || null\"\n>\n <ng-content></ng-content>\n\n @if (loading()) {\n <span class=\"sr-only\">Loading</span>\n\n <span class=\"flex items-end justify-center\" aria-hidden=\"true\">\n <span class=\"ms-0.5 inline-flex items-end gap-px pb-px\">\n <span class=\"ui-button__loading-dot\">.</span>\n <span class=\"ui-button__loading-dot\">.</span>\n <span class=\"ui-button__loading-dot\">.</span>\n </span>\n </span>\n }\n</button>\n",
|
|
6498
6499
|
styles: ["@layer properties;.ui-button{position:relative;display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-button:focus{--tw-outline-style: none;outline-style:none}.ui-button:focus-visible{z-index:10}.ui-button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button:disabled{pointer-events:none}.ui-button:disabled{opacity:50%}.ui-button--sm{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-button--md{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}.ui-button--lg{padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}ui-button-group>:host(:first-child:not(:only-child)) .ui-button{border-start-end-radius:0;border-end-end-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:not(:first-child):not(:last-child)) .ui-button{border-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:last-child:not(:only-child)) .ui-button{border-start-start-radius:0;border-end-start-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:not(:first-child)) .ui-button{margin-inline-start:-1px}ui-input-group>:host .ui-button{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-input-group>:host(:not(:last-child)) .ui-button{border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)!important}ui-button-group>:host(:not(:first-child)) .ui-button[class*=-outline]{border-inline-start-color:var(--color-gray-200, oklch(92.8% .006 264.531))}@keyframes spinner-ellipsis{0%,70%,to{transform:translateY(0)}35%{transform:translateY(-.4em)}}.ui-button__loading-dot{display:inline-block;animation:spinner-ellipsis 1s ease-in-out infinite}.ui-button__loading-dot:nth-child(2){animation-delay:.12s}.ui-button__loading-dot:nth-child(3){animation-delay:.24s}@media(prefers-reduced-motion:reduce){.ui-button__loading-dot{animation:none}}.ui-button--primary-solid{border-color:transparent;background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-solid:hover,.ui-button--primary-solid:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline{border-color:var(--color-primary-600, var(--color-blue-600));background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--primary-ghost{border-color:transparent;background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{background-color:var(--color-primary-100, var(--color-blue-100))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{color:var(--color-primary-800, var(--color-blue-800))}.ui-button--primary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-primary-600, var(--color-blue-600));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-white:hover,.ui-button--primary-white:focus-visible{background-color:var(--layer-focus)}.ui-button--primary-link{border-color:transparent;background-color:transparent;color:var(--color-primary-500, var(--color-blue-500))}.ui-button--primary-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{text-decoration-line:underline}.ui-button--secondary-solid{border-color:transparent;background-color:var(--color-secondary-900, var(--color-gray-900));color:var(--color-white, #fff);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-solid:hover,.ui-button--secondary-solid:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline{border-color:var(--color-secondary-900, var(--color-gray-900));background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{border-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{color:var(--foreground-inverse)}.ui-button--secondary-ghost{border-color:transparent;background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-ghost:hover,.ui-button--secondary-ghost:focus-visible{background-color:var(--muted-hover)}.ui-button--secondary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--layer-foreground);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-white:hover,.ui-button--secondary-white:focus-visible{background-color:var(--layer-hover)}.ui-button--secondary-link{border-color:transparent;background-color:transparent;color:var(--color-secondary-900, var(--color-gray-900))}.ui-button--secondary-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{text-decoration-line:underline}.ui-button--success-solid{border-color:transparent;background-color:var(--color-success-500, var(--color-teal-500));color:var(--color-white, #fff)}.ui-button--success-solid:hover,.ui-button--success-solid:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline{border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{border-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--success-ghost{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{background-color:var(--color-success-100, var(--color-teal-100))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{color:var(--color-success-800, var(--color-teal-800))}.ui-button--success-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-success-500, var(--color-teal-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-white:hover,.ui-button--success-white:focus-visible{background-color:var(--layer-hover)}.ui-button--success-link{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}.ui-button--success-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{text-decoration-line:underline}.ui-button--warning-solid{border-color:transparent;background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-solid:hover,.ui-button--warning-solid:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline{border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{border-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--warning-ghost{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{background-color:var(--color-warning-100, var(--color-yellow-100))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{color:var(--color-warning-800, var(--color-yellow-800))}.ui-button--warning-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-warning-500, var(--color-yellow-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-white:hover,.ui-button--warning-white:focus-visible{background-color:var(--layer-hover)}.ui-button--warning-link{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}.ui-button--warning-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{text-decoration-line:underline}.ui-button--danger-solid{border-color:transparent;background-color:var(--color-danger-500, var(--color-red-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-solid:hover,.ui-button--danger-solid:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline{border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{border-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--danger-ghost{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{background-color:var(--color-danger-100, var(--color-red-100))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{color:var(--color-danger-800, var(--color-red-800))}.ui-button--danger-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-danger-500, var(--color-red-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-white:hover,.ui-button--danger-white:focus-visible{background-color:var(--layer-hover)}.ui-button--danger-link{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{text-decoration-line:underline}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
@@ -6507,6 +6508,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6507
6508
|
type: Component,
|
|
6508
6509
|
args: [{
|
|
6509
6510
|
selector: "ui-button",
|
|
6511
|
+
host: { "[class.pointer-events-none]": "isDisabled()" },
|
|
6510
6512
|
template: "<button\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [class]=\"generatedClasses()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-busy]=\"loading() || null\"\n>\n <ng-content></ng-content>\n\n @if (loading()) {\n <span class=\"sr-only\">Loading</span>\n\n <span class=\"flex items-end justify-center\" aria-hidden=\"true\">\n <span class=\"ms-0.5 inline-flex items-end gap-px pb-px\">\n <span class=\"ui-button__loading-dot\">.</span>\n <span class=\"ui-button__loading-dot\">.</span>\n <span class=\"ui-button__loading-dot\">.</span>\n </span>\n </span>\n }\n</button>\n",
|
|
6511
6513
|
styles: ["@layer properties;.ui-button{position:relative;display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-button:focus{--tw-outline-style: none;outline-style:none}.ui-button:focus-visible{z-index:10}.ui-button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button:disabled{pointer-events:none}.ui-button:disabled{opacity:50%}.ui-button--sm{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-button--md{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}.ui-button--lg{padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}ui-button-group>:host(:first-child:not(:only-child)) .ui-button{border-start-end-radius:0;border-end-end-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:not(:first-child):not(:last-child)) .ui-button{border-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:last-child:not(:only-child)) .ui-button{border-start-start-radius:0;border-end-start-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:not(:first-child)) .ui-button{margin-inline-start:-1px}ui-input-group>:host .ui-button{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-input-group>:host(:not(:last-child)) .ui-button{border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)!important}ui-button-group>:host(:not(:first-child)) .ui-button[class*=-outline]{border-inline-start-color:var(--color-gray-200, oklch(92.8% .006 264.531))}@keyframes spinner-ellipsis{0%,70%,to{transform:translateY(0)}35%{transform:translateY(-.4em)}}.ui-button__loading-dot{display:inline-block;animation:spinner-ellipsis 1s ease-in-out infinite}.ui-button__loading-dot:nth-child(2){animation-delay:.12s}.ui-button__loading-dot:nth-child(3){animation-delay:.24s}@media(prefers-reduced-motion:reduce){.ui-button__loading-dot{animation:none}}.ui-button--primary-solid{border-color:transparent;background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-solid:hover,.ui-button--primary-solid:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline{border-color:var(--color-primary-600, var(--color-blue-600));background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--primary-ghost{border-color:transparent;background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{background-color:var(--color-primary-100, var(--color-blue-100))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{color:var(--color-primary-800, var(--color-blue-800))}.ui-button--primary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-primary-600, var(--color-blue-600));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-white:hover,.ui-button--primary-white:focus-visible{background-color:var(--layer-focus)}.ui-button--primary-link{border-color:transparent;background-color:transparent;color:var(--color-primary-500, var(--color-blue-500))}.ui-button--primary-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{text-decoration-line:underline}.ui-button--secondary-solid{border-color:transparent;background-color:var(--color-secondary-900, var(--color-gray-900));color:var(--color-white, #fff);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-solid:hover,.ui-button--secondary-solid:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline{border-color:var(--color-secondary-900, var(--color-gray-900));background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{border-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{color:var(--foreground-inverse)}.ui-button--secondary-ghost{border-color:transparent;background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-ghost:hover,.ui-button--secondary-ghost:focus-visible{background-color:var(--muted-hover)}.ui-button--secondary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--layer-foreground);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-white:hover,.ui-button--secondary-white:focus-visible{background-color:var(--layer-hover)}.ui-button--secondary-link{border-color:transparent;background-color:transparent;color:var(--color-secondary-900, var(--color-gray-900))}.ui-button--secondary-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{text-decoration-line:underline}.ui-button--success-solid{border-color:transparent;background-color:var(--color-success-500, var(--color-teal-500));color:var(--color-white, #fff)}.ui-button--success-solid:hover,.ui-button--success-solid:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline{border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{border-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--success-ghost{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{background-color:var(--color-success-100, var(--color-teal-100))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{color:var(--color-success-800, var(--color-teal-800))}.ui-button--success-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-success-500, var(--color-teal-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-white:hover,.ui-button--success-white:focus-visible{background-color:var(--layer-hover)}.ui-button--success-link{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}.ui-button--success-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{text-decoration-line:underline}.ui-button--warning-solid{border-color:transparent;background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-solid:hover,.ui-button--warning-solid:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline{border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{border-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--warning-ghost{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{background-color:var(--color-warning-100, var(--color-yellow-100))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{color:var(--color-warning-800, var(--color-yellow-800))}.ui-button--warning-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-warning-500, var(--color-yellow-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-white:hover,.ui-button--warning-white:focus-visible{background-color:var(--layer-hover)}.ui-button--warning-link{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}.ui-button--warning-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{text-decoration-line:underline}.ui-button--danger-solid{border-color:transparent;background-color:var(--color-danger-500, var(--color-red-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-solid:hover,.ui-button--danger-solid:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline{border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{border-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--danger-ghost{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{background-color:var(--color-danger-100, var(--color-red-100))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{color:var(--color-danger-800, var(--color-red-800))}.ui-button--danger-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-danger-500, var(--color-red-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-white:hover,.ui-button--danger-white:focus-visible{background-color:var(--layer-hover)}.ui-button--danger-link{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{text-decoration-line:underline}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
6512
6514
|
}]
|
|
@@ -9397,10 +9399,9 @@ var UiTableComponent = class UiTableComponent {
|
|
|
9397
9399
|
else this.sort.set(null);
|
|
9398
9400
|
this.resetAndReload();
|
|
9399
9401
|
}
|
|
9400
|
-
|
|
9402
|
+
sortDirection(column) {
|
|
9401
9403
|
const current = this.sort();
|
|
9402
|
-
|
|
9403
|
-
return current.direction === "asc" ? "heroChevronUp" : "heroChevronDown";
|
|
9404
|
+
return current?.columnId === column.id ? current.direction : null;
|
|
9404
9405
|
}
|
|
9405
9406
|
goToPage(page) {
|
|
9406
9407
|
if (page < 0 || page >= this.totalPages()) return;
|
|
@@ -9755,14 +9756,11 @@ var UiTableComponent = class UiTableComponent {
|
|
|
9755
9756
|
heroMagnifyingGlass,
|
|
9756
9757
|
heroFunnel,
|
|
9757
9758
|
heroViewColumns,
|
|
9758
|
-
heroBars2
|
|
9759
|
-
heroChevronUpDown,
|
|
9760
|
-
heroChevronUp,
|
|
9761
|
-
heroChevronDown
|
|
9759
|
+
heroBars2
|
|
9762
9760
|
})],
|
|
9763
9761
|
ngImport: i0,
|
|
9764
|
-
template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n <div class=\"ui-table-toolbar\">\n @if (searchable()) {\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"max-w-xs\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroMagnifyingGlass\"\n class=\"ms-3 size-4 text-muted-foreground-1\"\n />\n </ng-template>\n </ui-input>\n }\n\n @if (hasFilterableColumns()) {\n <ui-dropdown\n [isOpen]=\"filterMenuOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"filterMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n Filters\n @if (activeFilterCount()) {\n <span class=\"ui-table-filter-count ui-text-caption\">\n {{ activeFilterCount() }}\n </span>\n }\n </ui-button>\n\n @if (filterMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-table-filter-menu\">\n @for (column of filterableColumns(); track column.id) {\n <div class=\"flex flex-col gap-1\">\n <span\n class=\"text-muted-foreground-1 ui-text-caption\"\n >\n {{ column.header }}\n </span>\n\n @if (column.filterOptions) {\n <ui-select\n [dataSource]=\"filterDataSource(column)\"\n [selectedItem]=\"selectedFilterOption(column)\"\n (selectionChange)=\"onFilterSelect(column.id, $event)\"\n [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n [clearable]=\"true\"\n clearLabel=\"All\"\n placeholder=\"All\"\n />\n } @else {\n <ui-input\n [value]=\"filterValue(column.id)\"\n (valueChange)=\"onFilterInput(column.id, $event)\"\n placeholder=\"Filter...\"\n [ariaLabel]=\"'Filter ' + column.header\"\n />\n }\n </div>\n }\n\n @if (activeFilterCount()) {\n <ui-button\n appearance=\"link\"\n intent=\"secondary\"\n class=\"text-end\"\n classes=\"self-end p-0! text-sm\"\n (click)=\"clearFilters()\"\n >\n Clear filters\n </ui-button>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n\n @if (toggleableColumns()) {\n <ui-dropdown\n [isOpen]=\"columnMenuOpen\"\n placement=\"bottom-end\"\n closeBehaviour=\"whenClickOutside\"\n class=\"ms-auto\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"columnMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n Columns\n </ui-button>\n\n @if (columnMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n @for (column of hideableColumns(); track column.id) {\n <label\n class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n >\n <ui-checkbox\n [value]=\"isColumnVisible(column)\"\n (valueChange)=\"toggleColumnVisibility(column)\"\n />\n {{ column.header }}\n </label>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n </div>\n}\n\n<div class=\"ui-table-scroll\">\n <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n <colgroup>\n @if (selectable()) {\n <col [style.width.px]=\"44\" />\n }\n\n @for (column of renderColumns(); track column.id) {\n <col [style.width.px]=\"columnWidth(column)\" />\n }\n\n @if (hasActions()) {\n <col [style.width.px]=\"actionsColumnWidth()\" />\n }\n </colgroup>\n\n <thead [class.ui-table-sticky]=\"stickyHeader()\">\n <tr>\n @if (selectable()) {\n <th class=\"text-center! ui-table-select-cell\">\n <ui-checkbox\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (valueChange)=\"toggleSelectAll()\"\n />\n </th>\n }\n\n @for (column of renderColumns(); track column.id) {\n <th\n scope=\"col\"\n [attr.data-column-id]=\"column.id\"\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n <div class=\"ui-table-th-content\">\n @if (reorderableColumns() && column.reorderable !== false) {\n <ng-icon\n name=\"heroBars2\"\n class=\"ui-table-drag-handle\"\n (pointerdown)=\"onColumnDragStart($event, column)\"\n />\n }\n\n @if (column.sortable) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus:text-foreground\"\n (click)=\"toggleSort(column)\"\n >\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n <ng-icon\n [name]=\"sortIcon(column)\"\n class=\"ms-auto size-4 shrink-0\"\n />\n </ui-button>\n } @else {\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n }\n </div>\n\n @if (column.resizable) {\n <span\n class=\"ui-table-resize-handle\"\n (pointerdown)=\"startResize($event, column)\"\n ></span>\n }\n </th>\n }\n\n @if (hasActions()) {\n <th class=\"ui-table-actions-cell\"></th>\n }\n </tr>\n </thead>\n\n <tbody class=\"ui-text-body-alt\">\n @if (loading()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n <ui-loading type=\"loading-dots\" />\n </td>\n </tr>\n } @else if (error()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status ui-table-status-error\"\n >\n {{ errorMessage() }}\n <ui-button\n appearance=\"link\"\n intent=\"danger\"\n classes=\"ms-1 p-0! text-sm underline\"\n (click)=\"reload()\"\n >\n Retry\n </ui-button>\n </td>\n </tr>\n } @else if (isEmpty()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n {{ emptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of rows(); track rowId()(row, $index); let i = $index) {\n <tr\n [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n [draggable]=\"canReorderRows()\"\n (dragstart)=\"onRowDragStart($event, i)\"\n (dragover)=\"onRowDragOver($event)\"\n (drop)=\"onRowDrop($event, i)\"\n >\n @if (selectable()) {\n <td class=\"ui-table-select-cell\">\n <ui-checkbox\n [value]=\"isRowSelected(row, i)\"\n (valueChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n\n @for (column of renderColumns(); track column.id) {\n <td\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n @if (column.displayType === 'icon') {\n <ng-icon\n [name]=\"cellIconValue(column, row)\"\n class=\"size-4\"\n />\n } @else if (column.displayType === 'currency') {\n <ui-money\n [value]=\"moneyCellValue(column, row)\"\n [currency]=\"column.currency ?? uiFormat.currency\"\n placeholder=\"\"\n />\n } @else if (column.sensitive) {\n <ui-private [text]=\"formattedCellValue(column, row)\" />\n } @else {\n {{ formattedCellValue(column, row) }}\n }\n </td>\n }\n\n @if (hasActions()) {\n <td class=\"ui-table-actions-cell\">\n @for (action of actions(); track action.id) {\n <ui-button\n appearance=\"none\"\n classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n [disabled]=\"!!action.disabled?.(row)\"\n [ariaLabel]=\"action.label\"\n [title]=\"action.label\"\n (click)=\"action.onClick(row)\"\n >\n <ng-icon\n [name]=\"action.icon\"\n class=\"size-4\"\n />\n </ui-button>\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (dragPreview(); as preview) {\n <div\n class=\"ui-table-drag-preview ui-text-body-alt\"\n [style.left.px]=\"preview.x\"\n [style.top.px]=\"preview.y\"\n [style.width.px]=\"preview.width\"\n [style.height.px]=\"preview.height\"\n >\n <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n <span class=\"truncate\">{{ preview.label }}</span>\n </div>\n}\n\n@if (paginated()) {\n <div class=\"ui-table-footer\">\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n resultsLabel()\n }}</span>\n\n <div class=\"ui-table-pagination\">\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n >\n Prev\n </ui-button>\n\n <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n totalPages()\n }}</span>\n\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() + 1 >= totalPages()\"\n (click)=\"goToPage(currentPage() + 1)\"\n >\n Next\n </ui-button>\n </div>\n </div>\n}\n",
|
|
9765
|
-
styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table--fixed{table-layout:fixed}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))
|
|
9762
|
+
template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n <div class=\"ui-table-toolbar\">\n @if (searchable()) {\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"max-w-xs\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroMagnifyingGlass\"\n class=\"ms-3 size-4 text-muted-foreground-1\"\n />\n </ng-template>\n </ui-input>\n }\n\n @if (hasFilterableColumns()) {\n <ui-dropdown\n [isOpen]=\"filterMenuOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"filterMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n Filters\n @if (activeFilterCount()) {\n <span class=\"ui-table-filter-count ui-text-caption\">\n {{ activeFilterCount() }}\n </span>\n }\n </ui-button>\n\n @if (filterMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-table-filter-menu\">\n @for (column of filterableColumns(); track column.id) {\n <div class=\"flex flex-col gap-1\">\n <span\n class=\"text-muted-foreground-1 ui-text-caption\"\n >\n {{ column.header }}\n </span>\n\n @if (column.filterOptions) {\n <ui-select\n [dataSource]=\"filterDataSource(column)\"\n [selectedItem]=\"selectedFilterOption(column)\"\n (selectionChange)=\"onFilterSelect(column.id, $event)\"\n [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n [clearable]=\"true\"\n clearLabel=\"All\"\n placeholder=\"All\"\n />\n } @else {\n <ui-input\n [value]=\"filterValue(column.id)\"\n (valueChange)=\"onFilterInput(column.id, $event)\"\n placeholder=\"Filter...\"\n [ariaLabel]=\"'Filter ' + column.header\"\n />\n }\n </div>\n }\n\n @if (activeFilterCount()) {\n <ui-button\n appearance=\"link\"\n intent=\"secondary\"\n class=\"text-end\"\n classes=\"self-end p-0! text-sm\"\n (click)=\"clearFilters()\"\n >\n Clear filters\n </ui-button>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n\n @if (toggleableColumns()) {\n <ui-dropdown\n [isOpen]=\"columnMenuOpen\"\n placement=\"bottom-end\"\n closeBehaviour=\"whenClickOutside\"\n class=\"ms-auto\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"columnMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n Columns\n </ui-button>\n\n @if (columnMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n @for (column of hideableColumns(); track column.id) {\n <label\n class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n >\n <ui-checkbox\n [value]=\"isColumnVisible(column)\"\n (valueChange)=\"toggleColumnVisibility(column)\"\n />\n {{ column.header }}\n </label>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n </div>\n}\n\n<div class=\"ui-table-scroll\">\n <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n <colgroup>\n @if (selectable()) {\n <col [style.width.px]=\"44\" />\n }\n\n @for (column of renderColumns(); track column.id) {\n <col [style.width.px]=\"columnWidth(column)\" />\n }\n\n @if (hasActions()) {\n <col [style.width.px]=\"actionsColumnWidth()\" />\n }\n </colgroup>\n\n <thead [class.ui-table-sticky]=\"stickyHeader()\">\n <tr>\n @if (selectable()) {\n <th class=\"text-center! ui-table-select-cell\">\n <ui-checkbox\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (valueChange)=\"toggleSelectAll()\"\n />\n </th>\n }\n\n @for (column of renderColumns(); track column.id) {\n <th\n scope=\"col\"\n [attr.data-column-id]=\"column.id\"\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n <div class=\"ui-table-th-content\">\n @if (reorderableColumns() && column.reorderable !== false) {\n <ng-icon\n name=\"heroBars2\"\n class=\"ui-table-drag-handle\"\n (pointerdown)=\"onColumnDragStart($event, column)\"\n />\n }\n\n @if (column.sortable) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus:text-foreground\"\n (click)=\"toggleSort(column)\"\n >\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n <svg\n viewBox=\"0 0 8 13\"\n aria-hidden=\"true\"\n class=\"ui-table-sort\"\n [attr.data-direction]=\"sortDirection(column)\"\n >\n <path class=\"ui-table-sort-asc\" d=\"M4 0 8 5H0z\" />\n <path class=\"ui-table-sort-desc\" d=\"M4 13 0 8h8z\" />\n </svg>\n </ui-button>\n } @else {\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n }\n </div>\n\n @if (column.resizable) {\n <span\n class=\"ui-table-resize-handle\"\n (pointerdown)=\"startResize($event, column)\"\n ></span>\n }\n </th>\n }\n\n @if (hasActions()) {\n <th class=\"ui-table-actions-cell\"></th>\n }\n </tr>\n </thead>\n\n <tbody class=\"ui-text-body-alt\">\n @if (loading()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n <ui-loading type=\"loading-dots\" />\n </td>\n </tr>\n } @else if (error()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status ui-table-status-error\"\n >\n {{ errorMessage() }}\n <ui-button\n appearance=\"link\"\n intent=\"danger\"\n classes=\"ms-1 p-0! text-sm underline\"\n (click)=\"reload()\"\n >\n Retry\n </ui-button>\n </td>\n </tr>\n } @else if (isEmpty()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n {{ emptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of rows(); track rowId()(row, $index); let i = $index) {\n <tr\n [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n [draggable]=\"canReorderRows()\"\n (dragstart)=\"onRowDragStart($event, i)\"\n (dragover)=\"onRowDragOver($event)\"\n (drop)=\"onRowDrop($event, i)\"\n >\n @if (selectable()) {\n <td class=\"ui-table-select-cell\">\n <ui-checkbox\n [value]=\"isRowSelected(row, i)\"\n (valueChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n\n @for (column of renderColumns(); track column.id) {\n <td\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n @if (column.displayType === 'icon') {\n <ng-icon\n [name]=\"cellIconValue(column, row)\"\n class=\"size-4\"\n />\n } @else if (column.displayType === 'currency') {\n <ui-money\n [value]=\"moneyCellValue(column, row)\"\n [currency]=\"column.currency ?? uiFormat.currency\"\n placeholder=\"\"\n />\n } @else if (column.sensitive) {\n <ui-private [text]=\"formattedCellValue(column, row)\" />\n } @else {\n {{ formattedCellValue(column, row) }}\n }\n </td>\n }\n\n @if (hasActions()) {\n <td class=\"ui-table-actions-cell\">\n @for (action of actions(); track action.id) {\n <ui-button\n appearance=\"none\"\n classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n [disabled]=\"!!action.disabled?.(row)\"\n [ariaLabel]=\"action.label\"\n [title]=\"action.label\"\n (click)=\"action.onClick(row)\"\n >\n <ng-icon\n [name]=\"action.icon\"\n class=\"size-4\"\n />\n </ui-button>\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (dragPreview(); as preview) {\n <div\n class=\"ui-table-drag-preview ui-text-body-alt\"\n [style.left.px]=\"preview.x\"\n [style.top.px]=\"preview.y\"\n [style.width.px]=\"preview.width\"\n [style.height.px]=\"preview.height\"\n >\n <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n <span class=\"truncate\">{{ preview.label }}</span>\n </div>\n}\n\n@if (paginated()) {\n <div class=\"ui-table-footer\">\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n resultsLabel()\n }}</span>\n\n <div class=\"ui-table-pagination\">\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n >\n Prev\n </ui-button>\n\n <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n totalPages()\n }}</span>\n\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() + 1 >= totalPages()\"\n (click)=\"goToPage(currentPage() + 1)\"\n >\n Next\n </ui-button>\n </div>\n </div>\n}\n",
|
|
9763
|
+
styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table--fixed{table-layout:fixed}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}.ui-table tbody{background-color:var(--layer)}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-table tbody>:not(:last-child)){border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table th.ui-table-pinned:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-sort{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 2);flex-shrink:0;fill:currentcolor;color:var(--muted-foreground-1)}.ui-table-sort path{opacity:30%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.ui-table-sort[data-direction]{color:var(--color-primary-500, var(--color-blue-500))}.ui-table-sort[data-direction=asc] .ui-table-sort-asc,.ui-table-sort[data-direction=desc] .ui-table-sort-desc{opacity:100%}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
9766
9764
|
dependencies: [
|
|
9767
9765
|
{
|
|
9768
9766
|
kind: "component",
|
|
@@ -9963,13 +9961,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9963
9961
|
heroMagnifyingGlass,
|
|
9964
9962
|
heroFunnel,
|
|
9965
9963
|
heroViewColumns,
|
|
9966
|
-
heroBars2
|
|
9967
|
-
heroChevronUpDown,
|
|
9968
|
-
heroChevronUp,
|
|
9969
|
-
heroChevronDown
|
|
9964
|
+
heroBars2
|
|
9970
9965
|
})],
|
|
9971
|
-
template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n <div class=\"ui-table-toolbar\">\n @if (searchable()) {\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"max-w-xs\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroMagnifyingGlass\"\n class=\"ms-3 size-4 text-muted-foreground-1\"\n />\n </ng-template>\n </ui-input>\n }\n\n @if (hasFilterableColumns()) {\n <ui-dropdown\n [isOpen]=\"filterMenuOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"filterMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n Filters\n @if (activeFilterCount()) {\n <span class=\"ui-table-filter-count ui-text-caption\">\n {{ activeFilterCount() }}\n </span>\n }\n </ui-button>\n\n @if (filterMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-table-filter-menu\">\n @for (column of filterableColumns(); track column.id) {\n <div class=\"flex flex-col gap-1\">\n <span\n class=\"text-muted-foreground-1 ui-text-caption\"\n >\n {{ column.header }}\n </span>\n\n @if (column.filterOptions) {\n <ui-select\n [dataSource]=\"filterDataSource(column)\"\n [selectedItem]=\"selectedFilterOption(column)\"\n (selectionChange)=\"onFilterSelect(column.id, $event)\"\n [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n [clearable]=\"true\"\n clearLabel=\"All\"\n placeholder=\"All\"\n />\n } @else {\n <ui-input\n [value]=\"filterValue(column.id)\"\n (valueChange)=\"onFilterInput(column.id, $event)\"\n placeholder=\"Filter...\"\n [ariaLabel]=\"'Filter ' + column.header\"\n />\n }\n </div>\n }\n\n @if (activeFilterCount()) {\n <ui-button\n appearance=\"link\"\n intent=\"secondary\"\n class=\"text-end\"\n classes=\"self-end p-0! text-sm\"\n (click)=\"clearFilters()\"\n >\n Clear filters\n </ui-button>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n\n @if (toggleableColumns()) {\n <ui-dropdown\n [isOpen]=\"columnMenuOpen\"\n placement=\"bottom-end\"\n closeBehaviour=\"whenClickOutside\"\n class=\"ms-auto\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"columnMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n Columns\n </ui-button>\n\n @if (columnMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n @for (column of hideableColumns(); track column.id) {\n <label\n class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n >\n <ui-checkbox\n [value]=\"isColumnVisible(column)\"\n (valueChange)=\"toggleColumnVisibility(column)\"\n />\n {{ column.header }}\n </label>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n </div>\n}\n\n<div class=\"ui-table-scroll\">\n <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n <colgroup>\n @if (selectable()) {\n <col [style.width.px]=\"44\" />\n }\n\n @for (column of renderColumns(); track column.id) {\n <col [style.width.px]=\"columnWidth(column)\" />\n }\n\n @if (hasActions()) {\n <col [style.width.px]=\"actionsColumnWidth()\" />\n }\n </colgroup>\n\n <thead [class.ui-table-sticky]=\"stickyHeader()\">\n <tr>\n @if (selectable()) {\n <th class=\"text-center! ui-table-select-cell\">\n <ui-checkbox\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (valueChange)=\"toggleSelectAll()\"\n />\n </th>\n }\n\n @for (column of renderColumns(); track column.id) {\n <th\n scope=\"col\"\n [attr.data-column-id]=\"column.id\"\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n <div class=\"ui-table-th-content\">\n @if (reorderableColumns() && column.reorderable !== false) {\n <ng-icon\n name=\"heroBars2\"\n class=\"ui-table-drag-handle\"\n (pointerdown)=\"onColumnDragStart($event, column)\"\n />\n }\n\n @if (column.sortable) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus:text-foreground\"\n (click)=\"toggleSort(column)\"\n >\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n <ng-icon\n [name]=\"sortIcon(column)\"\n class=\"ms-auto size-4 shrink-0\"\n />\n </ui-button>\n } @else {\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n }\n </div>\n\n @if (column.resizable) {\n <span\n class=\"ui-table-resize-handle\"\n (pointerdown)=\"startResize($event, column)\"\n ></span>\n }\n </th>\n }\n\n @if (hasActions()) {\n <th class=\"ui-table-actions-cell\"></th>\n }\n </tr>\n </thead>\n\n <tbody class=\"ui-text-body-alt\">\n @if (loading()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n <ui-loading type=\"loading-dots\" />\n </td>\n </tr>\n } @else if (error()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status ui-table-status-error\"\n >\n {{ errorMessage() }}\n <ui-button\n appearance=\"link\"\n intent=\"danger\"\n classes=\"ms-1 p-0! text-sm underline\"\n (click)=\"reload()\"\n >\n Retry\n </ui-button>\n </td>\n </tr>\n } @else if (isEmpty()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n {{ emptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of rows(); track rowId()(row, $index); let i = $index) {\n <tr\n [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n [draggable]=\"canReorderRows()\"\n (dragstart)=\"onRowDragStart($event, i)\"\n (dragover)=\"onRowDragOver($event)\"\n (drop)=\"onRowDrop($event, i)\"\n >\n @if (selectable()) {\n <td class=\"ui-table-select-cell\">\n <ui-checkbox\n [value]=\"isRowSelected(row, i)\"\n (valueChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n\n @for (column of renderColumns(); track column.id) {\n <td\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n @if (column.displayType === 'icon') {\n <ng-icon\n [name]=\"cellIconValue(column, row)\"\n class=\"size-4\"\n />\n } @else if (column.displayType === 'currency') {\n <ui-money\n [value]=\"moneyCellValue(column, row)\"\n [currency]=\"column.currency ?? uiFormat.currency\"\n placeholder=\"\"\n />\n } @else if (column.sensitive) {\n <ui-private [text]=\"formattedCellValue(column, row)\" />\n } @else {\n {{ formattedCellValue(column, row) }}\n }\n </td>\n }\n\n @if (hasActions()) {\n <td class=\"ui-table-actions-cell\">\n @for (action of actions(); track action.id) {\n <ui-button\n appearance=\"none\"\n classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n [disabled]=\"!!action.disabled?.(row)\"\n [ariaLabel]=\"action.label\"\n [title]=\"action.label\"\n (click)=\"action.onClick(row)\"\n >\n <ng-icon\n [name]=\"action.icon\"\n class=\"size-4\"\n />\n </ui-button>\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (dragPreview(); as preview) {\n <div\n class=\"ui-table-drag-preview ui-text-body-alt\"\n [style.left.px]=\"preview.x\"\n [style.top.px]=\"preview.y\"\n [style.width.px]=\"preview.width\"\n [style.height.px]=\"preview.height\"\n >\n <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n <span class=\"truncate\">{{ preview.label }}</span>\n </div>\n}\n\n@if (paginated()) {\n <div class=\"ui-table-footer\">\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n resultsLabel()\n }}</span>\n\n <div class=\"ui-table-pagination\">\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n >\n Prev\n </ui-button>\n\n <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n totalPages()\n }}</span>\n\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() + 1 >= totalPages()\"\n (click)=\"goToPage(currentPage() + 1)\"\n >\n Next\n </ui-button>\n </div>\n </div>\n}\n",
|
|
9972
|
-
styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table--fixed{table-layout:fixed}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))
|
|
9966
|
+
template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n <div class=\"ui-table-toolbar\">\n @if (searchable()) {\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"max-w-xs\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroMagnifyingGlass\"\n class=\"ms-3 size-4 text-muted-foreground-1\"\n />\n </ng-template>\n </ui-input>\n }\n\n @if (hasFilterableColumns()) {\n <ui-dropdown\n [isOpen]=\"filterMenuOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"filterMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n Filters\n @if (activeFilterCount()) {\n <span class=\"ui-table-filter-count ui-text-caption\">\n {{ activeFilterCount() }}\n </span>\n }\n </ui-button>\n\n @if (filterMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-table-filter-menu\">\n @for (column of filterableColumns(); track column.id) {\n <div class=\"flex flex-col gap-1\">\n <span\n class=\"text-muted-foreground-1 ui-text-caption\"\n >\n {{ column.header }}\n </span>\n\n @if (column.filterOptions) {\n <ui-select\n [dataSource]=\"filterDataSource(column)\"\n [selectedItem]=\"selectedFilterOption(column)\"\n (selectionChange)=\"onFilterSelect(column.id, $event)\"\n [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n [clearable]=\"true\"\n clearLabel=\"All\"\n placeholder=\"All\"\n />\n } @else {\n <ui-input\n [value]=\"filterValue(column.id)\"\n (valueChange)=\"onFilterInput(column.id, $event)\"\n placeholder=\"Filter...\"\n [ariaLabel]=\"'Filter ' + column.header\"\n />\n }\n </div>\n }\n\n @if (activeFilterCount()) {\n <ui-button\n appearance=\"link\"\n intent=\"secondary\"\n class=\"text-end\"\n classes=\"self-end p-0! text-sm\"\n (click)=\"clearFilters()\"\n >\n Clear filters\n </ui-button>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n\n @if (toggleableColumns()) {\n <ui-dropdown\n [isOpen]=\"columnMenuOpen\"\n placement=\"bottom-end\"\n closeBehaviour=\"whenClickOutside\"\n class=\"ms-auto\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"columnMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n Columns\n </ui-button>\n\n @if (columnMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n @for (column of hideableColumns(); track column.id) {\n <label\n class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n >\n <ui-checkbox\n [value]=\"isColumnVisible(column)\"\n (valueChange)=\"toggleColumnVisibility(column)\"\n />\n {{ column.header }}\n </label>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n </div>\n}\n\n<div class=\"ui-table-scroll\">\n <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n <colgroup>\n @if (selectable()) {\n <col [style.width.px]=\"44\" />\n }\n\n @for (column of renderColumns(); track column.id) {\n <col [style.width.px]=\"columnWidth(column)\" />\n }\n\n @if (hasActions()) {\n <col [style.width.px]=\"actionsColumnWidth()\" />\n }\n </colgroup>\n\n <thead [class.ui-table-sticky]=\"stickyHeader()\">\n <tr>\n @if (selectable()) {\n <th class=\"text-center! ui-table-select-cell\">\n <ui-checkbox\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (valueChange)=\"toggleSelectAll()\"\n />\n </th>\n }\n\n @for (column of renderColumns(); track column.id) {\n <th\n scope=\"col\"\n [attr.data-column-id]=\"column.id\"\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n <div class=\"ui-table-th-content\">\n @if (reorderableColumns() && column.reorderable !== false) {\n <ng-icon\n name=\"heroBars2\"\n class=\"ui-table-drag-handle\"\n (pointerdown)=\"onColumnDragStart($event, column)\"\n />\n }\n\n @if (column.sortable) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus:text-foreground\"\n (click)=\"toggleSort(column)\"\n >\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n <svg\n viewBox=\"0 0 8 13\"\n aria-hidden=\"true\"\n class=\"ui-table-sort\"\n [attr.data-direction]=\"sortDirection(column)\"\n >\n <path class=\"ui-table-sort-asc\" d=\"M4 0 8 5H0z\" />\n <path class=\"ui-table-sort-desc\" d=\"M4 13 0 8h8z\" />\n </svg>\n </ui-button>\n } @else {\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n }\n </div>\n\n @if (column.resizable) {\n <span\n class=\"ui-table-resize-handle\"\n (pointerdown)=\"startResize($event, column)\"\n ></span>\n }\n </th>\n }\n\n @if (hasActions()) {\n <th class=\"ui-table-actions-cell\"></th>\n }\n </tr>\n </thead>\n\n <tbody class=\"ui-text-body-alt\">\n @if (loading()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n <ui-loading type=\"loading-dots\" />\n </td>\n </tr>\n } @else if (error()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status ui-table-status-error\"\n >\n {{ errorMessage() }}\n <ui-button\n appearance=\"link\"\n intent=\"danger\"\n classes=\"ms-1 p-0! text-sm underline\"\n (click)=\"reload()\"\n >\n Retry\n </ui-button>\n </td>\n </tr>\n } @else if (isEmpty()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n {{ emptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of rows(); track rowId()(row, $index); let i = $index) {\n <tr\n [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n [draggable]=\"canReorderRows()\"\n (dragstart)=\"onRowDragStart($event, i)\"\n (dragover)=\"onRowDragOver($event)\"\n (drop)=\"onRowDrop($event, i)\"\n >\n @if (selectable()) {\n <td class=\"ui-table-select-cell\">\n <ui-checkbox\n [value]=\"isRowSelected(row, i)\"\n (valueChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n\n @for (column of renderColumns(); track column.id) {\n <td\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n @if (column.displayType === 'icon') {\n <ng-icon\n [name]=\"cellIconValue(column, row)\"\n class=\"size-4\"\n />\n } @else if (column.displayType === 'currency') {\n <ui-money\n [value]=\"moneyCellValue(column, row)\"\n [currency]=\"column.currency ?? uiFormat.currency\"\n placeholder=\"\"\n />\n } @else if (column.sensitive) {\n <ui-private [text]=\"formattedCellValue(column, row)\" />\n } @else {\n {{ formattedCellValue(column, row) }}\n }\n </td>\n }\n\n @if (hasActions()) {\n <td class=\"ui-table-actions-cell\">\n @for (action of actions(); track action.id) {\n <ui-button\n appearance=\"none\"\n classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n [disabled]=\"!!action.disabled?.(row)\"\n [ariaLabel]=\"action.label\"\n [title]=\"action.label\"\n (click)=\"action.onClick(row)\"\n >\n <ng-icon\n [name]=\"action.icon\"\n class=\"size-4\"\n />\n </ui-button>\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (dragPreview(); as preview) {\n <div\n class=\"ui-table-drag-preview ui-text-body-alt\"\n [style.left.px]=\"preview.x\"\n [style.top.px]=\"preview.y\"\n [style.width.px]=\"preview.width\"\n [style.height.px]=\"preview.height\"\n >\n <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n <span class=\"truncate\">{{ preview.label }}</span>\n </div>\n}\n\n@if (paginated()) {\n <div class=\"ui-table-footer\">\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n resultsLabel()\n }}</span>\n\n <div class=\"ui-table-pagination\">\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n >\n Prev\n </ui-button>\n\n <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n totalPages()\n }}</span>\n\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() + 1 >= totalPages()\"\n (click)=\"goToPage(currentPage() + 1)\"\n >\n Next\n </ui-button>\n </div>\n </div>\n}\n",
|
|
9967
|
+
styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table--fixed{table-layout:fixed}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}.ui-table tbody{background-color:var(--layer)}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-table tbody>:not(:last-child)){border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table th.ui-table-pinned:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-sort{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 2);flex-shrink:0;fill:currentcolor;color:var(--muted-foreground-1)}.ui-table-sort path{opacity:30%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.ui-table-sort[data-direction]{color:var(--color-primary-500, var(--color-blue-500))}.ui-table-sort[data-direction=asc] .ui-table-sort-asc,.ui-table-sort[data-direction=desc] .ui-table-sort-desc{opacity:100%}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
9973
9968
|
}]
|
|
9974
9969
|
}],
|
|
9975
9970
|
ctorParameters: () => [],
|