@raintonic/formaui 0.9.0 → 0.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/raintonic-formaui-components-accordion.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-accordion.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-alert.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-alert.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-autocomplete.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-avatar.mjs +3 -3
- package/fesm2022/raintonic-formaui-components-avatar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-badge.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-badge.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-button-group.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-button-group.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-card.mjs +78 -8
- package/fesm2022/raintonic-formaui-components-card.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-checkbox.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-checkbox.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-chip.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-chip.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-data-table.mjs +80 -11
- package/fesm2022/raintonic-formaui-components-data-table.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-date-picker.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-date-picker.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-divider.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-divider.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-drawer.mjs +37 -6
- package/fesm2022/raintonic-formaui-components-drawer.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-dropdown-menu.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-dropdown-menu.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-dual-tier-navigation.mjs +1 -1
- package/fesm2022/raintonic-formaui-components-dual-tier-navigation.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-empty-state.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-empty-state.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-file-upload.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-file-upload.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-form-field.mjs +21 -2
- package/fesm2022/raintonic-formaui-components-form-field.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-input.mjs +14 -0
- package/fesm2022/raintonic-formaui-components-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-list.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-list.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-number-input.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-number-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-paginator.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-paginator.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-password-input.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-password-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-popover.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-popover.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-progressbar.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-progressbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-radio.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-radio.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-select.mjs +15 -7
- package/fesm2022/raintonic-formaui-components-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-side-panel.mjs +40 -6
- package/fesm2022/raintonic-formaui-components-side-panel.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-sidebar-nav-menu.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-sidebar-nav-menu.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-slider.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-slider.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-spinner.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-spinner.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-stepper.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-stepper.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tab.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tab.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-time-picker.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-time-picker.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-toggle-group.mjs +19 -8
- package/fesm2022/raintonic-formaui-components-toggle-group.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-toolbar.mjs +10 -4
- package/fesm2022/raintonic-formaui-components-toolbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tooltip.mjs +102 -8
- package/fesm2022/raintonic-formaui-components-tooltip.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-topbar.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-topbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree-select.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tree-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree-table.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tree-table.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-tree.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-services-dialog.mjs +8 -4
- package/fesm2022/raintonic-formaui-services-dialog.mjs.map +1 -1
- package/fesm2022/raintonic-formaui.mjs +1 -1
- package/fesm2022/raintonic-formaui.mjs.map +1 -1
- package/llms-full.txt +72 -27
- package/package.json +1 -1
- package/styles/generated/_tokens.scss +9 -9
- package/styles/partials/components/_dialog.scss +24 -0
- package/styles/styles.css +24 -9
- package/types/raintonic-formaui-components-card.d.ts +46 -2
- package/types/raintonic-formaui-components-card.d.ts.map +1 -1
- package/types/raintonic-formaui-components-data-table.d.ts +50 -3
- package/types/raintonic-formaui-components-data-table.d.ts.map +1 -1
- package/types/raintonic-formaui-components-drawer.d.ts +20 -2
- package/types/raintonic-formaui-components-drawer.d.ts.map +1 -1
- package/types/raintonic-formaui-components-form-field.d.ts +10 -0
- package/types/raintonic-formaui-components-form-field.d.ts.map +1 -1
- package/types/raintonic-formaui-components-input.d.ts +9 -0
- package/types/raintonic-formaui-components-input.d.ts.map +1 -1
- package/types/raintonic-formaui-components-select.d.ts +8 -1
- package/types/raintonic-formaui-components-select.d.ts.map +1 -1
- package/types/raintonic-formaui-components-side-panel.d.ts +24 -2
- package/types/raintonic-formaui-components-side-panel.d.ts.map +1 -1
- package/types/raintonic-formaui-components-toggle-group.d.ts +1 -1
- package/types/raintonic-formaui-components-toggle-group.d.ts.map +1 -1
- package/types/raintonic-formaui-components-toolbar.d.ts +5 -1
- package/types/raintonic-formaui-components-toolbar.d.ts.map +1 -1
- package/types/raintonic-formaui-components-tooltip.d.ts +55 -4
- package/types/raintonic-formaui-components-tooltip.d.ts.map +1 -1
- package/types/raintonic-formaui-services-dialog.d.ts +12 -1
- package/types/raintonic-formaui-services-dialog.d.ts.map +1 -1
- package/types/raintonic-formaui.d.ts +1 -1
|
@@ -70,7 +70,7 @@ class FuiChipComponent {
|
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
73
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiChipComponent, isStandalone: true, selector: "fui-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", selectedChange: "selectedChange" }, host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()", "keydown.space": "onSpace($event)" }, properties: { "class": "computedClasses()", "class.fui-chip--selected": "_selected()", "class.fui-chip--disabled": "disabled()", "attr.role": "selectable() ? \"option\" : null", "attr.aria-selected": "selectable() ? _selected() : null", "attr.aria-pressed": "selectable() ? _selected() : null", "attr.tabindex": "selectable() || removable() ? 0 : null" }, classAttribute: "fui-chip" }, ngImport: i0, template: "<span class=\"fui-chip__content\">\r\n @if (icon()) {\r\n <fui-icon class=\"fui-chip__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n }\r\n <span class=\"fui-chip__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n <button\r\n class=\"fui-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n (click)=\"onRemove($event)\"\r\n (keydown.enter)=\"onRemove($event)\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n </button>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-chip{display:inline-flex;align-items:center;gap:var(--fui-spacing-2, .25rem);border-radius:var(--fui-radius-pill, 999px);font-family:var(--fui-font-sans);font-weight:var(--fui-weight-medium, 500);cursor:default;-webkit-user-select:none;user-select:none;transition-property:background-color border-color color;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-chip--sm{padding
|
|
73
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiChipComponent, isStandalone: true, selector: "fui-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", selectedChange: "selectedChange" }, host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()", "keydown.space": "onSpace($event)" }, properties: { "class": "computedClasses()", "class.fui-chip--selected": "_selected()", "class.fui-chip--disabled": "disabled()", "attr.role": "selectable() ? \"option\" : null", "attr.aria-selected": "selectable() ? _selected() : null", "attr.aria-pressed": "selectable() ? _selected() : null", "attr.tabindex": "selectable() || removable() ? 0 : null" }, classAttribute: "fui-chip" }, ngImport: i0, template: "<span class=\"fui-chip__content\">\r\n @if (icon()) {\r\n <fui-icon class=\"fui-chip__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n }\r\n <span class=\"fui-chip__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n <button\r\n class=\"fui-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n (click)=\"onRemove($event)\"\r\n (keydown.enter)=\"onRemove($event)\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n </button>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-chip{display:inline-flex;align-items:center;gap:var(--fui-spacing-2, .25rem);border-radius:var(--fui-radius-pill, 999px);font-family:var(--fui-font-sans);font-weight:var(--fui-weight-medium, 500);cursor:default;-webkit-user-select:none;user-select:none;transition-property:background-color border-color color;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-chip--sm{padding:var(--fui-spacing-1) var(--fui-spacing-4, .5rem);font-size:var(--fui-text-sm);min-height:1.25rem}.fui-chip--md{padding:var(--fui-spacing-2) var(--fui-spacing-6, .75rem);font-size:var(--fui-text-base);min-height:1.625rem}.fui-chip--primary{background-color:var(--fui-primary-20);color:var(--fui-primary-80)}.fui-chip--secondary{background-color:var(--fui-neutral-20);color:var(--fui-neutral-80)}.fui-chip--success{background-color:var(--fui-success-20);color:var(--fui-success-80)}.fui-chip--warning{background-color:var(--fui-warning-20);color:var(--fui-warning-80)}.fui-chip--danger{background-color:var(--fui-error-20);color:var(--fui-error-80)}.fui-chip--info{background-color:var(--fui-info-20);color:var(--fui-info-80)}.fui-chip--selected.fui-chip--primary{background-color:var(--fui-primary-bg);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--secondary{background-color:var(--fui-neutral-80);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--success{background-color:var(--fui-fill-success);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--warning{background-color:var(--fui-fill-warning);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--danger{background-color:var(--fui-fill-error);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--info{background-color:var(--fui-fill-info);color:var(--fui-text-on-fill)}.fui-chip__content{display:inline-flex;align-items:center;gap:var(--fui-spacing-2, .25rem);min-width:0}.fui-chip__label{white-space:normal;overflow-wrap:anywhere}.fui-chip__remove{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-chip__remove:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-chip__remove{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:1rem;height:1rem;margin-left:var(--fui-spacing-2, .25rem)}.fui-chip__remove:hover{background-color:#0000001a}.fui-chip[tabindex=\"0\"]{cursor:pointer}.fui-chip:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-chip--disabled{opacity:var(--fui-state-disabled-opacity, .38);cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
74
74
|
}
|
|
75
75
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiChipComponent, decorators: [{
|
|
76
76
|
type: Component,
|
|
@@ -86,7 +86,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
86
86
|
'(click)': 'onClick()',
|
|
87
87
|
'(keydown.enter)': 'onClick()',
|
|
88
88
|
'(keydown.space)': 'onSpace($event)',
|
|
89
|
-
}, template: "<span class=\"fui-chip__content\">\r\n @if (icon()) {\r\n <fui-icon class=\"fui-chip__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n }\r\n <span class=\"fui-chip__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n <button\r\n class=\"fui-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n (click)=\"onRemove($event)\"\r\n (keydown.enter)=\"onRemove($event)\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n </button>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-chip{display:inline-flex;align-items:center;gap:var(--fui-spacing-2, .25rem);border-radius:var(--fui-radius-pill, 999px);font-family:var(--fui-font-sans);font-weight:var(--fui-weight-medium, 500);cursor:default;-webkit-user-select:none;user-select:none;transition-property:background-color border-color color;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-chip--sm{padding
|
|
89
|
+
}, template: "<span class=\"fui-chip__content\">\r\n @if (icon()) {\r\n <fui-icon class=\"fui-chip__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n }\r\n <span class=\"fui-chip__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n <button\r\n class=\"fui-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n (click)=\"onRemove($event)\"\r\n (keydown.enter)=\"onRemove($event)\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n </button>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-chip{display:inline-flex;align-items:center;gap:var(--fui-spacing-2, .25rem);border-radius:var(--fui-radius-pill, 999px);font-family:var(--fui-font-sans);font-weight:var(--fui-weight-medium, 500);cursor:default;-webkit-user-select:none;user-select:none;transition-property:background-color border-color color;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-chip--sm{padding:var(--fui-spacing-1) var(--fui-spacing-4, .5rem);font-size:var(--fui-text-sm);min-height:1.25rem}.fui-chip--md{padding:var(--fui-spacing-2) var(--fui-spacing-6, .75rem);font-size:var(--fui-text-base);min-height:1.625rem}.fui-chip--primary{background-color:var(--fui-primary-20);color:var(--fui-primary-80)}.fui-chip--secondary{background-color:var(--fui-neutral-20);color:var(--fui-neutral-80)}.fui-chip--success{background-color:var(--fui-success-20);color:var(--fui-success-80)}.fui-chip--warning{background-color:var(--fui-warning-20);color:var(--fui-warning-80)}.fui-chip--danger{background-color:var(--fui-error-20);color:var(--fui-error-80)}.fui-chip--info{background-color:var(--fui-info-20);color:var(--fui-info-80)}.fui-chip--selected.fui-chip--primary{background-color:var(--fui-primary-bg);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--secondary{background-color:var(--fui-neutral-80);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--success{background-color:var(--fui-fill-success);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--warning{background-color:var(--fui-fill-warning);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--danger{background-color:var(--fui-fill-error);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--info{background-color:var(--fui-fill-info);color:var(--fui-text-on-fill)}.fui-chip__content{display:inline-flex;align-items:center;gap:var(--fui-spacing-2, .25rem);min-width:0}.fui-chip__label{white-space:normal;overflow-wrap:anywhere}.fui-chip__remove{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-chip__remove:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-chip__remove{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:1rem;height:1rem;margin-left:var(--fui-spacing-2, .25rem)}.fui-chip__remove:hover{background-color:#0000001a}.fui-chip[tabindex=\"0\"]{cursor:pointer}.fui-chip:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-chip--disabled{opacity:var(--fui-state-disabled-opacity, .38);cursor:not-allowed;pointer-events:none}\n"] }]
|
|
90
90
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
|
|
91
91
|
|
|
92
92
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-chip.mjs","sources":["../../../lib/components/chip/chip.types.ts","../../../lib/components/chip/chip.intl.ts","../../../lib/components/chip/chip.component.ts","../../../lib/components/chip/chip.component.html","../../../lib/components/chip/raintonic-formaui-components-chip.ts"],"sourcesContent":["import { FuiChipComponent } from './chip.component';\r\n\r\nexport type FuiChipVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';\r\nexport type FuiChipSize = 'sm' | 'md';\r\n\r\nexport const FUI_CHIP_VARIANTS: readonly FuiChipVariant[] = [\r\n 'primary',\r\n 'secondary',\r\n 'success',\r\n 'warning',\r\n 'danger',\r\n 'info',\r\n] as const;\r\nexport const FUI_CHIP_SIZES: readonly FuiChipSize[] = ['sm', 'md'] as const;\r\n\r\nexport interface FuiChipRemoveEvent {\r\n chip: FuiChipComponent;\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiChipIntl extends FuiIntlBase {\r\n removeAriaLabel(label: string): string {\r\n return `Remove ${label}`;\r\n }\r\n}\r\n","import {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n ViewEncapsulation,\r\n computed,\r\n effect,\r\n inject,\r\n input,\r\n output,\r\n signal,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiChipVariant, FuiChipSize, FUI_CHIP_VARIANTS, FuiChipRemoveEvent } from './chip.types';\r\nimport { FuiChipIntl } from './chip.intl';\r\n\r\n@Component({\r\n selector: 'fui-chip',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './chip.component.html',\r\n styleUrls: ['./chip.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-chip',\r\n '[class]': 'computedClasses()',\r\n '[class.fui-chip--selected]': '_selected()',\r\n '[class.fui-chip--disabled]': 'disabled()',\r\n '[attr.role]': 'selectable() ? \"option\" : null',\r\n '[attr.aria-selected]': 'selectable() ? _selected() : null',\r\n '[attr.aria-pressed]': 'selectable() ? _selected() : null',\r\n '[attr.tabindex]': 'selectable() || removable() ? 0 : null',\r\n '(click)': 'onClick()',\r\n '(keydown.enter)': 'onClick()',\r\n '(keydown.space)': 'onSpace($event)',\r\n },\r\n})\r\nexport class FuiChipComponent {\r\n readonly intl = inject(FuiChipIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n readonly label = input.required<string>();\r\n readonly variant = input<FuiChipVariant, FuiChipVariant | string>('primary', {\r\n transform: (v) => ((FUI_CHIP_VARIANTS as readonly string[]).includes(v) ? (v as FuiChipVariant) : 'primary'),\r\n });\r\n readonly size = input<FuiChipSize>('md');\r\n readonly icon = input<string | null>(null);\r\n readonly removable = input(false);\r\n readonly selectable = input(false);\r\n readonly selected = input(false);\r\n readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n readonly removed = output<FuiChipRemoveEvent>();\r\n readonly selectedChange = output<boolean>();\r\n\r\n readonly _selected = signal(false);\r\n\r\n readonly computedClasses = computed(() => {\r\n return `fui-chip fui-chip--${this.variant()} fui-chip--${this.size()}`;\r\n });\r\n\r\n constructor() {\r\n effect(() => {\r\n this._selected.set(this.selected());\r\n });\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {\r\n this._cdr.markForCheck();\r\n });\r\n }\r\n\r\n onClick(): void {\r\n if (this.disabled()) return;\r\n if (this.selectable()) {\r\n this._selected.update((v) => !v);\r\n this.selectedChange.emit(this._selected());\r\n }\r\n }\r\n\r\n onSpace(event: Event): void {\r\n event.preventDefault();\r\n this.onClick();\r\n }\r\n\r\n onRemove(event: Event): void {\r\n event.stopPropagation();\r\n if (!this.disabled()) {\r\n this.removed.emit({ chip: this });\r\n }\r\n }\r\n}\r\n","<span class=\"fui-chip__content\">\r\n @if (icon()) {\r\n <fui-icon class=\"fui-chip__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n }\r\n <span class=\"fui-chip__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n <button\r\n class=\"fui-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n (click)=\"onRemove($event)\"\r\n (keydown.enter)=\"onRemove($event)\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n </button>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-chip.mjs","sources":["../../../lib/components/chip/chip.types.ts","../../../lib/components/chip/chip.intl.ts","../../../lib/components/chip/chip.component.ts","../../../lib/components/chip/chip.component.html","../../../lib/components/chip/raintonic-formaui-components-chip.ts"],"sourcesContent":["import { FuiChipComponent } from './chip.component';\r\n\r\nexport type FuiChipVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';\r\nexport type FuiChipSize = 'sm' | 'md';\r\n\r\nexport const FUI_CHIP_VARIANTS: readonly FuiChipVariant[] = [\r\n 'primary',\r\n 'secondary',\r\n 'success',\r\n 'warning',\r\n 'danger',\r\n 'info',\r\n] as const;\r\nexport const FUI_CHIP_SIZES: readonly FuiChipSize[] = ['sm', 'md'] as const;\r\n\r\nexport interface FuiChipRemoveEvent {\r\n chip: FuiChipComponent;\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiChipIntl extends FuiIntlBase {\r\n removeAriaLabel(label: string): string {\r\n return `Remove ${label}`;\r\n }\r\n}\r\n","import {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n ViewEncapsulation,\r\n computed,\r\n effect,\r\n inject,\r\n input,\r\n output,\r\n signal,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiChipVariant, FuiChipSize, FUI_CHIP_VARIANTS, FuiChipRemoveEvent } from './chip.types';\r\nimport { FuiChipIntl } from './chip.intl';\r\n\r\n@Component({\r\n selector: 'fui-chip',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './chip.component.html',\r\n styleUrls: ['./chip.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-chip',\r\n '[class]': 'computedClasses()',\r\n '[class.fui-chip--selected]': '_selected()',\r\n '[class.fui-chip--disabled]': 'disabled()',\r\n '[attr.role]': 'selectable() ? \"option\" : null',\r\n '[attr.aria-selected]': 'selectable() ? _selected() : null',\r\n '[attr.aria-pressed]': 'selectable() ? _selected() : null',\r\n '[attr.tabindex]': 'selectable() || removable() ? 0 : null',\r\n '(click)': 'onClick()',\r\n '(keydown.enter)': 'onClick()',\r\n '(keydown.space)': 'onSpace($event)',\r\n },\r\n})\r\nexport class FuiChipComponent {\r\n readonly intl = inject(FuiChipIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n readonly label = input.required<string>();\r\n readonly variant = input<FuiChipVariant, FuiChipVariant | string>('primary', {\r\n transform: (v) => ((FUI_CHIP_VARIANTS as readonly string[]).includes(v) ? (v as FuiChipVariant) : 'primary'),\r\n });\r\n readonly size = input<FuiChipSize>('md');\r\n readonly icon = input<string | null>(null);\r\n readonly removable = input(false);\r\n readonly selectable = input(false);\r\n readonly selected = input(false);\r\n readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n readonly removed = output<FuiChipRemoveEvent>();\r\n readonly selectedChange = output<boolean>();\r\n\r\n readonly _selected = signal(false);\r\n\r\n readonly computedClasses = computed(() => {\r\n return `fui-chip fui-chip--${this.variant()} fui-chip--${this.size()}`;\r\n });\r\n\r\n constructor() {\r\n effect(() => {\r\n this._selected.set(this.selected());\r\n });\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {\r\n this._cdr.markForCheck();\r\n });\r\n }\r\n\r\n onClick(): void {\r\n if (this.disabled()) return;\r\n if (this.selectable()) {\r\n this._selected.update((v) => !v);\r\n this.selectedChange.emit(this._selected());\r\n }\r\n }\r\n\r\n onSpace(event: Event): void {\r\n event.preventDefault();\r\n this.onClick();\r\n }\r\n\r\n onRemove(event: Event): void {\r\n event.stopPropagation();\r\n if (!this.disabled()) {\r\n this.removed.emit({ chip: this });\r\n }\r\n }\r\n}\r\n","<span class=\"fui-chip__content\">\r\n @if (icon()) {\r\n <fui-icon class=\"fui-chip__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n }\r\n <span class=\"fui-chip__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n <button\r\n class=\"fui-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n (click)=\"onRemove($event)\"\r\n (keydown.enter)=\"onRemove($event)\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n </button>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
+
import * as i1 from '@angular/common';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
1
3
|
import * as i0 from '@angular/core';
|
|
2
4
|
import { Injectable, inject, ChangeDetectorRef, signal, input, computed, output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
5
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
4
|
-
import * as i1 from '@angular/common';
|
|
5
|
-
import { CommonModule } from '@angular/common';
|
|
6
|
-
import { FuiIntlBase } from '@raintonic/formaui/core';
|
|
7
6
|
import * as i2 from '@angular/forms';
|
|
8
7
|
import { FormsModule } from '@angular/forms';
|
|
8
|
+
import { FuiBadgeComponent } from '@raintonic/formaui/components/badge';
|
|
9
9
|
import { FuiButtonDirective } from '@raintonic/formaui/components/button';
|
|
10
10
|
import { FuiCheckboxComponent } from '@raintonic/formaui/components/checkbox';
|
|
11
|
-
import { FuiInputDirective } from '@raintonic/formaui/components/input';
|
|
12
|
-
import { FuiFormFieldComponent } from '@raintonic/formaui/components/form-field';
|
|
13
11
|
import { FuiDropdownMenuComponent, FuiDropdownMenuTriggerDirective } from '@raintonic/formaui/components/dropdown-menu';
|
|
12
|
+
import { FuiFormFieldComponent } from '@raintonic/formaui/components/form-field';
|
|
13
|
+
import { FuiIconComponent } from '@raintonic/formaui/components/icon';
|
|
14
|
+
import { FuiInputDirective } from '@raintonic/formaui/components/input';
|
|
14
15
|
import { FuiSelectComponent, FuiOptionComponent } from '@raintonic/formaui/components/select';
|
|
15
16
|
import { FuiTooltipDirective } from '@raintonic/formaui/components/tooltip';
|
|
16
|
-
import {
|
|
17
|
-
import { FuiBadgeComponent } from '@raintonic/formaui/components/badge';
|
|
17
|
+
import { FuiIntlBase } from '@raintonic/formaui/core';
|
|
18
18
|
|
|
19
19
|
class FuiDataTableIntl extends FuiIntlBase {
|
|
20
20
|
tableAriaLabel = 'Data table';
|
|
@@ -82,6 +82,8 @@ var FilterOperator;
|
|
|
82
82
|
* @output sortChange - Emits when the user changes sort direction on a column.
|
|
83
83
|
* @output filtersChange - Emits when filters are applied or cleared.
|
|
84
84
|
* @output rowDblClick - Emits the row data object on double-click.
|
|
85
|
+
* @output rowClick - Emits the row data object on single-click (debounced so a
|
|
86
|
+
* double-click does not also emit a single click).
|
|
85
87
|
*
|
|
86
88
|
* @example
|
|
87
89
|
* <fui-advanced-data-table
|
|
@@ -90,6 +92,7 @@ var FilterOperator;
|
|
|
90
92
|
* [sort]="currentSort"
|
|
91
93
|
* (sortChange)="onSort($event)"
|
|
92
94
|
* (filtersChange)="onFilter($event)"
|
|
95
|
+
* (rowClick)="onRowSelect($event)"
|
|
93
96
|
* (rowDblClick)="onRowOpen($event)">
|
|
94
97
|
* </fui-advanced-data-table>
|
|
95
98
|
*/
|
|
@@ -121,6 +124,20 @@ class FuiAdvancedDataTableComponent {
|
|
|
121
124
|
* Enable click-to-highlight feature for rows
|
|
122
125
|
*/
|
|
123
126
|
enableRowHighlight = input(false, ...(ngDevMode ? [{ debugName: "enableRowHighlight" }] : /* istanbul ignore next */ []));
|
|
127
|
+
/**
|
|
128
|
+
* Enable double-click handling (`rowDblClick`). When true, single clicks are
|
|
129
|
+
* debounced by ROW_CLICK_DELAY so a double-click resolves to `rowDblClick`
|
|
130
|
+
* only. When false (default) single clicks fire instantly — no lag — because
|
|
131
|
+
* there is no double-click to disambiguate from.
|
|
132
|
+
*/
|
|
133
|
+
enableDblClick = input(false, ...(ngDevMode ? [{ debugName: "enableDblClick" }] : /* istanbul ignore next */ []));
|
|
134
|
+
/**
|
|
135
|
+
* Marks rows as clickable for single-click actions (e.g. open detail). Purely
|
|
136
|
+
* a visual affordance: shows a pointer cursor. `rowClick` is emitted
|
|
137
|
+
* regardless; this only controls the cursor. Highlight-enabled rows already
|
|
138
|
+
* show the pointer.
|
|
139
|
+
*/
|
|
140
|
+
rowClickable = input(false, ...(ngDevMode ? [{ debugName: "rowClickable" }] : /* istanbul ignore next */ []));
|
|
124
141
|
/**
|
|
125
142
|
* Wraps the table in a bordered, rounded container — alternative to the
|
|
126
143
|
* default full-width index look. Default false.
|
|
@@ -159,6 +176,10 @@ class FuiAdvancedDataTableComponent {
|
|
|
159
176
|
}
|
|
160
177
|
ngOnDestroy() {
|
|
161
178
|
this._stickyObserver?.disconnect();
|
|
179
|
+
if (this.rowClickTimer !== null) {
|
|
180
|
+
clearTimeout(this.rowClickTimer);
|
|
181
|
+
this.rowClickTimer = null;
|
|
182
|
+
}
|
|
162
183
|
}
|
|
163
184
|
/**
|
|
164
185
|
* Message shown when the data array is empty. Pass empty string to hide.
|
|
@@ -200,6 +221,15 @@ class FuiAdvancedDataTableComponent {
|
|
|
200
221
|
* Row dblClick event
|
|
201
222
|
*/
|
|
202
223
|
rowDblClick = output();
|
|
224
|
+
/**
|
|
225
|
+
* Row single-click event. Debounced by ROW_CLICK_DELAY so a double-click does
|
|
226
|
+
* NOT also emit a single click (the pending emit is cancelled by rowDblClick).
|
|
227
|
+
*/
|
|
228
|
+
rowClick = output();
|
|
229
|
+
/** Delay (ms) used to disambiguate a single click from a double click. */
|
|
230
|
+
static ROW_CLICK_DELAY = 250;
|
|
231
|
+
/** Pending single-click emit; cancelled when a double-click follows. */
|
|
232
|
+
rowClickTimer = null;
|
|
203
233
|
/**
|
|
204
234
|
* Internal state for selected row indices
|
|
205
235
|
*/
|
|
@@ -414,6 +444,45 @@ class FuiAdvancedDataTableComponent {
|
|
|
414
444
|
isRowSelected(index) {
|
|
415
445
|
return this.selectedRows().has(index);
|
|
416
446
|
}
|
|
447
|
+
/**
|
|
448
|
+
* Handle a row single click.
|
|
449
|
+
*
|
|
450
|
+
* When `enableDblClick` is false (default) the highlight toggle and `rowClick`
|
|
451
|
+
* emit fire immediately — instant response, no lag.
|
|
452
|
+
*
|
|
453
|
+
* When `enableDblClick` is true, both are debounced by ROW_CLICK_DELAY so a
|
|
454
|
+
* double-click resolves cleanly to `rowDblClick` only — `onRowDblClick`
|
|
455
|
+
* cancels the pending timer. Toggling on the raw click would otherwise fire
|
|
456
|
+
* twice per double-click (two native `click` events precede `dblclick`),
|
|
457
|
+
* flipping the highlight back to its original state.
|
|
458
|
+
*/
|
|
459
|
+
onRowClick(index, row) {
|
|
460
|
+
// No double-click consumer → respond instantly, skip the disambiguation delay.
|
|
461
|
+
if (!this.enableDblClick()) {
|
|
462
|
+
this.toggleRowHighlight(index);
|
|
463
|
+
this.rowClick.emit(row);
|
|
464
|
+
return;
|
|
465
|
+
}
|
|
466
|
+
if (this.rowClickTimer !== null) {
|
|
467
|
+
clearTimeout(this.rowClickTimer);
|
|
468
|
+
}
|
|
469
|
+
this.rowClickTimer = setTimeout(() => {
|
|
470
|
+
this.rowClickTimer = null;
|
|
471
|
+
this.toggleRowHighlight(index);
|
|
472
|
+
this.rowClick.emit(row);
|
|
473
|
+
}, FuiAdvancedDataTableComponent.ROW_CLICK_DELAY);
|
|
474
|
+
}
|
|
475
|
+
/**
|
|
476
|
+
* Handle a row double click. Cancels any pending single-click emit before
|
|
477
|
+
* emitting `rowDblClick`.
|
|
478
|
+
*/
|
|
479
|
+
onRowDblClick(row) {
|
|
480
|
+
if (this.rowClickTimer !== null) {
|
|
481
|
+
clearTimeout(this.rowClickTimer);
|
|
482
|
+
this.rowClickTimer = null;
|
|
483
|
+
}
|
|
484
|
+
this.rowDblClick.emit(row);
|
|
485
|
+
}
|
|
417
486
|
/**
|
|
418
487
|
* Toggle row highlight (only if enableRowHighlight is true)
|
|
419
488
|
*/
|
|
@@ -690,7 +759,7 @@ class FuiAdvancedDataTableComponent {
|
|
|
690
759
|
return operatorConfig?.requiresInput ?? false;
|
|
691
760
|
}
|
|
692
761
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAdvancedDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
693
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiAdvancedDataTableComponent, isStandalone: true, selector: "fui-advanced-data-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, enableRowHighlight: { classPropertyName: "enableRowHighlight", publicName: "enableRowHighlight", isSignal: true, isRequired: false, transformFunction: null }, boxed: { classPropertyName: "boxed", publicName: "boxed", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, tableAriaLabel: { classPropertyName: "tableAriaLabel", publicName: "tableAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", filtersChange: "filtersChange", rowDblClick: "rowDblClick" }, host: { properties: { "class.fui-advanced-data-table--boxed": "boxed()", "class.fui-advanced-data-table--density-compact": "density() === 'compact'" }, classAttribute: "fui-advanced-data-table" }, viewQueries: [{ propertyName: "_liveAnnouncer", first: true, predicate: ["liveAnnouncer"], descendants: true }, { propertyName: "_scrollSentinel", first: true, predicate: ["scrollSentinel"], descendants: true }], ngImport: i0, template: "<div class=\"fui-advanced-data-table__wrapper\">\r\n <!-- Live region for sort/filter announcements -->\r\n <div class=\"fui-sr-only\" aria-live=\"polite\" aria-atomic=\"true\" #liveAnnouncer></div>\r\n <!-- Scroll sentinel: tracked by IntersectionObserver to know when the header is stuck. -->\r\n <div class=\"fui-advanced-data-table__scroll-sentinel\" aria-hidden=\"true\" #scrollSentinel></div>\r\n <table\r\n class=\"fui-advanced-data-table__table\"\r\n role=\"grid\"\r\n [attr.aria-label]=\"resolvedTableAriaLabel()\"\r\n [attr.aria-rowcount]=\"data().length\"\r\n >\r\n <!-- Table Header -->\r\n <thead\r\n class=\"fui-advanced-data-table__header\"\r\n [class.fui-advanced-data-table__header--sticky]=\"config().headerSticky\"\r\n [class.fui-advanced-data-table__header--elevated]=\"_headerStuck()\"\r\n >\r\n <tr class=\"fui-advanced-data-table__header-row\">\r\n <!-- Selection Checkbox Column -->\r\n @if (config().areRowsSelectable) {\r\n <th\r\n scope=\"col\"\r\n class=\"fui-advanced-data-table__header-cell fui-advanced-data-table__header-cell--checkbox\"\r\n [class.fui-advanced-data-table__header-cell--sticky-start]=\"\r\n processedHeaders()[0] && processedHeaders()[0].isStartSticky\r\n \"\r\n >\r\n <fui-checkbox\r\n class=\"fui-advanced-data-table__checkbox\"\r\n [checked]=\"allRowsSelected()\"\r\n [indeterminate]=\"someRowsSelected()\"\r\n [aria-label]=\"intl.selectAllAriaLabel\"\r\n (change)=\"toggleAllRows()\"\r\n />\r\n </th>\r\n }\r\n\r\n <!-- Data Columns -->\r\n @for (header of processedHeaders(); track header.field) {\r\n <th\r\n scope=\"col\"\r\n [class]=\"getHeaderClasses(header)\"\r\n [ngStyle]=\"getHeaderStyles(header)\"\r\n [attr.aria-sort]=\"getAriaSortValue(header.field)\"\r\n >\r\n <div class=\"fui-advanced-data-table__header-content\">\r\n <span class=\"fui-advanced-data-table__header-label\">{{ header.label }}</span>\r\n\r\n @if (header.hasSort) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-advanced-data-table__sort-button\"\r\n [class.fui-advanced-data-table__sort-button--active]=\"sort()?.field === header.field\"\r\n [attr.aria-label]=\"intl.sortAriaLabel(header.label)\"\r\n [fuiTooltip]=\"intl.sortTooltip\"\r\n fuiTooltipSize=\"sm\"\r\n fuiTooltipPosition=\"bottom\"\r\n #sortTooltip=\"fuiTooltip\"\r\n (click)=\"sortTooltip.hide(); onSortClick(header.field)\"\r\n >\r\n <svg\r\n [class]=\"getSortIconClasses(header.field)\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"currentColor\"\r\n >\r\n <path d=\"M8 3L12 7H4L8 3Z\" />\r\n <path d=\"M8 13L4 9H12L8 13Z\" />\r\n </svg>\r\n </button>\r\n }\r\n\r\n @if (header.hasFilter) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-advanced-data-table__filter-button\"\r\n fuiDropdownMenuTrigger\r\n [fuiDropdownMenuTriggerFor]=\"filterMenu\"\r\n [menuTriggerData]=\"{ field: header.field, type: header.type }\"\r\n [attr.aria-label]=\"intl.filterAriaLabel(header.label)\"\r\n [fuiTooltip]=\"intl.filterTooltip\"\r\n fuiTooltipSize=\"sm\"\r\n fuiTooltipPosition=\"bottom\"\r\n #filterTooltip=\"fuiTooltip\"\r\n (click)=\"filterTooltip.hide()\"\r\n >\r\n <svg\r\n [class]=\"getFilterIconClasses(header.field)\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"currentColor\"\r\n >\r\n <path d=\"M2 2L6 8V13L10 15V8L14 2H2Z\" />\r\n </svg>\r\n </button>\r\n\r\n <fui-dropdown-menu\r\n #filterMenu\r\n position=\"bottom-end\"\r\n size=\"md\"\r\n (openChange)=\"$event && initFilterForm(header.field, header.type)\"\r\n [closeOnClickOutside]=\"true\"\r\n >\r\n <div class=\"fui-advanced-data-table__filter-menu-content\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"fui-text-xs\">{{ header.label }}</div>\r\n @if (header.type !== 'label') {\r\n <!-- Operator Selection -->\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <fui-select\r\n [ngModel]=\"tempFilterOperator()\"\r\n (ngModelChange)=\"tempFilterOperator.set($event)\"\r\n [placeholder]=\"intl.selectOperatorPlaceholder\"\r\n >\r\n @for (operator of getFilterOperators(header.type); track operator.value) {\r\n <fui-option [value]=\"operator.value\">\r\n {{ operator.label }}\r\n </fui-option>\r\n }\r\n </fui-select>\r\n </fui-form-field>\r\n\r\n <!-- Value Input(s) -->\r\n @if (requiresInput(header.type)) {\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <input\r\n fuiInput\r\n [type]=\"header.type === 'number' ? 'number' : header.type === 'date' ? 'date' : 'text'\"\r\n [ngModel]=\"tempFilterValue()\"\r\n (ngModelChange)=\"tempFilterValue.set($event)\"\r\n [placeholder]=\"intl.enterValuePlaceholder\"\r\n />\r\n </fui-form-field>\r\n\r\n @if (requiresSecondInput(header.type)) {\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <input\r\n fuiInput\r\n [type]=\"header.type === 'number' ? 'number' : header.type === 'date' ? 'date' : 'text'\"\r\n [ngModel]=\"tempFilterValue2()\"\r\n (ngModelChange)=\"tempFilterValue2.set($event)\"\r\n [placeholder]=\"intl.enterFinalValuePlaceholder\"\r\n />\r\n </fui-form-field>\r\n }\r\n }\r\n } @else {\r\n <!-- Label filter: select dropdown -->\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <fui-select\r\n [ngModel]=\"tempFilterValue()\"\r\n (ngModelChange)=\"tempFilterValue.set($event)\"\r\n [placeholder]=\"intl.selectValuePlaceholder\"\r\n >\r\n @for (labelOpt of header.labels ?? []; track labelOpt.value) {\r\n <fui-option [value]=\"labelOpt.value\">\r\n {{ labelOpt.label }}\r\n </fui-option>\r\n }\r\n </fui-select>\r\n </fui-form-field>\r\n }\r\n\r\n <!-- Actions -->\r\n <div class=\"fui-advanced-data-table__filter-actions\">\r\n <button\r\n fuiButton\r\n variant=\"primary\"\r\n size=\"sm\"\r\n (click)=\"applyFilter(header.field, header.type, filterMenu)\"\r\n >\r\n {{ intl.applyButtonLabel }}\r\n </button>\r\n <button fuiButton variant=\"secondary\" size=\"sm\" (click)=\"clearFilter(header.field, filterMenu)\">\r\n {{ intl.clearButtonLabel }}\r\n </button>\r\n </div>\r\n </div>\r\n </fui-dropdown-menu>\r\n }\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- Table Body -->\r\n <tbody class=\"fui-advanced-data-table__body\">\r\n @if (data().length === 0 && resolvedEmptyMessage()) {\r\n <tr class=\"fui-advanced-data-table__row fui-advanced-data-table__row--empty\">\r\n <td\r\n class=\"fui-advanced-data-table__cell fui-advanced-data-table__cell--empty\"\r\n [attr.colspan]=\"processedHeaders().length + (config().areRowsSelectable ? 1 : 0)\"\r\n >\r\n <div class=\"fui-advanced-data-table__empty-state\">\r\n <fui-icon\r\n name=\"magnifying-glass\"\r\n class=\"fui-advanced-data-table__empty-state-icon\"\r\n aria-hidden=\"true\"\r\n ></fui-icon>\r\n {{ resolvedEmptyMessage() }}\r\n </div>\r\n </td>\r\n </tr>\r\n } @else {\r\n @for (row of data(); track trackBy()($index, row)) {\r\n <tr\r\n (dblclick)=\"rowDblClick.emit(row)\"\r\n class=\"fui-advanced-data-table__row\"\r\n [class.fui-advanced-data-table__row--selected]=\"isRowSelected($index)\"\r\n [class.fui-advanced-data-table__row--highlighted]=\"isRowHighlighted($index)\"\r\n [class.fui-advanced-data-table__row--clickable]=\"enableRowHighlight()\"\r\n [attr.aria-selected]=\"config().areRowsSelectable ? isRowSelected($index) : null\"\r\n [attr.aria-rowindex]=\"$index + 2\"\r\n (click)=\"toggleRowHighlight($index)\"\r\n >\r\n <!-- Selection Checkbox -->\r\n @if (config().areRowsSelectable) {\r\n <td\r\n class=\"fui-advanced-data-table__cell fui-advanced-data-table__cell--checkbox\"\r\n [class.fui-advanced-data-table__cell--sticky-start]=\"\r\n processedHeaders()[0] && processedHeaders()[0].isStartSticky\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <fui-checkbox\r\n class=\"fui-advanced-data-table__checkbox\"\r\n [checked]=\"isRowSelected($index)\"\r\n [aria-label]=\"intl.selectRowAriaLabel($index + 1)\"\r\n (change)=\"toggleRow($index)\"\r\n />\r\n </td>\r\n }\r\n\r\n <!-- Data Cells -->\r\n @for (header of processedHeaders(); track header.field) {\r\n <td [class]=\"getCellClasses(header)\" [ngStyle]=\"getCellStyles(header)\">\r\n @if (header.type === 'boolean') {\r\n @if (getCellValue(row, header.field)) {\r\n <fui-icon name=\"check-circle\" class=\"fui-advanced-data-table__bool-icon--true\"></fui-icon>\r\n } @else {\r\n <fui-icon name=\"x-circle\" class=\"fui-advanced-data-table__bool-icon--false\"></fui-icon>\r\n }\r\n } @else if (header.type === 'label') {\r\n @let labelConfig = getLabelConfig(getCellValue(row, header.field), header.labels ?? []);\r\n @if (labelConfig) {\r\n <fui-badge\r\n [label]=\"labelConfig.label\"\r\n [customColor]=\"labelConfig.color\"\r\n [icon]=\"labelConfig.icon ?? null\"\r\n size=\"sm\"\r\n />\r\n } @else {\r\n <fui-badge [label]=\"'' + getCellValue(row, header.field)\" variant=\"info\" size=\"sm\" />\r\n }\r\n } @else if (header.type === 'actions') {\r\n <div class=\"fui-advanced-data-table__actions\" (click)=\"$event.stopPropagation()\">\r\n @for (action of rowActions(); track action.label) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-advanced-data-table__action-button\"\r\n [disabled]=\"action.disabled ? action.disabled(row) : false\"\r\n [attr.aria-label]=\"action.ariaLabel ?? action.label\"\r\n [fuiTooltip]=\"action.label\"\r\n fuiTooltipSize=\"sm\"\r\n fuiTooltipPosition=\"top\"\r\n (click)=\"action.onClick(row, $event)\"\r\n >\r\n <fui-icon [name]=\"action.icon\" size=\"sm\" />\r\n </button>\r\n }\r\n </div>\r\n } @else {\r\n {{ formatCellValue(getCellValue(row, header.field), header.type) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-advanced-data-table{--fui-table-font-size: var(--fui-text-base, .875rem);--fui-table-header-bg: var(--fui-bg-default);--fui-table-row-bg: var(--fui-bg-default);--fui-table-row-hover-bg: var(--fui-bg-subtle);--fui-table-row-height: 3rem;--fui-table-cell-padding-y: .5rem;--fui-table-cell-padding-x: 1rem;--fui-table-border-color: var(--fui-border-default);display:block;width:100%;position:relative}.fui-advanced-data-table__wrapper{width:100%;overflow-x:auto;overflow-y:visible;position:relative}.fui-advanced-data-table__wrapper::-webkit-scrollbar{height:8px}.fui-advanced-data-table__wrapper::-webkit-scrollbar-track{background:var(--fui-bg-default);border-radius:var(--fui-radius-sm)}.fui-advanced-data-table__wrapper::-webkit-scrollbar-thumb{background:var(--fui-border-default);border-radius:var(--fui-radius-sm)}.fui-advanced-data-table__wrapper::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-advanced-data-table__table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--fui-font-sans);font-size:var(--fui-table-font-size);color:var(--fui-text-primary);background-color:var(--fui-table-row-bg)}.fui-advanced-data-table__header{background-color:var(--fui-table-header-bg);border-bottom:1px solid var(--fui-table-border-color)}.fui-advanced-data-table__header--sticky{position:sticky;top:0;z-index:10}.fui-advanced-data-table__header--elevated .fui-advanced-data-table__header-cell{box-shadow:0 1.19px 3.57px #1018281a}.fui-advanced-data-table__scroll-sentinel{height:1px;width:100%}.fui-advanced-data-table__header-row{height:var(--fui-table-row-height)}.fui-advanced-data-table__header-row .formaui-advanced-data-table__header-cell:last-child{border-right:none}.fui-advanced-data-table__header-cell{padding:var(--fui-table-cell-padding-y) var(--fui-table-cell-padding-x);text-align:left;font-weight:var(--fui-weight-semibold, 600);color:var(--fui-text-secondary);background-color:var(--fui-table-header-bg);border-right:1px solid var(--fui-border-default);border-bottom:1px solid var(--fui-border-default);white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;transition-property:box-shadow;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__header-cell--checkbox{width:48px;min-width:48px;max-width:48px;padding:.5rem;text-align:center}.fui-advanced-data-table__header-cell--sticky-start{position:sticky;z-index:11;background-color:var(--fui-bg-default)}.fui-advanced-data-table__header-cell--sticky-start-edge:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(to right,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__header-cell--sticky-end{position:sticky;z-index:11;background-color:var(--fui-bg-default)}.fui-advanced-data-table__header-cell--sticky-end-edge:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to left,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__header-content{display:flex;align-items:center;gap:.25rem}.fui-advanced-data-table__header-label{flex:1;overflow:hidden;text-overflow:ellipsis}.fui-advanced-data-table__sort-button,.fui-advanced-data-table__filter-button{display:inline-flex;align-items:center;justify-content:center;padding:.125rem;border:none;background:transparent;color:var(--fui-text-secondary);cursor:pointer;border-radius:var(--fui-radius-sm);transition-property:color,background-color,opacity;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__sort-button:hover,.fui-advanced-data-table__filter-button:hover{color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-advanced-data-table__sort-button:focus-visible,.fui-advanced-data-table__filter-button:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-advanced-data-table__sort-button{opacity:0}.fui-advanced-data-table__header-cell:hover .fui-advanced-data-table__sort-button,.fui-advanced-data-table__header-cell:focus-within .fui-advanced-data-table__sort-button,.fui-advanced-data-table__sort-button--active,.fui-advanced-data-table__sort-button:focus-visible{opacity:1}.fui-advanced-data-table__sort-icon,.fui-advanced-data-table__filter-icon{width:16px;height:16px}.fui-advanced-data-table__sort-icon{opacity:.6;transition-property:opacity;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__sort-icon path{transition-property:opacity;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__sort-icon--asc{opacity:1;color:var(--fui-brand-fg)}.fui-advanced-data-table__sort-icon--asc path:first-child{opacity:1}.fui-advanced-data-table__sort-icon--asc path:last-child{opacity:.3}.fui-advanced-data-table__sort-icon--desc{opacity:1;color:var(--fui-brand-fg)}.fui-advanced-data-table__sort-icon--desc path:first-child{opacity:.3}.fui-advanced-data-table__sort-icon--desc path:last-child{opacity:1}.fui-advanced-data-table__filter-icon{opacity:.6;transition-property:all;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__filter-icon--active{opacity:1;color:var(--fui-brand-fg)}.fui-advanced-data-table__filter-menu-content{display:flex;flex-direction:column;gap:.75rem;padding:.75rem;min-width:280px}.fui-advanced-data-table__filter-select{width:100%}.fui-advanced-data-table__filter-actions{display:flex;gap:.25rem;justify-content:flex-end;margin-top:.25rem}.fui-advanced-data-table__body{background-color:var(--fui-bg-default)}.fui-advanced-data-table__row{height:var(--fui-table-row-height);background-color:var(--fui-table-row-bg);border-bottom:1px solid var(--fui-table-border-color);transition-property:background-color;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__row:hover{background-color:var(--fui-table-row-hover-bg)}.fui-advanced-data-table__row--clickable{cursor:pointer}.fui-advanced-data-table__row--selected{background-color:var(--fui-primary-10)}.fui-advanced-data-table__row--selected:hover,.fui-advanced-data-table__row--highlighted,.fui-advanced-data-table__row--highlighted:hover{background-color:var(--fui-primary-20)}.fui-advanced-data-table__row--empty{height:auto}.fui-advanced-data-table__row--empty:hover{background-color:transparent}.fui-advanced-data-table__row .formaui-advanced-data-table__cell:last-child{border-right:none}.fui-advanced-data-table__cell{padding:var(--fui-table-cell-padding-y) var(--fui-table-cell-padding-x);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px;position:relative;border-bottom:1px solid var(--fui-table-border-color);border-right:1px solid var(--fui-table-border-color)}.fui-advanced-data-table__cell--checkbox{width:48px;min-width:48px;max-width:48px;padding:.5rem;text-align:center}.fui-advanced-data-table__cell--empty{padding:2.5rem 1rem;text-align:center;color:var(--fui-text-secondary);white-space:normal;border-bottom:none}.fui-advanced-data-table__cell--sticky-start{position:sticky;z-index:9;background-color:inherit}.fui-advanced-data-table__cell--sticky-start-edge:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(to right,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__cell--sticky-end{position:sticky;z-index:9;background-color:inherit}.fui-advanced-data-table__cell--sticky-end-edge:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to left,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--fui-primary-bg)}.fui-advanced-data-table__checkbox:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-advanced-data-table__empty-state{padding:2.5rem;text-align:center;color:var(--fui-text-secondary);font-size:var(--fui-text-md, 1rem);display:flex;flex-direction:column;align-items:center;gap:.75rem}.fui-advanced-data-table__empty-state-icon{font-size:var(--fui-text-5xl);color:var(--fui-text-secondary);opacity:.5}.fui-advanced-data-table__bool-icon--true{color:var(--fui-text-success)}.fui-advanced-data-table__bool-icon--false{color:var(--fui-text-error)}.fui-advanced-data-table__actions{display:inline-flex;align-items:center;gap:.125rem}.fui-advanced-data-table__action-button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-advanced-data-table__action-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--fui-text-secondary);border-radius:var(--fui-radius-sm);cursor:pointer;transition-property:color,background-color;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__action-button:hover:not(:disabled){color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-advanced-data-table__action-button:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-advanced-data-table__action-button:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-advanced-data-table--boxed .fui-advanced-data-table__wrapper{border:1px solid var(--fui-border-default);border-radius:var(--fui-radius-md);overflow:hidden}.fui-advanced-data-table--boxed .fui-advanced-data-table__header-cell:last-child,.fui-advanced-data-table--boxed .fui-advanced-data-table__cell:last-child{border-right:none}.fui-advanced-data-table--boxed .fui-advanced-data-table__row:last-child .fui-advanced-data-table__cell{border-bottom:none}.fui-advanced-data-table--density-compact{--fui-table-row-height: 2rem;--fui-table-cell-padding-y: .25rem;--fui-table-cell-padding-x: .5rem}@media(max-width:768px){.fui-advanced-data-table__table{font-size:var(--fui-text-sm, .75rem)}.fui-advanced-data-table__header-cell,.fui-advanced-data-table__cell{padding:.25rem .5rem;max-width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FuiCheckboxComponent, selector: "fui-checkbox", inputs: ["readonly", "checked", "disabled", "indeterminate", "required", "labelPosition", "name", "value", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "errorStateMatcher"], outputs: ["change", "indeterminateChange"] }, { kind: "component", type: FuiFormFieldComponent, selector: "fui-form-field", inputs: ["appearance", "hideRequiredMarker", "hideSubscript"] }, { kind: "directive", type: FuiInputDirective, selector: "input[fuiInput], textarea[fuiInput], select[fuiInput]", inputs: ["type", "placeholder", "readonly", "maxlength", "minlength", "pattern", "errorStateMatcher", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: FuiButtonDirective, selector: "button[fuiButton], a[fuiButton]", inputs: ["variant", "size", "disabled", "fullWidth", "loading", "iconOnly", "aria-label", "type"] }, { kind: "component", type: FuiDropdownMenuComponent, selector: "fui-dropdown-menu", inputs: ["position", "size", "closeOnClickOutside", "disabled", "attachToBody"], outputs: ["openChange", "itemSelected"] }, { kind: "directive", type: FuiDropdownMenuTriggerDirective, selector: "[fuiDropdownMenuTrigger]", inputs: ["fuiDropdownMenuTriggerFor", "menuTriggerData"] }, { kind: "component", type: FuiSelectComponent, selector: "fui-select", inputs: ["placeholder", "disabled", "readonly", "multiple", "compareWith", "errorStateMatcher"], outputs: ["valueChange", "selectionChange", "openedChange"] }, { kind: "component", type: FuiOptionComponent, selector: "fui-option" }, { kind: "directive", type: FuiTooltipDirective, selector: "[fuiTooltip]", inputs: ["fuiTooltip", "fuiTooltipPosition", "fuiTooltipSize", "fuiTooltipTrigger", "fuiTooltipShowDelay", "fuiTooltipHideDelay", "fuiTooltipDisabled", "fuiTooltipMaxWidth", "fuiTooltipOffset", "fuiTooltipArrow", "fuiTooltipShow"], exportAs: ["fuiTooltip"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiBadgeComponent, selector: "fui-badge", inputs: ["label", "icon", "customColor", "size", "variant", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
762
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiAdvancedDataTableComponent, isStandalone: true, selector: "fui-advanced-data-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, enableRowHighlight: { classPropertyName: "enableRowHighlight", publicName: "enableRowHighlight", isSignal: true, isRequired: false, transformFunction: null }, enableDblClick: { classPropertyName: "enableDblClick", publicName: "enableDblClick", isSignal: true, isRequired: false, transformFunction: null }, rowClickable: { classPropertyName: "rowClickable", publicName: "rowClickable", isSignal: true, isRequired: false, transformFunction: null }, boxed: { classPropertyName: "boxed", publicName: "boxed", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, tableAriaLabel: { classPropertyName: "tableAriaLabel", publicName: "tableAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", filtersChange: "filtersChange", rowDblClick: "rowDblClick", rowClick: "rowClick" }, host: { properties: { "class.fui-advanced-data-table--boxed": "boxed()", "class.fui-advanced-data-table--density-compact": "density() === 'compact'" }, classAttribute: "fui-advanced-data-table" }, viewQueries: [{ propertyName: "_liveAnnouncer", first: true, predicate: ["liveAnnouncer"], descendants: true }, { propertyName: "_scrollSentinel", first: true, predicate: ["scrollSentinel"], descendants: true }], ngImport: i0, template: "<div class=\"fui-advanced-data-table__wrapper\">\r\n <!-- Live region for sort/filter announcements -->\r\n <div class=\"fui-sr-only\" aria-live=\"polite\" aria-atomic=\"true\" #liveAnnouncer></div>\r\n <!-- Scroll sentinel: tracked by IntersectionObserver to know when the header is stuck. -->\r\n <div class=\"fui-advanced-data-table__scroll-sentinel\" aria-hidden=\"true\" #scrollSentinel></div>\r\n <table\r\n class=\"fui-advanced-data-table__table\"\r\n role=\"grid\"\r\n [attr.aria-label]=\"resolvedTableAriaLabel()\"\r\n [attr.aria-rowcount]=\"data().length\"\r\n >\r\n <!-- Table Header -->\r\n <thead\r\n class=\"fui-advanced-data-table__header\"\r\n [class.fui-advanced-data-table__header--sticky]=\"config().headerSticky\"\r\n [class.fui-advanced-data-table__header--elevated]=\"_headerStuck()\"\r\n >\r\n <tr class=\"fui-advanced-data-table__header-row\">\r\n <!-- Selection Checkbox Column -->\r\n @if (config().areRowsSelectable) {\r\n <th\r\n scope=\"col\"\r\n class=\"fui-advanced-data-table__header-cell fui-advanced-data-table__header-cell--checkbox\"\r\n [class.fui-advanced-data-table__header-cell--sticky-start]=\"\r\n processedHeaders()[0] && processedHeaders()[0].isStartSticky\r\n \"\r\n >\r\n <fui-checkbox\r\n class=\"fui-advanced-data-table__checkbox\"\r\n [checked]=\"allRowsSelected()\"\r\n [indeterminate]=\"someRowsSelected()\"\r\n [aria-label]=\"intl.selectAllAriaLabel\"\r\n (change)=\"toggleAllRows()\"\r\n />\r\n </th>\r\n }\r\n\r\n <!-- Data Columns -->\r\n @for (header of processedHeaders(); track header.field) {\r\n <th\r\n scope=\"col\"\r\n [class]=\"getHeaderClasses(header)\"\r\n [ngStyle]=\"getHeaderStyles(header)\"\r\n [attr.aria-sort]=\"getAriaSortValue(header.field)\"\r\n >\r\n <div class=\"fui-advanced-data-table__header-content\">\r\n <span class=\"fui-advanced-data-table__header-label\">{{ header.label }}</span>\r\n\r\n @if (header.hasSort) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-advanced-data-table__sort-button\"\r\n [class.fui-advanced-data-table__sort-button--active]=\"sort()?.field === header.field\"\r\n [attr.aria-label]=\"intl.sortAriaLabel(header.label)\"\r\n [fuiTooltip]=\"intl.sortTooltip\"\r\n fuiTooltipSize=\"sm\"\r\n fuiTooltipPosition=\"bottom\"\r\n #sortTooltip=\"fuiTooltip\"\r\n (click)=\"sortTooltip.hide(); onSortClick(header.field)\"\r\n >\r\n <svg\r\n [class]=\"getSortIconClasses(header.field)\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"currentColor\"\r\n >\r\n <path d=\"M8 3L12 7H4L8 3Z\" />\r\n <path d=\"M8 13L4 9H12L8 13Z\" />\r\n </svg>\r\n </button>\r\n }\r\n\r\n @if (header.hasFilter) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-advanced-data-table__filter-button\"\r\n fuiDropdownMenuTrigger\r\n [fuiDropdownMenuTriggerFor]=\"filterMenu\"\r\n [menuTriggerData]=\"{ field: header.field, type: header.type }\"\r\n [attr.aria-label]=\"intl.filterAriaLabel(header.label)\"\r\n [fuiTooltip]=\"intl.filterTooltip\"\r\n fuiTooltipSize=\"sm\"\r\n fuiTooltipPosition=\"bottom\"\r\n #filterTooltip=\"fuiTooltip\"\r\n (click)=\"filterTooltip.hide()\"\r\n >\r\n <svg\r\n [class]=\"getFilterIconClasses(header.field)\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"currentColor\"\r\n >\r\n <path d=\"M2 2L6 8V13L10 15V8L14 2H2Z\" />\r\n </svg>\r\n </button>\r\n\r\n <fui-dropdown-menu\r\n #filterMenu\r\n position=\"bottom-end\"\r\n size=\"md\"\r\n (openChange)=\"$event && initFilterForm(header.field, header.type)\"\r\n [closeOnClickOutside]=\"true\"\r\n >\r\n <div class=\"fui-advanced-data-table__filter-menu-content\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"fui-text-xs\">{{ header.label }}</div>\r\n @if (header.type !== 'label') {\r\n <!-- Operator Selection -->\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <fui-select\r\n [ngModel]=\"tempFilterOperator()\"\r\n (ngModelChange)=\"tempFilterOperator.set($event)\"\r\n [placeholder]=\"intl.selectOperatorPlaceholder\"\r\n >\r\n @for (operator of getFilterOperators(header.type); track operator.value) {\r\n <fui-option [value]=\"operator.value\">\r\n {{ operator.label }}\r\n </fui-option>\r\n }\r\n </fui-select>\r\n </fui-form-field>\r\n\r\n <!-- Value Input(s) -->\r\n @if (requiresInput(header.type)) {\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <input\r\n fuiInput\r\n [type]=\"header.type === 'number' ? 'number' : header.type === 'date' ? 'date' : 'text'\"\r\n [ngModel]=\"tempFilterValue()\"\r\n (ngModelChange)=\"tempFilterValue.set($event)\"\r\n [placeholder]=\"intl.enterValuePlaceholder\"\r\n />\r\n </fui-form-field>\r\n\r\n @if (requiresSecondInput(header.type)) {\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <input\r\n fuiInput\r\n [type]=\"header.type === 'number' ? 'number' : header.type === 'date' ? 'date' : 'text'\"\r\n [ngModel]=\"tempFilterValue2()\"\r\n (ngModelChange)=\"tempFilterValue2.set($event)\"\r\n [placeholder]=\"intl.enterFinalValuePlaceholder\"\r\n />\r\n </fui-form-field>\r\n }\r\n }\r\n } @else {\r\n <!-- Label filter: select dropdown -->\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <fui-select\r\n [ngModel]=\"tempFilterValue()\"\r\n (ngModelChange)=\"tempFilterValue.set($event)\"\r\n [placeholder]=\"intl.selectValuePlaceholder\"\r\n >\r\n @for (labelOpt of header.labels ?? []; track labelOpt.value) {\r\n <fui-option [value]=\"labelOpt.value\">\r\n {{ labelOpt.label }}\r\n </fui-option>\r\n }\r\n </fui-select>\r\n </fui-form-field>\r\n }\r\n\r\n <!-- Actions -->\r\n <div class=\"fui-advanced-data-table__filter-actions\">\r\n <button\r\n fuiButton\r\n variant=\"primary\"\r\n size=\"sm\"\r\n (click)=\"applyFilter(header.field, header.type, filterMenu)\"\r\n >\r\n {{ intl.applyButtonLabel }}\r\n </button>\r\n <button fuiButton variant=\"secondary\" size=\"sm\" (click)=\"clearFilter(header.field, filterMenu)\">\r\n {{ intl.clearButtonLabel }}\r\n </button>\r\n </div>\r\n </div>\r\n </fui-dropdown-menu>\r\n }\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- Table Body -->\r\n <tbody class=\"fui-advanced-data-table__body\">\r\n @if (data().length === 0 && resolvedEmptyMessage()) {\r\n <tr class=\"fui-advanced-data-table__row fui-advanced-data-table__row--empty\">\r\n <td\r\n class=\"fui-advanced-data-table__cell fui-advanced-data-table__cell--empty\"\r\n [attr.colspan]=\"processedHeaders().length + (config().areRowsSelectable ? 1 : 0)\"\r\n >\r\n <div class=\"fui-advanced-data-table__empty-state\">\r\n <fui-icon\r\n name=\"magnifying-glass\"\r\n class=\"fui-advanced-data-table__empty-state-icon\"\r\n aria-hidden=\"true\"\r\n ></fui-icon>\r\n {{ resolvedEmptyMessage() }}\r\n </div>\r\n </td>\r\n </tr>\r\n } @else {\r\n @for (row of data(); track trackBy()($index, row)) {\r\n <tr\r\n (dblclick)=\"onRowDblClick(row)\"\r\n class=\"fui-advanced-data-table__row\"\r\n [class.fui-advanced-data-table__row--selected]=\"isRowSelected($index)\"\r\n [class.fui-advanced-data-table__row--highlighted]=\"isRowHighlighted($index)\"\r\n [class.fui-advanced-data-table__row--clickable]=\"enableRowHighlight() || rowClickable()\"\r\n [attr.aria-selected]=\"config().areRowsSelectable ? isRowSelected($index) : null\"\r\n [attr.aria-rowindex]=\"$index + 2\"\r\n (click)=\"onRowClick($index, row)\"\r\n >\r\n <!-- Selection Checkbox -->\r\n @if (config().areRowsSelectable) {\r\n <td\r\n class=\"fui-advanced-data-table__cell fui-advanced-data-table__cell--checkbox\"\r\n [class.fui-advanced-data-table__cell--sticky-start]=\"\r\n processedHeaders()[0] && processedHeaders()[0].isStartSticky\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <fui-checkbox\r\n class=\"fui-advanced-data-table__checkbox\"\r\n [checked]=\"isRowSelected($index)\"\r\n [aria-label]=\"intl.selectRowAriaLabel($index + 1)\"\r\n (change)=\"toggleRow($index)\"\r\n />\r\n </td>\r\n }\r\n\r\n <!-- Data Cells -->\r\n @for (header of processedHeaders(); track header.field) {\r\n <td [class]=\"getCellClasses(header)\" [ngStyle]=\"getCellStyles(header)\">\r\n @if (header.type === 'boolean') {\r\n @if (getCellValue(row, header.field)) {\r\n <fui-icon name=\"check-circle\" class=\"fui-advanced-data-table__bool-icon--true\"></fui-icon>\r\n } @else {\r\n <fui-icon name=\"x-circle\" class=\"fui-advanced-data-table__bool-icon--false\"></fui-icon>\r\n }\r\n } @else if (header.type === 'label') {\r\n @let labelConfig = getLabelConfig(getCellValue(row, header.field), header.labels ?? []);\r\n @if (labelConfig) {\r\n <fui-badge\r\n [label]=\"labelConfig.label\"\r\n [variant]=\"labelConfig.variant ?? 'info'\"\r\n [customColor]=\"labelConfig.color ?? null\"\r\n [icon]=\"labelConfig.icon ?? null\"\r\n [size]=\"labelConfig.size ?? 'sm'\"\r\n />\r\n } @else {\r\n <fui-badge [label]=\"'' + getCellValue(row, header.field)\" variant=\"info\" size=\"sm\" />\r\n }\r\n } @else if (header.type === 'actions') {\r\n <div class=\"fui-advanced-data-table__actions\" (click)=\"$event.stopPropagation()\">\r\n @for (action of rowActions(); track action.label) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-advanced-data-table__action-button\"\r\n [disabled]=\"action.disabled ? action.disabled(row) : false\"\r\n [attr.aria-label]=\"action.ariaLabel ?? action.label\"\r\n [fuiTooltip]=\"action.label\"\r\n fuiTooltipSize=\"sm\"\r\n fuiTooltipPosition=\"top\"\r\n (click)=\"action.onClick(row, $event)\"\r\n >\r\n <fui-icon [name]=\"action.icon\" size=\"sm\" />\r\n </button>\r\n }\r\n </div>\r\n } @else {\r\n {{ formatCellValue(getCellValue(row, header.field), header.type) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-advanced-data-table{--fui-table-font-size: var(--fui-text-base, .875rem);--fui-table-header-bg: var(--fui-bg-default);--fui-table-row-bg: var(--fui-bg-default);--fui-table-row-hover-bg: var(--fui-bg-subtle);--fui-table-row-height: 3rem;--fui-table-cell-padding-y: .5rem;--fui-table-cell-padding-x: 1rem;--fui-table-border-color: var(--fui-border-default);display:block;width:100%;position:relative}.fui-advanced-data-table__wrapper{width:100%;overflow-x:auto;overflow-y:visible;position:relative}.fui-advanced-data-table__wrapper::-webkit-scrollbar{height:8px}.fui-advanced-data-table__wrapper::-webkit-scrollbar-track{background:var(--fui-bg-default);border-radius:var(--fui-radius-sm)}.fui-advanced-data-table__wrapper::-webkit-scrollbar-thumb{background:var(--fui-border-default);border-radius:var(--fui-radius-sm)}.fui-advanced-data-table__wrapper::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-advanced-data-table__table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-family:var(--fui-font-sans);font-size:var(--fui-table-font-size);color:var(--fui-text-primary);background-color:var(--fui-table-row-bg)}.fui-advanced-data-table__header{background-color:var(--fui-table-header-bg);border-bottom:var(--fui-border-width-sm) solid var(--fui-table-border-color)}.fui-advanced-data-table__header--sticky{position:sticky;top:0;z-index:10}.fui-advanced-data-table__header--elevated .fui-advanced-data-table__header-cell{box-shadow:0 1.19px 3.57px #1018281a}.fui-advanced-data-table__scroll-sentinel{height:1px;width:100%}.fui-advanced-data-table__header-row{height:var(--fui-table-row-height)}.fui-advanced-data-table__header-row .formaui-advanced-data-table__header-cell:last-child{border-right:none}.fui-advanced-data-table__header-cell{padding:var(--fui-table-cell-padding-y) var(--fui-table-cell-padding-x);text-align:left;font-weight:var(--fui-weight-semibold, 600);color:var(--fui-text-secondary);background-color:var(--fui-table-header-bg);border-right:var(--fui-border-width-sm) solid var(--fui-border-default);border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default);white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;transition-property:box-shadow;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__header-cell--checkbox{width:48px;min-width:48px;max-width:48px;padding:.5rem;text-align:center}.fui-advanced-data-table__header-cell--sticky-start{position:sticky;z-index:11;background-color:var(--fui-bg-default)}.fui-advanced-data-table__header-cell--sticky-start-edge:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(to right,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__header-cell--sticky-end{position:sticky;z-index:11;background-color:var(--fui-bg-default)}.fui-advanced-data-table__header-cell--sticky-end-edge:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to left,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__header-content{display:flex;align-items:center;gap:.25rem}.fui-advanced-data-table__header-label{flex:1;overflow:hidden;text-overflow:ellipsis}.fui-advanced-data-table__sort-button,.fui-advanced-data-table__filter-button{display:inline-flex;align-items:center;justify-content:center;padding:.125rem;border:none;background:transparent;color:var(--fui-text-secondary);cursor:pointer;border-radius:var(--fui-radius-sm);transition-property:color,background-color,opacity;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__sort-button:hover,.fui-advanced-data-table__filter-button:hover{color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-advanced-data-table__sort-button:focus-visible,.fui-advanced-data-table__filter-button:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-advanced-data-table__sort-button{opacity:0}.fui-advanced-data-table__header-cell:hover .fui-advanced-data-table__sort-button,.fui-advanced-data-table__header-cell:focus-within .fui-advanced-data-table__sort-button,.fui-advanced-data-table__sort-button--active,.fui-advanced-data-table__sort-button:focus-visible{opacity:1}.fui-advanced-data-table__sort-icon,.fui-advanced-data-table__filter-icon{width:16px;height:16px}.fui-advanced-data-table__sort-icon{opacity:.6;transition-property:opacity;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__sort-icon path{transition-property:opacity;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__sort-icon--asc{opacity:1;color:var(--fui-primary-fg)}.fui-advanced-data-table__sort-icon--asc path:first-child{opacity:1}.fui-advanced-data-table__sort-icon--asc path:last-child{opacity:.3}.fui-advanced-data-table__sort-icon--desc{opacity:1;color:var(--fui-primary-fg)}.fui-advanced-data-table__sort-icon--desc path:first-child{opacity:.3}.fui-advanced-data-table__sort-icon--desc path:last-child{opacity:1}.fui-advanced-data-table__filter-icon{opacity:.6;transition-property:all;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__filter-icon--active{opacity:1;color:var(--fui-primary-fg)}.fui-advanced-data-table__filter-menu-content{display:flex;flex-direction:column;gap:.75rem;padding:.75rem;min-width:280px}.fui-advanced-data-table__filter-select{width:100%}.fui-advanced-data-table__filter-actions{display:flex;gap:.25rem;justify-content:flex-end;margin-top:.25rem}.fui-advanced-data-table__body{background-color:var(--fui-bg-default)}.fui-advanced-data-table__row{height:var(--fui-table-row-height);background-color:var(--fui-table-row-bg);border-bottom:var(--fui-border-width-sm) solid var(--fui-table-border-color);transition-property:background-color;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__row:hover{background-color:var(--fui-table-row-hover-bg)}.fui-advanced-data-table__row--clickable{cursor:pointer}.fui-advanced-data-table__row--selected{background-color:var(--fui-primary-10)}.fui-advanced-data-table__row--selected:hover,.fui-advanced-data-table__row--highlighted,.fui-advanced-data-table__row--highlighted:hover{background-color:var(--fui-primary-20)}.fui-advanced-data-table__row--empty{height:auto}.fui-advanced-data-table__row--empty:hover{background-color:transparent}.fui-advanced-data-table__row .formaui-advanced-data-table__cell:last-child{border-right:none}.fui-advanced-data-table__cell{padding:var(--fui-table-cell-padding-y) var(--fui-table-cell-padding-x);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px;position:relative;border-bottom:var(--fui-border-width-sm) solid var(--fui-table-border-color);border-right:var(--fui-border-width-sm) solid var(--fui-table-border-color)}.fui-advanced-data-table__cell fui-badge{vertical-align:middle}.fui-advanced-data-table__cell--checkbox{width:48px;min-width:48px;max-width:48px;padding:.5rem;text-align:center}.fui-advanced-data-table__cell--empty{padding:2.5rem 1rem;text-align:center;color:var(--fui-text-secondary);white-space:normal;border-bottom:none}.fui-advanced-data-table__cell--sticky-start{position:sticky;z-index:9;background-color:inherit}.fui-advanced-data-table__cell--sticky-start-edge:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(to right,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__cell--sticky-end{position:sticky;z-index:9;background-color:inherit}.fui-advanced-data-table__cell--sticky-end-edge:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to left,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--fui-primary-bg)}.fui-advanced-data-table__checkbox:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-advanced-data-table__empty-state{padding:2.5rem;text-align:center;color:var(--fui-text-secondary);font-size:var(--fui-text-md, 1rem);display:flex;flex-direction:column;align-items:center;gap:.75rem}.fui-advanced-data-table__empty-state-icon.fui-icon{width:var(--fui-text-5xl);height:var(--fui-text-5xl);font-size:var(--fui-text-5xl);color:var(--fui-text-secondary);opacity:.5}.fui-advanced-data-table__bool-icon--true{color:var(--fui-text-success)}.fui-advanced-data-table__bool-icon--false{color:var(--fui-text-error)}.fui-advanced-data-table__actions{display:inline-flex;align-items:center;gap:.125rem}.fui-advanced-data-table__action-button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-advanced-data-table__action-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--fui-text-secondary);border-radius:var(--fui-radius-sm);cursor:pointer;transition-property:color,background-color;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__action-button:hover:not(:disabled){color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-advanced-data-table__action-button:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-advanced-data-table__action-button:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-advanced-data-table--boxed .fui-advanced-data-table__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-radius-md)}.fui-advanced-data-table--boxed .fui-advanced-data-table__header-cell:last-child,.fui-advanced-data-table--boxed .fui-advanced-data-table__cell:last-child{border-right:none}.fui-advanced-data-table--boxed .fui-advanced-data-table__row:last-child .fui-advanced-data-table__cell{border-bottom:none}.fui-advanced-data-table--density-compact{--fui-table-row-height: 2rem;--fui-table-cell-padding-y: .25rem;--fui-table-cell-padding-x: .5rem}@media(max-width:768px){.fui-advanced-data-table__table{font-size:var(--fui-text-sm, .75rem)}.fui-advanced-data-table__header-cell,.fui-advanced-data-table__cell{padding:.25rem .5rem;max-width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FuiCheckboxComponent, selector: "fui-checkbox", inputs: ["readonly", "checked", "disabled", "indeterminate", "required", "labelPosition", "name", "value", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "errorStateMatcher"], outputs: ["change", "indeterminateChange"] }, { kind: "component", type: FuiFormFieldComponent, selector: "fui-form-field", inputs: ["appearance", "hideRequiredMarker", "hideSubscript"] }, { kind: "directive", type: FuiInputDirective, selector: "input[fuiInput], textarea[fuiInput], select[fuiInput]", inputs: ["type", "placeholder", "readonly", "maxlength", "minlength", "pattern", "errorStateMatcher", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: FuiButtonDirective, selector: "button[fuiButton], a[fuiButton]", inputs: ["variant", "size", "disabled", "fullWidth", "loading", "iconOnly", "aria-label", "type"] }, { kind: "component", type: FuiDropdownMenuComponent, selector: "fui-dropdown-menu", inputs: ["position", "size", "closeOnClickOutside", "disabled", "attachToBody"], outputs: ["openChange", "itemSelected"] }, { kind: "directive", type: FuiDropdownMenuTriggerDirective, selector: "[fuiDropdownMenuTrigger]", inputs: ["fuiDropdownMenuTriggerFor", "menuTriggerData"] }, { kind: "component", type: FuiSelectComponent, selector: "fui-select", inputs: ["placeholder", "disabled", "readonly", "multiple", "short", "compareWith", "errorStateMatcher"], outputs: ["valueChange", "selectionChange", "openedChange"] }, { kind: "component", type: FuiOptionComponent, selector: "fui-option" }, { kind: "directive", type: FuiTooltipDirective, selector: "[fuiTooltip]", inputs: ["fuiTooltip", "fuiTooltipPosition", "fuiTooltipSize", "fuiTooltipTextAlign", "fuiTooltipTrigger", "fuiTooltipShowDelay", "fuiTooltipHideDelay", "fuiTooltipDisabled", "fuiTooltipMaxWidth", "fuiTooltipOffset", "fuiTooltipArrow", "fuiTooltipShow"], exportAs: ["fuiTooltip"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiBadgeComponent, selector: "fui-badge", inputs: ["label", "icon", "customColor", "size", "variant", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
694
763
|
}
|
|
695
764
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAdvancedDataTableComponent, decorators: [{
|
|
696
765
|
type: Component,
|
|
@@ -712,14 +781,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
712
781
|
class: 'fui-advanced-data-table',
|
|
713
782
|
'[class.fui-advanced-data-table--boxed]': 'boxed()',
|
|
714
783
|
'[class.fui-advanced-data-table--density-compact]': "density() === 'compact'",
|
|
715
|
-
}, template: "<div class=\"fui-advanced-data-table__wrapper\">\r\n <!-- Live region for sort/filter announcements -->\r\n <div class=\"fui-sr-only\" aria-live=\"polite\" aria-atomic=\"true\" #liveAnnouncer></div>\r\n <!-- Scroll sentinel: tracked by IntersectionObserver to know when the header is stuck. -->\r\n <div class=\"fui-advanced-data-table__scroll-sentinel\" aria-hidden=\"true\" #scrollSentinel></div>\r\n <table\r\n class=\"fui-advanced-data-table__table\"\r\n role=\"grid\"\r\n [attr.aria-label]=\"resolvedTableAriaLabel()\"\r\n [attr.aria-rowcount]=\"data().length\"\r\n >\r\n <!-- Table Header -->\r\n <thead\r\n class=\"fui-advanced-data-table__header\"\r\n [class.fui-advanced-data-table__header--sticky]=\"config().headerSticky\"\r\n [class.fui-advanced-data-table__header--elevated]=\"_headerStuck()\"\r\n >\r\n <tr class=\"fui-advanced-data-table__header-row\">\r\n <!-- Selection Checkbox Column -->\r\n @if (config().areRowsSelectable) {\r\n <th\r\n scope=\"col\"\r\n class=\"fui-advanced-data-table__header-cell fui-advanced-data-table__header-cell--checkbox\"\r\n [class.fui-advanced-data-table__header-cell--sticky-start]=\"\r\n processedHeaders()[0] && processedHeaders()[0].isStartSticky\r\n \"\r\n >\r\n <fui-checkbox\r\n class=\"fui-advanced-data-table__checkbox\"\r\n [checked]=\"allRowsSelected()\"\r\n [indeterminate]=\"someRowsSelected()\"\r\n [aria-label]=\"intl.selectAllAriaLabel\"\r\n (change)=\"toggleAllRows()\"\r\n />\r\n </th>\r\n }\r\n\r\n <!-- Data Columns -->\r\n @for (header of processedHeaders(); track header.field) {\r\n <th\r\n scope=\"col\"\r\n [class]=\"getHeaderClasses(header)\"\r\n [ngStyle]=\"getHeaderStyles(header)\"\r\n [attr.aria-sort]=\"getAriaSortValue(header.field)\"\r\n >\r\n <div class=\"fui-advanced-data-table__header-content\">\r\n <span class=\"fui-advanced-data-table__header-label\">{{ header.label }}</span>\r\n\r\n @if (header.hasSort) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-advanced-data-table__sort-button\"\r\n [class.fui-advanced-data-table__sort-button--active]=\"sort()?.field === header.field\"\r\n [attr.aria-label]=\"intl.sortAriaLabel(header.label)\"\r\n [fuiTooltip]=\"intl.sortTooltip\"\r\n fuiTooltipSize=\"sm\"\r\n fuiTooltipPosition=\"bottom\"\r\n #sortTooltip=\"fuiTooltip\"\r\n (click)=\"sortTooltip.hide(); onSortClick(header.field)\"\r\n >\r\n <svg\r\n [class]=\"getSortIconClasses(header.field)\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"currentColor\"\r\n >\r\n <path d=\"M8 3L12 7H4L8 3Z\" />\r\n <path d=\"M8 13L4 9H12L8 13Z\" />\r\n </svg>\r\n </button>\r\n }\r\n\r\n @if (header.hasFilter) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-advanced-data-table__filter-button\"\r\n fuiDropdownMenuTrigger\r\n [fuiDropdownMenuTriggerFor]=\"filterMenu\"\r\n [menuTriggerData]=\"{ field: header.field, type: header.type }\"\r\n [attr.aria-label]=\"intl.filterAriaLabel(header.label)\"\r\n [fuiTooltip]=\"intl.filterTooltip\"\r\n fuiTooltipSize=\"sm\"\r\n fuiTooltipPosition=\"bottom\"\r\n #filterTooltip=\"fuiTooltip\"\r\n (click)=\"filterTooltip.hide()\"\r\n >\r\n <svg\r\n [class]=\"getFilterIconClasses(header.field)\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"currentColor\"\r\n >\r\n <path d=\"M2 2L6 8V13L10 15V8L14 2H2Z\" />\r\n </svg>\r\n </button>\r\n\r\n <fui-dropdown-menu\r\n #filterMenu\r\n position=\"bottom-end\"\r\n size=\"md\"\r\n (openChange)=\"$event && initFilterForm(header.field, header.type)\"\r\n [closeOnClickOutside]=\"true\"\r\n >\r\n <div class=\"fui-advanced-data-table__filter-menu-content\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"fui-text-xs\">{{ header.label }}</div>\r\n @if (header.type !== 'label') {\r\n <!-- Operator Selection -->\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <fui-select\r\n [ngModel]=\"tempFilterOperator()\"\r\n (ngModelChange)=\"tempFilterOperator.set($event)\"\r\n [placeholder]=\"intl.selectOperatorPlaceholder\"\r\n >\r\n @for (operator of getFilterOperators(header.type); track operator.value) {\r\n <fui-option [value]=\"operator.value\">\r\n {{ operator.label }}\r\n </fui-option>\r\n }\r\n </fui-select>\r\n </fui-form-field>\r\n\r\n <!-- Value Input(s) -->\r\n @if (requiresInput(header.type)) {\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <input\r\n fuiInput\r\n [type]=\"header.type === 'number' ? 'number' : header.type === 'date' ? 'date' : 'text'\"\r\n [ngModel]=\"tempFilterValue()\"\r\n (ngModelChange)=\"tempFilterValue.set($event)\"\r\n [placeholder]=\"intl.enterValuePlaceholder\"\r\n />\r\n </fui-form-field>\r\n\r\n @if (requiresSecondInput(header.type)) {\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <input\r\n fuiInput\r\n [type]=\"header.type === 'number' ? 'number' : header.type === 'date' ? 'date' : 'text'\"\r\n [ngModel]=\"tempFilterValue2()\"\r\n (ngModelChange)=\"tempFilterValue2.set($event)\"\r\n [placeholder]=\"intl.enterFinalValuePlaceholder\"\r\n />\r\n </fui-form-field>\r\n }\r\n }\r\n } @else {\r\n <!-- Label filter: select dropdown -->\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <fui-select\r\n [ngModel]=\"tempFilterValue()\"\r\n (ngModelChange)=\"tempFilterValue.set($event)\"\r\n [placeholder]=\"intl.selectValuePlaceholder\"\r\n >\r\n @for (labelOpt of header.labels ?? []; track labelOpt.value) {\r\n <fui-option [value]=\"labelOpt.value\">\r\n {{ labelOpt.label }}\r\n </fui-option>\r\n }\r\n </fui-select>\r\n </fui-form-field>\r\n }\r\n\r\n <!-- Actions -->\r\n <div class=\"fui-advanced-data-table__filter-actions\">\r\n <button\r\n fuiButton\r\n variant=\"primary\"\r\n size=\"sm\"\r\n (click)=\"applyFilter(header.field, header.type, filterMenu)\"\r\n >\r\n {{ intl.applyButtonLabel }}\r\n </button>\r\n <button fuiButton variant=\"secondary\" size=\"sm\" (click)=\"clearFilter(header.field, filterMenu)\">\r\n {{ intl.clearButtonLabel }}\r\n </button>\r\n </div>\r\n </div>\r\n </fui-dropdown-menu>\r\n }\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- Table Body -->\r\n <tbody class=\"fui-advanced-data-table__body\">\r\n @if (data().length === 0 && resolvedEmptyMessage()) {\r\n <tr class=\"fui-advanced-data-table__row fui-advanced-data-table__row--empty\">\r\n <td\r\n class=\"fui-advanced-data-table__cell fui-advanced-data-table__cell--empty\"\r\n [attr.colspan]=\"processedHeaders().length + (config().areRowsSelectable ? 1 : 0)\"\r\n >\r\n <div class=\"fui-advanced-data-table__empty-state\">\r\n <fui-icon\r\n name=\"magnifying-glass\"\r\n class=\"fui-advanced-data-table__empty-state-icon\"\r\n aria-hidden=\"true\"\r\n ></fui-icon>\r\n {{ resolvedEmptyMessage() }}\r\n </div>\r\n </td>\r\n </tr>\r\n } @else {\r\n @for (row of data(); track trackBy()($index, row)) {\r\n <tr\r\n (dblclick)=\"rowDblClick.emit(row)\"\r\n class=\"fui-advanced-data-table__row\"\r\n [class.fui-advanced-data-table__row--selected]=\"isRowSelected($index)\"\r\n [class.fui-advanced-data-table__row--highlighted]=\"isRowHighlighted($index)\"\r\n [class.fui-advanced-data-table__row--clickable]=\"enableRowHighlight()\"\r\n [attr.aria-selected]=\"config().areRowsSelectable ? isRowSelected($index) : null\"\r\n [attr.aria-rowindex]=\"$index + 2\"\r\n (click)=\"toggleRowHighlight($index)\"\r\n >\r\n <!-- Selection Checkbox -->\r\n @if (config().areRowsSelectable) {\r\n <td\r\n class=\"fui-advanced-data-table__cell fui-advanced-data-table__cell--checkbox\"\r\n [class.fui-advanced-data-table__cell--sticky-start]=\"\r\n processedHeaders()[0] && processedHeaders()[0].isStartSticky\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <fui-checkbox\r\n class=\"fui-advanced-data-table__checkbox\"\r\n [checked]=\"isRowSelected($index)\"\r\n [aria-label]=\"intl.selectRowAriaLabel($index + 1)\"\r\n (change)=\"toggleRow($index)\"\r\n />\r\n </td>\r\n }\r\n\r\n <!-- Data Cells -->\r\n @for (header of processedHeaders(); track header.field) {\r\n <td [class]=\"getCellClasses(header)\" [ngStyle]=\"getCellStyles(header)\">\r\n @if (header.type === 'boolean') {\r\n @if (getCellValue(row, header.field)) {\r\n <fui-icon name=\"check-circle\" class=\"fui-advanced-data-table__bool-icon--true\"></fui-icon>\r\n } @else {\r\n <fui-icon name=\"x-circle\" class=\"fui-advanced-data-table__bool-icon--false\"></fui-icon>\r\n }\r\n } @else if (header.type === 'label') {\r\n @let labelConfig = getLabelConfig(getCellValue(row, header.field), header.labels ?? []);\r\n @if (labelConfig) {\r\n <fui-badge\r\n [label]=\"labelConfig.label\"\r\n [customColor]=\"labelConfig.color\"\r\n [icon]=\"labelConfig.icon ?? null\"\r\n size=\"sm\"\r\n />\r\n } @else {\r\n <fui-badge [label]=\"'' + getCellValue(row, header.field)\" variant=\"info\" size=\"sm\" />\r\n }\r\n } @else if (header.type === 'actions') {\r\n <div class=\"fui-advanced-data-table__actions\" (click)=\"$event.stopPropagation()\">\r\n @for (action of rowActions(); track action.label) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-advanced-data-table__action-button\"\r\n [disabled]=\"action.disabled ? action.disabled(row) : false\"\r\n [attr.aria-label]=\"action.ariaLabel ?? action.label\"\r\n [fuiTooltip]=\"action.label\"\r\n fuiTooltipSize=\"sm\"\r\n fuiTooltipPosition=\"top\"\r\n (click)=\"action.onClick(row, $event)\"\r\n >\r\n <fui-icon [name]=\"action.icon\" size=\"sm\" />\r\n </button>\r\n }\r\n </div>\r\n } @else {\r\n {{ formatCellValue(getCellValue(row, header.field), header.type) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-advanced-data-table{--fui-table-font-size: var(--fui-text-base, .875rem);--fui-table-header-bg: var(--fui-bg-default);--fui-table-row-bg: var(--fui-bg-default);--fui-table-row-hover-bg: var(--fui-bg-subtle);--fui-table-row-height: 3rem;--fui-table-cell-padding-y: .5rem;--fui-table-cell-padding-x: 1rem;--fui-table-border-color: var(--fui-border-default);display:block;width:100%;position:relative}.fui-advanced-data-table__wrapper{width:100%;overflow-x:auto;overflow-y:visible;position:relative}.fui-advanced-data-table__wrapper::-webkit-scrollbar{height:8px}.fui-advanced-data-table__wrapper::-webkit-scrollbar-track{background:var(--fui-bg-default);border-radius:var(--fui-radius-sm)}.fui-advanced-data-table__wrapper::-webkit-scrollbar-thumb{background:var(--fui-border-default);border-radius:var(--fui-radius-sm)}.fui-advanced-data-table__wrapper::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-advanced-data-table__table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--fui-font-sans);font-size:var(--fui-table-font-size);color:var(--fui-text-primary);background-color:var(--fui-table-row-bg)}.fui-advanced-data-table__header{background-color:var(--fui-table-header-bg);border-bottom:1px solid var(--fui-table-border-color)}.fui-advanced-data-table__header--sticky{position:sticky;top:0;z-index:10}.fui-advanced-data-table__header--elevated .fui-advanced-data-table__header-cell{box-shadow:0 1.19px 3.57px #1018281a}.fui-advanced-data-table__scroll-sentinel{height:1px;width:100%}.fui-advanced-data-table__header-row{height:var(--fui-table-row-height)}.fui-advanced-data-table__header-row .formaui-advanced-data-table__header-cell:last-child{border-right:none}.fui-advanced-data-table__header-cell{padding:var(--fui-table-cell-padding-y) var(--fui-table-cell-padding-x);text-align:left;font-weight:var(--fui-weight-semibold, 600);color:var(--fui-text-secondary);background-color:var(--fui-table-header-bg);border-right:1px solid var(--fui-border-default);border-bottom:1px solid var(--fui-border-default);white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;transition-property:box-shadow;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__header-cell--checkbox{width:48px;min-width:48px;max-width:48px;padding:.5rem;text-align:center}.fui-advanced-data-table__header-cell--sticky-start{position:sticky;z-index:11;background-color:var(--fui-bg-default)}.fui-advanced-data-table__header-cell--sticky-start-edge:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(to right,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__header-cell--sticky-end{position:sticky;z-index:11;background-color:var(--fui-bg-default)}.fui-advanced-data-table__header-cell--sticky-end-edge:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to left,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__header-content{display:flex;align-items:center;gap:.25rem}.fui-advanced-data-table__header-label{flex:1;overflow:hidden;text-overflow:ellipsis}.fui-advanced-data-table__sort-button,.fui-advanced-data-table__filter-button{display:inline-flex;align-items:center;justify-content:center;padding:.125rem;border:none;background:transparent;color:var(--fui-text-secondary);cursor:pointer;border-radius:var(--fui-radius-sm);transition-property:color,background-color,opacity;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__sort-button:hover,.fui-advanced-data-table__filter-button:hover{color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-advanced-data-table__sort-button:focus-visible,.fui-advanced-data-table__filter-button:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-advanced-data-table__sort-button{opacity:0}.fui-advanced-data-table__header-cell:hover .fui-advanced-data-table__sort-button,.fui-advanced-data-table__header-cell:focus-within .fui-advanced-data-table__sort-button,.fui-advanced-data-table__sort-button--active,.fui-advanced-data-table__sort-button:focus-visible{opacity:1}.fui-advanced-data-table__sort-icon,.fui-advanced-data-table__filter-icon{width:16px;height:16px}.fui-advanced-data-table__sort-icon{opacity:.6;transition-property:opacity;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__sort-icon path{transition-property:opacity;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__sort-icon--asc{opacity:1;color:var(--fui-brand-fg)}.fui-advanced-data-table__sort-icon--asc path:first-child{opacity:1}.fui-advanced-data-table__sort-icon--asc path:last-child{opacity:.3}.fui-advanced-data-table__sort-icon--desc{opacity:1;color:var(--fui-brand-fg)}.fui-advanced-data-table__sort-icon--desc path:first-child{opacity:.3}.fui-advanced-data-table__sort-icon--desc path:last-child{opacity:1}.fui-advanced-data-table__filter-icon{opacity:.6;transition-property:all;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__filter-icon--active{opacity:1;color:var(--fui-brand-fg)}.fui-advanced-data-table__filter-menu-content{display:flex;flex-direction:column;gap:.75rem;padding:.75rem;min-width:280px}.fui-advanced-data-table__filter-select{width:100%}.fui-advanced-data-table__filter-actions{display:flex;gap:.25rem;justify-content:flex-end;margin-top:.25rem}.fui-advanced-data-table__body{background-color:var(--fui-bg-default)}.fui-advanced-data-table__row{height:var(--fui-table-row-height);background-color:var(--fui-table-row-bg);border-bottom:1px solid var(--fui-table-border-color);transition-property:background-color;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__row:hover{background-color:var(--fui-table-row-hover-bg)}.fui-advanced-data-table__row--clickable{cursor:pointer}.fui-advanced-data-table__row--selected{background-color:var(--fui-primary-10)}.fui-advanced-data-table__row--selected:hover,.fui-advanced-data-table__row--highlighted,.fui-advanced-data-table__row--highlighted:hover{background-color:var(--fui-primary-20)}.fui-advanced-data-table__row--empty{height:auto}.fui-advanced-data-table__row--empty:hover{background-color:transparent}.fui-advanced-data-table__row .formaui-advanced-data-table__cell:last-child{border-right:none}.fui-advanced-data-table__cell{padding:var(--fui-table-cell-padding-y) var(--fui-table-cell-padding-x);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px;position:relative;border-bottom:1px solid var(--fui-table-border-color);border-right:1px solid var(--fui-table-border-color)}.fui-advanced-data-table__cell--checkbox{width:48px;min-width:48px;max-width:48px;padding:.5rem;text-align:center}.fui-advanced-data-table__cell--empty{padding:2.5rem 1rem;text-align:center;color:var(--fui-text-secondary);white-space:normal;border-bottom:none}.fui-advanced-data-table__cell--sticky-start{position:sticky;z-index:9;background-color:inherit}.fui-advanced-data-table__cell--sticky-start-edge:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(to right,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__cell--sticky-end{position:sticky;z-index:9;background-color:inherit}.fui-advanced-data-table__cell--sticky-end-edge:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to left,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--fui-primary-bg)}.fui-advanced-data-table__checkbox:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-advanced-data-table__empty-state{padding:2.5rem;text-align:center;color:var(--fui-text-secondary);font-size:var(--fui-text-md, 1rem);display:flex;flex-direction:column;align-items:center;gap:.75rem}.fui-advanced-data-table__empty-state-icon{font-size:var(--fui-text-5xl);color:var(--fui-text-secondary);opacity:.5}.fui-advanced-data-table__bool-icon--true{color:var(--fui-text-success)}.fui-advanced-data-table__bool-icon--false{color:var(--fui-text-error)}.fui-advanced-data-table__actions{display:inline-flex;align-items:center;gap:.125rem}.fui-advanced-data-table__action-button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-advanced-data-table__action-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--fui-text-secondary);border-radius:var(--fui-radius-sm);cursor:pointer;transition-property:color,background-color;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__action-button:hover:not(:disabled){color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-advanced-data-table__action-button:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-advanced-data-table__action-button:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-advanced-data-table--boxed .fui-advanced-data-table__wrapper{border:1px solid var(--fui-border-default);border-radius:var(--fui-radius-md);overflow:hidden}.fui-advanced-data-table--boxed .fui-advanced-data-table__header-cell:last-child,.fui-advanced-data-table--boxed .fui-advanced-data-table__cell:last-child{border-right:none}.fui-advanced-data-table--boxed .fui-advanced-data-table__row:last-child .fui-advanced-data-table__cell{border-bottom:none}.fui-advanced-data-table--density-compact{--fui-table-row-height: 2rem;--fui-table-cell-padding-y: .25rem;--fui-table-cell-padding-x: .5rem}@media(max-width:768px){.fui-advanced-data-table__table{font-size:var(--fui-text-sm, .75rem)}.fui-advanced-data-table__header-cell,.fui-advanced-data-table__cell{padding:.25rem .5rem;max-width:200px}}\n"] }]
|
|
716
|
-
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], enableRowHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowHighlight", required: false }] }], boxed: [{ type: i0.Input, args: [{ isSignal: true, alias: "boxed", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], tableAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableAriaLabel", required: false }] }], _liveAnnouncer: [{
|
|
784
|
+
}, template: "<div class=\"fui-advanced-data-table__wrapper\">\r\n <!-- Live region for sort/filter announcements -->\r\n <div class=\"fui-sr-only\" aria-live=\"polite\" aria-atomic=\"true\" #liveAnnouncer></div>\r\n <!-- Scroll sentinel: tracked by IntersectionObserver to know when the header is stuck. -->\r\n <div class=\"fui-advanced-data-table__scroll-sentinel\" aria-hidden=\"true\" #scrollSentinel></div>\r\n <table\r\n class=\"fui-advanced-data-table__table\"\r\n role=\"grid\"\r\n [attr.aria-label]=\"resolvedTableAriaLabel()\"\r\n [attr.aria-rowcount]=\"data().length\"\r\n >\r\n <!-- Table Header -->\r\n <thead\r\n class=\"fui-advanced-data-table__header\"\r\n [class.fui-advanced-data-table__header--sticky]=\"config().headerSticky\"\r\n [class.fui-advanced-data-table__header--elevated]=\"_headerStuck()\"\r\n >\r\n <tr class=\"fui-advanced-data-table__header-row\">\r\n <!-- Selection Checkbox Column -->\r\n @if (config().areRowsSelectable) {\r\n <th\r\n scope=\"col\"\r\n class=\"fui-advanced-data-table__header-cell fui-advanced-data-table__header-cell--checkbox\"\r\n [class.fui-advanced-data-table__header-cell--sticky-start]=\"\r\n processedHeaders()[0] && processedHeaders()[0].isStartSticky\r\n \"\r\n >\r\n <fui-checkbox\r\n class=\"fui-advanced-data-table__checkbox\"\r\n [checked]=\"allRowsSelected()\"\r\n [indeterminate]=\"someRowsSelected()\"\r\n [aria-label]=\"intl.selectAllAriaLabel\"\r\n (change)=\"toggleAllRows()\"\r\n />\r\n </th>\r\n }\r\n\r\n <!-- Data Columns -->\r\n @for (header of processedHeaders(); track header.field) {\r\n <th\r\n scope=\"col\"\r\n [class]=\"getHeaderClasses(header)\"\r\n [ngStyle]=\"getHeaderStyles(header)\"\r\n [attr.aria-sort]=\"getAriaSortValue(header.field)\"\r\n >\r\n <div class=\"fui-advanced-data-table__header-content\">\r\n <span class=\"fui-advanced-data-table__header-label\">{{ header.label }}</span>\r\n\r\n @if (header.hasSort) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-advanced-data-table__sort-button\"\r\n [class.fui-advanced-data-table__sort-button--active]=\"sort()?.field === header.field\"\r\n [attr.aria-label]=\"intl.sortAriaLabel(header.label)\"\r\n [fuiTooltip]=\"intl.sortTooltip\"\r\n fuiTooltipSize=\"sm\"\r\n fuiTooltipPosition=\"bottom\"\r\n #sortTooltip=\"fuiTooltip\"\r\n (click)=\"sortTooltip.hide(); onSortClick(header.field)\"\r\n >\r\n <svg\r\n [class]=\"getSortIconClasses(header.field)\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"currentColor\"\r\n >\r\n <path d=\"M8 3L12 7H4L8 3Z\" />\r\n <path d=\"M8 13L4 9H12L8 13Z\" />\r\n </svg>\r\n </button>\r\n }\r\n\r\n @if (header.hasFilter) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-advanced-data-table__filter-button\"\r\n fuiDropdownMenuTrigger\r\n [fuiDropdownMenuTriggerFor]=\"filterMenu\"\r\n [menuTriggerData]=\"{ field: header.field, type: header.type }\"\r\n [attr.aria-label]=\"intl.filterAriaLabel(header.label)\"\r\n [fuiTooltip]=\"intl.filterTooltip\"\r\n fuiTooltipSize=\"sm\"\r\n fuiTooltipPosition=\"bottom\"\r\n #filterTooltip=\"fuiTooltip\"\r\n (click)=\"filterTooltip.hide()\"\r\n >\r\n <svg\r\n [class]=\"getFilterIconClasses(header.field)\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"currentColor\"\r\n >\r\n <path d=\"M2 2L6 8V13L10 15V8L14 2H2Z\" />\r\n </svg>\r\n </button>\r\n\r\n <fui-dropdown-menu\r\n #filterMenu\r\n position=\"bottom-end\"\r\n size=\"md\"\r\n (openChange)=\"$event && initFilterForm(header.field, header.type)\"\r\n [closeOnClickOutside]=\"true\"\r\n >\r\n <div class=\"fui-advanced-data-table__filter-menu-content\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"fui-text-xs\">{{ header.label }}</div>\r\n @if (header.type !== 'label') {\r\n <!-- Operator Selection -->\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <fui-select\r\n [ngModel]=\"tempFilterOperator()\"\r\n (ngModelChange)=\"tempFilterOperator.set($event)\"\r\n [placeholder]=\"intl.selectOperatorPlaceholder\"\r\n >\r\n @for (operator of getFilterOperators(header.type); track operator.value) {\r\n <fui-option [value]=\"operator.value\">\r\n {{ operator.label }}\r\n </fui-option>\r\n }\r\n </fui-select>\r\n </fui-form-field>\r\n\r\n <!-- Value Input(s) -->\r\n @if (requiresInput(header.type)) {\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <input\r\n fuiInput\r\n [type]=\"header.type === 'number' ? 'number' : header.type === 'date' ? 'date' : 'text'\"\r\n [ngModel]=\"tempFilterValue()\"\r\n (ngModelChange)=\"tempFilterValue.set($event)\"\r\n [placeholder]=\"intl.enterValuePlaceholder\"\r\n />\r\n </fui-form-field>\r\n\r\n @if (requiresSecondInput(header.type)) {\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <input\r\n fuiInput\r\n [type]=\"header.type === 'number' ? 'number' : header.type === 'date' ? 'date' : 'text'\"\r\n [ngModel]=\"tempFilterValue2()\"\r\n (ngModelChange)=\"tempFilterValue2.set($event)\"\r\n [placeholder]=\"intl.enterFinalValuePlaceholder\"\r\n />\r\n </fui-form-field>\r\n }\r\n }\r\n } @else {\r\n <!-- Label filter: select dropdown -->\r\n <fui-form-field [hideSubscript]=\"true\">\r\n <fui-select\r\n [ngModel]=\"tempFilterValue()\"\r\n (ngModelChange)=\"tempFilterValue.set($event)\"\r\n [placeholder]=\"intl.selectValuePlaceholder\"\r\n >\r\n @for (labelOpt of header.labels ?? []; track labelOpt.value) {\r\n <fui-option [value]=\"labelOpt.value\">\r\n {{ labelOpt.label }}\r\n </fui-option>\r\n }\r\n </fui-select>\r\n </fui-form-field>\r\n }\r\n\r\n <!-- Actions -->\r\n <div class=\"fui-advanced-data-table__filter-actions\">\r\n <button\r\n fuiButton\r\n variant=\"primary\"\r\n size=\"sm\"\r\n (click)=\"applyFilter(header.field, header.type, filterMenu)\"\r\n >\r\n {{ intl.applyButtonLabel }}\r\n </button>\r\n <button fuiButton variant=\"secondary\" size=\"sm\" (click)=\"clearFilter(header.field, filterMenu)\">\r\n {{ intl.clearButtonLabel }}\r\n </button>\r\n </div>\r\n </div>\r\n </fui-dropdown-menu>\r\n }\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- Table Body -->\r\n <tbody class=\"fui-advanced-data-table__body\">\r\n @if (data().length === 0 && resolvedEmptyMessage()) {\r\n <tr class=\"fui-advanced-data-table__row fui-advanced-data-table__row--empty\">\r\n <td\r\n class=\"fui-advanced-data-table__cell fui-advanced-data-table__cell--empty\"\r\n [attr.colspan]=\"processedHeaders().length + (config().areRowsSelectable ? 1 : 0)\"\r\n >\r\n <div class=\"fui-advanced-data-table__empty-state\">\r\n <fui-icon\r\n name=\"magnifying-glass\"\r\n class=\"fui-advanced-data-table__empty-state-icon\"\r\n aria-hidden=\"true\"\r\n ></fui-icon>\r\n {{ resolvedEmptyMessage() }}\r\n </div>\r\n </td>\r\n </tr>\r\n } @else {\r\n @for (row of data(); track trackBy()($index, row)) {\r\n <tr\r\n (dblclick)=\"onRowDblClick(row)\"\r\n class=\"fui-advanced-data-table__row\"\r\n [class.fui-advanced-data-table__row--selected]=\"isRowSelected($index)\"\r\n [class.fui-advanced-data-table__row--highlighted]=\"isRowHighlighted($index)\"\r\n [class.fui-advanced-data-table__row--clickable]=\"enableRowHighlight() || rowClickable()\"\r\n [attr.aria-selected]=\"config().areRowsSelectable ? isRowSelected($index) : null\"\r\n [attr.aria-rowindex]=\"$index + 2\"\r\n (click)=\"onRowClick($index, row)\"\r\n >\r\n <!-- Selection Checkbox -->\r\n @if (config().areRowsSelectable) {\r\n <td\r\n class=\"fui-advanced-data-table__cell fui-advanced-data-table__cell--checkbox\"\r\n [class.fui-advanced-data-table__cell--sticky-start]=\"\r\n processedHeaders()[0] && processedHeaders()[0].isStartSticky\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <fui-checkbox\r\n class=\"fui-advanced-data-table__checkbox\"\r\n [checked]=\"isRowSelected($index)\"\r\n [aria-label]=\"intl.selectRowAriaLabel($index + 1)\"\r\n (change)=\"toggleRow($index)\"\r\n />\r\n </td>\r\n }\r\n\r\n <!-- Data Cells -->\r\n @for (header of processedHeaders(); track header.field) {\r\n <td [class]=\"getCellClasses(header)\" [ngStyle]=\"getCellStyles(header)\">\r\n @if (header.type === 'boolean') {\r\n @if (getCellValue(row, header.field)) {\r\n <fui-icon name=\"check-circle\" class=\"fui-advanced-data-table__bool-icon--true\"></fui-icon>\r\n } @else {\r\n <fui-icon name=\"x-circle\" class=\"fui-advanced-data-table__bool-icon--false\"></fui-icon>\r\n }\r\n } @else if (header.type === 'label') {\r\n @let labelConfig = getLabelConfig(getCellValue(row, header.field), header.labels ?? []);\r\n @if (labelConfig) {\r\n <fui-badge\r\n [label]=\"labelConfig.label\"\r\n [variant]=\"labelConfig.variant ?? 'info'\"\r\n [customColor]=\"labelConfig.color ?? null\"\r\n [icon]=\"labelConfig.icon ?? null\"\r\n [size]=\"labelConfig.size ?? 'sm'\"\r\n />\r\n } @else {\r\n <fui-badge [label]=\"'' + getCellValue(row, header.field)\" variant=\"info\" size=\"sm\" />\r\n }\r\n } @else if (header.type === 'actions') {\r\n <div class=\"fui-advanced-data-table__actions\" (click)=\"$event.stopPropagation()\">\r\n @for (action of rowActions(); track action.label) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-advanced-data-table__action-button\"\r\n [disabled]=\"action.disabled ? action.disabled(row) : false\"\r\n [attr.aria-label]=\"action.ariaLabel ?? action.label\"\r\n [fuiTooltip]=\"action.label\"\r\n fuiTooltipSize=\"sm\"\r\n fuiTooltipPosition=\"top\"\r\n (click)=\"action.onClick(row, $event)\"\r\n >\r\n <fui-icon [name]=\"action.icon\" size=\"sm\" />\r\n </button>\r\n }\r\n </div>\r\n } @else {\r\n {{ formatCellValue(getCellValue(row, header.field), header.type) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-advanced-data-table{--fui-table-font-size: var(--fui-text-base, .875rem);--fui-table-header-bg: var(--fui-bg-default);--fui-table-row-bg: var(--fui-bg-default);--fui-table-row-hover-bg: var(--fui-bg-subtle);--fui-table-row-height: 3rem;--fui-table-cell-padding-y: .5rem;--fui-table-cell-padding-x: 1rem;--fui-table-border-color: var(--fui-border-default);display:block;width:100%;position:relative}.fui-advanced-data-table__wrapper{width:100%;overflow-x:auto;overflow-y:visible;position:relative}.fui-advanced-data-table__wrapper::-webkit-scrollbar{height:8px}.fui-advanced-data-table__wrapper::-webkit-scrollbar-track{background:var(--fui-bg-default);border-radius:var(--fui-radius-sm)}.fui-advanced-data-table__wrapper::-webkit-scrollbar-thumb{background:var(--fui-border-default);border-radius:var(--fui-radius-sm)}.fui-advanced-data-table__wrapper::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-advanced-data-table__table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-family:var(--fui-font-sans);font-size:var(--fui-table-font-size);color:var(--fui-text-primary);background-color:var(--fui-table-row-bg)}.fui-advanced-data-table__header{background-color:var(--fui-table-header-bg);border-bottom:var(--fui-border-width-sm) solid var(--fui-table-border-color)}.fui-advanced-data-table__header--sticky{position:sticky;top:0;z-index:10}.fui-advanced-data-table__header--elevated .fui-advanced-data-table__header-cell{box-shadow:0 1.19px 3.57px #1018281a}.fui-advanced-data-table__scroll-sentinel{height:1px;width:100%}.fui-advanced-data-table__header-row{height:var(--fui-table-row-height)}.fui-advanced-data-table__header-row .formaui-advanced-data-table__header-cell:last-child{border-right:none}.fui-advanced-data-table__header-cell{padding:var(--fui-table-cell-padding-y) var(--fui-table-cell-padding-x);text-align:left;font-weight:var(--fui-weight-semibold, 600);color:var(--fui-text-secondary);background-color:var(--fui-table-header-bg);border-right:var(--fui-border-width-sm) solid var(--fui-border-default);border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default);white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;transition-property:box-shadow;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__header-cell--checkbox{width:48px;min-width:48px;max-width:48px;padding:.5rem;text-align:center}.fui-advanced-data-table__header-cell--sticky-start{position:sticky;z-index:11;background-color:var(--fui-bg-default)}.fui-advanced-data-table__header-cell--sticky-start-edge:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(to right,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__header-cell--sticky-end{position:sticky;z-index:11;background-color:var(--fui-bg-default)}.fui-advanced-data-table__header-cell--sticky-end-edge:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to left,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__header-content{display:flex;align-items:center;gap:.25rem}.fui-advanced-data-table__header-label{flex:1;overflow:hidden;text-overflow:ellipsis}.fui-advanced-data-table__sort-button,.fui-advanced-data-table__filter-button{display:inline-flex;align-items:center;justify-content:center;padding:.125rem;border:none;background:transparent;color:var(--fui-text-secondary);cursor:pointer;border-radius:var(--fui-radius-sm);transition-property:color,background-color,opacity;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__sort-button:hover,.fui-advanced-data-table__filter-button:hover{color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-advanced-data-table__sort-button:focus-visible,.fui-advanced-data-table__filter-button:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-advanced-data-table__sort-button{opacity:0}.fui-advanced-data-table__header-cell:hover .fui-advanced-data-table__sort-button,.fui-advanced-data-table__header-cell:focus-within .fui-advanced-data-table__sort-button,.fui-advanced-data-table__sort-button--active,.fui-advanced-data-table__sort-button:focus-visible{opacity:1}.fui-advanced-data-table__sort-icon,.fui-advanced-data-table__filter-icon{width:16px;height:16px}.fui-advanced-data-table__sort-icon{opacity:.6;transition-property:opacity;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__sort-icon path{transition-property:opacity;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__sort-icon--asc{opacity:1;color:var(--fui-primary-fg)}.fui-advanced-data-table__sort-icon--asc path:first-child{opacity:1}.fui-advanced-data-table__sort-icon--asc path:last-child{opacity:.3}.fui-advanced-data-table__sort-icon--desc{opacity:1;color:var(--fui-primary-fg)}.fui-advanced-data-table__sort-icon--desc path:first-child{opacity:.3}.fui-advanced-data-table__sort-icon--desc path:last-child{opacity:1}.fui-advanced-data-table__filter-icon{opacity:.6;transition-property:all;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__filter-icon--active{opacity:1;color:var(--fui-primary-fg)}.fui-advanced-data-table__filter-menu-content{display:flex;flex-direction:column;gap:.75rem;padding:.75rem;min-width:280px}.fui-advanced-data-table__filter-select{width:100%}.fui-advanced-data-table__filter-actions{display:flex;gap:.25rem;justify-content:flex-end;margin-top:.25rem}.fui-advanced-data-table__body{background-color:var(--fui-bg-default)}.fui-advanced-data-table__row{height:var(--fui-table-row-height);background-color:var(--fui-table-row-bg);border-bottom:var(--fui-border-width-sm) solid var(--fui-table-border-color);transition-property:background-color;transition-duration:var(--fui-duration-fast, .1s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__row:hover{background-color:var(--fui-table-row-hover-bg)}.fui-advanced-data-table__row--clickable{cursor:pointer}.fui-advanced-data-table__row--selected{background-color:var(--fui-primary-10)}.fui-advanced-data-table__row--selected:hover,.fui-advanced-data-table__row--highlighted,.fui-advanced-data-table__row--highlighted:hover{background-color:var(--fui-primary-20)}.fui-advanced-data-table__row--empty{height:auto}.fui-advanced-data-table__row--empty:hover{background-color:transparent}.fui-advanced-data-table__row .formaui-advanced-data-table__cell:last-child{border-right:none}.fui-advanced-data-table__cell{padding:var(--fui-table-cell-padding-y) var(--fui-table-cell-padding-x);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px;position:relative;border-bottom:var(--fui-border-width-sm) solid var(--fui-table-border-color);border-right:var(--fui-border-width-sm) solid var(--fui-table-border-color)}.fui-advanced-data-table__cell fui-badge{vertical-align:middle}.fui-advanced-data-table__cell--checkbox{width:48px;min-width:48px;max-width:48px;padding:.5rem;text-align:center}.fui-advanced-data-table__cell--empty{padding:2.5rem 1rem;text-align:center;color:var(--fui-text-secondary);white-space:normal;border-bottom:none}.fui-advanced-data-table__cell--sticky-start{position:sticky;z-index:9;background-color:inherit}.fui-advanced-data-table__cell--sticky-start-edge:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(to right,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__cell--sticky-end{position:sticky;z-index:9;background-color:inherit}.fui-advanced-data-table__cell--sticky-end-edge:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to left,var(--fui-border-default),transparent);pointer-events:none}.fui-advanced-data-table__checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--fui-primary-bg)}.fui-advanced-data-table__checkbox:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-advanced-data-table__empty-state{padding:2.5rem;text-align:center;color:var(--fui-text-secondary);font-size:var(--fui-text-md, 1rem);display:flex;flex-direction:column;align-items:center;gap:.75rem}.fui-advanced-data-table__empty-state-icon.fui-icon{width:var(--fui-text-5xl);height:var(--fui-text-5xl);font-size:var(--fui-text-5xl);color:var(--fui-text-secondary);opacity:.5}.fui-advanced-data-table__bool-icon--true{color:var(--fui-text-success)}.fui-advanced-data-table__bool-icon--false{color:var(--fui-text-error)}.fui-advanced-data-table__actions{display:inline-flex;align-items:center;gap:.125rem}.fui-advanced-data-table__action-button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-advanced-data-table__action-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--fui-text-secondary);border-radius:var(--fui-radius-sm);cursor:pointer;transition-property:color,background-color;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-advanced-data-table__action-button:hover:not(:disabled){color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-advanced-data-table__action-button:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-advanced-data-table__action-button:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-advanced-data-table--boxed .fui-advanced-data-table__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-radius-md)}.fui-advanced-data-table--boxed .fui-advanced-data-table__header-cell:last-child,.fui-advanced-data-table--boxed .fui-advanced-data-table__cell:last-child{border-right:none}.fui-advanced-data-table--boxed .fui-advanced-data-table__row:last-child .fui-advanced-data-table__cell{border-bottom:none}.fui-advanced-data-table--density-compact{--fui-table-row-height: 2rem;--fui-table-cell-padding-y: .25rem;--fui-table-cell-padding-x: .5rem}@media(max-width:768px){.fui-advanced-data-table__table{font-size:var(--fui-text-sm, .75rem)}.fui-advanced-data-table__header-cell,.fui-advanced-data-table__cell{padding:.25rem .5rem;max-width:200px}}\n"] }]
|
|
785
|
+
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], enableRowHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowHighlight", required: false }] }], enableDblClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDblClick", required: false }] }], rowClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClickable", required: false }] }], boxed: [{ type: i0.Input, args: [{ isSignal: true, alias: "boxed", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], tableAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableAriaLabel", required: false }] }], _liveAnnouncer: [{
|
|
717
786
|
type: ViewChild,
|
|
718
787
|
args: ['liveAnnouncer']
|
|
719
788
|
}], _scrollSentinel: [{
|
|
720
789
|
type: ViewChild,
|
|
721
790
|
args: ['scrollSentinel']
|
|
722
|
-
}], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], rowDblClick: [{ type: i0.Output, args: ["rowDblClick"] }] } });
|
|
791
|
+
}], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], rowDblClick: [{ type: i0.Output, args: ["rowDblClick"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }] } });
|
|
723
792
|
|
|
724
793
|
/**
|
|
725
794
|
* Generated bundle index. Do not edit.
|