integra-ng 21.0.24 → 21.0.26
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/integra-ng.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
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, effect, InjectionToken, computed, input, ViewEncapsulation, ChangeDetectorRef, ViewChildren, Inject } 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, booleanAttribute, effect, InjectionToken, computed, input, 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';
|
|
@@ -97,11 +97,11 @@ class IAccordion {
|
|
|
97
97
|
this.onToggle.emit(this.expanded);
|
|
98
98
|
}
|
|
99
99
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
100
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IAccordion, isStandalone: true, selector: "i-accordion", inputs: { header: "header", expanded: "expanded", disabled: "disabled", icon: "icon" }, outputs: { expandedChange: "expandedChange", onToggle: "onToggle" }, ngImport: i0, template: "<div\n class=\"i-accordion\"\n [class.expanded]=\"expanded\"\n [class.disabled]=\"disabled\"\n [attr.id]=\"componentId\"\n>\n <div\n class=\"i-accordion-header\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-disabled]=\"disabled\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n >\n <div class=\"i-accordion-header-content\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-accordion-icon\"></i>\n }\n <span class=\"i-accordion-title\">{{ header }}</span>\n </div>\n <i class=\"pi i-accordion-toggle-icon\" [class.pi-chevron-down]=\"!expanded\" [class.pi-chevron-up]=\"expanded\"></i>\n </div>\n <div class=\"i-accordion-content-wrapper\" [class.collapsed]=\"!expanded\">\n <div class=\"i-accordion-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".i-accordion{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-accordion .i-accordion-header{color:var(--color-text-primary)}.i-accordion .i-accordion-header:hover:not(.disabled .i-accordion .i-accordion-header){background:var(--surface-hover)}.i-accordion .i-accordion-header .i-accordion-icon{color:var(--color-primary)}.i-accordion .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-secondary)}.i-accordion .i-accordion-content{color:var(--color-text-primary)}.i-accordion.disabled .i-accordion-header{color
|
|
100
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IAccordion, isStandalone: true, selector: "i-accordion", inputs: { header: "header", expanded: "expanded", disabled: "disabled", icon: "icon" }, outputs: { expandedChange: "expandedChange", onToggle: "onToggle" }, ngImport: i0, template: "<div\n class=\"i-accordion\"\n [class.expanded]=\"expanded\"\n [class.disabled]=\"disabled\"\n [attr.id]=\"componentId\"\n>\n <div\n class=\"i-accordion-header\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-disabled]=\"disabled\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n >\n <div class=\"i-accordion-header-content\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-accordion-icon\"></i>\n }\n <span class=\"i-accordion-title\">{{ header }}</span>\n </div>\n <i class=\"pi i-accordion-toggle-icon\" [class.pi-chevron-down]=\"!expanded\" [class.pi-chevron-up]=\"expanded\"></i>\n </div>\n <div class=\"i-accordion-content-wrapper\" [class.collapsed]=\"!expanded\">\n <div class=\"i-accordion-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".i-accordion{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-accordion .i-accordion-header{color:var(--color-text-primary)}.i-accordion .i-accordion-header:hover:not(.disabled .i-accordion .i-accordion-header){background:var(--surface-hover)}.i-accordion .i-accordion-header .i-accordion-icon{color:var(--color-primary)}.i-accordion .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-secondary)}.i-accordion .i-accordion-content{color:var(--color-text-primary)}.i-accordion.disabled .i-accordion-header{color:var(--color-text-disabled);cursor:not-allowed}.i-accordion.disabled .i-accordion-header .i-accordion-icon,.i-accordion.disabled .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-disabled)}.i-accordion{border-radius:8px;overflow:visible}.i-accordion.expanded .i-accordion-header{border-radius:8px 8px 0 0}.i-accordion:not(.expanded) .i-accordion-header{border-radius:8px}.i-accordion.disabled{opacity:.6}.i-accordion.disabled .i-accordion-header{cursor:not-allowed}.i-accordion .i-accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-accordion .i-accordion-header .i-accordion-header-content{display:flex;align-items:center;gap:12px}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-icon{font-size:1em}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-title{font-weight:600;font-size:1em}.i-accordion .i-accordion-header .i-accordion-toggle-icon{font-size:1em;transition:transform .2s ease}.i-accordion .i-accordion-content-wrapper{transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1;border-radius:0 0 8px 8px}.i-accordion .i-accordion-content-wrapper.collapsed{max-height:0;opacity:0;overflow:hidden}.i-accordion .i-accordion-content-wrapper .i-accordion-content{padding:0 16px 16px}\n"] });
|
|
101
101
|
}
|
|
102
102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IAccordion, decorators: [{
|
|
103
103
|
type: Component,
|
|
104
|
-
args: [{ selector: 'i-accordion', template: "<div\n class=\"i-accordion\"\n [class.expanded]=\"expanded\"\n [class.disabled]=\"disabled\"\n [attr.id]=\"componentId\"\n>\n <div\n class=\"i-accordion-header\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-disabled]=\"disabled\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n >\n <div class=\"i-accordion-header-content\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-accordion-icon\"></i>\n }\n <span class=\"i-accordion-title\">{{ header }}</span>\n </div>\n <i class=\"pi i-accordion-toggle-icon\" [class.pi-chevron-down]=\"!expanded\" [class.pi-chevron-up]=\"expanded\"></i>\n </div>\n <div class=\"i-accordion-content-wrapper\" [class.collapsed]=\"!expanded\">\n <div class=\"i-accordion-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".i-accordion{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-accordion .i-accordion-header{color:var(--color-text-primary)}.i-accordion .i-accordion-header:hover:not(.disabled .i-accordion .i-accordion-header){background:var(--surface-hover)}.i-accordion .i-accordion-header .i-accordion-icon{color:var(--color-primary)}.i-accordion .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-secondary)}.i-accordion .i-accordion-content{color:var(--color-text-primary)}.i-accordion.disabled .i-accordion-header{color
|
|
104
|
+
args: [{ selector: 'i-accordion', template: "<div\n class=\"i-accordion\"\n [class.expanded]=\"expanded\"\n [class.disabled]=\"disabled\"\n [attr.id]=\"componentId\"\n>\n <div\n class=\"i-accordion-header\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-disabled]=\"disabled\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n >\n <div class=\"i-accordion-header-content\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-accordion-icon\"></i>\n }\n <span class=\"i-accordion-title\">{{ header }}</span>\n </div>\n <i class=\"pi i-accordion-toggle-icon\" [class.pi-chevron-down]=\"!expanded\" [class.pi-chevron-up]=\"expanded\"></i>\n </div>\n <div class=\"i-accordion-content-wrapper\" [class.collapsed]=\"!expanded\">\n <div class=\"i-accordion-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".i-accordion{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-accordion .i-accordion-header{color:var(--color-text-primary)}.i-accordion .i-accordion-header:hover:not(.disabled .i-accordion .i-accordion-header){background:var(--surface-hover)}.i-accordion .i-accordion-header .i-accordion-icon{color:var(--color-primary)}.i-accordion .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-secondary)}.i-accordion .i-accordion-content{color:var(--color-text-primary)}.i-accordion.disabled .i-accordion-header{color:var(--color-text-disabled);cursor:not-allowed}.i-accordion.disabled .i-accordion-header .i-accordion-icon,.i-accordion.disabled .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-disabled)}.i-accordion{border-radius:8px;overflow:visible}.i-accordion.expanded .i-accordion-header{border-radius:8px 8px 0 0}.i-accordion:not(.expanded) .i-accordion-header{border-radius:8px}.i-accordion.disabled{opacity:.6}.i-accordion.disabled .i-accordion-header{cursor:not-allowed}.i-accordion .i-accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-accordion .i-accordion-header .i-accordion-header-content{display:flex;align-items:center;gap:12px}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-icon{font-size:1em}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-title{font-weight:600;font-size:1em}.i-accordion .i-accordion-header .i-accordion-toggle-icon{font-size:1em;transition:transform .2s ease}.i-accordion .i-accordion-content-wrapper{transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1;border-radius:0 0 8px 8px}.i-accordion .i-accordion-content-wrapper.collapsed{max-height:0;opacity:0;overflow:hidden}.i-accordion .i-accordion-content-wrapper .i-accordion-content{padding:0 16px 16px}\n"] }]
|
|
105
105
|
}], propDecorators: { header: [{
|
|
106
106
|
type: Input
|
|
107
107
|
}], expanded: [{
|
|
@@ -982,11 +982,11 @@ class IInputText {
|
|
|
982
982
|
inputElement.value = this.value;
|
|
983
983
|
}
|
|
984
984
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IInputText, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
985
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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
|
|
985
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 [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:focus+.i-label,.i-input:not(:placeholder-shown)+.i-label,.i-label.floated{background:var(--color-component-background-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:4px;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:8px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-input-wrapper .float-label .i-input:focus+.i-label,.i-input-wrapper .float-label .i-input:not(:placeholder-shown)+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-8px}.i-input-wrapper .float-label.has-icon .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"] }] });
|
|
986
986
|
}
|
|
987
987
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IInputText, decorators: [{
|
|
988
988
|
type: Component,
|
|
989
|
-
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
|
|
989
|
+
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 [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:focus+.i-label,.i-input:not(:placeholder-shown)+.i-label,.i-label.floated{background:var(--color-component-background-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:4px;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:8px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-input-wrapper .float-label .i-input:focus+.i-label,.i-input-wrapper .float-label .i-input:not(:placeholder-shown)+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-8px}.i-input-wrapper .float-label.has-icon .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"] }]
|
|
990
990
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
991
991
|
type: Optional
|
|
992
992
|
}, {
|
|
@@ -1823,7 +1823,7 @@ class ICheckbox {
|
|
|
1823
1823
|
useExisting: forwardRef(() => ICheckbox),
|
|
1824
1824
|
multi: true,
|
|
1825
1825
|
},
|
|
1826
|
-
], ngImport: i0, template: "<div\n class=\"i-checkbox-wrapper\"\n [class.i-checkbox--disabled]=\"disabled\"\n [class.i-checkbox--readonly]=\"readonly\"\n [class.i-checkbox--small]=\"size === 'small'\"\n [class.i-checkbox--medium]=\"size === 'medium'\"\n [class.i-checkbox--large]=\"size === 'large'\"\n>\n <div\n class=\"i-checkbox\"\n [class.i-checkbox--checked]=\"checked\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n (keydown.enter)=\"$event.preventDefault(); toggle()\"\n >\n @if (!checked && indeterminate) {\n <i class=\"pi pi-minus i-checkbox-icon\"></i>\n } @if (!indeterminate) {\n <i\n class=\"pi pi-check i-checkbox-icon\"\n [style.opacity]=\"checked ? '1' : '0'\"\n ></i>\n }\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-checkbox-label\"\n (click)=\"toggle()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color
|
|
1826
|
+
], ngImport: i0, template: "<div\n class=\"i-checkbox-wrapper\"\n [class.i-checkbox--disabled]=\"disabled\"\n [class.i-checkbox--readonly]=\"readonly\"\n [class.i-checkbox--small]=\"size === 'small'\"\n [class.i-checkbox--medium]=\"size === 'medium'\"\n [class.i-checkbox--large]=\"size === 'large'\"\n>\n <div\n class=\"i-checkbox\"\n [class.i-checkbox--checked]=\"checked\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n (keydown.enter)=\"$event.preventDefault(); toggle()\"\n >\n @if (!checked && indeterminate) {\n <i class=\"pi pi-minus i-checkbox-icon\"></i>\n } @if (!indeterminate) {\n <i\n class=\"pi pi-check i-checkbox-icon\"\n [style.opacity]=\"checked ? '1' : '0'\"\n ></i>\n }\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-checkbox-label\"\n (click)=\"toggle()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-checkbox-wrapper.i-checkbox--disabled{opacity:.6;cursor:not-allowed}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{cursor:not-allowed;pointer-events:none}.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox,.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox-label{cursor:default}.i-checkbox-wrapper.i-checkbox--small{font-size:.9em;gap:6px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox{width:14px;height:14px;padding:0 0 0 1px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox .i-checkbox-icon{font-size:8px}.i-checkbox-wrapper.i-checkbox--medium{font-size:1em;gap:8px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox{width:16px;height:16px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox .i-checkbox-icon{font-size:10px}.i-checkbox-wrapper.i-checkbox--large{font-size:1.2em;gap:10px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox{width:20px;height:20px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox .i-checkbox-icon{font-size:12px}.i-checkbox-wrapper .i-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-checkbox-wrapper .i-checkbox:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-checkbox-wrapper .i-checkbox .i-checkbox-icon{font-size:10px;font-weight:700;transition:all .15s ease}.i-checkbox-wrapper .i-checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] });
|
|
1827
1827
|
}
|
|
1828
1828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ICheckbox, decorators: [{
|
|
1829
1829
|
type: Component,
|
|
@@ -1833,7 +1833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1833
1833
|
useExisting: forwardRef(() => ICheckbox),
|
|
1834
1834
|
multi: true,
|
|
1835
1835
|
},
|
|
1836
|
-
], template: "<div\n class=\"i-checkbox-wrapper\"\n [class.i-checkbox--disabled]=\"disabled\"\n [class.i-checkbox--readonly]=\"readonly\"\n [class.i-checkbox--small]=\"size === 'small'\"\n [class.i-checkbox--medium]=\"size === 'medium'\"\n [class.i-checkbox--large]=\"size === 'large'\"\n>\n <div\n class=\"i-checkbox\"\n [class.i-checkbox--checked]=\"checked\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n (keydown.enter)=\"$event.preventDefault(); toggle()\"\n >\n @if (!checked && indeterminate) {\n <i class=\"pi pi-minus i-checkbox-icon\"></i>\n } @if (!indeterminate) {\n <i\n class=\"pi pi-check i-checkbox-icon\"\n [style.opacity]=\"checked ? '1' : '0'\"\n ></i>\n }\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-checkbox-label\"\n (click)=\"toggle()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color
|
|
1836
|
+
], template: "<div\n class=\"i-checkbox-wrapper\"\n [class.i-checkbox--disabled]=\"disabled\"\n [class.i-checkbox--readonly]=\"readonly\"\n [class.i-checkbox--small]=\"size === 'small'\"\n [class.i-checkbox--medium]=\"size === 'medium'\"\n [class.i-checkbox--large]=\"size === 'large'\"\n>\n <div\n class=\"i-checkbox\"\n [class.i-checkbox--checked]=\"checked\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n (keydown.enter)=\"$event.preventDefault(); toggle()\"\n >\n @if (!checked && indeterminate) {\n <i class=\"pi pi-minus i-checkbox-icon\"></i>\n } @if (!indeterminate) {\n <i\n class=\"pi pi-check i-checkbox-icon\"\n [style.opacity]=\"checked ? '1' : '0'\"\n ></i>\n }\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-checkbox-label\"\n (click)=\"toggle()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-checkbox-wrapper.i-checkbox--disabled{opacity:.6;cursor:not-allowed}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{cursor:not-allowed;pointer-events:none}.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox,.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox-label{cursor:default}.i-checkbox-wrapper.i-checkbox--small{font-size:.9em;gap:6px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox{width:14px;height:14px;padding:0 0 0 1px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox .i-checkbox-icon{font-size:8px}.i-checkbox-wrapper.i-checkbox--medium{font-size:1em;gap:8px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox{width:16px;height:16px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox .i-checkbox-icon{font-size:10px}.i-checkbox-wrapper.i-checkbox--large{font-size:1.2em;gap:10px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox{width:20px;height:20px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox .i-checkbox-icon{font-size:12px}.i-checkbox-wrapper .i-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-checkbox-wrapper .i-checkbox:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-checkbox-wrapper .i-checkbox .i-checkbox-icon{font-size:10px;font-weight:700;transition:all .15s ease}.i-checkbox-wrapper .i-checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] }]
|
|
1837
1837
|
}], propDecorators: { label: [{
|
|
1838
1838
|
type: Input
|
|
1839
1839
|
}], id: [{
|
|
@@ -1937,11 +1937,11 @@ class IChip {
|
|
|
1937
1937
|
}
|
|
1938
1938
|
}
|
|
1939
1939
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1940
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IChip, isStandalone: true, selector: "i-chip", inputs: { label: "label", icon: "icon", image: "image", removable: "removable", removeIcon: "removeIcon", styleClass: "styleClass", disabled: "disabled" }, outputs: { onRemove: "onRemove" }, ngImport: i0, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n } @if (image) {\n <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n } @if (label) {\n <span class=\"i-chip-text\">{{ label }}</span>\n }\n <ng-content></ng-content>\n @if (removable && !disabled) {\n <i\n [class]=\"removeIcon\"\n class=\"i-chip-remove-icon\"\n (click)=\"onRemoveClick($event)\"\n ></i>\n }\n</div>\n", styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background
|
|
1940
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IChip, isStandalone: true, selector: "i-chip", inputs: { label: "label", icon: "icon", image: "image", removable: "removable", removeIcon: "removeIcon", styleClass: "styleClass", disabled: "disabled" }, outputs: { onRemove: "onRemove" }, ngImport: i0, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n } @if (image) {\n <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n } @if (label) {\n <span class=\"i-chip-text\">{{ label }}</span>\n }\n <ng-content></ng-content>\n @if (removable && !disabled) {\n <i\n [class]=\"removeIcon\"\n class=\"i-chip-remove-icon\"\n (click)=\"onRemoveClick($event)\"\n ></i>\n }\n</div>\n", styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:1em;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;max-width:150px}.i-chip.i-chip-disabled{opacity:.6;cursor:not-allowed}.i-chip .i-chip-icon{flex-shrink:0}.i-chip .i-chip-image{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}.i-chip .i-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.i-chip .i-chip-remove-icon{cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0;margin-left:4px}.i-chip .i-chip-remove-icon:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1941
1941
|
}
|
|
1942
1942
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IChip, decorators: [{
|
|
1943
1943
|
type: Component,
|
|
1944
|
-
args: [{ selector: 'i-chip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n } @if (image) {\n <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n } @if (label) {\n <span class=\"i-chip-text\">{{ label }}</span>\n }\n <ng-content></ng-content>\n @if (removable && !disabled) {\n <i\n [class]=\"removeIcon\"\n class=\"i-chip-remove-icon\"\n (click)=\"onRemoveClick($event)\"\n ></i>\n }\n</div>\n", styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background
|
|
1944
|
+
args: [{ selector: 'i-chip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n } @if (image) {\n <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n } @if (label) {\n <span class=\"i-chip-text\">{{ label }}</span>\n }\n <ng-content></ng-content>\n @if (removable && !disabled) {\n <i\n [class]=\"removeIcon\"\n class=\"i-chip-remove-icon\"\n (click)=\"onRemoveClick($event)\"\n ></i>\n }\n</div>\n", styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:1em;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;max-width:150px}.i-chip.i-chip-disabled{opacity:.6;cursor:not-allowed}.i-chip .i-chip-icon{flex-shrink:0}.i-chip .i-chip-image{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}.i-chip .i-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.i-chip .i-chip-remove-icon{cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0;margin-left:4px}.i-chip .i-chip-remove-icon:hover{opacity:1}\n"] }]
|
|
1945
1945
|
}], propDecorators: { label: [{
|
|
1946
1946
|
type: Input
|
|
1947
1947
|
}], icon: [{
|
|
@@ -2093,11 +2093,11 @@ class IChipsComponent {
|
|
|
2093
2093
|
this.closedAll.emit();
|
|
2094
2094
|
}
|
|
2095
2095
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IChipsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2096
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 } @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--floated{background:var(--color-component-background-secondary)}.i-chips-container:focus-within+.i-chips-label{background:var(--color-component-background-secondary)}.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
|
|
2096
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 } @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--floated{background:var(--color-component-background-secondary)}.i-chips-container:focus-within+.i-chips-label{background:var(--color-component-background-secondary)}.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:20px}.i-chips-wrapper--float .i-chips-label{position:absolute;top:14px;left:12px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-chips-wrapper--float .i-chips-label--floated{top:-8px;font-size:.85em}.i-chips-wrapper--float .i-chips-container:focus-within+.i-chips-label{top:-8px;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", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2097
2097
|
}
|
|
2098
2098
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IChipsComponent, decorators: [{
|
|
2099
2099
|
type: Component,
|
|
2100
|
-
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 } @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--floated{background:var(--color-component-background-secondary)}.i-chips-container:focus-within+.i-chips-label{background:var(--color-component-background-secondary)}.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
|
|
2100
|
+
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 } @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--floated{background:var(--color-component-background-secondary)}.i-chips-container:focus-within+.i-chips-label{background:var(--color-component-background-secondary)}.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:20px}.i-chips-wrapper--float .i-chips-label{position:absolute;top:14px;left:12px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-chips-wrapper--float .i-chips-label--floated{top:-8px;font-size:.85em}.i-chips-wrapper--float .i-chips-container:focus-within+.i-chips-label{top:-8px;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"] }]
|
|
2101
2101
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { chips: [{
|
|
2102
2102
|
type: Input
|
|
2103
2103
|
}], removable: [{
|
|
@@ -2285,12 +2285,18 @@ class AbstractDialog {
|
|
|
2285
2285
|
height;
|
|
2286
2286
|
closable = true;
|
|
2287
2287
|
modal = true;
|
|
2288
|
+
/**
|
|
2289
|
+
* When true, clicking the overlay backdrop will close the dialog.
|
|
2290
|
+
* Defaults to false — the dialog must be closed via the close button or ESC key,
|
|
2291
|
+
* or programmatically.
|
|
2292
|
+
*/
|
|
2293
|
+
dismissableMask = false;
|
|
2288
2294
|
contentStyle;
|
|
2289
2295
|
breakpoints;
|
|
2290
2296
|
visible = false;
|
|
2291
2297
|
visibleChange = new EventEmitter();
|
|
2292
2298
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AbstractDialog, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2293
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: AbstractDialog, isStandalone: true, inputs: { header: "header", width: "width", height: "height", closable: "closable", modal: "modal", contentStyle: "contentStyle", breakpoints: "breakpoints", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0 });
|
|
2299
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: AbstractDialog, isStandalone: true, inputs: { header: "header", width: "width", height: "height", closable: "closable", modal: "modal", dismissableMask: "dismissableMask", contentStyle: "contentStyle", breakpoints: "breakpoints", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0 });
|
|
2294
2300
|
}
|
|
2295
2301
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AbstractDialog, decorators: [{
|
|
2296
2302
|
type: Directive
|
|
@@ -2304,6 +2310,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2304
2310
|
type: Input
|
|
2305
2311
|
}], modal: [{
|
|
2306
2312
|
type: Input
|
|
2313
|
+
}], dismissableMask: [{
|
|
2314
|
+
type: Input
|
|
2307
2315
|
}], contentStyle: [{
|
|
2308
2316
|
type: Input
|
|
2309
2317
|
}], breakpoints: [{
|
|
@@ -2422,7 +2430,9 @@ class IDialog extends AbstractDialog {
|
|
|
2422
2430
|
}
|
|
2423
2431
|
}
|
|
2424
2432
|
/**
|
|
2425
|
-
* Handles overlay click to close modal dialog
|
|
2433
|
+
* Handles overlay click to close modal dialog.
|
|
2434
|
+
* Only fires when [dismissableMask]="true" is set — by default dialogs
|
|
2435
|
+
* are not closed by clicking the backdrop.
|
|
2426
2436
|
* @internal
|
|
2427
2437
|
*/
|
|
2428
2438
|
onOverlayClick(event) {
|
|
@@ -2431,6 +2441,7 @@ class IDialog extends AbstractDialog {
|
|
|
2431
2441
|
const overlay = event.currentTarget;
|
|
2432
2442
|
if (this.modal &&
|
|
2433
2443
|
this.closable &&
|
|
2444
|
+
this.dismissableMask &&
|
|
2434
2445
|
target === overlay) {
|
|
2435
2446
|
this.hide();
|
|
2436
2447
|
}
|
|
@@ -2612,6 +2623,7 @@ class DialogService {
|
|
|
2612
2623
|
dialogRef.instance.breakpoints = config.breakpoints;
|
|
2613
2624
|
dialogRef.instance.closable = config.closable !== false;
|
|
2614
2625
|
dialogRef.instance.modal = config.modal !== false;
|
|
2626
|
+
dialogRef.instance.dismissableMask = config.dismissableMask ?? false;
|
|
2615
2627
|
// Create the dialog reference first so we can pass it to the component
|
|
2616
2628
|
const closeSubject = new Subject();
|
|
2617
2629
|
let isClosing = false; // Flag to prevent circular calls
|
|
@@ -2930,6 +2942,398 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2930
2942
|
type: Input
|
|
2931
2943
|
}] } });
|
|
2932
2944
|
|
|
2945
|
+
/**
|
|
2946
|
+
* Textarea Component
|
|
2947
|
+
*
|
|
2948
|
+
* A form control multi-line text input component with floating labels and validation support.
|
|
2949
|
+
* Fully compatible with Angular Reactive Forms and Template-driven Forms.
|
|
2950
|
+
* Supports character counting, auto-resize, and custom error messages.
|
|
2951
|
+
*
|
|
2952
|
+
* @example
|
|
2953
|
+
* ```html
|
|
2954
|
+
* <!-- Basic textarea -->
|
|
2955
|
+
* <i-textarea label="Description"></i-textarea>
|
|
2956
|
+
*
|
|
2957
|
+
* <!-- Textarea with reactive form -->
|
|
2958
|
+
* <i-textarea
|
|
2959
|
+
* label="Bio"
|
|
2960
|
+
* formControlName="bio"
|
|
2961
|
+
* [rows]="5">
|
|
2962
|
+
* </i-textarea>
|
|
2963
|
+
*
|
|
2964
|
+
* <!-- Textarea with character limit -->
|
|
2965
|
+
* <i-textarea
|
|
2966
|
+
* label="Comment"
|
|
2967
|
+
* [(ngModel)]="comment"
|
|
2968
|
+
* [maxLength]="200">
|
|
2969
|
+
* </i-textarea>
|
|
2970
|
+
*
|
|
2971
|
+
* <!-- Full width textarea -->
|
|
2972
|
+
* <i-textarea
|
|
2973
|
+
* label="Notes"
|
|
2974
|
+
* [fluid]="true"
|
|
2975
|
+
* [rows]="6"
|
|
2976
|
+
* formControlName="notes">
|
|
2977
|
+
* </i-textarea>
|
|
2978
|
+
* ```
|
|
2979
|
+
*
|
|
2980
|
+
* @remarks
|
|
2981
|
+
* This component implements ControlValueAccessor for seamless integration with Angular Forms.
|
|
2982
|
+
* Supports floating labels, character counting, and custom validation messages.
|
|
2983
|
+
*/
|
|
2984
|
+
class ITextarea {
|
|
2985
|
+
ngControl;
|
|
2986
|
+
/**
|
|
2987
|
+
* Label text displayed for the textarea
|
|
2988
|
+
* @default 'Label'
|
|
2989
|
+
*/
|
|
2990
|
+
label = 'Label';
|
|
2991
|
+
/**
|
|
2992
|
+
* HTML id attribute for the textarea element
|
|
2993
|
+
*/
|
|
2994
|
+
id;
|
|
2995
|
+
/**
|
|
2996
|
+
* Whether the textarea should take full width of its container
|
|
2997
|
+
* @default false
|
|
2998
|
+
*/
|
|
2999
|
+
fluid = false;
|
|
3000
|
+
/**
|
|
3001
|
+
* Forces the label to stay in floated position
|
|
3002
|
+
* @default false
|
|
3003
|
+
*/
|
|
3004
|
+
forceFloated = false;
|
|
3005
|
+
/**
|
|
3006
|
+
* Enables floating label animation
|
|
3007
|
+
* @default true
|
|
3008
|
+
*/
|
|
3009
|
+
useFloatLabel = true;
|
|
3010
|
+
/**
|
|
3011
|
+
* Placeholder text for the textarea
|
|
3012
|
+
*/
|
|
3013
|
+
placeholder;
|
|
3014
|
+
/**
|
|
3015
|
+
* Number of visible text rows
|
|
3016
|
+
* @default 4
|
|
3017
|
+
*/
|
|
3018
|
+
rows = 4;
|
|
3019
|
+
/**
|
|
3020
|
+
* Maximum number of characters allowed (also shows character counter)
|
|
3021
|
+
*/
|
|
3022
|
+
maxLength;
|
|
3023
|
+
/**
|
|
3024
|
+
* Whether the textarea can be resized by the user
|
|
3025
|
+
* @default true
|
|
3026
|
+
*/
|
|
3027
|
+
resizable = true;
|
|
3028
|
+
/**
|
|
3029
|
+
* Whether the textarea is readonly
|
|
3030
|
+
* @default false
|
|
3031
|
+
*/
|
|
3032
|
+
readonly = false;
|
|
3033
|
+
/**
|
|
3034
|
+
* Whether the textarea is disabled
|
|
3035
|
+
* @default false
|
|
3036
|
+
*/
|
|
3037
|
+
disabled = false;
|
|
3038
|
+
/**
|
|
3039
|
+
* Allows external control to override validation state
|
|
3040
|
+
* @default false
|
|
3041
|
+
*/
|
|
3042
|
+
externalInvalid = false;
|
|
3043
|
+
/**
|
|
3044
|
+
* External error message to display (overrides internal validation)
|
|
3045
|
+
*/
|
|
3046
|
+
externalErrorMessage;
|
|
3047
|
+
/**
|
|
3048
|
+
* Background style of the textarea
|
|
3049
|
+
* @default 'surface'
|
|
3050
|
+
*/
|
|
3051
|
+
backgroundStyle = 'surface';
|
|
3052
|
+
/**
|
|
3053
|
+
* Custom error messages for validation rules
|
|
3054
|
+
* @default {}
|
|
3055
|
+
*/
|
|
3056
|
+
errorMessages = {};
|
|
3057
|
+
/**
|
|
3058
|
+
* Percentage threshold (0–100) at which to show the character count warning colour
|
|
3059
|
+
* @default 80
|
|
3060
|
+
*/
|
|
3061
|
+
charCountWarnAt = 80;
|
|
3062
|
+
/**
|
|
3063
|
+
* Current textarea value
|
|
3064
|
+
* @internal
|
|
3065
|
+
*/
|
|
3066
|
+
value = null;
|
|
3067
|
+
/**
|
|
3068
|
+
* Unique component identifier
|
|
3069
|
+
* @internal
|
|
3070
|
+
*/
|
|
3071
|
+
componentId = UniqueComponentId('i-textarea-');
|
|
3072
|
+
/**
|
|
3073
|
+
* Callback for ControlValueAccessor
|
|
3074
|
+
* @internal
|
|
3075
|
+
*/
|
|
3076
|
+
onChange = () => { };
|
|
3077
|
+
/**
|
|
3078
|
+
* Callback for ControlValueAccessor
|
|
3079
|
+
* @internal
|
|
3080
|
+
*/
|
|
3081
|
+
onTouched = () => { };
|
|
3082
|
+
constructor(ngControl) {
|
|
3083
|
+
this.ngControl = ngControl;
|
|
3084
|
+
if (this.ngControl) {
|
|
3085
|
+
this.ngControl.valueAccessor = this;
|
|
3086
|
+
}
|
|
3087
|
+
}
|
|
3088
|
+
/**
|
|
3089
|
+
* Writes a value to the textarea (ControlValueAccessor)
|
|
3090
|
+
* @internal
|
|
3091
|
+
*/
|
|
3092
|
+
writeValue(obj) {
|
|
3093
|
+
this.value = obj == null ? null : obj;
|
|
3094
|
+
}
|
|
3095
|
+
/**
|
|
3096
|
+
* Registers the onChange callback (ControlValueAccessor)
|
|
3097
|
+
* @internal
|
|
3098
|
+
*/
|
|
3099
|
+
registerOnChange(fn) {
|
|
3100
|
+
this.onChange = fn;
|
|
3101
|
+
}
|
|
3102
|
+
/**
|
|
3103
|
+
* Registers the onTouched callback (ControlValueAccessor)
|
|
3104
|
+
* @internal
|
|
3105
|
+
*/
|
|
3106
|
+
registerOnTouched(fn) {
|
|
3107
|
+
this.onTouched = fn;
|
|
3108
|
+
}
|
|
3109
|
+
/**
|
|
3110
|
+
* Sets the disabled state (ControlValueAccessor)
|
|
3111
|
+
* @internal
|
|
3112
|
+
*/
|
|
3113
|
+
setDisabledState(isDisabled) {
|
|
3114
|
+
this.disabled = isDisabled;
|
|
3115
|
+
}
|
|
3116
|
+
/**
|
|
3117
|
+
* Handles input event and updates value
|
|
3118
|
+
* @internal
|
|
3119
|
+
*/
|
|
3120
|
+
handleInput(event) {
|
|
3121
|
+
const v = event.target.value;
|
|
3122
|
+
this.value = v;
|
|
3123
|
+
this.onChange(v);
|
|
3124
|
+
}
|
|
3125
|
+
/**
|
|
3126
|
+
* Marks the textarea as touched
|
|
3127
|
+
* @internal
|
|
3128
|
+
*/
|
|
3129
|
+
touch() {
|
|
3130
|
+
this.onTouched();
|
|
3131
|
+
}
|
|
3132
|
+
/**
|
|
3133
|
+
* Gets the form control instance
|
|
3134
|
+
* @internal
|
|
3135
|
+
*/
|
|
3136
|
+
get control() {
|
|
3137
|
+
return this.ngControl ? this.ngControl.control : null;
|
|
3138
|
+
}
|
|
3139
|
+
/**
|
|
3140
|
+
* Determines if validation errors should be shown
|
|
3141
|
+
* @internal
|
|
3142
|
+
*/
|
|
3143
|
+
get showErrors() {
|
|
3144
|
+
if (this.externalInvalid)
|
|
3145
|
+
return true;
|
|
3146
|
+
const c = this.control;
|
|
3147
|
+
return !!(c && c.invalid && c.dirty);
|
|
3148
|
+
}
|
|
3149
|
+
/**
|
|
3150
|
+
* Gets the first validation error key
|
|
3151
|
+
* @internal
|
|
3152
|
+
*/
|
|
3153
|
+
get firstErrorKey() {
|
|
3154
|
+
const c = this.control;
|
|
3155
|
+
if (!c || !c.errors)
|
|
3156
|
+
return null;
|
|
3157
|
+
return Object.keys(c.errors)[0] || null;
|
|
3158
|
+
}
|
|
3159
|
+
/**
|
|
3160
|
+
* Gets the error message to display
|
|
3161
|
+
* @internal
|
|
3162
|
+
*/
|
|
3163
|
+
getErrorMessage() {
|
|
3164
|
+
if (this.externalInvalid && this.externalErrorMessage) {
|
|
3165
|
+
return this.externalErrorMessage;
|
|
3166
|
+
}
|
|
3167
|
+
const key = this.firstErrorKey;
|
|
3168
|
+
if (!key)
|
|
3169
|
+
return null;
|
|
3170
|
+
const c = this.control;
|
|
3171
|
+
if (this.errorMessages && this.errorMessages[key])
|
|
3172
|
+
return this.errorMessages[key];
|
|
3173
|
+
const err = c?.errors || {};
|
|
3174
|
+
switch (key) {
|
|
3175
|
+
case 'required':
|
|
3176
|
+
return `${this.label} is required`;
|
|
3177
|
+
case 'minlength':
|
|
3178
|
+
return `Minimum ${err['minlength']?.requiredLength} characters required`;
|
|
3179
|
+
case 'maxlength':
|
|
3180
|
+
return `Maximum ${err['maxlength']?.requiredLength} characters allowed`;
|
|
3181
|
+
case 'pattern':
|
|
3182
|
+
return `${this.label} is not valid`;
|
|
3183
|
+
default:
|
|
3184
|
+
return err[key] && typeof err[key] === 'string'
|
|
3185
|
+
? err[key]
|
|
3186
|
+
: 'Invalid value';
|
|
3187
|
+
}
|
|
3188
|
+
}
|
|
3189
|
+
/**
|
|
3190
|
+
* Whether the textarea has a non-empty value
|
|
3191
|
+
* @internal
|
|
3192
|
+
*/
|
|
3193
|
+
get hasValue() {
|
|
3194
|
+
if (this.value === null || this.value === undefined)
|
|
3195
|
+
return false;
|
|
3196
|
+
return this.value.length > 0;
|
|
3197
|
+
}
|
|
3198
|
+
/**
|
|
3199
|
+
* Current character count
|
|
3200
|
+
* @internal
|
|
3201
|
+
*/
|
|
3202
|
+
get currentLength() {
|
|
3203
|
+
return this.value?.length ?? 0;
|
|
3204
|
+
}
|
|
3205
|
+
/**
|
|
3206
|
+
* Whether the character count is in the warning range
|
|
3207
|
+
* @internal
|
|
3208
|
+
*/
|
|
3209
|
+
get charCountWarning() {
|
|
3210
|
+
if (!this.maxLength)
|
|
3211
|
+
return false;
|
|
3212
|
+
const pct = (this.currentLength / this.maxLength) * 100;
|
|
3213
|
+
return pct >= this.charCountWarnAt && pct < 100;
|
|
3214
|
+
}
|
|
3215
|
+
/**
|
|
3216
|
+
* Whether the character count has exceeded the limit
|
|
3217
|
+
* @internal
|
|
3218
|
+
*/
|
|
3219
|
+
get charCountOver() {
|
|
3220
|
+
if (!this.maxLength)
|
|
3221
|
+
return false;
|
|
3222
|
+
return this.currentLength >= this.maxLength;
|
|
3223
|
+
}
|
|
3224
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITextarea, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3225
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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:focus+.i-textarea-label,.i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-label.floated{background:var(--color-component-background-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:4px;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:8px;padding:0 4px;pointer-events:none;transition:all .15s ease;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:-8px;font-size:.78em}.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"] }] });
|
|
3226
|
+
}
|
|
3227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITextarea, decorators: [{
|
|
3228
|
+
type: Component,
|
|
3229
|
+
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:focus+.i-textarea-label,.i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-label.floated{background:var(--color-component-background-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:4px;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:8px;padding:0 4px;pointer-events:none;transition:all .15s ease;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:-8px;font-size:.78em}.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"] }]
|
|
3230
|
+
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
3231
|
+
type: Optional
|
|
3232
|
+
}, {
|
|
3233
|
+
type: Self
|
|
3234
|
+
}] }], propDecorators: { label: [{
|
|
3235
|
+
type: Input
|
|
3236
|
+
}], id: [{
|
|
3237
|
+
type: Input
|
|
3238
|
+
}], fluid: [{
|
|
3239
|
+
type: Input
|
|
3240
|
+
}], forceFloated: [{
|
|
3241
|
+
type: Input
|
|
3242
|
+
}], useFloatLabel: [{
|
|
3243
|
+
type: Input
|
|
3244
|
+
}], placeholder: [{
|
|
3245
|
+
type: Input
|
|
3246
|
+
}], rows: [{
|
|
3247
|
+
type: Input
|
|
3248
|
+
}], maxLength: [{
|
|
3249
|
+
type: Input
|
|
3250
|
+
}], resizable: [{
|
|
3251
|
+
type: Input
|
|
3252
|
+
}], readonly: [{
|
|
3253
|
+
type: Input
|
|
3254
|
+
}], disabled: [{
|
|
3255
|
+
type: Input
|
|
3256
|
+
}], externalInvalid: [{
|
|
3257
|
+
type: Input
|
|
3258
|
+
}], externalErrorMessage: [{
|
|
3259
|
+
type: Input
|
|
3260
|
+
}], backgroundStyle: [{
|
|
3261
|
+
type: Input
|
|
3262
|
+
}], errorMessages: [{
|
|
3263
|
+
type: Input
|
|
3264
|
+
}], charCountWarnAt: [{
|
|
3265
|
+
type: Input
|
|
3266
|
+
}] } });
|
|
3267
|
+
|
|
3268
|
+
/**
|
|
3269
|
+
* Tag Component
|
|
3270
|
+
*
|
|
3271
|
+
* A compact badge/label component for categorisation, status indicators,
|
|
3272
|
+
* and metadata display. Supports all design-system severity colours,
|
|
3273
|
+
* optional icons, pill shape, and three sizes.
|
|
3274
|
+
*
|
|
3275
|
+
* @example
|
|
3276
|
+
* ```html
|
|
3277
|
+
* <!-- Basic tag -->
|
|
3278
|
+
* <i-tag value="New" />
|
|
3279
|
+
*
|
|
3280
|
+
* <!-- Severity tag -->
|
|
3281
|
+
* <i-tag value="Saved" severity="success" />
|
|
3282
|
+
*
|
|
3283
|
+
* <!-- Rounded pill -->
|
|
3284
|
+
* <i-tag value="Beta" severity="info" [rounded]="true" />
|
|
3285
|
+
*
|
|
3286
|
+
* <!-- With icon -->
|
|
3287
|
+
* <i-tag value="Error" severity="danger" icon="pi pi-times-circle" />
|
|
3288
|
+
*
|
|
3289
|
+
* <!-- Different sizes -->
|
|
3290
|
+
* <i-tag value="Small" severity="warning" size="sm" />
|
|
3291
|
+
* <i-tag value="Large" severity="primary" size="lg" />
|
|
3292
|
+
* ```
|
|
3293
|
+
*/
|
|
3294
|
+
class ITag {
|
|
3295
|
+
/**
|
|
3296
|
+
* Text content of the tag
|
|
3297
|
+
*/
|
|
3298
|
+
value = '';
|
|
3299
|
+
/**
|
|
3300
|
+
* Colour severity following the design-system palette.
|
|
3301
|
+
* When omitted the tag renders with a neutral surface style.
|
|
3302
|
+
*/
|
|
3303
|
+
severity;
|
|
3304
|
+
/**
|
|
3305
|
+
* Renders the tag as a pill (fully rounded corners)
|
|
3306
|
+
* @default false
|
|
3307
|
+
*/
|
|
3308
|
+
rounded = false;
|
|
3309
|
+
/**
|
|
3310
|
+
* Icon class name to display before the value (e.g. 'pi pi-check')
|
|
3311
|
+
*/
|
|
3312
|
+
icon;
|
|
3313
|
+
/**
|
|
3314
|
+
* Visual size of the tag
|
|
3315
|
+
* @default 'md'
|
|
3316
|
+
*/
|
|
3317
|
+
size = 'md';
|
|
3318
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITag, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3319
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITag, isStandalone: true, selector: "i-tag", inputs: { value: "value", severity: "severity", rounded: ["rounded", "rounded", booleanAttribute], icon: "icon", size: "size" }, ngImport: i0, template: "<span\n class=\"i-tag\"\n [ngClass]=\"[\n severity ? 'i-tag-' + severity : '',\n rounded ? 'i-tag-rounded' : '',\n size === 'lg' ? 'i-tag-lg' : size === 'sm' ? 'i-tag-sm' : ''\n ]\"\n>\n @if (icon) {\n <i [class]=\"icon\" class=\"i-tag-icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"i-tag-value\">{{ value }}</span>\n</span>\n", styles: [".i-tag{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-tag.i-tag-primary{background:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)}.i-tag.i-tag-secondary{background:color-mix(in srgb,var(--color-secondary) 15%,transparent);color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)}.i-tag.i-tag-tertiary{background:color-mix(in srgb,var(--color-tertiary) 15%,transparent);color:var(--color-tertiary);border-color:color-mix(in srgb,var(--color-tertiary) 40%,transparent)}.i-tag.i-tag-success{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)}.i-tag.i-tag-info{background:color-mix(in srgb,var(--color-info) 15%,transparent);color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)}.i-tag.i-tag-warning{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)}.i-tag.i-tag-danger{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)}.i-tag.i-tag-contrast{background:var(--color-component-background-solid);color:var(--color-text-contrast);border-color:var(--color-component-background-solid)}.i-tag .i-tag-icon{color:inherit}.i-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:4px;font-size:.8em;font-weight:600;letter-spacing:.02em;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1.4;transition:opacity .15s ease}.i-tag.i-tag-rounded{border-radius:999px}.i-tag.i-tag-lg{font-size:.9em;padding:4px 12px}.i-tag.i-tag-sm{font-size:.72em;padding:2px 8px}.i-tag .i-tag-icon{font-size:.9em;flex-shrink:0}.i-tag .i-tag-value{line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3320
|
+
}
|
|
3321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITag, decorators: [{
|
|
3322
|
+
type: Component,
|
|
3323
|
+
args: [{ selector: 'i-tag', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"i-tag\"\n [ngClass]=\"[\n severity ? 'i-tag-' + severity : '',\n rounded ? 'i-tag-rounded' : '',\n size === 'lg' ? 'i-tag-lg' : size === 'sm' ? 'i-tag-sm' : ''\n ]\"\n>\n @if (icon) {\n <i [class]=\"icon\" class=\"i-tag-icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"i-tag-value\">{{ value }}</span>\n</span>\n", styles: [".i-tag{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-tag.i-tag-primary{background:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)}.i-tag.i-tag-secondary{background:color-mix(in srgb,var(--color-secondary) 15%,transparent);color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)}.i-tag.i-tag-tertiary{background:color-mix(in srgb,var(--color-tertiary) 15%,transparent);color:var(--color-tertiary);border-color:color-mix(in srgb,var(--color-tertiary) 40%,transparent)}.i-tag.i-tag-success{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)}.i-tag.i-tag-info{background:color-mix(in srgb,var(--color-info) 15%,transparent);color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)}.i-tag.i-tag-warning{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)}.i-tag.i-tag-danger{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)}.i-tag.i-tag-contrast{background:var(--color-component-background-solid);color:var(--color-text-contrast);border-color:var(--color-component-background-solid)}.i-tag .i-tag-icon{color:inherit}.i-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:4px;font-size:.8em;font-weight:600;letter-spacing:.02em;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1.4;transition:opacity .15s ease}.i-tag.i-tag-rounded{border-radius:999px}.i-tag.i-tag-lg{font-size:.9em;padding:4px 12px}.i-tag.i-tag-sm{font-size:.72em;padding:2px 8px}.i-tag .i-tag-icon{font-size:.9em;flex-shrink:0}.i-tag .i-tag-value{line-height:1}\n"] }]
|
|
3324
|
+
}], propDecorators: { value: [{
|
|
3325
|
+
type: Input
|
|
3326
|
+
}], severity: [{
|
|
3327
|
+
type: Input
|
|
3328
|
+
}], rounded: [{
|
|
3329
|
+
type: Input,
|
|
3330
|
+
args: [{ transform: booleanAttribute }]
|
|
3331
|
+
}], icon: [{
|
|
3332
|
+
type: Input
|
|
3333
|
+
}], size: [{
|
|
3334
|
+
type: Input
|
|
3335
|
+
}] } });
|
|
3336
|
+
|
|
2933
3337
|
/**
|
|
2934
3338
|
* Placeholder Component
|
|
2935
3339
|
*
|
|
@@ -4318,7 +4722,7 @@ class IRadioButton {
|
|
|
4318
4722
|
useExisting: forwardRef(() => IRadioButton),
|
|
4319
4723
|
multi: true,
|
|
4320
4724
|
},
|
|
4321
|
-
], ngImport: i0, template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\n>\n <div\n class=\"i-radio-button\"\n [class.i-radio-button--checked]=\"checked\"\n (click)=\"select()\"\n [attr.id]=\"effectiveInputId\"\n role=\"radio\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n >\n <span class=\"i-radio-button-icon\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"effectiveInputId + '-label'\"\n class=\"i-radio-button-label\"\n (click)=\"select()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color
|
|
4725
|
+
], ngImport: i0, template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\n>\n <div\n class=\"i-radio-button\"\n [class.i-radio-button--checked]=\"checked\"\n (click)=\"select()\"\n [attr.id]=\"effectiveInputId\"\n role=\"radio\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n >\n <span class=\"i-radio-button-icon\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"effectiveInputId + '-label'\"\n class=\"i-radio-button-label\"\n (click)=\"select()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-radio-button-wrapper.i-radio-button--fluid{display:flex;width:100%}.i-radio-button-wrapper.i-radio-button--disabled{opacity:.6;cursor:not-allowed}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button,.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{cursor:not-allowed;pointer-events:none}.i-radio-button-wrapper .i-radio-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-radio-button-wrapper .i-radio-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-radio-button-wrapper .i-radio-button .i-radio-button-icon{width:10px;height:10px;border-radius:50%;transition:all .15s ease;transform:scale(0)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{transform:scale(1)}.i-radio-button-wrapper .i-radio-button-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] });
|
|
4322
4726
|
}
|
|
4323
4727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IRadioButton, decorators: [{
|
|
4324
4728
|
type: Component,
|
|
@@ -4328,7 +4732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
4328
4732
|
useExisting: forwardRef(() => IRadioButton),
|
|
4329
4733
|
multi: true,
|
|
4330
4734
|
},
|
|
4331
|
-
], template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\n>\n <div\n class=\"i-radio-button\"\n [class.i-radio-button--checked]=\"checked\"\n (click)=\"select()\"\n [attr.id]=\"effectiveInputId\"\n role=\"radio\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n >\n <span class=\"i-radio-button-icon\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"effectiveInputId + '-label'\"\n class=\"i-radio-button-label\"\n (click)=\"select()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color
|
|
4735
|
+
], template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\n>\n <div\n class=\"i-radio-button\"\n [class.i-radio-button--checked]=\"checked\"\n (click)=\"select()\"\n [attr.id]=\"effectiveInputId\"\n role=\"radio\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n >\n <span class=\"i-radio-button-icon\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"effectiveInputId + '-label'\"\n class=\"i-radio-button-label\"\n (click)=\"select()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-radio-button-wrapper.i-radio-button--fluid{display:flex;width:100%}.i-radio-button-wrapper.i-radio-button--disabled{opacity:.6;cursor:not-allowed}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button,.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{cursor:not-allowed;pointer-events:none}.i-radio-button-wrapper .i-radio-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-radio-button-wrapper .i-radio-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-radio-button-wrapper .i-radio-button .i-radio-button-icon{width:10px;height:10px;border-radius:50%;transition:all .15s ease;transform:scale(0)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{transform:scale(1)}.i-radio-button-wrapper .i-radio-button-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] }]
|
|
4332
4736
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }], propDecorators: { label: [{
|
|
4333
4737
|
type: Input
|
|
4334
4738
|
}], value: [{
|
|
@@ -5796,7 +6200,7 @@ class ISelect {
|
|
|
5796
6200
|
useExisting: forwardRef(() => ISelect),
|
|
5797
6201
|
multi: true,
|
|
5798
6202
|
},
|
|
5799
|
-
], viewQueries: [{ propertyName: "inputTextRef", first: true, predicate: ["inputText"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"i-select-wrapper\" [class.i-select--fluid]=\"fluid\" #dropdown>\n <!-- Reuse the input-text component for consistent styling and form integration -->\n <div class=\"i-select-input-container\" (click)=\"toggleDropdown()\">\n <i-input-text\n #inputText\n [label]=\"label\"\n [useFloatLabel]=\"useFloatLabel\"\n [id]=\"id\"\n [fluid]=\"fluid\"\n [errorMessages]=\"errorMessages\"\n [(ngModel)]=\"inputValue\"\n [type]=\"'text'\"\n [externalInvalid]=\"showErrors\"\n [externalErrorMessage]=\"showErrors ? getErrorMessage() || '' : ''\"\n [readonly]=\"readonly\"\n >\n <!-- Icons overlay on the input -->\n <div class=\"i-select-icons\">\n @if (showClear && value !== null && value !== undefined) {\n <i\n class=\"pi pi-times i-select-clear\"\n (click)=\"clearSelection(); $event.stopPropagation()\"\n ></i>\n }\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </div>\n </i-input-text>\n </div>\n\n <!-- Dropdown overlay -->\n @if (isOpen) {\n <div class=\"i-select-dropdown\">\n @if (filter) {\n <div class=\"i-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-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n >\n {{ getOptionLabel(option) }}\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-select-trigger{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--surface-ground)}.i-select-trigger:focus,.i-select-trigger.open{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-trigger.disabled{background
|
|
6203
|
+
], viewQueries: [{ propertyName: "inputTextRef", first: true, predicate: ["inputText"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"i-select-wrapper\" [class.i-select--fluid]=\"fluid\" #dropdown>\n <!-- Reuse the input-text component for consistent styling and form integration -->\n <div class=\"i-select-input-container\" (click)=\"toggleDropdown()\">\n <i-input-text\n #inputText\n [label]=\"label\"\n [useFloatLabel]=\"useFloatLabel\"\n [id]=\"id\"\n [fluid]=\"fluid\"\n [errorMessages]=\"errorMessages\"\n [(ngModel)]=\"inputValue\"\n [type]=\"'text'\"\n [externalInvalid]=\"showErrors\"\n [externalErrorMessage]=\"showErrors ? getErrorMessage() || '' : ''\"\n [readonly]=\"readonly\"\n >\n <!-- Icons overlay on the input -->\n <div class=\"i-select-icons\">\n @if (showClear && value !== null && value !== undefined) {\n <i\n class=\"pi pi-times i-select-clear\"\n (click)=\"clearSelection(); $event.stopPropagation()\"\n ></i>\n }\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </div>\n </i-input-text>\n </div>\n\n <!-- Dropdown overlay -->\n @if (isOpen) {\n <div class=\"i-select-dropdown\">\n @if (filter) {\n <div class=\"i-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-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n >\n {{ getOptionLabel(option) }}\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-select-trigger{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--surface-ground)}.i-select-trigger:focus,.i-select-trigger.open{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-trigger.disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-select-dropdown .i-select-filter .i-select-search{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-select-dropdown .i-select-filter .i-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-dropdown .i-select-options{background:transparent}.i-select-dropdown .i-select-options .i-select-option{color:var(--color-text-primary)}.i-select-dropdown .i-select-options .i-select-option:hover{background-color:var(--surface-hover)}.i-select-dropdown .i-select-options .i-select-option.selected{background-color:var(--surface-hover);color:var(--color-primary)}.i-select-dropdown .i-select-options .i-select-no-options{color:var(--color-text-secondary)}.invalid .i-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-select-wrapper{position:relative;display:block}.i-select-wrapper.i-select--fluid{width:100%}.i-select-wrapper .i-select-input-container{position:relative;cursor:pointer}.i-select-wrapper .i-select-input-container .i-input-text .i-input.readonly{cursor:pointer}.i-select-wrapper .i-select-input-container .i-select-icons{position:absolute;top:50%;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none;transform:translateY(-50%)}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear{font-size:12px;opacity:.6;cursor:pointer;pointer-events:auto;transition:opacity .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear:hover{opacity:1}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow{font-size:12px;opacity:.6;transition:transform .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow.flipped{transform:rotate(180deg)}.i-select-wrapper .i-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-select-wrapper .i-select-dropdown .i-select-filter{padding:8px}.i-select-wrapper .i-select-dropdown .i-select-filter .i-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-select-wrapper .i-select-dropdown .i-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-corner{background:transparent}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-color:var(--color-text-secondary) transparent}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar{width:6px;height:6px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option{padding:12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option.selected{font-weight:500}.i-select-wrapper .i-select-dropdown .i-select-options .i-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: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
5800
6204
|
}
|
|
5801
6205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ISelect, decorators: [{
|
|
5802
6206
|
type: Component,
|
|
@@ -5806,7 +6210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
5806
6210
|
useExisting: forwardRef(() => ISelect),
|
|
5807
6211
|
multi: true,
|
|
5808
6212
|
},
|
|
5809
|
-
], template: "<div class=\"i-select-wrapper\" [class.i-select--fluid]=\"fluid\" #dropdown>\n <!-- Reuse the input-text component for consistent styling and form integration -->\n <div class=\"i-select-input-container\" (click)=\"toggleDropdown()\">\n <i-input-text\n #inputText\n [label]=\"label\"\n [useFloatLabel]=\"useFloatLabel\"\n [id]=\"id\"\n [fluid]=\"fluid\"\n [errorMessages]=\"errorMessages\"\n [(ngModel)]=\"inputValue\"\n [type]=\"'text'\"\n [externalInvalid]=\"showErrors\"\n [externalErrorMessage]=\"showErrors ? getErrorMessage() || '' : ''\"\n [readonly]=\"readonly\"\n >\n <!-- Icons overlay on the input -->\n <div class=\"i-select-icons\">\n @if (showClear && value !== null && value !== undefined) {\n <i\n class=\"pi pi-times i-select-clear\"\n (click)=\"clearSelection(); $event.stopPropagation()\"\n ></i>\n }\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </div>\n </i-input-text>\n </div>\n\n <!-- Dropdown overlay -->\n @if (isOpen) {\n <div class=\"i-select-dropdown\">\n @if (filter) {\n <div class=\"i-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-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n >\n {{ getOptionLabel(option) }}\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-select-trigger{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--surface-ground)}.i-select-trigger:focus,.i-select-trigger.open{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-trigger.disabled{background
|
|
6213
|
+
], template: "<div class=\"i-select-wrapper\" [class.i-select--fluid]=\"fluid\" #dropdown>\n <!-- Reuse the input-text component for consistent styling and form integration -->\n <div class=\"i-select-input-container\" (click)=\"toggleDropdown()\">\n <i-input-text\n #inputText\n [label]=\"label\"\n [useFloatLabel]=\"useFloatLabel\"\n [id]=\"id\"\n [fluid]=\"fluid\"\n [errorMessages]=\"errorMessages\"\n [(ngModel)]=\"inputValue\"\n [type]=\"'text'\"\n [externalInvalid]=\"showErrors\"\n [externalErrorMessage]=\"showErrors ? getErrorMessage() || '' : ''\"\n [readonly]=\"readonly\"\n >\n <!-- Icons overlay on the input -->\n <div class=\"i-select-icons\">\n @if (showClear && value !== null && value !== undefined) {\n <i\n class=\"pi pi-times i-select-clear\"\n (click)=\"clearSelection(); $event.stopPropagation()\"\n ></i>\n }\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </div>\n </i-input-text>\n </div>\n\n <!-- Dropdown overlay -->\n @if (isOpen) {\n <div class=\"i-select-dropdown\">\n @if (filter) {\n <div class=\"i-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-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n >\n {{ getOptionLabel(option) }}\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-select-trigger{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--surface-ground)}.i-select-trigger:focus,.i-select-trigger.open{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-trigger.disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-select-dropdown .i-select-filter .i-select-search{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-select-dropdown .i-select-filter .i-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-dropdown .i-select-options{background:transparent}.i-select-dropdown .i-select-options .i-select-option{color:var(--color-text-primary)}.i-select-dropdown .i-select-options .i-select-option:hover{background-color:var(--surface-hover)}.i-select-dropdown .i-select-options .i-select-option.selected{background-color:var(--surface-hover);color:var(--color-primary)}.i-select-dropdown .i-select-options .i-select-no-options{color:var(--color-text-secondary)}.invalid .i-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-select-wrapper{position:relative;display:block}.i-select-wrapper.i-select--fluid{width:100%}.i-select-wrapper .i-select-input-container{position:relative;cursor:pointer}.i-select-wrapper .i-select-input-container .i-input-text .i-input.readonly{cursor:pointer}.i-select-wrapper .i-select-input-container .i-select-icons{position:absolute;top:50%;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none;transform:translateY(-50%)}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear{font-size:12px;opacity:.6;cursor:pointer;pointer-events:auto;transition:opacity .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear:hover{opacity:1}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow{font-size:12px;opacity:.6;transition:transform .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow.flipped{transform:rotate(180deg)}.i-select-wrapper .i-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-select-wrapper .i-select-dropdown .i-select-filter{padding:8px}.i-select-wrapper .i-select-dropdown .i-select-filter .i-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-select-wrapper .i-select-dropdown .i-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-corner{background:transparent}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-color:var(--color-text-secondary) transparent}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar{width:6px;height:6px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option{padding:12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option.selected{font-weight:500}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"] }]
|
|
5810
6214
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { label: [{
|
|
5811
6215
|
type: Input
|
|
5812
6216
|
}], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{
|
|
@@ -6093,11 +6497,11 @@ class ITabs {
|
|
|
6093
6497
|
tabElement?.focus();
|
|
6094
6498
|
}
|
|
6095
6499
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6096
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITabs, isStandalone: true, selector: "i-tabs", inputs: { activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange", onClose: "onClose" }, queries: [{ propertyName: "tabPanels", predicate: ITabPanel }], ngImport: i0, template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <button\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"i-tabs__panels\">\n @for (tab of tabs; track $index) {\n <div\n [attr.id]=\"componentId + '-panel-' + $index\"\n class=\"i-tabs__panel\"\n [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n [attr.hidden]=\"activeIndex !== $index || null\"\n >\n @if (activeIndex === $index) {\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color
|
|
6500
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITabs, isStandalone: true, selector: "i-tabs", inputs: { activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange", onClose: "onClose" }, queries: [{ propertyName: "tabPanels", predicate: ITabPanel }], ngImport: i0, template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <button\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"i-tabs__panels\">\n @for (tab of tabs; track $index) {\n <div\n [attr.id]=\"componentId + '-panel-' + $index\"\n class=\"i-tabs__panel\"\n [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n [attr.hidden]=\"activeIndex !== $index || null\"\n >\n @if (activeIndex === $index) {\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
6097
6501
|
}
|
|
6098
6502
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITabs, decorators: [{
|
|
6099
6503
|
type: Component,
|
|
6100
|
-
args: [{ selector: 'i-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <button\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"i-tabs__panels\">\n @for (tab of tabs; track $index) {\n <div\n [attr.id]=\"componentId + '-panel-' + $index\"\n class=\"i-tabs__panel\"\n [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n [attr.hidden]=\"activeIndex !== $index || null\"\n >\n @if (activeIndex === $index) {\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color
|
|
6504
|
+
args: [{ selector: 'i-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <button\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"i-tabs__panels\">\n @for (tab of tabs; track $index) {\n <div\n [attr.id]=\"componentId + '-panel-' + $index\"\n class=\"i-tabs__panel\"\n [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n [attr.hidden]=\"activeIndex !== $index || null\"\n >\n @if (activeIndex === $index) {\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}\n"] }]
|
|
6101
6505
|
}], propDecorators: { activeIndex: [{
|
|
6102
6506
|
type: Input
|
|
6103
6507
|
}], activeIndexChange: [{
|
|
@@ -7180,6 +7584,12 @@ class ITable {
|
|
|
7180
7584
|
* Grouped data mode - when provided, table will render in grouped mode
|
|
7181
7585
|
*/
|
|
7182
7586
|
groupedData = input([], ...(ngDevMode ? [{ debugName: "groupedData" }] : []));
|
|
7587
|
+
/**
|
|
7588
|
+
* Column definitions for the outer group-level table header row.
|
|
7589
|
+
* Each group's `row` object is rendered using these columns.
|
|
7590
|
+
* When omitted, only a single label column is shown for the group row.
|
|
7591
|
+
*/
|
|
7592
|
+
groupColumns = input([], ...(ngDevMode ? [{ debugName: "groupColumns" }] : []));
|
|
7183
7593
|
/**
|
|
7184
7594
|
* Message displayed when table has no data
|
|
7185
7595
|
* @default 'No data available'
|
|
@@ -7879,6 +8289,51 @@ class ITable {
|
|
|
7879
8289
|
isRowExpanded(row) {
|
|
7880
8290
|
return this.expandedRows().has(row);
|
|
7881
8291
|
}
|
|
8292
|
+
/**
|
|
8293
|
+
* Gets all rows across all groups (for grouped mode select-all)
|
|
8294
|
+
* @internal
|
|
8295
|
+
*/
|
|
8296
|
+
getAllGroupRows() {
|
|
8297
|
+
return this.groupedData().flatMap((g) => g.data || []);
|
|
8298
|
+
}
|
|
8299
|
+
/**
|
|
8300
|
+
* Checks if all rows across all groups are selected
|
|
8301
|
+
* @internal
|
|
8302
|
+
*/
|
|
8303
|
+
areAllGroupRowsSelected() {
|
|
8304
|
+
const all = this.getAllGroupRows();
|
|
8305
|
+
if (all.length === 0)
|
|
8306
|
+
return false;
|
|
8307
|
+
return all.every((d) => this.selection?.some((s) => this.compareObjects(s, d)));
|
|
8308
|
+
}
|
|
8309
|
+
/**
|
|
8310
|
+
* Checks if some (but not all) rows across all groups are selected
|
|
8311
|
+
* @internal
|
|
8312
|
+
*/
|
|
8313
|
+
areSomeGroupRowsSelected() {
|
|
8314
|
+
const all = this.getAllGroupRows();
|
|
8315
|
+
const count = all.filter((d) => this.selection?.some((s) => this.compareObjects(s, d))).length;
|
|
8316
|
+
return count > 0 && count < all.length;
|
|
8317
|
+
}
|
|
8318
|
+
/**
|
|
8319
|
+
* Toggles select-all for all groups
|
|
8320
|
+
* @internal
|
|
8321
|
+
*/
|
|
8322
|
+
toggleAllGroupSelection() {
|
|
8323
|
+
if (this.selectionMode !== 'multiple')
|
|
8324
|
+
return;
|
|
8325
|
+
const all = this.getAllGroupRows();
|
|
8326
|
+
const allSelected = this.areAllGroupRowsSelected();
|
|
8327
|
+
if (allSelected) {
|
|
8328
|
+
this.selection = this.selection.filter((s) => !all.some((d) => this.compareObjects(s, d)));
|
|
8329
|
+
}
|
|
8330
|
+
else {
|
|
8331
|
+
const newSelections = all.filter((d) => !this.selection.some((s) => this.compareObjects(s, d)));
|
|
8332
|
+
this.selection = [...this.selection, ...newSelections];
|
|
8333
|
+
}
|
|
8334
|
+
this.selectionChange.emit(this.selection);
|
|
8335
|
+
this.onSelectionChange.emit(this.selection);
|
|
8336
|
+
}
|
|
7882
8337
|
// ===== GROUP EXPANSION METHODS =====
|
|
7883
8338
|
/**
|
|
7884
8339
|
* Toggles group expansion
|
|
@@ -8164,7 +8619,7 @@ class ITable {
|
|
|
8164
8619
|
return 0;
|
|
8165
8620
|
}
|
|
8166
8621
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8167
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITable, isStandalone: true, selector: "i-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, groupedData: { classPropertyName: "groupedData", publicName: "groupedData", 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 }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", 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 }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", 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 }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: false, isRequired: false, transformFunction: null }, rowExpandable: { classPropertyName: "rowExpandable", publicName: "rowExpandable", 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", onAction: "onAction", 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 with ng-content, search, and 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 placeholder=\"Search...\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"false\"\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 <!-- Scrollable Table Container -->\n <div\n class=\"i-table-container\"\n [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n [class.i-table-container--virtual-scroll]=\"virtualScroll\"\n [style.height]=\"virtualScroll ? height || scrollHeight || '400px' : null\"\n [style.max-height]=\"!virtualScroll ? height || scrollHeight || null : null\"\n >\n <!-- Virtual Scroll Mode -->\n @if (virtualScroll) {\n <!-- Sticky Header Table (outside viewport) -->\n <div class=\"i-table-virtual-header\">\n <table class=\"i-table\">\n <thead>\n <!-- Column Filters 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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (\n column of columns();\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers Row -->\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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\">Actions</th>\n }\n </tr>\n </thead>\n </table>\n </div>\n\n <!-- Virtual Scroll Viewport (body only) -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n <table class=\"i-table i-table-virtual-body\">\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td\n [attr.colspan]=\"\n columns().length +\n (selectionMode === 'multiple' ? 1 : 0) +\n (rowExpandable ? 1 : 0) +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <i-no-content />\n </td>\n </tr>\n }\n <!-- Virtual Scroll Rows -->\n <tr\n *cdkVirtualFor=\"\n let row of processedData();\n let rowIndex = index;\n trackBy: trackByRow\n \"\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 <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 @if (rowExpandable) {\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 @if (showActions && actions.length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of actions; 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 [iTooltip]=\"getActionTooltip(action, row)\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"onActionClick(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n } @else {\n <!-- Non-Virtual Scroll Table -->\n <table class=\"i-table\">\n <!-- Table Header (sticky when scrollable) -->\n <thead>\n <!-- Column Filters 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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers Row -->\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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\">Actions</th>\n }\n </tr>\n </thead>\n\n <!-- Table Body - Grouped Mode -->\n @if (isGroupedMode()) {\n <tbody>\n @for (group of groupedData(); track $index) {\n <!-- Group Header Row -->\n <tr class=\"i-table-group-header\" [ngClass]=\"group.styleClass\">\n <td\n [attr.colspan]=\"\n (getGroupColumns(group).length || columns().length) +\n (selectionMode === 'multiple' ? 1 : 0) +\n (rowExpandable ? 1 : 0) +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n (click)=\"toggleGroupExpansion(group.label)\"\n >\n <div class=\"i-table-group-header-content\">\n <i\n [class]=\"\n isGroupExpanded(group.label)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n class=\"i-table-group-toggle-icon\"\n ></i>\n <span class=\"i-table-group-label\">{{ group.label }}</span>\n <span class=\"i-table-group-count\"\n >({{ group.data.length }})</span\n >\n </div>\n </td>\n </tr>\n\n <!-- Group Column Headers (when expanded) -->\n @if (isGroupExpanded(group.label) && group.columns) {\n <tr class=\"i-table-group-columns-header\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (\n column of getGroupColumns(group);\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n >\n {{ column.header }}\n </th>\n }\n @if (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\">Actions</th>\n }\n </tr>\n }\n\n <!-- Group Data Rows (when expanded) -->\n @if (isGroupExpanded(group.label)) {\n @if (group.data.length === 0) {\n <tr class=\"i-table-empty-row\">\n <td\n [attr.colspan]=\"\n (getGroupColumns(group).length || columns().length) +\n (selectionMode === 'multiple' ? 1 : 0) +\n (rowExpandable ? 1 : 0) +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <i-no-content />\n </td>\n </tr>\n } @else {\n @for (row of group.data; track trackByRow($index, row)) {\n <tr\n class=\"i-table-group-row\"\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 @if (rowExpandable) {\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n }\n @for (\n column of getGroupColumns(group);\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]=\"\n getCellSeverity(row, column)\n \"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (\n item of getCellListItems(row, column);\n track item\n ) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"\n getCellSeverity(row, column)\n \"\n >\n {{\n formatCellValue(\n getCellValue(row, column.field),\n column\n )\n }}\n </span>\n }\n </td>\n }\n @if (showActions && actions.length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of actions; 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 [iTooltip]=\"getActionTooltip(action, row)\"\n [class.i-action-hidden]=\"\n !isActionVisible(action, row)\n \"\n (clicked)=\"onActionClick(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n <!-- Expanded Row Content -->\n @if (rowExpandable && isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"\n (getGroupColumns(group).length ||\n columns().length) +\n (selectionMode === 'multiple' ? 1 : 0) +\n 1 +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <div class=\"i-table-expanded-content\">\n <pre>{{ row | json }}</pre>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n }\n </tbody>\n } @else {\n <!-- Table Body - Regular Mode -->\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td\n [attr.colspan]=\"\n columns().length +\n (selectionMode === 'multiple' ? 1 : 0) +\n (rowExpandable ? 1 : 0) +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <i-no-content />\n </td>\n </tr>\n } @else {\n @for (\n row of processedData();\n track trackByRow($index, row);\n let rowIndex = $index\n ) {\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 @if (rowExpandable) {\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n }\n @for (\n column of columns();\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 (\n item of getCellListItems(row, column);\n track item\n ) {\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(\n getCellValue(row, column.field),\n column\n )\n }}\n </span>\n }\n </td>\n }\n @if (showActions && actions.length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of actions; 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 [iTooltip]=\"getActionTooltip(action, row)\"\n [class.i-action-hidden]=\"\n !isActionVisible(action, row)\n \"\n (clicked)=\"onActionClick(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n <!-- Expanded Row Content -->\n @if (rowExpandable && isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"\n columns().length +\n (selectionMode === 'multiple' ? 1 : 0) +\n 1 +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <div class=\"i-table-expanded-content\">\n <pre>{{ row | json }}</pre>\n </div>\n </td>\n </tr>\n }\n }\n }\n </tbody>\n }\n </table>\n }\n </div>\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:var(--surface-ground);border:1px solid var(--surface-border)}.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.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):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).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{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:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-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(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container{scrollbar-color:var(--color-text-secondary) transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto}.i-table-wrapper .i-table-container--scrollable 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;background:var(--color-surface-50)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header table{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%}.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-body{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll table{display:table;width:100%;border-collapse:collapse}.i-table-wrapper .i-table-container--virtual-scroll tbody{display:table-row-group}.i-table-wrapper .i-table-container--virtual-scroll tr{display:table-row;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll td,.i-table-wrapper .i-table-container--virtual-scroll th{display:table-cell}.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:1em;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 .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{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;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-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:.9em;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-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.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}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: 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: 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: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IChip, selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: NoContentComponent, selector: "i-no-content", inputs: ["icon", "message"] }, { kind: "directive", type: TooltipDirective, selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
|
|
8622
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITable, isStandalone: true, selector: "i-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, groupedData: { classPropertyName: "groupedData", publicName: "groupedData", isSignal: true, isRequired: false, transformFunction: null }, groupColumns: { classPropertyName: "groupColumns", publicName: "groupColumns", 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 }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", 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 }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", 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 }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: false, isRequired: false, transformFunction: null }, rowExpandable: { classPropertyName: "rowExpandable", publicName: "rowExpandable", 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", onAction: "onAction", 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 with ng-content, search, and 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 placeholder=\"Search...\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"false\"\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 <!-- Scrollable Table Container -->\n <div\n class=\"i-table-container\"\n [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n [class.i-table-container--virtual-scroll]=\"virtualScroll\"\n [style.height]=\"virtualScroll ? height || scrollHeight || '400px' : null\"\n [style.max-height]=\"!virtualScroll ? height || scrollHeight || null : null\"\n >\n <!-- Virtual Scroll Mode -->\n @if (virtualScroll) {\n <!-- Sticky Header Table (outside viewport) -->\n <div class=\"i-table-virtual-header\">\n <table class=\"i-table\">\n <thead>\n <!-- Column Filters 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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (\n column of columns();\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers Row -->\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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\">Actions</th>\n }\n </tr>\n </thead>\n </table>\n </div>\n\n <!-- Virtual Scroll Viewport (body only) -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n <table class=\"i-table i-table-virtual-body\">\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td\n [attr.colspan]=\"\n columns().length +\n (selectionMode === 'multiple' ? 1 : 0) +\n (rowExpandable ? 1 : 0) +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <i-no-content />\n </td>\n </tr>\n }\n <!-- Virtual Scroll Rows -->\n <tr\n *cdkVirtualFor=\"\n let row of processedData();\n let rowIndex = index;\n trackBy: trackByRow\n \"\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 <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 @if (rowExpandable) {\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 (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 @if (showActions && actions.length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of actions; 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 [iTooltip]=\"getActionTooltip(action, row)\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"onActionClick(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n } @else if (isGroupedMode()) {\n <!-- Grouped Mode: single scrollable table \u2014 group summary rows expand to reveal nested tables -->\n <table class=\"i-table\">\n <thead>\n <!-- Outer filter row -->\n @if (filterable && groupColumns().length > 0) {\n <tr class=\"i-table-filter-row\">\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of groupColumns();\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n <th class=\"i-table-group-count-header\"></th>\n </tr>\n }\n\n <!-- Group column header row -->\n <tr>\n <th class=\"i-table-expand-header\"></th>\n @if (groupColumns().length === 0) {\n <th>Group</th>\n } @else {\n @for (\n column of groupColumns();\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 }\n @if (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\">Actions</th>\n }\n <th class=\"i-table-group-count-header\"></th>\n </tr>\n </thead>\n\n <tbody>\n @if (groupedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td\n [attr.colspan]=\"\n (groupColumns().length || 1) +\n 1 +\n 1 +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <i-no-content />\n </td>\n </tr>\n }\n @for (group of groupedData(); track $index) {\n <!-- Group summary row -->\n <tr\n class=\"i-table-group-summary-row\"\n [ngClass]=\"group.styleClass\"\n [class.i-table-group-expanded]=\"isGroupExpanded(group.label)\"\n (click)=\"toggleGroupExpansion(group.label)\"\n >\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"xtra-small\"\n [icon]=\"\n isGroupExpanded(group.label)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n (clicked)=\"\n toggleGroupExpansion(group.label); $event.stopPropagation()\n \"\n ></i-button>\n </td>\n @if (groupColumns().length === 0) {\n <!-- No groupColumns: show label + count in a single cell -->\n <td>\n <div class=\"i-table-group-header-content\">\n <span class=\"i-table-group-label\">{{ group.label }}</span>\n <span class=\"i-table-group-count\"\n >({{ group.data.length }})</span\n >\n </div>\n </td>\n } @else {\n @for (\n column of groupColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(group.row ?? {}, column)\n ? 'i-table-cell-' +\n getCellSeverity(group.row ?? {}, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getCellIcon(group.row ?? {}, column)\"\n [class.i-severity-icon]=\"\n getCellSeverity(group.row ?? {}, column)\n \"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else {\n <span\n [class.i-severity-text]=\"\n getCellSeverity(group.row ?? {}, column)\n \"\n >\n {{\n formatCellValue(\n getCellValue(group.row ?? {}, column.field),\n column\n )\n }}\n </span>\n }\n </td>\n }\n }\n @if (showActions && actions.length > 0) {\n <td\n class=\"i-table-actions-cell\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"i-table-actions\">\n @for (action of actions; 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, group.row ?? {})\"\n [iTooltip]=\"getActionTooltip(action, group.row ?? {})\"\n [class.i-action-hidden]=\"\n !isActionVisible(action, group.row ?? {})\n \"\n (clicked)=\"\n onActionClick(action, group.row ?? {}, $event)\n \"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n <td\n class=\"i-table-group-count-cell\"\n (click)=\"$event.stopPropagation()\"\n >\n <span class=\"i-table-group-count\"\n >({{ group.data.length }})</span\n >\n </td>\n </tr>\n\n <!-- Group detail row (visible when expanded) -->\n @if (isGroupExpanded(group.label)) {\n <tr class=\"i-table-group-detail-row\">\n <td\n [attr.colspan]=\"\n (groupColumns().length || 1) +\n 1 +\n 1 +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n class=\"i-table-group-detail-cell\"\n >\n <i-table\n [data]=\"group.data\"\n [columns]=\"getGroupColumns(group)\"\n [sortable]=\"sortable\"\n [filterable]=\"filterable\"\n [showActions]=\"showActions\"\n [actions]=\"actions\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"selection\"\n [striped]=\"striped\"\n [hoverable]=\"hoverable\"\n [bordered]=\"bordered\"\n [size]=\"size\"\n [dataKey]=\"dataKey\"\n [rowExpandable]=\"rowExpandable\"\n [resizableColumns]=\"resizableColumns\"\n (onSort)=\"onSort.emit($event)\"\n (onFilter)=\"onFilter.emit($event)\"\n (onAction)=\"onAction.emit($event)\"\n (onSelectionChange)=\"onSelectionChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n (onRowExpand)=\"onRowExpand.emit($event)\"\n (onRowCollapse)=\"onRowCollapse.emit($event)\"\n ></i-table>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n } @else {\n <!-- Non-Virtual Scroll Table -->\n <table class=\"i-table\">\n <!-- Table Header (sticky when scrollable) -->\n <thead>\n <!-- Column Filters 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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers Row -->\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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\">Actions</th>\n }\n </tr>\n </thead>\n\n <!-- Table Body - Regular Mode -->\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td\n [attr.colspan]=\"\n columns().length +\n (selectionMode === 'multiple' ? 1 : 0) +\n (rowExpandable ? 1 : 0) +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <i-no-content />\n </td>\n </tr>\n } @else {\n @for (\n row of processedData();\n track trackByRow($index, row);\n let rowIndex = $index\n ) {\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 @if (rowExpandable) {\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 (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n }\n @for (\n column of columns();\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 (\n item of getCellListItems(row, column);\n track item\n ) {\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(\n getCellValue(row, column.field),\n column\n )\n }}\n </span>\n }\n </td>\n }\n @if (showActions && actions.length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of actions; 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 [iTooltip]=\"getActionTooltip(action, row)\"\n [class.i-action-hidden]=\"\n !isActionVisible(action, row)\n \"\n (clicked)=\"onActionClick(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n <!-- Expanded Row Content -->\n @if (rowExpandable && isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"\n columns().length +\n (selectionMode === 'multiple' ? 1 : 0) +\n 1 +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <div class=\"i-table-expanded-content\">\n <pre>{{ row | json }}</pre>\n </div>\n </td>\n </tr>\n }\n }\n }\n </tbody>\n </table>\n }\n </div>\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:var(--surface-ground);border:1px solid var(--surface-border)}.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{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:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-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(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container{scrollbar-color:var(--color-text-secondary) transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) 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;background:var(--color-surface-50)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header table{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%}.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-body{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll table{display:table;width:100%;border-collapse:collapse}.i-table-wrapper .i-table-container--virtual-scroll tbody{display:table-row-group}.i-table-wrapper .i-table-container--virtual-scroll tr{display:table-row;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll td,.i-table-wrapper .i-table-container--virtual-scroll th{display:table-cell}.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{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;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-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}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ITable), selector: "i-table", inputs: ["data", "columns", "groupedData", "groupColumns", "emptyMessage", "sortable", "sortField", "sortOrder", "filterable", "globalFilter", "filterDelay", "selectionMode", "selection", "dataKey", "showActions", "actions", "striped", "hoverable", "bordered", "size", "loading", "scrollable", "scrollHeight", "height", "virtualScroll", "virtualScrollItemSize", "virtualScrollMinBufferPx", "virtualScrollMaxBufferPx", "resizableColumns", "reorderableColumns", "rowExpandable", "downloadable", "downloadMode", "downloadFormat", "downloadFilename"], outputs: ["onSort", "onFilter", "selectionChange", "onSelectionChange", "onRowSelect", "onRowUnselect", "onAction", "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", "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"] }, { kind: "pipe", type: i0.forwardRef(() => i1$1.JsonPipe), name: "json" }] });
|
|
8168
8623
|
}
|
|
8169
8624
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITable, decorators: [{
|
|
8170
8625
|
type: Component,
|
|
@@ -8180,8 +8635,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
8180
8635
|
IChip,
|
|
8181
8636
|
NoContentComponent,
|
|
8182
8637
|
TooltipDirective,
|
|
8183
|
-
], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n <!-- Table Header with ng-content, search, and 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 placeholder=\"Search...\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"false\"\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 <!-- Scrollable Table Container -->\n <div\n class=\"i-table-container\"\n [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n [class.i-table-container--virtual-scroll]=\"virtualScroll\"\n [style.height]=\"virtualScroll ? height || scrollHeight || '400px' : null\"\n [style.max-height]=\"!virtualScroll ? height || scrollHeight || null : null\"\n >\n <!-- Virtual Scroll Mode -->\n @if (virtualScroll) {\n <!-- Sticky Header Table (outside viewport) -->\n <div class=\"i-table-virtual-header\">\n <table class=\"i-table\">\n <thead>\n <!-- Column Filters 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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (\n column of columns();\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers Row -->\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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\">Actions</th>\n }\n </tr>\n </thead>\n </table>\n </div>\n\n <!-- Virtual Scroll Viewport (body only) -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n <table class=\"i-table i-table-virtual-body\">\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td\n [attr.colspan]=\"\n columns().length +\n (selectionMode === 'multiple' ? 1 : 0) +\n (rowExpandable ? 1 : 0) +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <i-no-content />\n </td>\n </tr>\n }\n <!-- Virtual Scroll Rows -->\n <tr\n *cdkVirtualFor=\"\n let row of processedData();\n let rowIndex = index;\n trackBy: trackByRow\n \"\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 <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 @if (rowExpandable) {\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 @if (showActions && actions.length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of actions; 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 [iTooltip]=\"getActionTooltip(action, row)\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"onActionClick(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n } @else {\n <!-- Non-Virtual Scroll Table -->\n <table class=\"i-table\">\n <!-- Table Header (sticky when scrollable) -->\n <thead>\n <!-- Column Filters 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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers Row -->\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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\">Actions</th>\n }\n </tr>\n </thead>\n\n <!-- Table Body - Grouped Mode -->\n @if (isGroupedMode()) {\n <tbody>\n @for (group of groupedData(); track $index) {\n <!-- Group Header Row -->\n <tr class=\"i-table-group-header\" [ngClass]=\"group.styleClass\">\n <td\n [attr.colspan]=\"\n (getGroupColumns(group).length || columns().length) +\n (selectionMode === 'multiple' ? 1 : 0) +\n (rowExpandable ? 1 : 0) +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n (click)=\"toggleGroupExpansion(group.label)\"\n >\n <div class=\"i-table-group-header-content\">\n <i\n [class]=\"\n isGroupExpanded(group.label)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n class=\"i-table-group-toggle-icon\"\n ></i>\n <span class=\"i-table-group-label\">{{ group.label }}</span>\n <span class=\"i-table-group-count\"\n >({{ group.data.length }})</span\n >\n </div>\n </td>\n </tr>\n\n <!-- Group Column Headers (when expanded) -->\n @if (isGroupExpanded(group.label) && group.columns) {\n <tr class=\"i-table-group-columns-header\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (\n column of getGroupColumns(group);\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n >\n {{ column.header }}\n </th>\n }\n @if (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\">Actions</th>\n }\n </tr>\n }\n\n <!-- Group Data Rows (when expanded) -->\n @if (isGroupExpanded(group.label)) {\n @if (group.data.length === 0) {\n <tr class=\"i-table-empty-row\">\n <td\n [attr.colspan]=\"\n (getGroupColumns(group).length || columns().length) +\n (selectionMode === 'multiple' ? 1 : 0) +\n (rowExpandable ? 1 : 0) +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <i-no-content />\n </td>\n </tr>\n } @else {\n @for (row of group.data; track trackByRow($index, row)) {\n <tr\n class=\"i-table-group-row\"\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 @if (rowExpandable) {\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n }\n @for (\n column of getGroupColumns(group);\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]=\"\n getCellSeverity(row, column)\n \"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (\n item of getCellListItems(row, column);\n track item\n ) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"\n getCellSeverity(row, column)\n \"\n >\n {{\n formatCellValue(\n getCellValue(row, column.field),\n column\n )\n }}\n </span>\n }\n </td>\n }\n @if (showActions && actions.length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of actions; 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 [iTooltip]=\"getActionTooltip(action, row)\"\n [class.i-action-hidden]=\"\n !isActionVisible(action, row)\n \"\n (clicked)=\"onActionClick(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n <!-- Expanded Row Content -->\n @if (rowExpandable && isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"\n (getGroupColumns(group).length ||\n columns().length) +\n (selectionMode === 'multiple' ? 1 : 0) +\n 1 +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <div class=\"i-table-expanded-content\">\n <pre>{{ row | json }}</pre>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n }\n </tbody>\n } @else {\n <!-- Table Body - Regular Mode -->\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td\n [attr.colspan]=\"\n columns().length +\n (selectionMode === 'multiple' ? 1 : 0) +\n (rowExpandable ? 1 : 0) +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <i-no-content />\n </td>\n </tr>\n } @else {\n @for (\n row of processedData();\n track trackByRow($index, row);\n let rowIndex = $index\n ) {\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 @if (rowExpandable) {\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n }\n @for (\n column of columns();\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 (\n item of getCellListItems(row, column);\n track item\n ) {\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(\n getCellValue(row, column.field),\n column\n )\n }}\n </span>\n }\n </td>\n }\n @if (showActions && actions.length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of actions; 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 [iTooltip]=\"getActionTooltip(action, row)\"\n [class.i-action-hidden]=\"\n !isActionVisible(action, row)\n \"\n (clicked)=\"onActionClick(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n <!-- Expanded Row Content -->\n @if (rowExpandable && isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"\n columns().length +\n (selectionMode === 'multiple' ? 1 : 0) +\n 1 +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <div class=\"i-table-expanded-content\">\n <pre>{{ row | json }}</pre>\n </div>\n </td>\n </tr>\n }\n }\n }\n </tbody>\n }\n </table>\n }\n </div>\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:var(--surface-ground);border:1px solid var(--surface-border)}.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.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):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).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{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:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-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(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container{scrollbar-color:var(--color-text-secondary) transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto}.i-table-wrapper .i-table-container--scrollable 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;background:var(--color-surface-50)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header table{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%}.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-body{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll table{display:table;width:100%;border-collapse:collapse}.i-table-wrapper .i-table-container--virtual-scroll tbody{display:table-row-group}.i-table-wrapper .i-table-container--virtual-scroll tr{display:table-row;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll td,.i-table-wrapper .i-table-container--virtual-scroll th{display:table-cell}.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:1em;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 .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{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;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-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:.9em;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-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.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}}\n"] }]
|
|
8184
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], groupedData: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupedData", required: false }] }], emptyMessage: [{
|
|
8638
|
+
forwardRef(() => ITable),
|
|
8639
|
+
], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n <!-- Table Header with ng-content, search, and 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 placeholder=\"Search...\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"false\"\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 <!-- Scrollable Table Container -->\n <div\n class=\"i-table-container\"\n [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n [class.i-table-container--virtual-scroll]=\"virtualScroll\"\n [style.height]=\"virtualScroll ? height || scrollHeight || '400px' : null\"\n [style.max-height]=\"!virtualScroll ? height || scrollHeight || null : null\"\n >\n <!-- Virtual Scroll Mode -->\n @if (virtualScroll) {\n <!-- Sticky Header Table (outside viewport) -->\n <div class=\"i-table-virtual-header\">\n <table class=\"i-table\">\n <thead>\n <!-- Column Filters 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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (\n column of columns();\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers Row -->\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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\">Actions</th>\n }\n </tr>\n </thead>\n </table>\n </div>\n\n <!-- Virtual Scroll Viewport (body only) -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n <table class=\"i-table i-table-virtual-body\">\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td\n [attr.colspan]=\"\n columns().length +\n (selectionMode === 'multiple' ? 1 : 0) +\n (rowExpandable ? 1 : 0) +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <i-no-content />\n </td>\n </tr>\n }\n <!-- Virtual Scroll Rows -->\n <tr\n *cdkVirtualFor=\"\n let row of processedData();\n let rowIndex = index;\n trackBy: trackByRow\n \"\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 <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 @if (rowExpandable) {\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 (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 @if (showActions && actions.length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of actions; 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 [iTooltip]=\"getActionTooltip(action, row)\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"onActionClick(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n } @else if (isGroupedMode()) {\n <!-- Grouped Mode: single scrollable table \u2014 group summary rows expand to reveal nested tables -->\n <table class=\"i-table\">\n <thead>\n <!-- Outer filter row -->\n @if (filterable && groupColumns().length > 0) {\n <tr class=\"i-table-filter-row\">\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of groupColumns();\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n <th class=\"i-table-group-count-header\"></th>\n </tr>\n }\n\n <!-- Group column header row -->\n <tr>\n <th class=\"i-table-expand-header\"></th>\n @if (groupColumns().length === 0) {\n <th>Group</th>\n } @else {\n @for (\n column of groupColumns();\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 }\n @if (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\">Actions</th>\n }\n <th class=\"i-table-group-count-header\"></th>\n </tr>\n </thead>\n\n <tbody>\n @if (groupedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td\n [attr.colspan]=\"\n (groupColumns().length || 1) +\n 1 +\n 1 +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <i-no-content />\n </td>\n </tr>\n }\n @for (group of groupedData(); track $index) {\n <!-- Group summary row -->\n <tr\n class=\"i-table-group-summary-row\"\n [ngClass]=\"group.styleClass\"\n [class.i-table-group-expanded]=\"isGroupExpanded(group.label)\"\n (click)=\"toggleGroupExpansion(group.label)\"\n >\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"xtra-small\"\n [icon]=\"\n isGroupExpanded(group.label)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n (clicked)=\"\n toggleGroupExpansion(group.label); $event.stopPropagation()\n \"\n ></i-button>\n </td>\n @if (groupColumns().length === 0) {\n <!-- No groupColumns: show label + count in a single cell -->\n <td>\n <div class=\"i-table-group-header-content\">\n <span class=\"i-table-group-label\">{{ group.label }}</span>\n <span class=\"i-table-group-count\"\n >({{ group.data.length }})</span\n >\n </div>\n </td>\n } @else {\n @for (\n column of groupColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(group.row ?? {}, column)\n ? 'i-table-cell-' +\n getCellSeverity(group.row ?? {}, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getCellIcon(group.row ?? {}, column)\"\n [class.i-severity-icon]=\"\n getCellSeverity(group.row ?? {}, column)\n \"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else {\n <span\n [class.i-severity-text]=\"\n getCellSeverity(group.row ?? {}, column)\n \"\n >\n {{\n formatCellValue(\n getCellValue(group.row ?? {}, column.field),\n column\n )\n }}\n </span>\n }\n </td>\n }\n }\n @if (showActions && actions.length > 0) {\n <td\n class=\"i-table-actions-cell\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"i-table-actions\">\n @for (action of actions; 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, group.row ?? {})\"\n [iTooltip]=\"getActionTooltip(action, group.row ?? {})\"\n [class.i-action-hidden]=\"\n !isActionVisible(action, group.row ?? {})\n \"\n (clicked)=\"\n onActionClick(action, group.row ?? {}, $event)\n \"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n <td\n class=\"i-table-group-count-cell\"\n (click)=\"$event.stopPropagation()\"\n >\n <span class=\"i-table-group-count\"\n >({{ group.data.length }})</span\n >\n </td>\n </tr>\n\n <!-- Group detail row (visible when expanded) -->\n @if (isGroupExpanded(group.label)) {\n <tr class=\"i-table-group-detail-row\">\n <td\n [attr.colspan]=\"\n (groupColumns().length || 1) +\n 1 +\n 1 +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n class=\"i-table-group-detail-cell\"\n >\n <i-table\n [data]=\"group.data\"\n [columns]=\"getGroupColumns(group)\"\n [sortable]=\"sortable\"\n [filterable]=\"filterable\"\n [showActions]=\"showActions\"\n [actions]=\"actions\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"selection\"\n [striped]=\"striped\"\n [hoverable]=\"hoverable\"\n [bordered]=\"bordered\"\n [size]=\"size\"\n [dataKey]=\"dataKey\"\n [rowExpandable]=\"rowExpandable\"\n [resizableColumns]=\"resizableColumns\"\n (onSort)=\"onSort.emit($event)\"\n (onFilter)=\"onFilter.emit($event)\"\n (onAction)=\"onAction.emit($event)\"\n (onSelectionChange)=\"onSelectionChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n (onRowExpand)=\"onRowExpand.emit($event)\"\n (onRowCollapse)=\"onRowCollapse.emit($event)\"\n ></i-table>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n } @else {\n <!-- Non-Virtual Scroll Table -->\n <table class=\"i-table\">\n <!-- Table Header (sticky when scrollable) -->\n <thead>\n <!-- Column Filters 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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers Row -->\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 @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n }\n @for (column of columns(); track trackByColumn($index, column)) {\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 (showActions && actions.length > 0) {\n <th class=\"i-table-actions-header\">Actions</th>\n }\n </tr>\n </thead>\n\n <!-- Table Body - Regular Mode -->\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td\n [attr.colspan]=\"\n columns().length +\n (selectionMode === 'multiple' ? 1 : 0) +\n (rowExpandable ? 1 : 0) +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <i-no-content />\n </td>\n </tr>\n } @else {\n @for (\n row of processedData();\n track trackByRow($index, row);\n let rowIndex = $index\n ) {\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 @if (rowExpandable) {\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 (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n }\n @for (\n column of columns();\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 (\n item of getCellListItems(row, column);\n track item\n ) {\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(\n getCellValue(row, column.field),\n column\n )\n }}\n </span>\n }\n </td>\n }\n @if (showActions && actions.length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of actions; 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 [iTooltip]=\"getActionTooltip(action, row)\"\n [class.i-action-hidden]=\"\n !isActionVisible(action, row)\n \"\n (clicked)=\"onActionClick(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n <!-- Expanded Row Content -->\n @if (rowExpandable && isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"\n columns().length +\n (selectionMode === 'multiple' ? 1 : 0) +\n 1 +\n (showActions && actions.length > 0 ? 1 : 0)\n \"\n >\n <div class=\"i-table-expanded-content\">\n <pre>{{ row | json }}</pre>\n </div>\n </td>\n </tr>\n }\n }\n }\n </tbody>\n </table>\n }\n </div>\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:var(--surface-ground);border:1px solid var(--surface-border)}.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{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:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-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(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container{scrollbar-color:var(--color-text-secondary) transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) 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;background:var(--color-surface-50)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header table{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%}.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-body{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll table{display:table;width:100%;border-collapse:collapse}.i-table-wrapper .i-table-container--virtual-scroll tbody{display:table-row-group}.i-table-wrapper .i-table-container--virtual-scroll tr{display:table-row;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll td,.i-table-wrapper .i-table-container--virtual-scroll th{display:table-cell}.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{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;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-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}}\n"] }]
|
|
8640
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], groupedData: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupedData", required: false }] }], groupColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupColumns", required: false }] }], emptyMessage: [{
|
|
8185
8641
|
type: Input
|
|
8186
8642
|
}], sortable: [{
|
|
8187
8643
|
type: Input
|
|
@@ -9336,5 +9792,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
9336
9792
|
* Generated bundle index. Do not edit.
|
|
9337
9793
|
*/
|
|
9338
9794
|
|
|
9339
|
-
export { AbstractDialog, CLAIMS_CHECKER, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IInputText, IListbox, IMessage, IMultiSelect, IOverlayPanel, IPanel, IPlaceholder, IProgressSpinner, IRadioButton, ISelect, ITabPanel, ITable, ITabs, ITreeView, IWhisper, LayoutComponent, LayoutService, LocalStorageColorSchemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId, provideMenuClaimsChecker };
|
|
9795
|
+
export { AbstractDialog, CLAIMS_CHECKER, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IInputText, IListbox, IMessage, IMultiSelect, IOverlayPanel, IPanel, IPlaceholder, IProgressSpinner, IRadioButton, ISelect, ITabPanel, ITable, ITabs, ITag, ITextarea, ITreeView, IWhisper, LayoutComponent, LayoutService, LocalStorageColorSchemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId, provideMenuClaimsChecker };
|
|
9340
9796
|
//# sourceMappingURL=integra-ng.mjs.map
|