invensys-ng 21.3.12 → 21.4.1
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/invensys-ng.mjs
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Output, Input, Component, ContentChildren, ElementRef, ViewChild, HostBinding, createComponent, Directive, Optional, Self, forwardRef, HostListener, ChangeDetectionStrategy, signal, inject, EnvironmentInjector, ApplicationRef, Injectable,
|
|
2
|
+
import { EventEmitter, Output, Input, Component, ContentChildren, ElementRef, ViewChild, HostBinding, createComponent, Directive, Optional, Self, forwardRef, HostListener, input, booleanAttribute, output, ChangeDetectionStrategy, signal, inject, EnvironmentInjector, ApplicationRef, Injectable, effect, InjectionToken, computed, ViewEncapsulation, ChangeDetectorRef, ViewChildren, Inject } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { NgClass, CommonModule, NgTemplateOutlet, NgStyle, DOCUMENT } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { FormsModule, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
|
|
7
|
-
import { take, takeUntil, switchMap, map } from 'rxjs/operators';
|
|
8
|
-
import { Subject, BehaviorSubject, of, forkJoin, filter } from 'rxjs';
|
|
9
7
|
import * as i2 from '@angular/router';
|
|
10
8
|
import { RouterLink, RouterLinkActive, NavigationEnd, RouterOutlet } from '@angular/router';
|
|
9
|
+
import { take, takeUntil, switchMap, map } from 'rxjs/operators';
|
|
10
|
+
import { Subject, BehaviorSubject, of, forkJoin, filter } from 'rxjs';
|
|
11
11
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
12
12
|
import { CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
|
|
13
13
|
import { Chart, registerables } from 'chart.js';
|
|
@@ -990,11 +990,11 @@ class IInputText {
|
|
|
990
990
|
inputElement.value = this.value;
|
|
991
991
|
}
|
|
992
992
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IInputText, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
993
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IInputText, isStandalone: true, selector: "i-input-text", inputs: { label: "label", type: "type", id: "id", fluid: "fluid", forceFloated: "forceFloated", hideText: "hideText", useFloatLabel: "useFloatLabel", placeholder: "placeholder", externalInvalid: "externalInvalid", externalErrorMessage: "externalErrorMessage", backgroundStyle: "backgroundStyle", icon: "icon", readonly: "readonly", disabled: "disabled", errorMessages: "errorMessages" }, ngImport: i0, template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n #inputElement\n [id]=\"id || componentId\"\n [type]=\"type\"\n [attr.aria-label]=\"!useFloatLabel ? label : null\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n @if (type === \"number\" && !disabled && !readonly) {\n <div class=\"i-input-spinners\">\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-up\"\n (click)=\"incrementNumber(inputElement)\"\n [attr.aria-label]=\"'Increment ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-up\"></i>\n </button>\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-down\"\n (click)=\"decrementNumber(inputElement)\"\n [attr.aria-label]=\"'Decrement ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-down\"></i>\n </button>\n </div>\n }\n </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input
|
|
993
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IInputText, isStandalone: true, selector: "i-input-text", inputs: { label: "label", type: "type", id: "id", fluid: "fluid", forceFloated: "forceFloated", hideText: "hideText", useFloatLabel: "useFloatLabel", placeholder: "placeholder", externalInvalid: "externalInvalid", externalErrorMessage: "externalErrorMessage", backgroundStyle: "backgroundStyle", icon: "icon", readonly: "readonly", disabled: "disabled", errorMessages: "errorMessages" }, ngImport: i0, template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n #inputElement\n [id]=\"id || componentId\"\n [type]=\"type\"\n [attr.aria-label]=\"!useFloatLabel ? label : null\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n @if (type === \"number\" && !disabled && !readonly) {\n <div class=\"i-input-spinners\">\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-up\"\n (click)=\"incrementNumber(inputElement)\"\n [attr.aria-label]=\"'Increment ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-up\"></i>\n </button>\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-down\"\n (click)=\"decrementNumber(inputElement)\"\n [attr.aria-label]=\"'Decrement ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-down\"></i>\n </button>\n </div>\n }\n </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:1em}.i-input-wrapper.i-input--fluid{width:100%}.i-input-wrapper.i-input--no-float{margin-top:0;height:auto}.i-input-wrapper .i-input-container{display:flex;align-items:center;gap:8px}.i-input-wrapper .i-input{box-sizing:border-box;width:100%;border-radius:4px;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}.i-input-wrapper .i-input:focus{outline:none}.i-input-wrapper .i-input.has-icon{padding-left:34px}.i-input-wrapper .i-input.hide-text{color:transparent;text-shadow:none;cursor:pointer}.i-input-wrapper .i-input.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent}.i-input-wrapper .i-input-icon-wrapper{position:relative;width:100%;display:flex}.i-input-wrapper .i-input-icon{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:inherit;pointer-events:none;transform:translateY(-50%)}.i-input-wrapper .float-label{position:relative;display:flex;align-items:stretch}.i-input-wrapper .float-label .i-input-icon{left:10px}.i-input-wrapper .float-label .i-input{padding:14px 10px}.i-input-wrapper .float-label .i-input.has-icon{padding-left:34px}.i-input-wrapper .float-label .i-label{position:absolute;top:14px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none}.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:focus)+.i-label,.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:not(:placeholder-shown))+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-input-wrapper .float-label.has-icon .i-input-icon-wrapper:not(:has(.i-input:focus)):not(:has(.i-input:not(:placeholder-shown)))+.i-label:not(.floated){left:34px}.i-input-wrapper .normal-input{position:relative}.i-input-wrapper .normal-input .i-input-icon{left:12px}.i-input-wrapper .normal-input .i-input{padding:8px 12px}.i-input-wrapper .normal-input .i-input.has-icon{padding-left:38px}.i-input-wrapper .i-input[type=number]{padding-right:32px}.i-input-wrapper .i-input[type=number]::-webkit-outer-spin-button,.i-input-wrapper .i-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.i-input-wrapper .i-input[type=number]{appearance:textfield;-moz-appearance:textfield}.i-input-wrapper .i-input-spinners{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}.i-input-wrapper .i-input-spinner-button{display:flex;align-items:center;justify-content:center;width:24px;height:16px;border:none;border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease;padding:0;font-size:10px}.i-input-wrapper .i-input-spinner-button i{font-size:10px;line-height:1}.i-input-wrapper .i-input-spinner-button:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }] });
|
|
994
994
|
}
|
|
995
995
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IInputText, decorators: [{
|
|
996
996
|
type: Component,
|
|
997
|
-
args: [{ selector: 'i-input-text', standalone: true, imports: [CommonModule, TooltipDirective], template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n #inputElement\n [id]=\"id || componentId\"\n [type]=\"type\"\n [attr.aria-label]=\"!useFloatLabel ? label : null\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n @if (type === \"number\" && !disabled && !readonly) {\n <div class=\"i-input-spinners\">\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-up\"\n (click)=\"incrementNumber(inputElement)\"\n [attr.aria-label]=\"'Increment ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-up\"></i>\n </button>\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-down\"\n (click)=\"decrementNumber(inputElement)\"\n [attr.aria-label]=\"'Decrement ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-down\"></i>\n </button>\n </div>\n }\n </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input
|
|
997
|
+
args: [{ selector: 'i-input-text', standalone: true, imports: [CommonModule, TooltipDirective], template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n #inputElement\n [id]=\"id || componentId\"\n [type]=\"type\"\n [attr.aria-label]=\"!useFloatLabel ? label : null\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n @if (type === \"number\" && !disabled && !readonly) {\n <div class=\"i-input-spinners\">\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-up\"\n (click)=\"incrementNumber(inputElement)\"\n [attr.aria-label]=\"'Increment ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-up\"></i>\n </button>\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-down\"\n (click)=\"decrementNumber(inputElement)\"\n [attr.aria-label]=\"'Decrement ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-down\"></i>\n </button>\n </div>\n }\n </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:1em}.i-input-wrapper.i-input--fluid{width:100%}.i-input-wrapper.i-input--no-float{margin-top:0;height:auto}.i-input-wrapper .i-input-container{display:flex;align-items:center;gap:8px}.i-input-wrapper .i-input{box-sizing:border-box;width:100%;border-radius:4px;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}.i-input-wrapper .i-input:focus{outline:none}.i-input-wrapper .i-input.has-icon{padding-left:34px}.i-input-wrapper .i-input.hide-text{color:transparent;text-shadow:none;cursor:pointer}.i-input-wrapper .i-input.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent}.i-input-wrapper .i-input-icon-wrapper{position:relative;width:100%;display:flex}.i-input-wrapper .i-input-icon{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:inherit;pointer-events:none;transform:translateY(-50%)}.i-input-wrapper .float-label{position:relative;display:flex;align-items:stretch}.i-input-wrapper .float-label .i-input-icon{left:10px}.i-input-wrapper .float-label .i-input{padding:14px 10px}.i-input-wrapper .float-label .i-input.has-icon{padding-left:34px}.i-input-wrapper .float-label .i-label{position:absolute;top:14px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none}.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:focus)+.i-label,.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:not(:placeholder-shown))+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-input-wrapper .float-label.has-icon .i-input-icon-wrapper:not(:has(.i-input:focus)):not(:has(.i-input:not(:placeholder-shown)))+.i-label:not(.floated){left:34px}.i-input-wrapper .normal-input{position:relative}.i-input-wrapper .normal-input .i-input-icon{left:12px}.i-input-wrapper .normal-input .i-input{padding:8px 12px}.i-input-wrapper .normal-input .i-input.has-icon{padding-left:38px}.i-input-wrapper .i-input[type=number]{padding-right:32px}.i-input-wrapper .i-input[type=number]::-webkit-outer-spin-button,.i-input-wrapper .i-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.i-input-wrapper .i-input[type=number]{appearance:textfield;-moz-appearance:textfield}.i-input-wrapper .i-input-spinners{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}.i-input-wrapper .i-input-spinner-button{display:flex;align-items:center;justify-content:center;width:24px;height:16px;border:none;border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease;padding:0;font-size:10px}.i-input-wrapper .i-input-spinner-button i{font-size:10px;line-height:1}.i-input-wrapper .i-input-spinner-button:focus{outline:none}\n"] }]
|
|
998
998
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
999
999
|
type: Optional
|
|
1000
1000
|
}, {
|
|
@@ -1669,6 +1669,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1669
1669
|
type: Output
|
|
1670
1670
|
}] } });
|
|
1671
1671
|
|
|
1672
|
+
/**
|
|
1673
|
+
* An interactive i-card with native keyboard, focus, and navigation behaviour.
|
|
1674
|
+
* Use (clicked) for actions, or [routerLink] for navigation. Project display
|
|
1675
|
+
* content only: links, buttons and form controls belong outside the card button.
|
|
1676
|
+
*
|
|
1677
|
+
* @example
|
|
1678
|
+
* <i-card-button [selected]="activeTool() === 'password'"
|
|
1679
|
+
* ariaControls="password-panel" (clicked)="activeTool.set('password')">
|
|
1680
|
+
* <h2>Add password</h2><p>Protect your PDFs.</p>
|
|
1681
|
+
* </i-card-button>
|
|
1682
|
+
* <i-card-button routerLink="/reports"><h2>Reports</h2></i-card-button>
|
|
1683
|
+
*/
|
|
1684
|
+
class ICardButton {
|
|
1685
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1686
|
+
fullHeight = input(false, { ...(ngDevMode ? { debugName: "fullHeight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1687
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1688
|
+
/** Set to true/false for toggle buttons; null omits aria-pressed. */
|
|
1689
|
+
selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
1690
|
+
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1691
|
+
ariaControls = input(...(ngDevMode ? [undefined, { debugName: "ariaControls" }] : /* istanbul ignore next */ []));
|
|
1692
|
+
/** Providing a route renders a native anchor with Angular RouterLink. */
|
|
1693
|
+
routerLink = input(null, ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
|
|
1694
|
+
queryParams = input(null, ...(ngDevMode ? [{ debugName: "queryParams" }] : /* istanbul ignore next */ []));
|
|
1695
|
+
fragment = input(...(ngDevMode ? [undefined, { debugName: "fragment" }] : /* istanbul ignore next */ []));
|
|
1696
|
+
target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : /* istanbul ignore next */ []));
|
|
1697
|
+
clicked = output();
|
|
1698
|
+
activate(event) {
|
|
1699
|
+
if (this.disabled()) {
|
|
1700
|
+
event.preventDefault();
|
|
1701
|
+
event.stopImmediatePropagation();
|
|
1702
|
+
return;
|
|
1703
|
+
}
|
|
1704
|
+
this.clicked.emit(event);
|
|
1705
|
+
}
|
|
1706
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ICardButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1707
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ICardButton, isStandalone: true, selector: "i-card-button", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, fragment: { classPropertyName: "fragment", publicName: "fragment", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.i-card-button--full-height": "fullHeight()" } }, ngImport: i0, template: "<ng-template #card>\n <i-card [title]=\"title()\" [fullHeight]=\"fullHeight()\">\n <ng-content select=\"[slot=header]\" ngProjectAs=\"[slot=header]\">\n @if (title()) { <span class=\"i-card-title\">{{ title() }}</span> }\n </ng-content>\n <ng-content />\n <ng-content select=\"[slot=footer]\" ngProjectAs=\"[slot=footer]\" />\n </i-card>\n</ng-template>\n\n@if (routerLink() !== null) {\n <a class=\"i-card-button\" [class.i-card-button--selected]=\"selected()\"\n [routerLink]=\"disabled() ? null : routerLink()\" [queryParams]=\"queryParams()\"\n [fragment]=\"fragment()\" [target]=\"target()\"\n [attr.aria-label]=\"ariaLabel()\" [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-current]=\"selected() ? 'page' : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.tabindex]=\"disabled() ? -1 : null\" (click)=\"activate($event)\">\n <ng-container [ngTemplateOutlet]=\"card\" />\n </a>\n} @else {\n <button type=\"button\" class=\"i-card-button\" [class.i-card-button--selected]=\"selected()\"\n [disabled]=\"disabled()\" [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-controls]=\"ariaControls()\" [attr.aria-pressed]=\"selected()\"\n (click)=\"activate($event)\">\n <ng-container [ngTemplateOutlet]=\"card\" />\n </button>\n}\n", styles: [":host{display:block;min-width:0}:host(.i-card-button--full-height){height:100%}:host(.i-card-button--full-height) .i-card-button{height:100%}.i-card-title{padding-left:12px;font-size:1.5em;font-weight:600}.i-card-button{display:block;box-sizing:border-box;width:100%;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--color-text-primary);font:inherit;text-align:inherit;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.i-card-button:hover:not(:disabled):not([aria-disabled=true]){transform:translateY(-4px);box-shadow:0 2px 10px #0003;border-color:var(--surface-border)}.i-card-button:hover:not(:disabled):not([aria-disabled=true]).i-card-button--selected{border-color:var(--color-primary)}.i-card-button.i-card-button--selected{border-color:var(--color-primary)}.i-card-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}.i-card-button:disabled,.i-card-button[aria-disabled=true]{cursor:default;opacity:.65}@media(prefers-reduced-motion:reduce){.i-card-button{transition:none}.i-card-button:hover:not(:disabled):not([aria-disabled=true]){transform:none}}\n"], dependencies: [{ kind: "component", type: ICard, selector: "i-card", inputs: ["title", "closable", "fullHeight"], outputs: ["closeCard"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1708
|
+
}
|
|
1709
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ICardButton, decorators: [{
|
|
1710
|
+
type: Component,
|
|
1711
|
+
args: [{ selector: 'i-card-button', imports: [ICard, NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.i-card-button--full-height]': 'fullHeight()' }, template: "<ng-template #card>\n <i-card [title]=\"title()\" [fullHeight]=\"fullHeight()\">\n <ng-content select=\"[slot=header]\" ngProjectAs=\"[slot=header]\">\n @if (title()) { <span class=\"i-card-title\">{{ title() }}</span> }\n </ng-content>\n <ng-content />\n <ng-content select=\"[slot=footer]\" ngProjectAs=\"[slot=footer]\" />\n </i-card>\n</ng-template>\n\n@if (routerLink() !== null) {\n <a class=\"i-card-button\" [class.i-card-button--selected]=\"selected()\"\n [routerLink]=\"disabled() ? null : routerLink()\" [queryParams]=\"queryParams()\"\n [fragment]=\"fragment()\" [target]=\"target()\"\n [attr.aria-label]=\"ariaLabel()\" [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-current]=\"selected() ? 'page' : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.tabindex]=\"disabled() ? -1 : null\" (click)=\"activate($event)\">\n <ng-container [ngTemplateOutlet]=\"card\" />\n </a>\n} @else {\n <button type=\"button\" class=\"i-card-button\" [class.i-card-button--selected]=\"selected()\"\n [disabled]=\"disabled()\" [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-controls]=\"ariaControls()\" [attr.aria-pressed]=\"selected()\"\n (click)=\"activate($event)\">\n <ng-container [ngTemplateOutlet]=\"card\" />\n </button>\n}\n", styles: [":host{display:block;min-width:0}:host(.i-card-button--full-height){height:100%}:host(.i-card-button--full-height) .i-card-button{height:100%}.i-card-title{padding-left:12px;font-size:1.5em;font-weight:600}.i-card-button{display:block;box-sizing:border-box;width:100%;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--color-text-primary);font:inherit;text-align:inherit;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.i-card-button:hover:not(:disabled):not([aria-disabled=true]){transform:translateY(-4px);box-shadow:0 2px 10px #0003;border-color:var(--surface-border)}.i-card-button:hover:not(:disabled):not([aria-disabled=true]).i-card-button--selected{border-color:var(--color-primary)}.i-card-button.i-card-button--selected{border-color:var(--color-primary)}.i-card-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}.i-card-button:disabled,.i-card-button[aria-disabled=true]{cursor:default;opacity:.65}@media(prefers-reduced-motion:reduce){.i-card-button{transition:none}.i-card-button:hover:not(:disabled):not([aria-disabled=true]){transform:none}}\n"] }]
|
|
1712
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], fragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "fragment", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
1713
|
+
|
|
1672
1714
|
/**
|
|
1673
1715
|
* Checkbox Component
|
|
1674
1716
|
*
|
|
@@ -2101,11 +2143,11 @@ class IChipsComponent {
|
|
|
2101
2143
|
this.closedAll.emit();
|
|
2102
2144
|
}
|
|
2103
2145
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChipsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2104
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChipsComponent, isStandalone: true, selector: "i-chips", inputs: { chips: "chips", removable: "removable", disabled: "disabled", collapseOnOverflow: "collapseOnOverflow", overflowLabel: "overflowLabel", boxed: "boxed", allowCloseAll: "allowCloseAll", label: "label", useFloatLabel: "useFloatLabel", showError: "showError" }, outputs: { closedAll: "closedAll", removeChip: "removeChip" }, viewQueries: [{ propertyName: "chipsViewportRef", first: true, predicate: ["chipsViewport"], descendants: true }, { propertyName: "chipsListRef", first: true, predicate: ["chipsList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"i-chips-wrapper\"\n [class.i-chips-wrapper--float]=\"useFloatLabel\"\n [class.i-chips-wrapper--error]=\"showError\"\n [attr.id]=\"componentId\"\n>\n <div\n class=\"i-chips-container\"\n #chipsViewport\n [class.i-chips-container--collapse]=\"collapseOnOverflow\"\n [class.i-chips-container--overflow]=\"collapseOnOverflow && chipsOverflow\"\n [class.i-chips-box]=\"boxed\"\n [class.i-chips--disabled]=\"disabled\"\n [class.i-chips--empty]=\"!chips || chips.length === 0\"\n [attr.tabindex]=\"boxed && !disabled ? 0 : null\"\n >\n <div class=\"i-chips-list\" #chipsList>\n @for (chip of chips; track trackByValue($index, chip)) {\n <i-chip\n [label]=\"chip.label\"\n [icon]=\"chip.icon\"\n [removable]=\"chip.removable ?? removable\"\n [disabled]=\"disabled || !!chip.disabled\"\n (onRemove)=\"onChipRemove(chip, $event)\"\n ></i-chip>\n }\n </div>\n\n @if (allowCloseAll && chips && chips.length > 0) {\n <div class=\"i-chips-actions\">\n <i-button\n [text]=\"true\"\n [size]=\"'xtra-small'\"\n [severity]=\"'contrast'\"\n [icon]=\"'pi pi-times'\"\n (clicked)=\"onCloseAllClicked($event)\"\n ></i-button>\n </div>\n }\n @if (collapseOnOverflow && chipsOverflow) {\n <div class=\"i-chips-summary\">\n {{ overflowText }}\n </div>\n }\n </div>\n\n @if (useFloatLabel && label) {\n <label\n class=\"i-chips-label\"\n [class.i-chips-label--floated]=\"chips && chips.length > 0\"\n [class.i-chips-label--error]=\"showError\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--
|
|
2146
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChipsComponent, isStandalone: true, selector: "i-chips", inputs: { chips: "chips", removable: "removable", disabled: "disabled", collapseOnOverflow: "collapseOnOverflow", overflowLabel: "overflowLabel", boxed: "boxed", allowCloseAll: "allowCloseAll", label: "label", useFloatLabel: "useFloatLabel", showError: "showError" }, outputs: { closedAll: "closedAll", removeChip: "removeChip" }, viewQueries: [{ propertyName: "chipsViewportRef", first: true, predicate: ["chipsViewport"], descendants: true }, { propertyName: "chipsListRef", first: true, predicate: ["chipsList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"i-chips-wrapper\"\n [class.i-chips-wrapper--float]=\"useFloatLabel\"\n [class.i-chips-wrapper--error]=\"showError\"\n [attr.id]=\"componentId\"\n>\n <div\n class=\"i-chips-container\"\n #chipsViewport\n [class.i-chips-container--collapse]=\"collapseOnOverflow\"\n [class.i-chips-container--overflow]=\"collapseOnOverflow && chipsOverflow\"\n [class.i-chips-box]=\"boxed\"\n [class.i-chips--disabled]=\"disabled\"\n [class.i-chips--empty]=\"!chips || chips.length === 0\"\n [attr.tabindex]=\"boxed && !disabled ? 0 : null\"\n >\n <div class=\"i-chips-list\" #chipsList>\n @for (chip of chips; track trackByValue($index, chip)) {\n <i-chip\n [label]=\"chip.label\"\n [icon]=\"chip.icon\"\n [removable]=\"chip.removable ?? removable\"\n [disabled]=\"disabled || !!chip.disabled\"\n (onRemove)=\"onChipRemove(chip, $event)\"\n ></i-chip>\n }\n </div>\n\n @if (allowCloseAll && chips && chips.length > 0) {\n <div class=\"i-chips-actions\">\n <i-button\n [text]=\"true\"\n [size]=\"'xtra-small'\"\n [severity]=\"'contrast'\"\n [icon]=\"'pi pi-times'\"\n (clicked)=\"onCloseAllClicked($event)\"\n ></i-button>\n </div>\n }\n @if (collapseOnOverflow && chipsOverflow) {\n <div class=\"i-chips-summary\">\n {{ overflowText }}\n </div>\n }\n </div>\n\n @if (useFloatLabel && label) {\n <label\n class=\"i-chips-label\"\n [class.i-chips-label--floated]=\"chips && chips.length > 0\"\n [class.i-chips-label--error]=\"showError\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}:host{display:block;width:100%}.i-chips-wrapper{position:relative;width:100%}.i-chips-wrapper--float{margin-top:1.5em}.i-chips-wrapper--float .i-chips-label{position:absolute;top:14px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none}.i-chips-wrapper--float .i-chips-label--floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-chips-wrapper--float .i-chips-container:focus-within+.i-chips-label{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-chips-container{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;width:100%;min-height:32px}.i-chips-container--collapse{flex-wrap:nowrap;overflow:hidden}.i-chips-container--collapse .i-chips-list{white-space:nowrap;max-width:100%;min-width:0}.i-chips-container--overflow .i-chips-list{visibility:hidden}.i-chips-container .i-chips-list{display:flex;flex-wrap:inherit;gap:inherit;width:100%;padding-right:40px}.i-chips-container .i-chips-summary{position:absolute;inset:0 40px 0 0;display:flex;align-items:center;padding:0 16px;background:inherit}.i-chips-container .i-chips-actions{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.i-chips-box{box-sizing:border-box;border-radius:4px;padding:9px 12px;min-height:42px;align-items:center;transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer}.i-chips-box:focus{outline:none}.i-chips-box.i-chips-container--collapse{padding-right:40px}\n"], dependencies: [{ kind: "component", type: IChip, selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2105
2147
|
}
|
|
2106
2148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChipsComponent, decorators: [{
|
|
2107
2149
|
type: Component,
|
|
2108
|
-
args: [{ selector: 'i-chips', standalone: true, imports: [IChip, IButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"i-chips-wrapper\"\n [class.i-chips-wrapper--float]=\"useFloatLabel\"\n [class.i-chips-wrapper--error]=\"showError\"\n [attr.id]=\"componentId\"\n>\n <div\n class=\"i-chips-container\"\n #chipsViewport\n [class.i-chips-container--collapse]=\"collapseOnOverflow\"\n [class.i-chips-container--overflow]=\"collapseOnOverflow && chipsOverflow\"\n [class.i-chips-box]=\"boxed\"\n [class.i-chips--disabled]=\"disabled\"\n [class.i-chips--empty]=\"!chips || chips.length === 0\"\n [attr.tabindex]=\"boxed && !disabled ? 0 : null\"\n >\n <div class=\"i-chips-list\" #chipsList>\n @for (chip of chips; track trackByValue($index, chip)) {\n <i-chip\n [label]=\"chip.label\"\n [icon]=\"chip.icon\"\n [removable]=\"chip.removable ?? removable\"\n [disabled]=\"disabled || !!chip.disabled\"\n (onRemove)=\"onChipRemove(chip, $event)\"\n ></i-chip>\n }\n </div>\n\n @if (allowCloseAll && chips && chips.length > 0) {\n <div class=\"i-chips-actions\">\n <i-button\n [text]=\"true\"\n [size]=\"'xtra-small'\"\n [severity]=\"'contrast'\"\n [icon]=\"'pi pi-times'\"\n (clicked)=\"onCloseAllClicked($event)\"\n ></i-button>\n </div>\n }\n @if (collapseOnOverflow && chipsOverflow) {\n <div class=\"i-chips-summary\">\n {{ overflowText }}\n </div>\n }\n </div>\n\n @if (useFloatLabel && label) {\n <label\n class=\"i-chips-label\"\n [class.i-chips-label--floated]=\"chips && chips.length > 0\"\n [class.i-chips-label--error]=\"showError\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--
|
|
2150
|
+
args: [{ selector: 'i-chips', standalone: true, imports: [IChip, IButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"i-chips-wrapper\"\n [class.i-chips-wrapper--float]=\"useFloatLabel\"\n [class.i-chips-wrapper--error]=\"showError\"\n [attr.id]=\"componentId\"\n>\n <div\n class=\"i-chips-container\"\n #chipsViewport\n [class.i-chips-container--collapse]=\"collapseOnOverflow\"\n [class.i-chips-container--overflow]=\"collapseOnOverflow && chipsOverflow\"\n [class.i-chips-box]=\"boxed\"\n [class.i-chips--disabled]=\"disabled\"\n [class.i-chips--empty]=\"!chips || chips.length === 0\"\n [attr.tabindex]=\"boxed && !disabled ? 0 : null\"\n >\n <div class=\"i-chips-list\" #chipsList>\n @for (chip of chips; track trackByValue($index, chip)) {\n <i-chip\n [label]=\"chip.label\"\n [icon]=\"chip.icon\"\n [removable]=\"chip.removable ?? removable\"\n [disabled]=\"disabled || !!chip.disabled\"\n (onRemove)=\"onChipRemove(chip, $event)\"\n ></i-chip>\n }\n </div>\n\n @if (allowCloseAll && chips && chips.length > 0) {\n <div class=\"i-chips-actions\">\n <i-button\n [text]=\"true\"\n [size]=\"'xtra-small'\"\n [severity]=\"'contrast'\"\n [icon]=\"'pi pi-times'\"\n (clicked)=\"onCloseAllClicked($event)\"\n ></i-button>\n </div>\n }\n @if (collapseOnOverflow && chipsOverflow) {\n <div class=\"i-chips-summary\">\n {{ overflowText }}\n </div>\n }\n </div>\n\n @if (useFloatLabel && label) {\n <label\n class=\"i-chips-label\"\n [class.i-chips-label--floated]=\"chips && chips.length > 0\"\n [class.i-chips-label--error]=\"showError\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}:host{display:block;width:100%}.i-chips-wrapper{position:relative;width:100%}.i-chips-wrapper--float{margin-top:1.5em}.i-chips-wrapper--float .i-chips-label{position:absolute;top:14px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none}.i-chips-wrapper--float .i-chips-label--floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-chips-wrapper--float .i-chips-container:focus-within+.i-chips-label{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-chips-container{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;width:100%;min-height:32px}.i-chips-container--collapse{flex-wrap:nowrap;overflow:hidden}.i-chips-container--collapse .i-chips-list{white-space:nowrap;max-width:100%;min-width:0}.i-chips-container--overflow .i-chips-list{visibility:hidden}.i-chips-container .i-chips-list{display:flex;flex-wrap:inherit;gap:inherit;width:100%;padding-right:40px}.i-chips-container .i-chips-summary{position:absolute;inset:0 40px 0 0;display:flex;align-items:center;padding:0 16px;background:inherit}.i-chips-container .i-chips-actions{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.i-chips-box{box-sizing:border-box;border-radius:4px;padding:9px 12px;min-height:42px;align-items:center;transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer}.i-chips-box:focus{outline:none}.i-chips-box.i-chips-container--collapse{padding-right:40px}\n"] }]
|
|
2109
2151
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { chips: [{
|
|
2110
2152
|
type: Input
|
|
2111
2153
|
}], removable: [{
|
|
@@ -2266,6 +2308,8 @@ class ConfirmationDialogComponent {
|
|
|
2266
2308
|
this.message.set(this.config.data?.message || '');
|
|
2267
2309
|
this.header.set(this.config.data?.header || 'Are you sure?');
|
|
2268
2310
|
this.severity.set(this.config.data?.severity || 'primary');
|
|
2311
|
+
this.acceptLabel = this.config.data?.acceptLabel || 'Confirm';
|
|
2312
|
+
this.rejectLabel = this.config.data?.rejectLabel || 'Cancel';
|
|
2269
2313
|
}
|
|
2270
2314
|
/**
|
|
2271
2315
|
* Handles confirm button click
|
|
@@ -2822,6 +2866,8 @@ class ConfirmationDialogService {
|
|
|
2822
2866
|
message: config.message,
|
|
2823
2867
|
header: config.header,
|
|
2824
2868
|
severity: config.severity || 'primary',
|
|
2869
|
+
acceptLabel: this.acceptLabel,
|
|
2870
|
+
rejectLabel: this.rejectLabel,
|
|
2825
2871
|
},
|
|
2826
2872
|
});
|
|
2827
2873
|
// Subscribe to dialog close event to execute callbacks
|
|
@@ -3207,11 +3253,11 @@ class IFileUpload {
|
|
|
3207
3253
|
this.validationError.emit(error);
|
|
3208
3254
|
}
|
|
3209
3255
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3210
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IFileUpload, isStandalone: true, selector: "i-file-upload", inputs: { files: "files", options: "options", disabled: "disabled", dropLabel: "dropLabel", description: "description", chooseLabel: "chooseLabel", ariaLabel: "ariaLabel", uploadIcon: "uploadIcon", fileIcon: "fileIcon" }, outputs: { filesChange: "filesChange", validationError: "validationError" }, ngImport: i0, template: "<div class=\"i-file-upload\" [class.i-file-upload--disabled]=\"disabled\">\n <div class=\"i-file-upload__drop-zone\" [class.i-file-upload__drop-zone--active]=\"dragging && !disabled\"\n (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n <i [class]=\"uploadIcon + ' i-file-upload__icon'\" aria-hidden=\"true\"></i>\n <strong>{{ dropLabel }}</strong>\n <span class=\"i-file-upload__description\">{{ description }}</span>\n <input #fileInput type=\"file\" hidden [multiple]=\"limits.multiple\" [accept]=\"accept\"\n [disabled]=\"disabled\" (change)=\"onSelect($event)\" [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"componentId + '-limits'\" />\n <i-button icon=\"pi pi-plus\" [outlined]=\"true\" [disabled]=\"disabled\" [ariaLabel]=\"ariaLabel\"\n (clicked)=\"fileInput.click()\">{{ chooseLabel }}</i-button>\n <small [id]=\"componentId + '-limits'\" class=\"i-file-upload__description\">{{ limitsLabel }}</small>\n @if (accept) {\n <small class=\"i-file-upload__description\">Accepted types: {{ accept }}</small>\n }\n </div>\n @if (error) {\n <i-message severity=\"danger\" role=\"alert\">{{ error.message }}</i-message>\n }\n <div class=\"i-file-upload__list\" aria-live=\"polite\" aria-relevant=\"additions removals text\">\n @if (files.length) {\n <strong>{{ files.length }} file{{ files.length === 1 ? '' : 's' }} selected</strong>\n @for (file of files; track $index) {\n <div class=\"i-file-upload__row\">\n <i [class]=\"fileIcon\" aria-hidden=\"true\"></i>\n <span class=\"i-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n <small class=\"i-file-upload__description\">{{ formatSize(file.size) }}</small>\n <i-button icon=\"pi pi-times\" [text]=\"true\" size=\"small\" [ariaLabel]=\"'Remove ' + file.name\"\n [disabled]=\"disabled\" (clicked)=\"remove($index)\" />\n </div>\n }\n }\n </div>\n</div>\n", styles: [".i-file-upload{color:var(--color-text-primary)}.i-file-upload__drop-zone{border-color:var(--surface-border);background:var(--
|
|
3256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IFileUpload, isStandalone: true, selector: "i-file-upload", inputs: { files: "files", options: "options", disabled: "disabled", dropLabel: "dropLabel", description: "description", chooseLabel: "chooseLabel", ariaLabel: "ariaLabel", uploadIcon: "uploadIcon", fileIcon: "fileIcon" }, outputs: { filesChange: "filesChange", validationError: "validationError" }, ngImport: i0, template: "<div class=\"i-file-upload\" [class.i-file-upload--disabled]=\"disabled\">\n <div class=\"i-file-upload__drop-zone\" [class.i-file-upload__drop-zone--active]=\"dragging && !disabled\"\n (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n <i [class]=\"uploadIcon + ' i-file-upload__icon'\" aria-hidden=\"true\"></i>\n <strong>{{ dropLabel }}</strong>\n <span class=\"i-file-upload__description\">{{ description }}</span>\n <input #fileInput type=\"file\" hidden [multiple]=\"limits.multiple\" [accept]=\"accept\"\n [disabled]=\"disabled\" (change)=\"onSelect($event)\" [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"componentId + '-limits'\" />\n <i-button icon=\"pi pi-plus\" [outlined]=\"true\" [disabled]=\"disabled\" [ariaLabel]=\"ariaLabel\"\n (clicked)=\"fileInput.click()\">{{ chooseLabel }}</i-button>\n <small [id]=\"componentId + '-limits'\" class=\"i-file-upload__description\">{{ limitsLabel }}</small>\n @if (accept) {\n <small class=\"i-file-upload__description\">Accepted types: {{ accept }}</small>\n }\n </div>\n @if (error) {\n <i-message severity=\"danger\" role=\"alert\">{{ error.message }}</i-message>\n }\n <div class=\"i-file-upload__list\" aria-live=\"polite\" aria-relevant=\"additions removals text\">\n @if (files.length) {\n <strong>{{ files.length }} file{{ files.length === 1 ? '' : 's' }} selected</strong>\n @for (file of files; track $index) {\n <div class=\"i-file-upload__row\">\n <i [class]=\"fileIcon\" aria-hidden=\"true\"></i>\n <span class=\"i-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n <small class=\"i-file-upload__description\">{{ formatSize(file.size) }}</small>\n <i-button icon=\"pi pi-times\" [text]=\"true\" size=\"small\" [ariaLabel]=\"'Remove ' + file.name\"\n [disabled]=\"disabled\" (clicked)=\"remove($index)\" />\n </div>\n }\n }\n </div>\n</div>\n", styles: [".i-file-upload{color:var(--color-text-primary)}.i-file-upload__drop-zone{border-color:var(--surface-border);background:var(--surface-card)}.i-file-upload__drop-zone--active,.i-file-upload__drop-zone:focus-within{border-color:var(--color-primary);background:var(--surface-hover)}.i-file-upload__icon,.i-file-upload__row>i{color:var(--color-primary)}.i-file-upload__description{color:var(--color-text-secondary)}.i-file-upload__row{border-color:var(--surface-border)}.i-file-upload--disabled .i-file-upload__drop-zone{background:var(--color-disabled-background);border-color:var(--color-disabled-border)}:host{display:block}.i-file-upload{display:flex;flex-direction:column;gap:1rem}.i-file-upload__drop-zone{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem 1rem;text-align:center;border-width:2px;border-style:dashed;border-radius:8px;transition:border-color .2s,background .2s}.i-file-upload__icon{font-size:2rem}.i-file-upload--disabled .i-file-upload__drop-zone{opacity:.65}.i-file-upload__list{display:flex;flex-direction:column;gap:.5rem}.i-file-upload__row{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-bottom-width:1px;border-bottom-style:solid}.i-file-upload__row small{white-space:nowrap}.i-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: IMessage, selector: "i-message", inputs: ["severity", "size", "icon", "closable", "visible"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3211
3257
|
}
|
|
3212
3258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IFileUpload, decorators: [{
|
|
3213
3259
|
type: Component,
|
|
3214
|
-
args: [{ selector: 'i-file-upload', standalone: true, imports: [IButton, IMessage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"i-file-upload\" [class.i-file-upload--disabled]=\"disabled\">\n <div class=\"i-file-upload__drop-zone\" [class.i-file-upload__drop-zone--active]=\"dragging && !disabled\"\n (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n <i [class]=\"uploadIcon + ' i-file-upload__icon'\" aria-hidden=\"true\"></i>\n <strong>{{ dropLabel }}</strong>\n <span class=\"i-file-upload__description\">{{ description }}</span>\n <input #fileInput type=\"file\" hidden [multiple]=\"limits.multiple\" [accept]=\"accept\"\n [disabled]=\"disabled\" (change)=\"onSelect($event)\" [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"componentId + '-limits'\" />\n <i-button icon=\"pi pi-plus\" [outlined]=\"true\" [disabled]=\"disabled\" [ariaLabel]=\"ariaLabel\"\n (clicked)=\"fileInput.click()\">{{ chooseLabel }}</i-button>\n <small [id]=\"componentId + '-limits'\" class=\"i-file-upload__description\">{{ limitsLabel }}</small>\n @if (accept) {\n <small class=\"i-file-upload__description\">Accepted types: {{ accept }}</small>\n }\n </div>\n @if (error) {\n <i-message severity=\"danger\" role=\"alert\">{{ error.message }}</i-message>\n }\n <div class=\"i-file-upload__list\" aria-live=\"polite\" aria-relevant=\"additions removals text\">\n @if (files.length) {\n <strong>{{ files.length }} file{{ files.length === 1 ? '' : 's' }} selected</strong>\n @for (file of files; track $index) {\n <div class=\"i-file-upload__row\">\n <i [class]=\"fileIcon\" aria-hidden=\"true\"></i>\n <span class=\"i-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n <small class=\"i-file-upload__description\">{{ formatSize(file.size) }}</small>\n <i-button icon=\"pi pi-times\" [text]=\"true\" size=\"small\" [ariaLabel]=\"'Remove ' + file.name\"\n [disabled]=\"disabled\" (clicked)=\"remove($index)\" />\n </div>\n }\n }\n </div>\n</div>\n", styles: [".i-file-upload{color:var(--color-text-primary)}.i-file-upload__drop-zone{border-color:var(--surface-border);background:var(--
|
|
3260
|
+
args: [{ selector: 'i-file-upload', standalone: true, imports: [IButton, IMessage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"i-file-upload\" [class.i-file-upload--disabled]=\"disabled\">\n <div class=\"i-file-upload__drop-zone\" [class.i-file-upload__drop-zone--active]=\"dragging && !disabled\"\n (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n <i [class]=\"uploadIcon + ' i-file-upload__icon'\" aria-hidden=\"true\"></i>\n <strong>{{ dropLabel }}</strong>\n <span class=\"i-file-upload__description\">{{ description }}</span>\n <input #fileInput type=\"file\" hidden [multiple]=\"limits.multiple\" [accept]=\"accept\"\n [disabled]=\"disabled\" (change)=\"onSelect($event)\" [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"componentId + '-limits'\" />\n <i-button icon=\"pi pi-plus\" [outlined]=\"true\" [disabled]=\"disabled\" [ariaLabel]=\"ariaLabel\"\n (clicked)=\"fileInput.click()\">{{ chooseLabel }}</i-button>\n <small [id]=\"componentId + '-limits'\" class=\"i-file-upload__description\">{{ limitsLabel }}</small>\n @if (accept) {\n <small class=\"i-file-upload__description\">Accepted types: {{ accept }}</small>\n }\n </div>\n @if (error) {\n <i-message severity=\"danger\" role=\"alert\">{{ error.message }}</i-message>\n }\n <div class=\"i-file-upload__list\" aria-live=\"polite\" aria-relevant=\"additions removals text\">\n @if (files.length) {\n <strong>{{ files.length }} file{{ files.length === 1 ? '' : 's' }} selected</strong>\n @for (file of files; track $index) {\n <div class=\"i-file-upload__row\">\n <i [class]=\"fileIcon\" aria-hidden=\"true\"></i>\n <span class=\"i-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n <small class=\"i-file-upload__description\">{{ formatSize(file.size) }}</small>\n <i-button icon=\"pi pi-times\" [text]=\"true\" size=\"small\" [ariaLabel]=\"'Remove ' + file.name\"\n [disabled]=\"disabled\" (clicked)=\"remove($index)\" />\n </div>\n }\n }\n </div>\n</div>\n", styles: [".i-file-upload{color:var(--color-text-primary)}.i-file-upload__drop-zone{border-color:var(--surface-border);background:var(--surface-card)}.i-file-upload__drop-zone--active,.i-file-upload__drop-zone:focus-within{border-color:var(--color-primary);background:var(--surface-hover)}.i-file-upload__icon,.i-file-upload__row>i{color:var(--color-primary)}.i-file-upload__description{color:var(--color-text-secondary)}.i-file-upload__row{border-color:var(--surface-border)}.i-file-upload--disabled .i-file-upload__drop-zone{background:var(--color-disabled-background);border-color:var(--color-disabled-border)}:host{display:block}.i-file-upload{display:flex;flex-direction:column;gap:1rem}.i-file-upload__drop-zone{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem 1rem;text-align:center;border-width:2px;border-style:dashed;border-radius:8px;transition:border-color .2s,background .2s}.i-file-upload__icon{font-size:2rem}.i-file-upload--disabled .i-file-upload__drop-zone{opacity:.65}.i-file-upload__list{display:flex;flex-direction:column;gap:.5rem}.i-file-upload__row{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-bottom-width:1px;border-bottom-style:solid}.i-file-upload__row small{white-space:nowrap}.i-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
3215
3261
|
}], propDecorators: { files: [{
|
|
3216
3262
|
type: Input
|
|
3217
3263
|
}], options: [{
|
|
@@ -3516,11 +3562,11 @@ class ITextarea {
|
|
|
3516
3562
|
return this.currentLength >= this.maxLength;
|
|
3517
3563
|
}
|
|
3518
3564
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITextarea, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3519
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITextarea, isStandalone: true, selector: "i-textarea", inputs: { label: "label", id: "id", fluid: "fluid", forceFloated: "forceFloated", useFloatLabel: "useFloatLabel", placeholder: "placeholder", rows: "rows", maxLength: "maxLength", resizable: "resizable", readonly: "readonly", disabled: "disabled", externalInvalid: "externalInvalid", externalErrorMessage: "externalErrorMessage", backgroundStyle: "backgroundStyle", errorMessages: "errorMessages", charCountWarnAt: "charCountWarnAt" }, ngImport: i0, template: "<div\n class=\"i-textarea-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-textarea--fluid]=\"fluid\"\n [class.i-textarea--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-textarea-container\"\n >\n <div class=\"i-textarea-icon-wrapper\">\n <textarea\n #textareaElement\n [id]=\"id || componentId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [rows]=\"rows\"\n [attr.maxlength]=\"maxLength || null\"\n [value]=\"value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-textarea\"\n [class.readonly]=\"readonly\"\n [class.no-resize]=\"!resizable\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n ></textarea>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-textarea-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <div class=\"i-textarea-footer\">\n @if (showErrors && getErrorMessage()) {\n <span class=\"i-error\">{{ getErrorMessage() }}</span>\n }\n @if (maxLength) {\n <span\n class=\"i-char-count\"\n [class.i-char-count--warn]=\"charCountWarning\"\n [class.i-char-count--over]=\"charCountOver\"\n >\n {{ currentLength }}/{{ maxLength }}\n </span>\n }\n </div>\n</div>\n", styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea
|
|
3565
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITextarea, isStandalone: true, selector: "i-textarea", inputs: { label: "label", id: "id", fluid: "fluid", forceFloated: "forceFloated", useFloatLabel: "useFloatLabel", placeholder: "placeholder", rows: "rows", maxLength: "maxLength", resizable: "resizable", readonly: "readonly", disabled: "disabled", externalInvalid: "externalInvalid", externalErrorMessage: "externalErrorMessage", backgroundStyle: "backgroundStyle", errorMessages: "errorMessages", charCountWarnAt: "charCountWarnAt" }, ngImport: i0, template: "<div\n class=\"i-textarea-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-textarea--fluid]=\"fluid\"\n [class.i-textarea--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-textarea-container\"\n >\n <div class=\"i-textarea-icon-wrapper\">\n <textarea\n #textareaElement\n [id]=\"id || componentId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [rows]=\"rows\"\n [attr.maxlength]=\"maxLength || null\"\n [value]=\"value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-textarea\"\n [class.readonly]=\"readonly\"\n [class.no-resize]=\"!resizable\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n ></textarea>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-textarea-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <div class=\"i-textarea-footer\">\n @if (showErrors && getErrorMessage()) {\n <span class=\"i-error\">{{ getErrorMessage() }}</span>\n }\n @if (maxLength) {\n <span\n class=\"i-char-count\"\n [class.i-char-count--warn]=\"charCountWarning\"\n [class.i-char-count--over]=\"charCountOver\"\n >\n {{ currentLength }}/{{ maxLength }}\n </span>\n }\n </div>\n</div>\n", styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.i-textarea[disabled]+.i-textarea-label{color:var(--color-text-disabled)}.invalid .i-textarea{border-color:var(--color-danger)}.invalid .i-textarea-label,.invalid .i-error{color:var(--color-danger)}.i-char-count{color:var(--color-text-secondary)}.i-char-count.i-char-count--warn{color:var(--color-warning)}.i-char-count.i-char-count--over{color:var(--color-danger)}.i-textarea-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:1em}.i-textarea-wrapper.i-textarea--fluid{width:100%}.i-textarea-wrapper.i-textarea--no-float{margin-top:0;height:auto}.i-textarea-wrapper .i-textarea-container{display:flex;align-items:flex-start;gap:8px}.i-textarea-wrapper .i-textarea{box-sizing:border-box;width:100%;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease;font-family:inherit;font-size:inherit;line-height:1.5;resize:vertical}.i-textarea-wrapper .i-textarea:focus{outline:none}.i-textarea-wrapper .i-textarea.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent;resize:none}.i-textarea-wrapper .i-textarea.no-resize{resize:none}.i-textarea-wrapper .i-textarea-icon-wrapper{position:relative;width:100%;display:flex}.i-textarea-wrapper .float-label{position:relative;display:flex;align-items:flex-start}.i-textarea-wrapper .float-label .i-textarea{padding:20px 10px 8px}.i-textarea-wrapper .float-label .i-textarea-label{position:absolute;top:16px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none;font-size:1em}.i-textarea-wrapper .float-label .i-textarea:focus+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-textarea-wrapper .normal-input{position:relative}.i-textarea-wrapper .normal-input .i-textarea{padding:8px 12px}.i-textarea-wrapper .i-textarea-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:16px}.i-textarea-wrapper .i-char-count{font-size:.75em}.i-textarea-wrapper .i-error{font-size:.75em;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }] });
|
|
3520
3566
|
}
|
|
3521
3567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITextarea, decorators: [{
|
|
3522
3568
|
type: Component,
|
|
3523
|
-
args: [{ selector: 'i-textarea', standalone: true, imports: [CommonModule, TooltipDirective], template: "<div\n class=\"i-textarea-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-textarea--fluid]=\"fluid\"\n [class.i-textarea--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-textarea-container\"\n >\n <div class=\"i-textarea-icon-wrapper\">\n <textarea\n #textareaElement\n [id]=\"id || componentId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [rows]=\"rows\"\n [attr.maxlength]=\"maxLength || null\"\n [value]=\"value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-textarea\"\n [class.readonly]=\"readonly\"\n [class.no-resize]=\"!resizable\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n ></textarea>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-textarea-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <div class=\"i-textarea-footer\">\n @if (showErrors && getErrorMessage()) {\n <span class=\"i-error\">{{ getErrorMessage() }}</span>\n }\n @if (maxLength) {\n <span\n class=\"i-char-count\"\n [class.i-char-count--warn]=\"charCountWarning\"\n [class.i-char-count--over]=\"charCountOver\"\n >\n {{ currentLength }}/{{ maxLength }}\n </span>\n }\n </div>\n</div>\n", styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea
|
|
3569
|
+
args: [{ selector: 'i-textarea', standalone: true, imports: [CommonModule, TooltipDirective], template: "<div\n class=\"i-textarea-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-textarea--fluid]=\"fluid\"\n [class.i-textarea--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-textarea-container\"\n >\n <div class=\"i-textarea-icon-wrapper\">\n <textarea\n #textareaElement\n [id]=\"id || componentId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [rows]=\"rows\"\n [attr.maxlength]=\"maxLength || null\"\n [value]=\"value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-textarea\"\n [class.readonly]=\"readonly\"\n [class.no-resize]=\"!resizable\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n ></textarea>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-textarea-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <div class=\"i-textarea-footer\">\n @if (showErrors && getErrorMessage()) {\n <span class=\"i-error\">{{ getErrorMessage() }}</span>\n }\n @if (maxLength) {\n <span\n class=\"i-char-count\"\n [class.i-char-count--warn]=\"charCountWarning\"\n [class.i-char-count--over]=\"charCountOver\"\n >\n {{ currentLength }}/{{ maxLength }}\n </span>\n }\n </div>\n</div>\n", styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.i-textarea[disabled]+.i-textarea-label{color:var(--color-text-disabled)}.invalid .i-textarea{border-color:var(--color-danger)}.invalid .i-textarea-label,.invalid .i-error{color:var(--color-danger)}.i-char-count{color:var(--color-text-secondary)}.i-char-count.i-char-count--warn{color:var(--color-warning)}.i-char-count.i-char-count--over{color:var(--color-danger)}.i-textarea-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:1em}.i-textarea-wrapper.i-textarea--fluid{width:100%}.i-textarea-wrapper.i-textarea--no-float{margin-top:0;height:auto}.i-textarea-wrapper .i-textarea-container{display:flex;align-items:flex-start;gap:8px}.i-textarea-wrapper .i-textarea{box-sizing:border-box;width:100%;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease;font-family:inherit;font-size:inherit;line-height:1.5;resize:vertical}.i-textarea-wrapper .i-textarea:focus{outline:none}.i-textarea-wrapper .i-textarea.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent;resize:none}.i-textarea-wrapper .i-textarea.no-resize{resize:none}.i-textarea-wrapper .i-textarea-icon-wrapper{position:relative;width:100%;display:flex}.i-textarea-wrapper .float-label{position:relative;display:flex;align-items:flex-start}.i-textarea-wrapper .float-label .i-textarea{padding:20px 10px 8px}.i-textarea-wrapper .float-label .i-textarea-label{position:absolute;top:16px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none;font-size:1em}.i-textarea-wrapper .float-label .i-textarea:focus+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-textarea-wrapper .normal-input{position:relative}.i-textarea-wrapper .normal-input .i-textarea{padding:8px 12px}.i-textarea-wrapper .i-textarea-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:16px}.i-textarea-wrapper .i-char-count{font-size:.75em}.i-textarea-wrapper .i-error{font-size:.75em;flex:1}\n"] }]
|
|
3524
3570
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
3525
3571
|
type: Optional
|
|
3526
3572
|
}, {
|
|
@@ -5508,7 +5554,7 @@ class IMultiSelect {
|
|
|
5508
5554
|
useExisting: forwardRef(() => IMultiSelect),
|
|
5509
5555
|
multi: true,
|
|
5510
5556
|
},
|
|
5511
|
-
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"i-multi-select-wrapper\"\n [class.i-multi-select--fluid]=\"fluid\"\n #dropdown\n>\n <!-- Input container with click handler -->\n <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n <!-- Chips component with float label -->\n <i-chips\n [chips]=\"selectedChips()\"\n [boxed]=\"true\"\n [collapseOnOverflow]=\"true\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [allowCloseAll]=\"showClear && value && value.length > 0\"\n [useFloatLabel]=\"true\"\n [label]=\"label\"\n [showError]=\"showErrors\"\n (removeChip)=\"onChipRemove($event)\"\n (closedAll)=\"onChipsCloseAll()\"\n class=\"i-multi-select-chips\"\n ></i-chips>\n\n <!-- Icons overlay -->\n <div class=\"i-multi-select-icons-overlay\">\n <span class=\"i-multi-select-arrow-wrapper\">\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </span>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-multi-select-error\">\n {{ getErrorMessage() }}\n </div>\n }\n </div>\n\n @if (isOpen) {\n <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n @if (filter) {\n <div class=\"i-multi-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-multi-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-multi-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-multi-select-checkbox\"\n ></i-checkbox>\n <span class=\"i-multi-select-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-multi-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;min-height:56px;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:18%;right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
5557
|
+
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"i-multi-select-wrapper\"\n [class.i-multi-select--fluid]=\"fluid\"\n #dropdown\n>\n <!-- Input container with click handler -->\n <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n <!-- Chips component with float label -->\n <i-chips\n [chips]=\"selectedChips()\"\n [boxed]=\"true\"\n [collapseOnOverflow]=\"true\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [allowCloseAll]=\"showClear && value && value.length > 0\"\n [useFloatLabel]=\"true\"\n [label]=\"label\"\n [showError]=\"showErrors\"\n (removeChip)=\"onChipRemove($event)\"\n (closedAll)=\"onChipsCloseAll()\"\n class=\"i-multi-select-chips\"\n ></i-chips>\n\n <!-- Icons overlay -->\n <div class=\"i-multi-select-icons-overlay\">\n <span class=\"i-multi-select-arrow-wrapper\">\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </span>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-multi-select-error\">\n {{ getErrorMessage() }}\n </div>\n }\n </div>\n\n @if (isOpen) {\n <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n @if (filter) {\n <div class=\"i-multi-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-multi-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-multi-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-multi-select-checkbox\"\n ></i-checkbox>\n <span class=\"i-multi-select-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-multi-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{display:flow-root;position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:calc(1.5em + 21px);transform:translateY(-50%);right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
5512
5558
|
}
|
|
5513
5559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IMultiSelect, decorators: [{
|
|
5514
5560
|
type: Component,
|
|
@@ -5518,7 +5564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
5518
5564
|
useExisting: forwardRef(() => IMultiSelect),
|
|
5519
5565
|
multi: true,
|
|
5520
5566
|
},
|
|
5521
|
-
], template: "<div\n class=\"i-multi-select-wrapper\"\n [class.i-multi-select--fluid]=\"fluid\"\n #dropdown\n>\n <!-- Input container with click handler -->\n <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n <!-- Chips component with float label -->\n <i-chips\n [chips]=\"selectedChips()\"\n [boxed]=\"true\"\n [collapseOnOverflow]=\"true\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [allowCloseAll]=\"showClear && value && value.length > 0\"\n [useFloatLabel]=\"true\"\n [label]=\"label\"\n [showError]=\"showErrors\"\n (removeChip)=\"onChipRemove($event)\"\n (closedAll)=\"onChipsCloseAll()\"\n class=\"i-multi-select-chips\"\n ></i-chips>\n\n <!-- Icons overlay -->\n <div class=\"i-multi-select-icons-overlay\">\n <span class=\"i-multi-select-arrow-wrapper\">\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </span>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-multi-select-error\">\n {{ getErrorMessage() }}\n </div>\n }\n </div>\n\n @if (isOpen) {\n <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n @if (filter) {\n <div class=\"i-multi-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-multi-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-multi-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-multi-select-checkbox\"\n ></i-checkbox>\n <span class=\"i-multi-select-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-multi-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;
|
|
5567
|
+
], template: "<div\n class=\"i-multi-select-wrapper\"\n [class.i-multi-select--fluid]=\"fluid\"\n #dropdown\n>\n <!-- Input container with click handler -->\n <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n <!-- Chips component with float label -->\n <i-chips\n [chips]=\"selectedChips()\"\n [boxed]=\"true\"\n [collapseOnOverflow]=\"true\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [allowCloseAll]=\"showClear && value && value.length > 0\"\n [useFloatLabel]=\"true\"\n [label]=\"label\"\n [showError]=\"showErrors\"\n (removeChip)=\"onChipRemove($event)\"\n (closedAll)=\"onChipsCloseAll()\"\n class=\"i-multi-select-chips\"\n ></i-chips>\n\n <!-- Icons overlay -->\n <div class=\"i-multi-select-icons-overlay\">\n <span class=\"i-multi-select-arrow-wrapper\">\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </span>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-multi-select-error\">\n {{ getErrorMessage() }}\n </div>\n }\n </div>\n\n @if (isOpen) {\n <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n @if (filter) {\n <div class=\"i-multi-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-multi-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-multi-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-multi-select-checkbox\"\n ></i-checkbox>\n <span class=\"i-multi-select-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-multi-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{display:flow-root;position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:calc(1.5em + 21px);transform:translateY(-50%);right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"] }]
|
|
5522
5568
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { label: [{
|
|
5523
5569
|
type: Input
|
|
5524
5570
|
}], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{
|
|
@@ -5997,11 +6043,11 @@ class IPanel {
|
|
|
5997
6043
|
this.onToggle.emit(this.collapsed);
|
|
5998
6044
|
}
|
|
5999
6045
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6000
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IPanel, isStandalone: true, selector: "i-panel", inputs: { header: "header", collapsed: "collapsed", toggleable: "toggleable" }, outputs: { collapsedChange: "collapsedChange", onToggle: "onToggle" }, ngImport: i0, template: "<div\n class=\"i-panel\"\n [class.i-panel--collapsed]=\"collapsed\"\n [class.i-panel--toggleable]=\"toggleable\"\n [attr.id]=\"componentId\"\n>\n <div class=\"i-panel-header-wrap\">\n @if (toggleable) {\n <button\n class=\"i-panel-header\"\n type=\"button\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"!collapsed\"\n >\n <i\n class=\"i-panel-toggle-icon pi\"\n [class.pi-minus]=\"!collapsed\"\n [class.pi-plus]=\"collapsed\"\n aria-hidden=\"true\"\n ></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </button>\n }\n @if (!toggleable) {\n <div class=\"i-panel-header\">\n <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </div>\n }\n </div>\n <div\n class=\"i-panel-content-wrapper\"\n [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n >\n <div class=\"i-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:
|
|
6046
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IPanel, isStandalone: true, selector: "i-panel", inputs: { header: "header", collapsed: "collapsed", toggleable: "toggleable" }, outputs: { collapsedChange: "collapsedChange", onToggle: "onToggle" }, ngImport: i0, template: "<div\n class=\"i-panel\"\n [class.i-panel--collapsed]=\"collapsed\"\n [class.i-panel--toggleable]=\"toggleable\"\n [attr.id]=\"componentId\"\n>\n <div class=\"i-panel-header-wrap\">\n @if (toggleable) {\n <button\n class=\"i-panel-header\"\n type=\"button\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"!collapsed\"\n >\n <i\n class=\"i-panel-toggle-icon pi\"\n [class.pi-minus]=\"!collapsed\"\n [class.pi-plus]=\"collapsed\"\n aria-hidden=\"true\"\n ></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </button>\n }\n @if (!toggleable) {\n <div class=\"i-panel-header\">\n <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </div>\n }\n </div>\n <div\n class=\"i-panel-content-wrapper\"\n [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n >\n <div class=\"i-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:transparent}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:inherit}.i-panel.i-panel--toggleable .i-panel-header:hover{color:var(--color-primary)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel{border-radius:8px;overflow:visible;position:relative;margin-top:2em;padding-top:0;min-height:48px}.i-panel .i-panel-header-wrap{position:absolute;top:0;left:0;right:0;height:0;z-index:1}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:8px;position:relative;top:-4px;transform:translateY(-100%);max-width:calc(100% - 40px);box-sizing:border-box;padding:4px 12px;margin-left:20px;background:transparent;-webkit-user-select:none;user-select:none;transition:color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:transparent;cursor:pointer;padding:4px 12px;font-family:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block;flex-shrink:0}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:1em;line-height:1;display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:visible;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0;overflow:hidden}.i-panel .i-panel-content{padding:16px}\n"] });
|
|
6001
6047
|
}
|
|
6002
6048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IPanel, decorators: [{
|
|
6003
6049
|
type: Component,
|
|
6004
|
-
args: [{ selector: 'i-panel', template: "<div\n class=\"i-panel\"\n [class.i-panel--collapsed]=\"collapsed\"\n [class.i-panel--toggleable]=\"toggleable\"\n [attr.id]=\"componentId\"\n>\n <div class=\"i-panel-header-wrap\">\n @if (toggleable) {\n <button\n class=\"i-panel-header\"\n type=\"button\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"!collapsed\"\n >\n <i\n class=\"i-panel-toggle-icon pi\"\n [class.pi-minus]=\"!collapsed\"\n [class.pi-plus]=\"collapsed\"\n aria-hidden=\"true\"\n ></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </button>\n }\n @if (!toggleable) {\n <div class=\"i-panel-header\">\n <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </div>\n }\n </div>\n <div\n class=\"i-panel-content-wrapper\"\n [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n >\n <div class=\"i-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:
|
|
6050
|
+
args: [{ selector: 'i-panel', template: "<div\n class=\"i-panel\"\n [class.i-panel--collapsed]=\"collapsed\"\n [class.i-panel--toggleable]=\"toggleable\"\n [attr.id]=\"componentId\"\n>\n <div class=\"i-panel-header-wrap\">\n @if (toggleable) {\n <button\n class=\"i-panel-header\"\n type=\"button\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"!collapsed\"\n >\n <i\n class=\"i-panel-toggle-icon pi\"\n [class.pi-minus]=\"!collapsed\"\n [class.pi-plus]=\"collapsed\"\n aria-hidden=\"true\"\n ></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </button>\n }\n @if (!toggleable) {\n <div class=\"i-panel-header\">\n <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </div>\n }\n </div>\n <div\n class=\"i-panel-content-wrapper\"\n [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n >\n <div class=\"i-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:transparent}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:inherit}.i-panel.i-panel--toggleable .i-panel-header:hover{color:var(--color-primary)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel{border-radius:8px;overflow:visible;position:relative;margin-top:2em;padding-top:0;min-height:48px}.i-panel .i-panel-header-wrap{position:absolute;top:0;left:0;right:0;height:0;z-index:1}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:8px;position:relative;top:-4px;transform:translateY(-100%);max-width:calc(100% - 40px);box-sizing:border-box;padding:4px 12px;margin-left:20px;background:transparent;-webkit-user-select:none;user-select:none;transition:color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:transparent;cursor:pointer;padding:4px 12px;font-family:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block;flex-shrink:0}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:1em;line-height:1;display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:visible;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0;overflow:hidden}.i-panel .i-panel-content{padding:16px}\n"] }]
|
|
6005
6051
|
}], propDecorators: { header: [{
|
|
6006
6052
|
type: Input
|
|
6007
6053
|
}], collapsed: [{
|
|
@@ -7185,10 +7231,10 @@ class ITreeView {
|
|
|
7185
7231
|
*/
|
|
7186
7232
|
togglerTemplate;
|
|
7187
7233
|
/**
|
|
7188
|
-
*
|
|
7189
|
-
* @default
|
|
7234
|
+
* Shows the search bar. Set to false to hide it.
|
|
7235
|
+
* @default true
|
|
7190
7236
|
*/
|
|
7191
|
-
filter =
|
|
7237
|
+
filter = true;
|
|
7192
7238
|
/**
|
|
7193
7239
|
* Property name to use for filtering
|
|
7194
7240
|
* @default 'label'
|
|
@@ -7274,6 +7320,10 @@ class ITreeView {
|
|
|
7274
7320
|
* @internal
|
|
7275
7321
|
*/
|
|
7276
7322
|
temporaryHighlighted = new Set();
|
|
7323
|
+
filteredSources = new WeakMap();
|
|
7324
|
+
sourceNode(node) {
|
|
7325
|
+
return this.filteredSources.get(node) || node;
|
|
7326
|
+
}
|
|
7277
7327
|
constructor(cdr) {
|
|
7278
7328
|
this.cdr = cdr;
|
|
7279
7329
|
}
|
|
@@ -7282,7 +7332,7 @@ class ITreeView {
|
|
|
7282
7332
|
this.updateSelectAllState();
|
|
7283
7333
|
}
|
|
7284
7334
|
ngOnChanges(changes) {
|
|
7285
|
-
if (changes['value']) {
|
|
7335
|
+
if (changes['value'] || changes['filter'] || changes['filterBy'] || changes['filterMode']) {
|
|
7286
7336
|
this.updateSerializedValue();
|
|
7287
7337
|
this.updateSelectAllState();
|
|
7288
7338
|
}
|
|
@@ -7313,11 +7363,14 @@ class ITreeView {
|
|
|
7313
7363
|
this.applyFilter();
|
|
7314
7364
|
}
|
|
7315
7365
|
applyFilter() {
|
|
7366
|
+
this.filteredSources = new WeakMap();
|
|
7316
7367
|
if (!this.filterValue.trim()) {
|
|
7317
7368
|
this.filteredValue = this.value;
|
|
7369
|
+
this.updateSelectAllState();
|
|
7318
7370
|
return;
|
|
7319
7371
|
}
|
|
7320
|
-
this.filteredValue = this.filterNodes(this.value, this.filterValue.toLowerCase());
|
|
7372
|
+
this.filteredValue = this.filterNodes(this.value, this.filterValue.trim().toLowerCase());
|
|
7373
|
+
this.updateSelectAllState();
|
|
7321
7374
|
}
|
|
7322
7375
|
filterNodes(nodes, filterValue) {
|
|
7323
7376
|
const filteredNodes = [];
|
|
@@ -7328,6 +7381,7 @@ class ITreeView {
|
|
|
7328
7381
|
: [];
|
|
7329
7382
|
if (nodeMatches || filteredChildren.length > 0) {
|
|
7330
7383
|
const clonedNode = { ...node };
|
|
7384
|
+
this.filteredSources.set(clonedNode, node);
|
|
7331
7385
|
if (filteredChildren.length > 0) {
|
|
7332
7386
|
clonedNode.children = filteredChildren;
|
|
7333
7387
|
clonedNode.expanded = true;
|
|
@@ -7342,6 +7396,7 @@ class ITreeView {
|
|
|
7342
7396
|
return nodeValue.includes(filterValue);
|
|
7343
7397
|
}
|
|
7344
7398
|
isSelected(node) {
|
|
7399
|
+
node = this.sourceNode(node);
|
|
7345
7400
|
if (this.selectionMode === 'single') {
|
|
7346
7401
|
return this.selection === node;
|
|
7347
7402
|
}
|
|
@@ -7354,15 +7409,17 @@ class ITreeView {
|
|
|
7354
7409
|
return false;
|
|
7355
7410
|
}
|
|
7356
7411
|
isNodeHighlighted(node) {
|
|
7412
|
+
node = this.sourceNode(node);
|
|
7357
7413
|
if (this.selectionMode === 'checkbox') {
|
|
7358
7414
|
return this.temporaryHighlighted.has(node);
|
|
7359
7415
|
}
|
|
7360
7416
|
return this.isSelected(node);
|
|
7361
7417
|
}
|
|
7362
7418
|
isTemporarilyHighlighted(node) {
|
|
7363
|
-
return this.temporaryHighlighted.has(node);
|
|
7419
|
+
return this.temporaryHighlighted.has(this.sourceNode(node));
|
|
7364
7420
|
}
|
|
7365
7421
|
addTemporaryHighlight(node) {
|
|
7422
|
+
node = this.sourceNode(node);
|
|
7366
7423
|
this.temporaryHighlighted.add(node);
|
|
7367
7424
|
setTimeout(() => {
|
|
7368
7425
|
this.temporaryHighlighted.delete(node);
|
|
@@ -7370,6 +7427,7 @@ class ITreeView {
|
|
|
7370
7427
|
}, 400);
|
|
7371
7428
|
}
|
|
7372
7429
|
isPartiallySelected(node) {
|
|
7430
|
+
node = this.sourceNode(node);
|
|
7373
7431
|
if (this.selectionMode !== 'checkbox' || !node.children) {
|
|
7374
7432
|
return false;
|
|
7375
7433
|
}
|
|
@@ -7393,6 +7451,7 @@ class ITreeView {
|
|
|
7393
7451
|
}
|
|
7394
7452
|
}
|
|
7395
7453
|
selectSingleNode(event, node) {
|
|
7454
|
+
node = this.sourceNode(node);
|
|
7396
7455
|
if (this.selection === node) {
|
|
7397
7456
|
this.selection = null;
|
|
7398
7457
|
this.onNodeUnselect.emit({ originalEvent: event, node });
|
|
@@ -7404,6 +7463,7 @@ class ITreeView {
|
|
|
7404
7463
|
this.selectionChange.emit(this.selection || undefined);
|
|
7405
7464
|
}
|
|
7406
7465
|
selectMultipleNode(event, node) {
|
|
7466
|
+
node = this.sourceNode(node);
|
|
7407
7467
|
const selection = Array.isArray(this.selection) ? [...this.selection] : [];
|
|
7408
7468
|
this.selection = selection;
|
|
7409
7469
|
const index = selection.indexOf(node);
|
|
@@ -7418,6 +7478,7 @@ class ITreeView {
|
|
|
7418
7478
|
this.selectionChange.emit(this.selection);
|
|
7419
7479
|
}
|
|
7420
7480
|
selectCheckboxNode(event, node) {
|
|
7481
|
+
node = this.sourceNode(node);
|
|
7421
7482
|
const selection = Array.isArray(this.selection) ? [...this.selection] : [];
|
|
7422
7483
|
const selected = this.isSelected(node);
|
|
7423
7484
|
if (selected) {
|
|
@@ -7545,7 +7606,7 @@ class ITreeView {
|
|
|
7545
7606
|
onSelectAllChange() {
|
|
7546
7607
|
if (this.selectionMode !== 'checkbox')
|
|
7547
7608
|
return;
|
|
7548
|
-
const allNodes = this.flattenNodes(this.filteredValue);
|
|
7609
|
+
const allNodes = this.flattenNodes(this.filteredValue).map(node => this.sourceNode(node));
|
|
7549
7610
|
const previousSelection = Array.isArray(this.selection)
|
|
7550
7611
|
? this.selection
|
|
7551
7612
|
: [];
|
|
@@ -7554,7 +7615,7 @@ class ITreeView {
|
|
|
7554
7615
|
cancelable: true,
|
|
7555
7616
|
});
|
|
7556
7617
|
if (this.selectAllChecked) {
|
|
7557
|
-
this.selection = allNodes;
|
|
7618
|
+
this.selection = [...new Set([...previousSelection, ...allNodes])];
|
|
7558
7619
|
allNodes.forEach((node) => {
|
|
7559
7620
|
if (!previousSelection.includes(node)) {
|
|
7560
7621
|
this.onNodeSelect.emit({ originalEvent: fakeEvent, node });
|
|
@@ -7562,8 +7623,8 @@ class ITreeView {
|
|
|
7562
7623
|
});
|
|
7563
7624
|
}
|
|
7564
7625
|
else {
|
|
7565
|
-
this.selection =
|
|
7566
|
-
previousSelection.forEach((node) => {
|
|
7626
|
+
this.selection = previousSelection.filter(node => !allNodes.includes(node));
|
|
7627
|
+
previousSelection.filter(node => allNodes.includes(node)).forEach((node) => {
|
|
7567
7628
|
this.onNodeUnselect.emit({ originalEvent: fakeEvent, node });
|
|
7568
7629
|
});
|
|
7569
7630
|
}
|
|
@@ -7582,17 +7643,17 @@ class ITreeView {
|
|
|
7582
7643
|
updateSelectAllState() {
|
|
7583
7644
|
if (this.selectionMode !== 'checkbox' || !this.selectAll)
|
|
7584
7645
|
return;
|
|
7585
|
-
const allNodes = this.flattenNodes(this.filteredValue);
|
|
7646
|
+
const allNodes = this.flattenNodes(this.filteredValue).map(node => this.sourceNode(node));
|
|
7586
7647
|
const selectedNodes = Array.isArray(this.selection) ? this.selection : [];
|
|
7587
7648
|
this.selectAllChecked =
|
|
7588
|
-
allNodes.length > 0 &&
|
|
7649
|
+
allNodes.length > 0 && allNodes.every(node => selectedNodes.includes(node));
|
|
7589
7650
|
}
|
|
7590
7651
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITreeView, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7591
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITreeView, isStandalone: true, selector: "i-tree-view", inputs: { value: "value", selectionMode: "selectionMode", selection: "selection", scrollHeight: "scrollHeight", loading: "loading", emptyMessage: "emptyMessage", togglerTemplate: "togglerTemplate", filter: "filter", filterBy: "filterBy", filterMode: "filterMode", filterPlaceholder: "filterPlaceholder", filteredNodes: "filteredNodes", validateDrop: "validateDrop", propagateSelectionUp: "propagateSelectionUp", propagateSelectionDown: "propagateSelectionDown", selectAll: "selectAll" }, outputs: { onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [(ngModel)]=\"filterValue\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n (input)=\"onFilterKeyup($event)\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n }\n @if (selectAll && selectionMode === \"checkbox\") {\n <div class=\"i-tree-view-select-all-container\">\n <div class=\"select-box\">\n <i-checkbox\n [(ngModel)]=\"selectAllChecked\"\n [id]=\"componentId + '-select-all'\"\n [label]=\"'Select All'\"\n (ngModelChange)=\"onSelectAllChange()\"\n />\n </div>\n </div>\n }\n\n <div class=\"i-tree-view-container\">\n @if (loading) {\n <div class=\"i-tree-view-loading\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n <span>Loading...</span>\n </div>\n } @else if (filteredValue.length === 0) {\n <div class=\"i-tree-view-empty\">\n <span>{{ emptyMessage }}</span>\n </div>\n } @else {\n <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n @for (node of filteredValue; track node.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n <div\n class=\"i-tree-view-node\"\n [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n [class.i-tree-view-node--expanded]=\"node.expanded\"\n [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n [class.i-tree-view-node--temporary-highlight]=\"\n isTemporarilyHighlighted(node)\n \"\n [class]=\"node.styleClass\"\n [style.padding-left.rem]=\"level * 1\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n [attr.aria-selected]=\"isSelected(node)\"\n [attr.aria-level]=\"level + 1\"\n tabindex=\"0\"\n (click)=\"onNodeClick($event, node)\"\n (keydown.enter)=\"onNodeClick($event, node)\"\n (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n >\n <div class=\"i-tree-view-node-content\">\n @if (hasChildren(node)) {\n <button\n type=\"button\"\n class=\"i-tree-view-toggler\"\n (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <i [class]=\"getToggleIcon(node)\"></i>\n </button>\n } @else {\n <span class=\"i-tree-view-toggler-spacer\"></span>\n }\n @if (selectionMode === \"checkbox\") {\n <div class=\"i-tree-view-checkbox-container\">\n <i-checkbox\n [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n [indeterminate]=\"isPartiallySelected(node)\"\n (onChange)=\"onCheckboxChange($event, node)\"\n [id]=\"getCheckboxId(node)\"\n size=\"small\"\n tabindex=\"-1\"\n >\n </i-checkbox>\n </div>\n }\n\n <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n </div>\n </div>\n\n @if (hasChildren(node) && node.expanded) {\n <ul class=\"i-tree-view-children\" role=\"group\">\n @for (child of node.children; track child.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--color-component-background-secondary);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:1em}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{font-size:16px}.i-tree-view-wrapper .i-tree-view-empty{display:flex;align-items:center;justify-content:center;padding:20px;font-size:1em;font-style:italic}.i-tree-view-root,.i-tree-view-children{list-style:none;margin:0;padding:0}.i-tree-view-children{padding-left:0}.i-tree-view-node{position:relative;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.i-tree-view-node:focus{outline:none}.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{animation:highlight-fade .7s ease-out}.i-tree-view-node .i-tree-view-node-content{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:all .15s ease;min-height:32px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;border-radius:2px;transition:all .15s ease}.i-tree-view-node .i-tree-view-toggler:focus{outline:none}.i-tree-view-node .i-tree-view-toggler i{font-size:12px;transition:transform .15s ease}.i-tree-view-node .i-tree-view-toggler-spacer{width:20px;height:20px;flex-shrink:0}.i-tree-view-node .i-tree-view-checkbox-container{display:flex;align-items:center;flex-shrink:0}.i-tree-view-node .i-tree-view-node-icon{font-size:1em;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:1em;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
7652
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITreeView, isStandalone: true, selector: "i-tree-view", inputs: { value: "value", selectionMode: "selectionMode", selection: "selection", scrollHeight: "scrollHeight", loading: "loading", emptyMessage: "emptyMessage", togglerTemplate: "togglerTemplate", filter: "filter", filterBy: "filterBy", filterMode: "filterMode", filterPlaceholder: "filterPlaceholder", filteredNodes: "filteredNodes", validateDrop: "validateDrop", propagateSelectionUp: "propagateSelectionUp", propagateSelectionDown: "propagateSelectionDown", selectAll: "selectAll" }, outputs: { onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [ngModel]=\"filterValue\"\n (ngModelChange)=\"filterValue = $event; applyFilter()\"\n label=\"Search tree\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n }\n @if (selectAll && selectionMode === \"checkbox\") {\n <div class=\"i-tree-view-select-all-container\">\n <div class=\"select-box\">\n <i-checkbox\n [(ngModel)]=\"selectAllChecked\"\n [id]=\"componentId + '-select-all'\"\n [label]=\"'Select All'\"\n (ngModelChange)=\"onSelectAllChange()\"\n />\n </div>\n </div>\n }\n\n <div class=\"i-tree-view-container\">\n @if (loading) {\n <div class=\"i-tree-view-loading\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n <span>Loading...</span>\n </div>\n } @else if (filteredValue.length === 0) {\n <div class=\"i-tree-view-empty\">\n <span>{{ emptyMessage }}</span>\n </div>\n } @else {\n <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n @for (node of filteredValue; track node.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n <div\n class=\"i-tree-view-node\"\n [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n [class.i-tree-view-node--expanded]=\"node.expanded\"\n [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n [class.i-tree-view-node--temporary-highlight]=\"\n isTemporarilyHighlighted(node)\n \"\n [class]=\"node.styleClass\"\n [style.padding-left.rem]=\"level * 1\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n [attr.aria-selected]=\"isSelected(node)\"\n [attr.aria-level]=\"level + 1\"\n tabindex=\"0\"\n (click)=\"onNodeClick($event, node)\"\n (keydown.enter)=\"onNodeClick($event, node)\"\n (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n >\n <div class=\"i-tree-view-node-content\">\n @if (hasChildren(node)) {\n <button\n type=\"button\"\n class=\"i-tree-view-toggler\"\n (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <i [class]=\"getToggleIcon(node)\"></i>\n </button>\n } @else {\n <span class=\"i-tree-view-toggler-spacer\"></span>\n }\n @if (selectionMode === \"checkbox\") {\n <div class=\"i-tree-view-checkbox-container\">\n <i-checkbox\n [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n [indeterminate]=\"isPartiallySelected(node)\"\n (onChange)=\"onCheckboxChange($event, node)\"\n [id]=\"getCheckboxId(node)\"\n size=\"small\"\n tabindex=\"-1\"\n >\n </i-checkbox>\n </div>\n }\n\n <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n </div>\n </div>\n\n @if (hasChildren(node) && node.expanded) {\n <ul class=\"i-tree-view-children\" role=\"group\">\n @for (child of node.children; track child.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--color-component-background-secondary);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:1em}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{font-size:16px}.i-tree-view-wrapper .i-tree-view-empty{display:flex;align-items:center;justify-content:center;padding:20px;font-size:1em;font-style:italic}.i-tree-view-root,.i-tree-view-children{list-style:none;margin:0;padding:0}.i-tree-view-children{padding-left:0}.i-tree-view-node{position:relative;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.i-tree-view-node:focus{outline:none}.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{animation:highlight-fade .7s ease-out}.i-tree-view-node .i-tree-view-node-content{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:all .15s ease;min-height:32px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;border-radius:2px;transition:all .15s ease}.i-tree-view-node .i-tree-view-toggler:focus{outline:none}.i-tree-view-node .i-tree-view-toggler i{font-size:12px;transition:transform .15s ease}.i-tree-view-node .i-tree-view-toggler-spacer{width:20px;height:20px;flex-shrink:0}.i-tree-view-node .i-tree-view-checkbox-container{display:flex;align-items:center;flex-shrink:0}.i-tree-view-node .i-tree-view-node-icon{font-size:1em;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:1em;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
7592
7653
|
}
|
|
7593
7654
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITreeView, decorators: [{
|
|
7594
7655
|
type: Component,
|
|
7595
|
-
args: [{ selector: 'i-tree-view', standalone: true, imports: [CommonModule, FormsModule, ICheckbox, IInputText], template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [
|
|
7656
|
+
args: [{ selector: 'i-tree-view', standalone: true, imports: [CommonModule, FormsModule, ICheckbox, IInputText], template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [ngModel]=\"filterValue\"\n (ngModelChange)=\"filterValue = $event; applyFilter()\"\n label=\"Search tree\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n }\n @if (selectAll && selectionMode === \"checkbox\") {\n <div class=\"i-tree-view-select-all-container\">\n <div class=\"select-box\">\n <i-checkbox\n [(ngModel)]=\"selectAllChecked\"\n [id]=\"componentId + '-select-all'\"\n [label]=\"'Select All'\"\n (ngModelChange)=\"onSelectAllChange()\"\n />\n </div>\n </div>\n }\n\n <div class=\"i-tree-view-container\">\n @if (loading) {\n <div class=\"i-tree-view-loading\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n <span>Loading...</span>\n </div>\n } @else if (filteredValue.length === 0) {\n <div class=\"i-tree-view-empty\">\n <span>{{ emptyMessage }}</span>\n </div>\n } @else {\n <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n @for (node of filteredValue; track node.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n <div\n class=\"i-tree-view-node\"\n [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n [class.i-tree-view-node--expanded]=\"node.expanded\"\n [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n [class.i-tree-view-node--temporary-highlight]=\"\n isTemporarilyHighlighted(node)\n \"\n [class]=\"node.styleClass\"\n [style.padding-left.rem]=\"level * 1\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n [attr.aria-selected]=\"isSelected(node)\"\n [attr.aria-level]=\"level + 1\"\n tabindex=\"0\"\n (click)=\"onNodeClick($event, node)\"\n (keydown.enter)=\"onNodeClick($event, node)\"\n (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n >\n <div class=\"i-tree-view-node-content\">\n @if (hasChildren(node)) {\n <button\n type=\"button\"\n class=\"i-tree-view-toggler\"\n (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <i [class]=\"getToggleIcon(node)\"></i>\n </button>\n } @else {\n <span class=\"i-tree-view-toggler-spacer\"></span>\n }\n @if (selectionMode === \"checkbox\") {\n <div class=\"i-tree-view-checkbox-container\">\n <i-checkbox\n [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n [indeterminate]=\"isPartiallySelected(node)\"\n (onChange)=\"onCheckboxChange($event, node)\"\n [id]=\"getCheckboxId(node)\"\n size=\"small\"\n tabindex=\"-1\"\n >\n </i-checkbox>\n </div>\n }\n\n <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n </div>\n </div>\n\n @if (hasChildren(node) && node.expanded) {\n <ul class=\"i-tree-view-children\" role=\"group\">\n @for (child of node.children; track child.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--color-component-background-secondary);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:1em}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{font-size:16px}.i-tree-view-wrapper .i-tree-view-empty{display:flex;align-items:center;justify-content:center;padding:20px;font-size:1em;font-style:italic}.i-tree-view-root,.i-tree-view-children{list-style:none;margin:0;padding:0}.i-tree-view-children{padding-left:0}.i-tree-view-node{position:relative;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.i-tree-view-node:focus{outline:none}.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{animation:highlight-fade .7s ease-out}.i-tree-view-node .i-tree-view-node-content{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:all .15s ease;min-height:32px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;border-radius:2px;transition:all .15s ease}.i-tree-view-node .i-tree-view-toggler:focus{outline:none}.i-tree-view-node .i-tree-view-toggler i{font-size:12px;transition:transform .15s ease}.i-tree-view-node .i-tree-view-toggler-spacer{width:20px;height:20px;flex-shrink:0}.i-tree-view-node .i-tree-view-checkbox-container{display:flex;align-items:center;flex-shrink:0}.i-tree-view-node .i-tree-view-node-icon{font-size:1em;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:1em;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
7596
7657
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
7597
7658
|
type: Input
|
|
7598
7659
|
}], selectionMode: [{
|
|
@@ -8259,6 +8320,10 @@ class ITable {
|
|
|
8259
8320
|
* @default false
|
|
8260
8321
|
*/
|
|
8261
8322
|
bordered = false;
|
|
8323
|
+
/** Show horizontal separators between body rows. @default true */
|
|
8324
|
+
rowBorders = true;
|
|
8325
|
+
/** Show bottom borders within expanded detail tables. @default true */
|
|
8326
|
+
detailRowBorders = true;
|
|
8262
8327
|
/**
|
|
8263
8328
|
* Table size
|
|
8264
8329
|
* @default 'medium'
|
|
@@ -9008,6 +9073,8 @@ class ITable {
|
|
|
9008
9073
|
'i-table--striped': this.striped,
|
|
9009
9074
|
'i-table--hoverable': this.hoverable,
|
|
9010
9075
|
'i-table--bordered': this.bordered,
|
|
9076
|
+
'i-table--no-row-borders': !this.rowBorders,
|
|
9077
|
+
'i-table--no-detail-row-borders': !this.detailRowBorders,
|
|
9011
9078
|
'i-table--small': this.size === 'small',
|
|
9012
9079
|
'i-table--medium': this.size === 'medium',
|
|
9013
9080
|
'i-table--large': this.size === 'large',
|
|
@@ -9107,7 +9174,7 @@ class ITable {
|
|
|
9107
9174
|
return this.virtualScrollViewport?.measureScrollOffset() ?? 0;
|
|
9108
9175
|
}
|
|
9109
9176
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9110
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITable, isStandalone: true, selector: "i-table", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: false, isRequired: false, transformFunction: null }, filterDelay: { classPropertyName: "filterDelay", publicName: "filterDelay", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMinBufferPx: { classPropertyName: "virtualScrollMinBufferPx", publicName: "virtualScrollMinBufferPx", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMaxBufferPx: { classPropertyName: "virtualScrollMaxBufferPx", publicName: "virtualScrollMaxBufferPx", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: false, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: false, isRequired: false, transformFunction: null }, downloadMode: { classPropertyName: "downloadMode", publicName: "downloadMode", isSignal: false, isRequired: false, transformFunction: null }, downloadFormat: { classPropertyName: "downloadFormat", publicName: "downloadFormat", isSignal: false, isRequired: false, transformFunction: null }, downloadFilename: { classPropertyName: "downloadFilename", publicName: "downloadFilename", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onFilter: "onFilter", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n <!-- Table Header: global filter + download -->\n @if (globalFilter || downloadable) {\n <div class=\"i-table-header\">\n <div class=\"i-table-header-start\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"i-table-header-end\">\n @if (globalFilter) {\n <div class=\"i-table-global-filter\">\n <i-input-text\n [useFloatLabel]=\"false\"\n label=\"Search table\"\n placeholder=\"Search\u2026\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n ></i-input-text>\n </div>\n }\n @if (downloadable) {\n <div class=\"i-table-download\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n icon=\"pi pi-download\"\n label=\"Download\"\n (clicked)=\"handleDownload()\"\n ></i-button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Loading Overlay -->\n @if (loading) {\n <div class=\"i-table-loading-overlay\">\n <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n </div>\n }\n\n <!-- ================================================================\n PATH A \u2014 Detail-expandable table\n Uses a standard scrollable container so that nested <i-table>\n components can expand inline below their parent rows.\n ================================================================ -->\n @if (hasDetails()) {\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <!-- Parent row -->\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"xtra-small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n [ariaExpanded]=\"isRowExpanded(row)\"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getCellIcon(row, column)\"\n [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n <td class=\"i-table-detail-count-cell\">\n ({{ getDetailRowCount(row) }})\n </td>\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n\n <!-- Detail expansion row -->\n @if (isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"totalColspan()\"\n class=\"i-table-expanded-cell\"\n >\n <div class=\"i-table-expanded-content\">\n <i-table\n [grid]=\"getDetailGrid(row)\"\n [sortable]=\"sortable\"\n [filterable]=\"filterable\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"selection\"\n [striped]=\"striped\"\n [hoverable]=\"hoverable\"\n [bordered]=\"bordered\"\n [size]=\"size\"\n [dataKey]=\"dataKey\"\n [resizableColumns]=\"resizableColumns\"\n (onSort)=\"onSort.emit($event)\"\n (onFilter)=\"onFilter.emit($event)\"\n (onSelectionChange)=\"onSelectionChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n ></i-table>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n } @else if (virtualScroll) {\n <!-- ================================================================\n PATH B \u2014 CDK Virtual Scroll (div-based rows)\n Use only for large row counts (\u2265 ~500 rows). Uses flex <div> rows\n so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n [style.height]=\"effectiveHeight()\"\n >\n <!-- Sticky header \u2014 flex rows that mirror the virtual body rows -->\n <div class=\"i-table-virtual-header\">\n @if (filterable) {\n <div class=\"i-table-virtual-row i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n >\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n />\n </div>\n } @else {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n ></div>\n }\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n }\n </div>\n }\n <div class=\"i-table-virtual-row i-table-header-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell i-table-header-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\">\n {{ grid().actionsHeader ?? 'Actions' }}\n </div>\n }\n </div>\n </div>\n\n <!-- Virtual Scroll Viewport \u2014 *cdkVirtualFor on <div>, not <tr> -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n @if (processedData().length === 0) {\n <div class=\"i-table-virtual-row i-table-empty-row\">\n <div\n class=\"i-table-virtual-cell\"\n style=\"flex: 1; text-align: center; padding: 40px 16px\"\n >\n <i-no-content />\n </div>\n </div>\n }\n <div\n *cdkVirtualFor=\"\n let row of processedData();\n let rowIndex = index;\n trackBy: trackByRow\n \"\n class=\"i-table-virtual-row\"\n [style.height.px]=\"virtualScrollItemSize\"\n [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [ngClass]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n } @else {\n <!-- ================================================================\n PATH C \u2014 Regular scrollable table\n Default for small/medium datasets and nested detail tables.\n Uses a plain overflow container with a @for loop \u2014 no CDK needed.\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:0;margin:2px 0 24px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}:host{display:block;min-width:0}.i-table-wrapper .i-table-header{flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{min-width:0;flex-wrap:wrap;gap:.75rem}.i-table-wrapper .i-table-header .i-table-header-end{min-width:0;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:min(250px,100%)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ITable), selector: "i-table", inputs: ["grid", "emptyMessage", "sortable", "sortField", "sortOrder", "filterable", "globalFilter", "filterDelay", "selectionMode", "selection", "dataKey", "striped", "hoverable", "bordered", "size", "loading", "scrollable", "height", "virtualScroll", "virtualScrollItemSize", "virtualScrollMinBufferPx", "virtualScrollMaxBufferPx", "resizableColumns", "downloadable", "downloadMode", "downloadFormat", "downloadFilename"], outputs: ["onSort", "onFilter", "selectionChange", "onSelectionChange", "onRowSelect", "onRowUnselect", "onRowExpand", "onRowCollapse", "onDownload"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.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: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => CdkVirtualScrollViewport), selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i0.forwardRef(() => CdkVirtualForOf), selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: i0.forwardRef(() => CdkFixedSizeVirtualScroll), selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i0.forwardRef(() => IInputText), selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: i0.forwardRef(() => IButton), selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: i0.forwardRef(() => ICheckbox), selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => IChip), selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: i0.forwardRef(() => NoContentComponent), selector: "i-no-content", inputs: ["icon", "message"] }, { kind: "directive", type: i0.forwardRef(() => TooltipDirective), selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9177
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITable, isStandalone: true, selector: "i-table", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: false, isRequired: false, transformFunction: null }, filterDelay: { classPropertyName: "filterDelay", publicName: "filterDelay", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, rowBorders: { classPropertyName: "rowBorders", publicName: "rowBorders", isSignal: false, isRequired: false, transformFunction: null }, detailRowBorders: { classPropertyName: "detailRowBorders", publicName: "detailRowBorders", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMinBufferPx: { classPropertyName: "virtualScrollMinBufferPx", publicName: "virtualScrollMinBufferPx", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMaxBufferPx: { classPropertyName: "virtualScrollMaxBufferPx", publicName: "virtualScrollMaxBufferPx", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: false, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: false, isRequired: false, transformFunction: null }, downloadMode: { classPropertyName: "downloadMode", publicName: "downloadMode", isSignal: false, isRequired: false, transformFunction: null }, downloadFormat: { classPropertyName: "downloadFormat", publicName: "downloadFormat", isSignal: false, isRequired: false, transformFunction: null }, downloadFilename: { classPropertyName: "downloadFilename", publicName: "downloadFilename", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onFilter: "onFilter", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n <!-- Table Header: global filter + download -->\n @if (globalFilter || downloadable) {\n <div class=\"i-table-header\">\n <div class=\"i-table-header-start\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"i-table-header-end\">\n @if (globalFilter) {\n <div class=\"i-table-global-filter\">\n <i-input-text\n [useFloatLabel]=\"false\"\n label=\"Search table\"\n placeholder=\"Search\u2026\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n ></i-input-text>\n </div>\n }\n @if (downloadable) {\n <div class=\"i-table-download\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n icon=\"pi pi-download\"\n label=\"Download\"\n (clicked)=\"handleDownload()\"\n ></i-button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Loading Overlay -->\n @if (loading) {\n <div class=\"i-table-loading-overlay\">\n <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n </div>\n }\n\n <!-- ================================================================\n PATH A \u2014 Detail-expandable table\n Uses a standard scrollable container so that nested <i-table>\n components can expand inline below their parent rows.\n ================================================================ -->\n @if (hasDetails()) {\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <!-- Parent row -->\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"xtra-small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n [ariaExpanded]=\"isRowExpanded(row)\"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getCellIcon(row, column)\"\n [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n <td class=\"i-table-detail-count-cell\">\n ({{ getDetailRowCount(row) }})\n </td>\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n\n <!-- Detail expansion row -->\n @if (isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"totalColspan()\"\n class=\"i-table-expanded-cell\"\n >\n <div class=\"i-table-expanded-content\">\n <i-table\n [grid]=\"getDetailGrid(row)\"\n [rowBorders]=\"detailRowBorders\"\n [sortable]=\"sortable\"\n [filterable]=\"filterable\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"selection\"\n [striped]=\"striped\"\n [hoverable]=\"hoverable\"\n [bordered]=\"bordered\"\n [size]=\"size\"\n [dataKey]=\"dataKey\"\n [resizableColumns]=\"resizableColumns\"\n (onSort)=\"onSort.emit($event)\"\n (onFilter)=\"onFilter.emit($event)\"\n (onSelectionChange)=\"onSelectionChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n ></i-table>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n } @else if (virtualScroll) {\n <!-- ================================================================\n PATH B \u2014 CDK Virtual Scroll (div-based rows)\n Use only for large row counts (\u2265 ~500 rows). Uses flex <div> rows\n so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n [style.height]=\"effectiveHeight()\"\n >\n <!-- Sticky header \u2014 flex rows that mirror the virtual body rows -->\n <div class=\"i-table-virtual-header\">\n @if (filterable) {\n <div class=\"i-table-virtual-row i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n >\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n />\n </div>\n } @else {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n ></div>\n }\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n }\n </div>\n }\n <div class=\"i-table-virtual-row i-table-header-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell i-table-header-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\">\n {{ grid().actionsHeader ?? 'Actions' }}\n </div>\n }\n </div>\n </div>\n\n <!-- Virtual Scroll Viewport \u2014 *cdkVirtualFor on <div>, not <tr> -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n @if (processedData().length === 0) {\n <div class=\"i-table-virtual-row i-table-empty-row\">\n <div\n class=\"i-table-virtual-cell\"\n style=\"flex: 1; text-align: center; padding: 40px 16px\"\n >\n <i-no-content />\n </div>\n </div>\n }\n <div\n *cdkVirtualFor=\"\n let row of processedData();\n let rowIndex = index;\n trackBy: trackByRow\n \"\n class=\"i-table-virtual-row\"\n [style.height.px]=\"virtualScrollItemSize\"\n [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [ngClass]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n } @else {\n <!-- ================================================================\n PATH C \u2014 Regular scrollable table\n Default for small/medium datasets and nested detail tables.\n Uses a plain overflow container with a @for loop \u2014 no CDK needed.\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr>td{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row>td{border-bottom:none}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:0;margin:2px 0 24px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}:host{display:block;min-width:0}.i-table-wrapper .i-table-header{flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{min-width:0;flex-wrap:wrap;gap:.75rem}.i-table-wrapper .i-table-header .i-table-header-end{min-width:0;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:min(250px,100%)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ITable), selector: "i-table", inputs: ["grid", "emptyMessage", "sortable", "sortField", "sortOrder", "filterable", "globalFilter", "filterDelay", "selectionMode", "selection", "dataKey", "striped", "hoverable", "bordered", "rowBorders", "detailRowBorders", "size", "loading", "scrollable", "height", "virtualScroll", "virtualScrollItemSize", "virtualScrollMinBufferPx", "virtualScrollMaxBufferPx", "resizableColumns", "downloadable", "downloadMode", "downloadFormat", "downloadFilename"], outputs: ["onSort", "onFilter", "selectionChange", "onSelectionChange", "onRowSelect", "onRowUnselect", "onRowExpand", "onRowCollapse", "onDownload"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.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: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => CdkVirtualScrollViewport), selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i0.forwardRef(() => CdkVirtualForOf), selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: i0.forwardRef(() => CdkFixedSizeVirtualScroll), selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i0.forwardRef(() => IInputText), selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: i0.forwardRef(() => IButton), selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: i0.forwardRef(() => ICheckbox), selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => IChip), selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: i0.forwardRef(() => NoContentComponent), selector: "i-no-content", inputs: ["icon", "message"] }, { kind: "directive", type: i0.forwardRef(() => TooltipDirective), selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9111
9178
|
}
|
|
9112
9179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITable, decorators: [{
|
|
9113
9180
|
type: Component,
|
|
@@ -9124,7 +9191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
9124
9191
|
NoContentComponent,
|
|
9125
9192
|
TooltipDirective,
|
|
9126
9193
|
forwardRef(() => ITable),
|
|
9127
|
-
], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n <!-- Table Header: global filter + download -->\n @if (globalFilter || downloadable) {\n <div class=\"i-table-header\">\n <div class=\"i-table-header-start\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"i-table-header-end\">\n @if (globalFilter) {\n <div class=\"i-table-global-filter\">\n <i-input-text\n [useFloatLabel]=\"false\"\n label=\"Search table\"\n placeholder=\"Search\u2026\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n ></i-input-text>\n </div>\n }\n @if (downloadable) {\n <div class=\"i-table-download\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n icon=\"pi pi-download\"\n label=\"Download\"\n (clicked)=\"handleDownload()\"\n ></i-button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Loading Overlay -->\n @if (loading) {\n <div class=\"i-table-loading-overlay\">\n <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n </div>\n }\n\n <!-- ================================================================\n PATH A \u2014 Detail-expandable table\n Uses a standard scrollable container so that nested <i-table>\n components can expand inline below their parent rows.\n ================================================================ -->\n @if (hasDetails()) {\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <!-- Parent row -->\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"xtra-small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n [ariaExpanded]=\"isRowExpanded(row)\"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getCellIcon(row, column)\"\n [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n <td class=\"i-table-detail-count-cell\">\n ({{ getDetailRowCount(row) }})\n </td>\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n\n <!-- Detail expansion row -->\n @if (isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"totalColspan()\"\n class=\"i-table-expanded-cell\"\n >\n <div class=\"i-table-expanded-content\">\n <i-table\n [grid]=\"getDetailGrid(row)\"\n [sortable]=\"sortable\"\n [filterable]=\"filterable\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"selection\"\n [striped]=\"striped\"\n [hoverable]=\"hoverable\"\n [bordered]=\"bordered\"\n [size]=\"size\"\n [dataKey]=\"dataKey\"\n [resizableColumns]=\"resizableColumns\"\n (onSort)=\"onSort.emit($event)\"\n (onFilter)=\"onFilter.emit($event)\"\n (onSelectionChange)=\"onSelectionChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n ></i-table>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n } @else if (virtualScroll) {\n <!-- ================================================================\n PATH B \u2014 CDK Virtual Scroll (div-based rows)\n Use only for large row counts (\u2265 ~500 rows). Uses flex <div> rows\n so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n [style.height]=\"effectiveHeight()\"\n >\n <!-- Sticky header \u2014 flex rows that mirror the virtual body rows -->\n <div class=\"i-table-virtual-header\">\n @if (filterable) {\n <div class=\"i-table-virtual-row i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n >\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n />\n </div>\n } @else {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n ></div>\n }\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n }\n </div>\n }\n <div class=\"i-table-virtual-row i-table-header-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell i-table-header-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\">\n {{ grid().actionsHeader ?? 'Actions' }}\n </div>\n }\n </div>\n </div>\n\n <!-- Virtual Scroll Viewport \u2014 *cdkVirtualFor on <div>, not <tr> -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n @if (processedData().length === 0) {\n <div class=\"i-table-virtual-row i-table-empty-row\">\n <div\n class=\"i-table-virtual-cell\"\n style=\"flex: 1; text-align: center; padding: 40px 16px\"\n >\n <i-no-content />\n </div>\n </div>\n }\n <div\n *cdkVirtualFor=\"\n let row of processedData();\n let rowIndex = index;\n trackBy: trackByRow\n \"\n class=\"i-table-virtual-row\"\n [style.height.px]=\"virtualScrollItemSize\"\n [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [ngClass]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n } @else {\n <!-- ================================================================\n PATH C \u2014 Regular scrollable table\n Default for small/medium datasets and nested detail tables.\n Uses a plain overflow container with a @for loop \u2014 no CDK needed.\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:0;margin:2px 0 24px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}:host{display:block;min-width:0}.i-table-wrapper .i-table-header{flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{min-width:0;flex-wrap:wrap;gap:.75rem}.i-table-wrapper .i-table-header .i-table-header-end{min-width:0;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:min(250px,100%)}\n"] }]
|
|
9194
|
+
], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n <!-- Table Header: global filter + download -->\n @if (globalFilter || downloadable) {\n <div class=\"i-table-header\">\n <div class=\"i-table-header-start\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"i-table-header-end\">\n @if (globalFilter) {\n <div class=\"i-table-global-filter\">\n <i-input-text\n [useFloatLabel]=\"false\"\n label=\"Search table\"\n placeholder=\"Search\u2026\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n ></i-input-text>\n </div>\n }\n @if (downloadable) {\n <div class=\"i-table-download\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n icon=\"pi pi-download\"\n label=\"Download\"\n (clicked)=\"handleDownload()\"\n ></i-button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Loading Overlay -->\n @if (loading) {\n <div class=\"i-table-loading-overlay\">\n <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n </div>\n }\n\n <!-- ================================================================\n PATH A \u2014 Detail-expandable table\n Uses a standard scrollable container so that nested <i-table>\n components can expand inline below their parent rows.\n ================================================================ -->\n @if (hasDetails()) {\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <!-- Parent row -->\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"xtra-small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n [ariaExpanded]=\"isRowExpanded(row)\"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getCellIcon(row, column)\"\n [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n <td class=\"i-table-detail-count-cell\">\n ({{ getDetailRowCount(row) }})\n </td>\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n\n <!-- Detail expansion row -->\n @if (isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"totalColspan()\"\n class=\"i-table-expanded-cell\"\n >\n <div class=\"i-table-expanded-content\">\n <i-table\n [grid]=\"getDetailGrid(row)\"\n [rowBorders]=\"detailRowBorders\"\n [sortable]=\"sortable\"\n [filterable]=\"filterable\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"selection\"\n [striped]=\"striped\"\n [hoverable]=\"hoverable\"\n [bordered]=\"bordered\"\n [size]=\"size\"\n [dataKey]=\"dataKey\"\n [resizableColumns]=\"resizableColumns\"\n (onSort)=\"onSort.emit($event)\"\n (onFilter)=\"onFilter.emit($event)\"\n (onSelectionChange)=\"onSelectionChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n ></i-table>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n } @else if (virtualScroll) {\n <!-- ================================================================\n PATH B \u2014 CDK Virtual Scroll (div-based rows)\n Use only for large row counts (\u2265 ~500 rows). Uses flex <div> rows\n so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n [style.height]=\"effectiveHeight()\"\n >\n <!-- Sticky header \u2014 flex rows that mirror the virtual body rows -->\n <div class=\"i-table-virtual-header\">\n @if (filterable) {\n <div class=\"i-table-virtual-row i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n >\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n />\n </div>\n } @else {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n ></div>\n }\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n }\n </div>\n }\n <div class=\"i-table-virtual-row i-table-header-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell i-table-header-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\">\n {{ grid().actionsHeader ?? 'Actions' }}\n </div>\n }\n </div>\n </div>\n\n <!-- Virtual Scroll Viewport \u2014 *cdkVirtualFor on <div>, not <tr> -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n @if (processedData().length === 0) {\n <div class=\"i-table-virtual-row i-table-empty-row\">\n <div\n class=\"i-table-virtual-cell\"\n style=\"flex: 1; text-align: center; padding: 40px 16px\"\n >\n <i-no-content />\n </div>\n </div>\n }\n <div\n *cdkVirtualFor=\"\n let row of processedData();\n let rowIndex = index;\n trackBy: trackByRow\n \"\n class=\"i-table-virtual-row\"\n [style.height.px]=\"virtualScrollItemSize\"\n [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [ngClass]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n } @else {\n <!-- ================================================================\n PATH C \u2014 Regular scrollable table\n Default for small/medium datasets and nested detail tables.\n Uses a plain overflow container with a @for loop \u2014 no CDK needed.\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr>td{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row>td{border-bottom:none}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:0;margin:2px 0 24px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}:host{display:block;min-width:0}.i-table-wrapper .i-table-header{flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{min-width:0;flex-wrap:wrap;gap:.75rem}.i-table-wrapper .i-table-header .i-table-header-end{min-width:0;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:min(250px,100%)}\n"] }]
|
|
9128
9195
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], emptyMessage: [{
|
|
9129
9196
|
type: Input
|
|
9130
9197
|
}], sortable: [{
|
|
@@ -9163,6 +9230,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
9163
9230
|
type: Input
|
|
9164
9231
|
}], bordered: [{
|
|
9165
9232
|
type: Input
|
|
9233
|
+
}], rowBorders: [{
|
|
9234
|
+
type: Input
|
|
9235
|
+
}], detailRowBorders: [{
|
|
9236
|
+
type: Input
|
|
9166
9237
|
}], size: [{
|
|
9167
9238
|
type: Input
|
|
9168
9239
|
}], loading: [{
|
|
@@ -10623,5 +10694,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
10623
10694
|
* Generated bundle index. Do not edit.
|
|
10624
10695
|
*/
|
|
10625
10696
|
|
|
10626
|
-
export { AbstractDialog, CLAIMS_CHECKER, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IDivider, IFieldPicker, IFileUpload, IInputText, IListbox, IMessage, IMultiSelect, IOrderedList, IOverlayPanel, IPanel, IPlaceholder, IProgressSpinner, IRadioButton, IRuleEditor, ISelect, IStep, IStepper, ITabPanel, ITable, ITabs, ITag, ITextarea, IToggle, ITreeView, IWhisper, LayoutComponent, LayoutService, LocalStorageColorSchemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId, provideMenuClaimsChecker };
|
|
10697
|
+
export { AbstractDialog, CLAIMS_CHECKER, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, ICardButton, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IDivider, IFieldPicker, IFileUpload, IInputText, IListbox, IMessage, IMultiSelect, IOrderedList, IOverlayPanel, IPanel, IPlaceholder, IProgressSpinner, IRadioButton, IRuleEditor, ISelect, IStep, IStepper, ITabPanel, ITable, ITabs, ITag, ITextarea, IToggle, ITreeView, IWhisper, LayoutComponent, LayoutService, LocalStorageColorSchemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId, provideMenuClaimsChecker };
|
|
10627
10698
|
//# sourceMappingURL=invensys-ng.mjs.map
|