integra-ng 20.1.19 → 21.0.5
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,15 +1,15 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { EventEmitter, Output, Input, Component, ContentChildren, ElementRef, ViewChild, HostBinding, createComponent, Directive, Optional, Self, forwardRef, HostListener, ChangeDetectionStrategy, signal, inject, EnvironmentInjector, ApplicationRef, Injectable, effect, computed, input, ViewEncapsulation, ViewChildren, Inject } from '@angular/core';
|
|
3
|
-
import * as i1 from '@angular/common';
|
|
4
|
-
import { NgClass, CommonModule,
|
|
5
|
-
import * as
|
|
3
|
+
import * as i1$1 from '@angular/common';
|
|
4
|
+
import { NgClass, CommonModule, NgStyle, NgTemplateOutlet, DOCUMENT } from '@angular/common';
|
|
5
|
+
import * as i1 from '@angular/forms';
|
|
6
6
|
import { FormsModule, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
|
|
7
7
|
import { take } from 'rxjs/operators';
|
|
8
8
|
import { Subject, filter, BehaviorSubject } from 'rxjs';
|
|
9
|
-
import * as i2
|
|
9
|
+
import * as i2 from '@angular/router';
|
|
10
10
|
import { RouterLink, RouterLinkActive, NavigationEnd, RouterOutlet } from '@angular/router';
|
|
11
11
|
import { Chart, registerables } from 'chart.js';
|
|
12
|
-
import * as i1$
|
|
12
|
+
import * as i1$2 from '@angular/platform-browser';
|
|
13
13
|
|
|
14
14
|
var lastId = 0;
|
|
15
15
|
function UniqueComponentId(prefix = 'i_id_') {
|
|
@@ -94,10 +94,10 @@ class IAccordion {
|
|
|
94
94
|
this.expandedChange.emit(this.expanded);
|
|
95
95
|
this.onToggle.emit(this.expanded);
|
|
96
96
|
}
|
|
97
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
98
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
97
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
98
|
+
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:#9e9e9e;cursor:not-allowed}.i-accordion.disabled .i-accordion-header .i-accordion-icon,.i-accordion.disabled .i-accordion-header .i-accordion-toggle-icon{color:#9e9e9e}.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"] });
|
|
99
99
|
}
|
|
100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IAccordion, decorators: [{
|
|
101
101
|
type: Component,
|
|
102
102
|
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:#9e9e9e;cursor:not-allowed}.i-accordion.disabled .i-accordion-header .i-accordion-icon,.i-accordion.disabled .i-accordion-header .i-accordion-toggle-icon{color:#9e9e9e}.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"] }]
|
|
103
103
|
}], propDecorators: { header: [{
|
|
@@ -220,10 +220,10 @@ class IAccordionList {
|
|
|
220
220
|
}
|
|
221
221
|
});
|
|
222
222
|
}
|
|
223
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
224
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
223
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IAccordionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
224
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: IAccordionList, isStandalone: true, selector: "i-accordion-list", inputs: { multiple: "multiple" }, queries: [{ propertyName: "accordions", predicate: IAccordion }], ngImport: i0, template: "<div class=\"i-accordion-list\" [attr.id]=\"componentId\">\n <ng-content></ng-content>\n</div>\n", styles: [".i-accordion-list{display:flex;flex-direction:column;gap:8px;border-radius:8px}\n"] });
|
|
225
225
|
}
|
|
226
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
226
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IAccordionList, decorators: [{
|
|
227
227
|
type: Component,
|
|
228
228
|
args: [{ selector: 'i-accordion-list', template: "<div class=\"i-accordion-list\" [attr.id]=\"componentId\">\n <ng-content></ng-content>\n</div>\n", styles: [".i-accordion-list{display:flex;flex-direction:column;gap:8px;border-radius:8px}\n"] }]
|
|
229
229
|
}], propDecorators: { multiple: [{
|
|
@@ -233,6 +233,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
233
233
|
args: [IAccordion]
|
|
234
234
|
}] } });
|
|
235
235
|
|
|
236
|
+
class IProgressSpinner {
|
|
237
|
+
size = 'medium';
|
|
238
|
+
strokeWidth = 4;
|
|
239
|
+
ariaLabel = 'Loading';
|
|
240
|
+
severity;
|
|
241
|
+
colorMode = 'accent';
|
|
242
|
+
get sizeClass() {
|
|
243
|
+
return `spinner-${this.size}`;
|
|
244
|
+
}
|
|
245
|
+
get severityClass() {
|
|
246
|
+
if (!this.severity)
|
|
247
|
+
return '';
|
|
248
|
+
if (this.colorMode === 'text')
|
|
249
|
+
return `spinner--${this.severity}--text`;
|
|
250
|
+
return `spinner--${this.severity}`;
|
|
251
|
+
}
|
|
252
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IProgressSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
253
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: IProgressSpinner, isStandalone: true, selector: "i-progress-spinner", inputs: { size: "size", strokeWidth: "strokeWidth", ariaLabel: "ariaLabel", severity: "severity", colorMode: "colorMode" }, ngImport: i0, template: "<div\n class=\"spinner-container\"\n [class]=\"sizeClass\"\n [ngClass]=\"severityClass\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"status\"\n>\n <svg class=\"spinner-svg\" viewBox=\"0 0 50 50\">\n <circle\n class=\"spinner-track\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n fill=\"none\"\n [attr.stroke-width]=\"strokeWidth\"\n ></circle>\n <circle\n class=\"spinner-circle\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n fill=\"none\"\n [attr.stroke-width]=\"strokeWidth\"\n ></circle>\n </svg>\n</div>\n", styles: [".spinner-track{stroke:var(--color-primary);opacity:.2}.spinner-circle{stroke:var(--color-primary)}.spinner--primary .spinner-circle{stroke:var(--color-contrast-inverse)}.spinner--primary--text .spinner-circle{stroke:var(--color-primary)}.spinner--secondary .spinner-circle{stroke:var(--color-contrast-inverse)}.spinner--secondary--text .spinner-circle{stroke:var(--color-secondary)}.spinner--tertiary .spinner-circle{stroke:var(--color-contrast-inverse)}.spinner--tertiary--text .spinner-circle{stroke:var(--color-tertiary)}.spinner--success .spinner-circle{stroke:var(--color-contrast-inverse)}.spinner--success--text .spinner-circle{stroke:var(--color-success)}.spinner--info .spinner-circle{stroke:var(--color-contrast-inverse)}.spinner--info--text .spinner-circle{stroke:var(--color-info)}.spinner--warning .spinner-circle{stroke:#fff}.spinner--warning--text .spinner-circle{stroke:var(--color-warning)}.spinner--danger .spinner-circle{stroke:#fff}.spinner--danger--text .spinner-circle{stroke:var(--color-danger)}.spinner--contrast .spinner-circle{stroke:var(--color-contrast-inverse)}.spinner--contrast--text .spinner-circle{stroke:var(--color-text-secondary)}.spinner-container{display:inline-block;position:relative}.spinner-container.spinner-small{width:2rem;height:2rem}.spinner-container.spinner-medium{width:4rem;height:4rem}.spinner-container.spinner-large{width:6rem;height:6rem}.spinner-svg{width:100%;height:100%;animation:spinner-rotate 2s linear infinite;transform-origin:center center}.spinner-circle{stroke-dasharray:89,200;stroke-dashoffset:0;animation:spinner-dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes spinner-rotate{to{transform:rotate(360deg)}}@keyframes spinner-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
254
|
+
}
|
|
255
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IProgressSpinner, decorators: [{
|
|
256
|
+
type: Component,
|
|
257
|
+
args: [{ selector: 'i-progress-spinner', imports: [NgClass], template: "<div\n class=\"spinner-container\"\n [class]=\"sizeClass\"\n [ngClass]=\"severityClass\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"status\"\n>\n <svg class=\"spinner-svg\" viewBox=\"0 0 50 50\">\n <circle\n class=\"spinner-track\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n fill=\"none\"\n [attr.stroke-width]=\"strokeWidth\"\n ></circle>\n <circle\n class=\"spinner-circle\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n fill=\"none\"\n [attr.stroke-width]=\"strokeWidth\"\n ></circle>\n </svg>\n</div>\n", styles: [".spinner-track{stroke:var(--color-primary);opacity:.2}.spinner-circle{stroke:var(--color-primary)}.spinner--primary .spinner-circle{stroke:var(--color-contrast-inverse)}.spinner--primary--text .spinner-circle{stroke:var(--color-primary)}.spinner--secondary .spinner-circle{stroke:var(--color-contrast-inverse)}.spinner--secondary--text .spinner-circle{stroke:var(--color-secondary)}.spinner--tertiary .spinner-circle{stroke:var(--color-contrast-inverse)}.spinner--tertiary--text .spinner-circle{stroke:var(--color-tertiary)}.spinner--success .spinner-circle{stroke:var(--color-contrast-inverse)}.spinner--success--text .spinner-circle{stroke:var(--color-success)}.spinner--info .spinner-circle{stroke:var(--color-contrast-inverse)}.spinner--info--text .spinner-circle{stroke:var(--color-info)}.spinner--warning .spinner-circle{stroke:#fff}.spinner--warning--text .spinner-circle{stroke:var(--color-warning)}.spinner--danger .spinner-circle{stroke:#fff}.spinner--danger--text .spinner-circle{stroke:var(--color-danger)}.spinner--contrast .spinner-circle{stroke:var(--color-contrast-inverse)}.spinner--contrast--text .spinner-circle{stroke:var(--color-text-secondary)}.spinner-container{display:inline-block;position:relative}.spinner-container.spinner-small{width:2rem;height:2rem}.spinner-container.spinner-medium{width:4rem;height:4rem}.spinner-container.spinner-large{width:6rem;height:6rem}.spinner-svg{width:100%;height:100%;animation:spinner-rotate 2s linear infinite;transform-origin:center center}.spinner-circle{stroke-dasharray:89,200;stroke-dashoffset:0;animation:spinner-dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes spinner-rotate{to{transform:rotate(360deg)}}@keyframes spinner-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}\n"] }]
|
|
258
|
+
}], propDecorators: { size: [{
|
|
259
|
+
type: Input
|
|
260
|
+
}], strokeWidth: [{
|
|
261
|
+
type: Input
|
|
262
|
+
}], ariaLabel: [{
|
|
263
|
+
type: Input
|
|
264
|
+
}], severity: [{
|
|
265
|
+
type: Input
|
|
266
|
+
}], colorMode: [{
|
|
267
|
+
type: Input
|
|
268
|
+
}] } });
|
|
269
|
+
|
|
236
270
|
/**
|
|
237
271
|
* Button Component
|
|
238
272
|
*
|
|
@@ -316,6 +350,12 @@ class IButton {
|
|
|
316
350
|
* @default false
|
|
317
351
|
*/
|
|
318
352
|
fluid = false;
|
|
353
|
+
/**
|
|
354
|
+
* Whether the button is in a loading state
|
|
355
|
+
* Shows a spinner and hides button content
|
|
356
|
+
* @default false
|
|
357
|
+
*/
|
|
358
|
+
loading = false;
|
|
319
359
|
/**
|
|
320
360
|
* Event emitted when the button is clicked
|
|
321
361
|
*/
|
|
@@ -357,12 +397,12 @@ class IButton {
|
|
|
357
397
|
focus() {
|
|
358
398
|
this.buttonElement?.nativeElement?.focus();
|
|
359
399
|
}
|
|
360
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
361
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
400
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
401
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IButton, isStandalone: true, selector: "i-button", inputs: { severity: "severity", size: "size", type: "type", disabled: "disabled", outlined: "outlined", raised: "raised", text: "text", icon: "icon", fluid: "fluid", loading: "loading" }, outputs: { clicked: "clicked" }, host: { properties: { "class.i-button-fluid": "this.fluidClass" } }, viewQueries: [{ propertyName: "projected", first: true, predicate: ["projected"], descendants: true, read: ElementRef }, { propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"i-button-wrapper\">\n <button\n #buttonElement\n primary\n [attr.id]=\"componentId\"\n class=\"i-button\"\n [ngClass]=\"[\n 'i-button--' + severity,\n 'i-button--' + size,\n outlined && !text ? 'i-button--outlined' : '',\n text ? 'i-button--text' : '',\n fluid ? 'i-button--fluid' : '',\n raised && !text ? 'i-button--raised' : '',\n iconOnly ? 'icon-only' : '',\n iconOnly && !text ? 'icon-only-text' : '',\n loading ? 'i-button--loading' : ''\n ]\"\n [disabled]=\"disabled || loading\"\n [attr.type]=\"type\"\n (click)=\"clicked.emit($event)\"\n >\n @if (loading) {\n <div class=\"button-loading-spinner\">\n <i-progress-spinner\n size=\"small\"\n [severity]=\"severity\"\n [colorMode]=\"outlined || text ? 'text' : 'accent'\"\n ></i-progress-spinner>\n </div>\n } @else {\n <div [ngClass]=\"['button-content', iconOnly ? 'icon-only' : '']\">\n @if (icon) {\n <i [ngClass]=\"[icon, 'i-button__icon', iconOnly ? 'icon-only' : '']\"></i>\n }\n <span class=\"projected-content\" #projected>\n <ng-content></ng-content>\n </span>\n </div>\n }\n </button>\n</div>\n", styles: [".i-button--primary{background:var(--color-primary);color:var(--color-contrast-inverse)}.i-button--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-button--primary.i-button--outlined{background:transparent;color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)!important}.i-button--primary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent)}.i-button--primary.i-button--text{background:transparent;color:var(--color-primary);border-color:transparent}.i-button--primary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent);border-color:transparent}.i-button--secondary{background:var(--color-secondary);color:var(--color-contrast-inverse)}.i-button--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 80%,transparent)}.i-button--secondary.i-button--outlined{background:transparent;color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)!important}.i-button--secondary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent)}.i-button--secondary.i-button--text{background:transparent;color:var(--color-secondary);border-color:transparent}.i-button--secondary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent);border-color:transparent}.i-button--success{background:var(--color-success);color:var(--color-contrast-inverse)}.i-button--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 80%,transparent)}.i-button--success.i-button--outlined{background:transparent;color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)!important}.i-button--success.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent)}.i-button--success.i-button--text{background:transparent;color:var(--color-success);border-color:transparent}.i-button--success.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent);border-color:transparent}.i-button--info{background:var(--color-info);color:var(--color-contrast-inverse)}.i-button--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 80%,transparent)}.i-button--info.i-button--outlined{background:transparent;color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)!important}.i-button--info.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent)}.i-button--info.i-button--text{background:transparent;color:var(--color-info);border-color:transparent}.i-button--info.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent);border-color:transparent}.i-button--warning{background:var(--color-warning);color:#fff}.i-button--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 80%,transparent)}.i-button--warning.i-button--outlined{background:transparent;color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)!important}.i-button--warning.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent)}.i-button--warning.i-button--text{background:transparent;color:var(--color-warning);border-color:transparent}.i-button--warning.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent);border-color:transparent}.i-button--danger{background:var(--color-danger);color:#fff}.i-button--danger:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 80%,transparent)}.i-button--danger.i-button--outlined{background:transparent;color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)!important}.i-button--danger.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent)}.i-button--danger.i-button--text{background:transparent;color:var(--color-danger);border-color:transparent}.i-button--danger.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent);border-color:transparent}.i-button--contrast{background:var(--color-contrast);color:var(--color-contrast-inverse)}.i-button--contrast:hover:not(:disabled){background:color-mix(in srgb,var(--color-contrast) 80%,transparent)}.i-button--contrast.i-button--outlined{background:transparent;color:var(--color-text-secondary);border-color:color-mix(in srgb,var(--color-contrast) 40%,transparent)!important}.i-button--contrast.i-button--outlined:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:var(--color-text-primary)}.i-button--contrast.i-button--text{background:transparent;color:var(--color-text-secondary);border-color:transparent}.i-button--contrast.i-button--text:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:transparent}:host{display:inline-block}:host.i-button-fluid{display:block;width:100%}.i-button-wrapper .i-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 16px;font-weight:550;border:1px solid transparent;border-radius:4px;outline:none;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s,border-color .2s}.i-button-wrapper .i-button.icon-only{padding:8px;border-radius:20px}.i-button-wrapper .i-button.icon-only.icon-only-text{border-radius:4px}.i-button-wrapper .i-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px}.i-button-wrapper .i-button .button-content.icon-only{gap:0}.i-button-wrapper .i-button .button-loading-spinner{display:flex;align-items:center;justify-content:center}.i-button-wrapper .i-button .i-button__icon{display:inline-flex;align-items:center}.i-button-wrapper .i-button--xtra-small{height:20px;padding:0 10px;font-size:10px}.i-button-wrapper .i-button--xtra-small .icon-only{font-size:12px}.i-button-wrapper .i-button--small{height:28px}.i-button-wrapper .i-button--small .icon-only{font-size:14px}.i-button-wrapper .i-button--medium{height:34px}.i-button-wrapper .i-button--medium .icon-only{font-size:18px}.i-button-wrapper .i-button--large{height:40px}.i-button-wrapper .i-button--large .icon-only{font-size:26px}.i-button-wrapper .i-button:disabled,.i-button-wrapper .i-button--outlined:disabled{opacity:.38;pointer-events:none}.i-button-wrapper .i-button--raised{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.i-button-wrapper .i-button--outlined{box-shadow:none;border:1px solid}.i-button-wrapper .i-button--text{box-shadow:none}.i-button-wrapper .i-button--fluid{width:100%}.i-button-wrapper .i-button:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:inherit;pointer-events:none;transform:translate(-50%,-50%) scale(.7);transition:opacity .2s,transform .2s}.i-button-wrapper .i-button:active:after{opacity:.12;transform:translate(-50%,-50%) scale(1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IProgressSpinner, selector: "i-progress-spinner", inputs: ["size", "strokeWidth", "ariaLabel", "severity", "colorMode"] }] });
|
|
362
402
|
}
|
|
363
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
403
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IButton, decorators: [{
|
|
364
404
|
type: Component,
|
|
365
|
-
args: [{ selector: 'i-button', standalone: true, imports: [NgClass], template: "<div class=\"i-button-wrapper\">\n
|
|
405
|
+
args: [{ selector: 'i-button', standalone: true, imports: [NgClass, IProgressSpinner], template: "<div class=\"i-button-wrapper\">\n <button\n #buttonElement\n primary\n [attr.id]=\"componentId\"\n class=\"i-button\"\n [ngClass]=\"[\n 'i-button--' + severity,\n 'i-button--' + size,\n outlined && !text ? 'i-button--outlined' : '',\n text ? 'i-button--text' : '',\n fluid ? 'i-button--fluid' : '',\n raised && !text ? 'i-button--raised' : '',\n iconOnly ? 'icon-only' : '',\n iconOnly && !text ? 'icon-only-text' : '',\n loading ? 'i-button--loading' : ''\n ]\"\n [disabled]=\"disabled || loading\"\n [attr.type]=\"type\"\n (click)=\"clicked.emit($event)\"\n >\n @if (loading) {\n <div class=\"button-loading-spinner\">\n <i-progress-spinner\n size=\"small\"\n [severity]=\"severity\"\n [colorMode]=\"outlined || text ? 'text' : 'accent'\"\n ></i-progress-spinner>\n </div>\n } @else {\n <div [ngClass]=\"['button-content', iconOnly ? 'icon-only' : '']\">\n @if (icon) {\n <i [ngClass]=\"[icon, 'i-button__icon', iconOnly ? 'icon-only' : '']\"></i>\n }\n <span class=\"projected-content\" #projected>\n <ng-content></ng-content>\n </span>\n </div>\n }\n </button>\n</div>\n", styles: [".i-button--primary{background:var(--color-primary);color:var(--color-contrast-inverse)}.i-button--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-button--primary.i-button--outlined{background:transparent;color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)!important}.i-button--primary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent)}.i-button--primary.i-button--text{background:transparent;color:var(--color-primary);border-color:transparent}.i-button--primary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent);border-color:transparent}.i-button--secondary{background:var(--color-secondary);color:var(--color-contrast-inverse)}.i-button--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 80%,transparent)}.i-button--secondary.i-button--outlined{background:transparent;color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)!important}.i-button--secondary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent)}.i-button--secondary.i-button--text{background:transparent;color:var(--color-secondary);border-color:transparent}.i-button--secondary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent);border-color:transparent}.i-button--success{background:var(--color-success);color:var(--color-contrast-inverse)}.i-button--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 80%,transparent)}.i-button--success.i-button--outlined{background:transparent;color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)!important}.i-button--success.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent)}.i-button--success.i-button--text{background:transparent;color:var(--color-success);border-color:transparent}.i-button--success.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent);border-color:transparent}.i-button--info{background:var(--color-info);color:var(--color-contrast-inverse)}.i-button--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 80%,transparent)}.i-button--info.i-button--outlined{background:transparent;color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)!important}.i-button--info.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent)}.i-button--info.i-button--text{background:transparent;color:var(--color-info);border-color:transparent}.i-button--info.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent);border-color:transparent}.i-button--warning{background:var(--color-warning);color:#fff}.i-button--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 80%,transparent)}.i-button--warning.i-button--outlined{background:transparent;color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)!important}.i-button--warning.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent)}.i-button--warning.i-button--text{background:transparent;color:var(--color-warning);border-color:transparent}.i-button--warning.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent);border-color:transparent}.i-button--danger{background:var(--color-danger);color:#fff}.i-button--danger:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 80%,transparent)}.i-button--danger.i-button--outlined{background:transparent;color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)!important}.i-button--danger.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent)}.i-button--danger.i-button--text{background:transparent;color:var(--color-danger);border-color:transparent}.i-button--danger.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent);border-color:transparent}.i-button--contrast{background:var(--color-contrast);color:var(--color-contrast-inverse)}.i-button--contrast:hover:not(:disabled){background:color-mix(in srgb,var(--color-contrast) 80%,transparent)}.i-button--contrast.i-button--outlined{background:transparent;color:var(--color-text-secondary);border-color:color-mix(in srgb,var(--color-contrast) 40%,transparent)!important}.i-button--contrast.i-button--outlined:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:var(--color-text-primary)}.i-button--contrast.i-button--text{background:transparent;color:var(--color-text-secondary);border-color:transparent}.i-button--contrast.i-button--text:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:transparent}:host{display:inline-block}:host.i-button-fluid{display:block;width:100%}.i-button-wrapper .i-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 16px;font-weight:550;border:1px solid transparent;border-radius:4px;outline:none;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s,border-color .2s}.i-button-wrapper .i-button.icon-only{padding:8px;border-radius:20px}.i-button-wrapper .i-button.icon-only.icon-only-text{border-radius:4px}.i-button-wrapper .i-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px}.i-button-wrapper .i-button .button-content.icon-only{gap:0}.i-button-wrapper .i-button .button-loading-spinner{display:flex;align-items:center;justify-content:center}.i-button-wrapper .i-button .i-button__icon{display:inline-flex;align-items:center}.i-button-wrapper .i-button--xtra-small{height:20px;padding:0 10px;font-size:10px}.i-button-wrapper .i-button--xtra-small .icon-only{font-size:12px}.i-button-wrapper .i-button--small{height:28px}.i-button-wrapper .i-button--small .icon-only{font-size:14px}.i-button-wrapper .i-button--medium{height:34px}.i-button-wrapper .i-button--medium .icon-only{font-size:18px}.i-button-wrapper .i-button--large{height:40px}.i-button-wrapper .i-button--large .icon-only{font-size:26px}.i-button-wrapper .i-button:disabled,.i-button-wrapper .i-button--outlined:disabled{opacity:.38;pointer-events:none}.i-button-wrapper .i-button--raised{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.i-button-wrapper .i-button--outlined{box-shadow:none;border:1px solid}.i-button-wrapper .i-button--text{box-shadow:none}.i-button-wrapper .i-button--fluid{width:100%}.i-button-wrapper .i-button:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:inherit;pointer-events:none;transform:translate(-50%,-50%) scale(.7);transition:opacity .2s,transform .2s}.i-button-wrapper .i-button:active:after{opacity:.12;transform:translate(-50%,-50%) scale(1)}\n"] }]
|
|
366
406
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { fluidClass: [{
|
|
367
407
|
type: HostBinding,
|
|
368
408
|
args: ['class.i-button-fluid']
|
|
@@ -384,6 +424,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
384
424
|
type: Input
|
|
385
425
|
}], fluid: [{
|
|
386
426
|
type: Input
|
|
427
|
+
}], loading: [{
|
|
428
|
+
type: Input
|
|
387
429
|
}], clicked: [{
|
|
388
430
|
type: Output
|
|
389
431
|
}], projected: [{
|
|
@@ -397,8 +439,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
397
439
|
class TooltipComponent {
|
|
398
440
|
text = '';
|
|
399
441
|
position = 'above';
|
|
400
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
401
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
442
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
443
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: TooltipComponent, isStandalone: true, selector: "i-tooltip", inputs: { text: "text", position: "position" }, ngImport: i0, template: `
|
|
402
444
|
<div
|
|
403
445
|
class="i-tooltip"
|
|
404
446
|
[class.i-tooltip--above]="position === 'above'"
|
|
@@ -409,11 +451,11 @@ class TooltipComponent {
|
|
|
409
451
|
{{ text }}
|
|
410
452
|
<div class="i-tooltip__arrow"></div>
|
|
411
453
|
</div>
|
|
412
|
-
`, isInline: true, styles: [".i-tooltip{background-color:var(--color-component-background-solid);color:var(--color-text-contrast)}.i-tooltip--above .i-tooltip__arrow{border-top-color:var(--color-component-background-solid)}.i-tooltip--below .i-tooltip__arrow{border-bottom-color:var(--color-component-background-solid)}.i-tooltip--left .i-tooltip__arrow{border-left-color:var(--color-component-background-solid)}.i-tooltip--right .i-tooltip__arrow{border-right-color:var(--color-component-background-solid)}.i-tooltip{position:relative;padding:8px 12px;border-radius:4px;font-size:.9em;line-height:1.4;white-space:nowrap;max-width:200px;word-wrap:break-word;white-space:normal;z-index:9999;opacity:0;animation:fadeIn .2s ease-in-out forwards}.i-tooltip__arrow{position:absolute;width:0;height:0;border:6px solid transparent}.i-tooltip--above .i-tooltip__arrow{bottom:-6px;left:50%;transform:translate(-50%);border-bottom:none}.i-tooltip--below .i-tooltip__arrow{top:-6px;left:50%;transform:translate(-50%);border-top:none}.i-tooltip--left .i-tooltip__arrow{right:-6px;top:50%;transform:translateY(-50%);border-right:none}.i-tooltip--right .i-tooltip__arrow{left:-6px;top:50%;transform:translateY(-50%);border-left:none}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}\n"]
|
|
454
|
+
`, isInline: true, styles: [".i-tooltip{background-color:var(--color-component-background-solid);color:var(--color-text-contrast)}.i-tooltip--above .i-tooltip__arrow{border-top-color:var(--color-component-background-solid)}.i-tooltip--below .i-tooltip__arrow{border-bottom-color:var(--color-component-background-solid)}.i-tooltip--left .i-tooltip__arrow{border-left-color:var(--color-component-background-solid)}.i-tooltip--right .i-tooltip__arrow{border-right-color:var(--color-component-background-solid)}.i-tooltip{position:relative;padding:8px 12px;border-radius:4px;font-size:.9em;line-height:1.4;white-space:nowrap;max-width:200px;word-wrap:break-word;white-space:normal;z-index:9999;opacity:0;animation:fadeIn .2s ease-in-out forwards}.i-tooltip__arrow{position:absolute;width:0;height:0;border:6px solid transparent}.i-tooltip--above .i-tooltip__arrow{bottom:-6px;left:50%;transform:translate(-50%);border-bottom:none}.i-tooltip--below .i-tooltip__arrow{top:-6px;left:50%;transform:translate(-50%);border-top:none}.i-tooltip--left .i-tooltip__arrow{right:-6px;top:50%;transform:translateY(-50%);border-right:none}.i-tooltip--right .i-tooltip__arrow{left:-6px;top:50%;transform:translateY(-50%);border-left:none}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}\n"] });
|
|
413
455
|
}
|
|
414
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
456
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
415
457
|
type: Component,
|
|
416
|
-
args: [{ selector: 'i-tooltip', standalone: true, imports: [
|
|
458
|
+
args: [{ selector: 'i-tooltip', standalone: true, imports: [], template: `
|
|
417
459
|
<div
|
|
418
460
|
class="i-tooltip"
|
|
419
461
|
[class.i-tooltip--above]="position === 'above'"
|
|
@@ -611,10 +653,10 @@ class TooltipDirective {
|
|
|
611
653
|
}
|
|
612
654
|
this.destroyTooltip();
|
|
613
655
|
}
|
|
614
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
615
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
656
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Directive });
|
|
657
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: TooltipDirective, isStandalone: true, selector: "[iTooltip]", inputs: { tooltipText: ["iTooltip", "tooltipText"], tooltipPosition: "tooltipPosition", tooltipDelay: "tooltipDelay" }, ngImport: i0 });
|
|
616
658
|
}
|
|
617
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
659
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
618
660
|
type: Directive,
|
|
619
661
|
args: [{
|
|
620
662
|
selector: '[iTooltip]',
|
|
@@ -880,13 +922,13 @@ class IInputText {
|
|
|
880
922
|
: 'Invalid value';
|
|
881
923
|
}
|
|
882
924
|
}
|
|
883
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
884
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
925
|
+
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 });
|
|
926
|
+
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 [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 </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated || (value && value.length) || false\"\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:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.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%}Ch .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}\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"] }] });
|
|
885
927
|
}
|
|
886
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
928
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IInputText, decorators: [{
|
|
887
929
|
type: Component,
|
|
888
|
-
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 [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 </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated || (value && value.length) || false\"\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:
|
|
889
|
-
}], ctorParameters: () => [{ type:
|
|
930
|
+
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 [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 </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated || (value && value.length) || false\"\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:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.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%}Ch .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}\n"] }]
|
|
931
|
+
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
890
932
|
type: Optional
|
|
891
933
|
}, {
|
|
892
934
|
type: Self
|
|
@@ -1428,18 +1470,18 @@ class ICalendar {
|
|
|
1428
1470
|
this.isOpen = false;
|
|
1429
1471
|
}
|
|
1430
1472
|
}
|
|
1431
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1432
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1473
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ICalendar, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1474
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ICalendar, isStandalone: true, selector: "i-calendar", inputs: { placeholder: "placeholder", readonlyInput: "readonlyInput", view: "view", dateFormat: "dateFormat", label: "label", disabled: "disabled", useFloatLabel: "useFloatLabel", icon: "icon" }, outputs: { onSelect: "onSelect" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
1433
1475
|
{
|
|
1434
1476
|
provide: NG_VALUE_ACCESSOR,
|
|
1435
1477
|
useExisting: forwardRef(() => ICalendar),
|
|
1436
1478
|
multi: true,
|
|
1437
1479
|
},
|
|
1438
|
-
], viewQueries: [{ propertyName: "calendarPanel", first: true, predicate: ["calendarPanel"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"i-calendar-container\" [attr.id]=\"componentId\">\n <!-- Input field using i-input-text component -->\n <div class=\"i-calendar-input-wrapper\" (click)=\"toggleCalendar()\">\n <i-input-text\n [id]=\"componentId\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"true\"\n [icon]=\"icon\"\n [useFloatLabel]=\"useFloatLabel\"\n [(ngModel)]=\"inputDisplayValue\"\n [forceFloated]=\"!!(inputDisplayValue && inputDisplayValue.length > 0)\"\n />\n </div>\n\n <!-- Calendar Panel -->\n @if (isOpen) {\n <div\n #calendarPanel\n class=\"i-calendar-panel\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- Header -->\n <div class=\"i-calendar-header\">\n <i-button\n [size]=\"'small'\"\n [severity]=\"'primary'\"\n [text]=\"true\"\n icon=\"pi pi-chevron-left\"\n (clicked)=\"navigatePrevious()\"\n aria-label=\"Previous\"\n >\n </i-button>\n\n <div class=\"i-calendar-header-title\">\n @if (currentView === 'date') {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n (clicked)=\"showMonthView()\"\n >\n {{ getHeaderTitle() }}\n </i-button>\n } @else if (currentView === 'month') {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n (clicked)=\"showYearView()\"\n >\n {{ getHeaderTitle() }}\n </i-button>\n } @else {\n <span class=\"i-calendar-title-text\">{{ getHeaderTitle() }}</span>\n }\n </div>\n\n <i-button\n [size]=\"'small'\"\n [severity]=\"'primary'\"\n [text]=\"true\"\n icon=\"pi pi-chevron-right\"\n (clicked)=\"navigateNext()\"\n aria-label=\"Next\"\n >\n </i-button>\n </div>\n\n <!-- Calendar Body -->\n <div class=\"i-calendar-body\">\n <!-- Date View -->\n @if (currentView === 'date') {\n <div class=\"i-calendar-date-view\">\n <!-- Weekday headers -->\n <div class=\"i-calendar-weekdays\">\n @for (day of weekDays; track day) {\n <div class=\"i-calendar-weekday\">{{ day }}</div>\n }\n </div>\n\n <!-- Calendar days -->\n <div class=\"i-calendar-days\">\n @for (week of calendarDays; track week) { @for (date of week; track\n date) { @if (date) {\n <i-button\n [size]=\"'small'\"\n [severity]=\"'contrast'\"\n [text]=\"true\"\n [fluid]=\"true\"\n class=\"i-calendar-selection\"\n [class.selected]=\"isSelectedDate(date)\"\n [class.today]=\"isToday(date)\"\n [disabled]=\"!isDateInCurrentMonth(date)\"\n (clicked)=\"selectDate(date)\"\n >\n {{ date.getDate() }}\n </i-button>\n } } }\n </div>\n </div>\n }\n\n <!-- Month View -->\n @if (currentView === 'month') {\n <div class=\"i-calendar-month-view\">\n @for (month of months; track month; let i = $index) {\n <i-button\n [size]=\"'small'\"\n [severity]=\"'contrast'\"\n [text]=\"true\"\n [fluid]=\"true\"\n class=\"i-calendar-selection\"\n [class.selected]=\"isSelectedMonth(i)\"\n (clicked)=\"selectMonth(i)\"\n >\n {{ monthsShort[i] }}\n </i-button>\n }\n </div>\n }\n\n <!-- Year View -->\n @if (currentView === 'year') {\n <div class=\"i-calendar-year-view\">\n @for (year of years; track year) {\n <i-button\n [size]=\"'small'\"\n [severity]=\"'contrast'\"\n [text]=\"true\"\n [fluid]=\"true\"\n class=\"i-calendar-selection\"\n [text]=\"true\"\n [class.selected]=\"isSelectedYear(year)\"\n (clicked)=\"selectYear(year)\"\n >\n {{ year }}\n </i-button>\n }\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-calendar-panel{background:var(--color-component-background);border:1px solid var(--surface-border);box-shadow:0 4px 12px #00000026}.i-calendar-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-calendar-title-text{color:var(--color-text-tertiary)}.i-calendar-selection.selected{border:1px solid var(--color-primary)}.i-calendar-selection.today{border:1px solid var(--color-text-tertiary)}.i-calendar-container{position:relative;width:100%}.i-calendar-container .i-calendar-input-wrapper{cursor:pointer}.i-calendar-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:300px;border-radius:8px;overflow:hidden;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.i-calendar-header{display:flex;align-items:center;justify-content:space-between;padding:12px;gap:8px}.i-calendar-header-title{flex:1;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em}.i-calendar-title-text{font-weight:600;font-size:1em}.i-calendar-body{padding:12px}.i-calendar-selection{border-radius:4px}.i-calendar-date-view{display:flex;flex-direction:column;gap:8px}.i-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}.i-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.i-calendar-month-view,.i-calendar-year-view{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
1480
|
+
], viewQueries: [{ propertyName: "calendarPanel", first: true, predicate: ["calendarPanel"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"i-calendar-container\" [attr.id]=\"componentId\">\n <!-- Input field using i-input-text component -->\n <div class=\"i-calendar-input-wrapper\" (click)=\"toggleCalendar()\">\n <i-input-text\n [id]=\"componentId\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"true\"\n [icon]=\"icon\"\n [useFloatLabel]=\"useFloatLabel\"\n [(ngModel)]=\"inputDisplayValue\"\n [forceFloated]=\"!!(inputDisplayValue && inputDisplayValue.length > 0)\"\n />\n </div>\n\n <!-- Calendar Panel -->\n @if (isOpen) {\n <div\n #calendarPanel\n class=\"i-calendar-panel\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- Header -->\n <div class=\"i-calendar-header\">\n <i-button\n [size]=\"'small'\"\n [severity]=\"'primary'\"\n [text]=\"true\"\n icon=\"pi pi-chevron-left\"\n (clicked)=\"navigatePrevious()\"\n aria-label=\"Previous\"\n >\n </i-button>\n\n <div class=\"i-calendar-header-title\">\n @if (currentView === 'date') {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n (clicked)=\"showMonthView()\"\n >\n {{ getHeaderTitle() }}\n </i-button>\n } @else if (currentView === 'month') {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n (clicked)=\"showYearView()\"\n >\n {{ getHeaderTitle() }}\n </i-button>\n } @else {\n <span class=\"i-calendar-title-text\">{{ getHeaderTitle() }}</span>\n }\n </div>\n\n <i-button\n [size]=\"'small'\"\n [severity]=\"'primary'\"\n [text]=\"true\"\n icon=\"pi pi-chevron-right\"\n (clicked)=\"navigateNext()\"\n aria-label=\"Next\"\n >\n </i-button>\n </div>\n\n <!-- Calendar Body -->\n <div class=\"i-calendar-body\">\n <!-- Date View -->\n @if (currentView === 'date') {\n <div class=\"i-calendar-date-view\">\n <!-- Weekday headers -->\n <div class=\"i-calendar-weekdays\">\n @for (day of weekDays; track day) {\n <div class=\"i-calendar-weekday\">{{ day }}</div>\n }\n </div>\n\n <!-- Calendar days -->\n <div class=\"i-calendar-days\">\n @for (week of calendarDays; track week) { @for (date of week; track\n date) { @if (date) {\n <i-button\n [size]=\"'small'\"\n [severity]=\"'contrast'\"\n [text]=\"true\"\n [fluid]=\"true\"\n class=\"i-calendar-selection\"\n [class.selected]=\"isSelectedDate(date)\"\n [class.today]=\"isToday(date)\"\n [disabled]=\"!isDateInCurrentMonth(date)\"\n (clicked)=\"selectDate(date)\"\n >\n {{ date.getDate() }}\n </i-button>\n } } }\n </div>\n </div>\n }\n\n <!-- Month View -->\n @if (currentView === 'month') {\n <div class=\"i-calendar-month-view\">\n @for (month of months; track month; let i = $index) {\n <i-button\n [size]=\"'small'\"\n [severity]=\"'contrast'\"\n [text]=\"true\"\n [fluid]=\"true\"\n class=\"i-calendar-selection\"\n [class.selected]=\"isSelectedMonth(i)\"\n (clicked)=\"selectMonth(i)\"\n >\n {{ monthsShort[i] }}\n </i-button>\n }\n </div>\n }\n\n <!-- Year View -->\n @if (currentView === 'year') {\n <div class=\"i-calendar-year-view\">\n @for (year of years; track year) {\n <i-button\n [size]=\"'small'\"\n [severity]=\"'contrast'\"\n [text]=\"true\"\n [fluid]=\"true\"\n class=\"i-calendar-selection\"\n [text]=\"true\"\n [class.selected]=\"isSelectedYear(year)\"\n (clicked)=\"selectYear(year)\"\n >\n {{ year }}\n </i-button>\n }\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-calendar-panel{background:var(--color-component-background);border:1px solid var(--surface-border);box-shadow:0 4px 12px #00000026}.i-calendar-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-calendar-title-text{color:var(--color-text-tertiary)}.i-calendar-selection.selected{border:1px solid var(--color-primary)}.i-calendar-selection.today{border:1px solid var(--color-text-tertiary)}.i-calendar-container{position:relative;width:100%}.i-calendar-container .i-calendar-input-wrapper{cursor:pointer}.i-calendar-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:300px;border-radius:8px;overflow:hidden;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.i-calendar-header{display:flex;align-items:center;justify-content:space-between;padding:12px;gap:8px}.i-calendar-header-title{flex:1;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em}.i-calendar-title-text{font-weight:600;font-size:1em}.i-calendar-body{padding:12px}.i-calendar-selection{border-radius:4px}.i-calendar-date-view{display:flex;flex-direction:column;gap:8px}.i-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}.i-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.i-calendar-month-view,.i-calendar-year-view{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}\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"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
1439
1481
|
}
|
|
1440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ICalendar, decorators: [{
|
|
1441
1483
|
type: Component,
|
|
1442
|
-
args: [{ selector: 'i-calendar', standalone: true, imports: [
|
|
1484
|
+
args: [{ selector: 'i-calendar', standalone: true, imports: [FormsModule, IInputText, IButton], providers: [
|
|
1443
1485
|
{
|
|
1444
1486
|
provide: NG_VALUE_ACCESSOR,
|
|
1445
1487
|
useExisting: forwardRef(() => ICalendar),
|
|
@@ -1541,10 +1583,10 @@ class ICard {
|
|
|
1541
1583
|
onCloseCard() {
|
|
1542
1584
|
this.closeCard.emit();
|
|
1543
1585
|
}
|
|
1544
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1545
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1586
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ICard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1587
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ICard, isStandalone: true, selector: "i-card", inputs: { title: "title", closable: "closable", fullHeight: "fullHeight" }, outputs: { closeCard: "closeCard" }, host: { properties: { "class.i-card--full-height": "this.isFullHeight" } }, ngImport: i0, template: "<div class=\"i-card\" [attr.id]=\"componentId\">\n <!-- Header Section -->\n <div class=\"i-card-header\">\n <ng-content select=\"[slot=header]\">\n @if (title) {\n <span class=\"i-card-title\">{{ title }}</span>\n }\n </ng-content>\n @if (closable) {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n [icon]=\"'pi pi-times'\"\n [size]=\"'small'\"\n (click)=\"onCloseCard()\"\n />\n }\n </div>\n\n <!-- Content Section -->\n <div class=\"i-card-body\">\n <ng-content></ng-content>\n </div>\n\n <!-- Footer Section -->\n <div class=\"i-card-footer\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n</div>\n", styles: [".i-card{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-card .i-card-close,.i-card .i-card-subtitle{color:var(--color-text-secondary)}:host{display:block}:host.i-card--full-height{height:100%}:host.i-card--full-height .i-card{height:100%;display:flex;flex-direction:column}:host.i-card--full-height .i-card .i-card-body{flex:1;overflow:auto}.i-card{border-radius:8px;padding:12px}.i-card .i-card-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.i-card .i-card-header .i-card-title{padding-left:12px;font-size:1.5em;font-weight:600}.i-card .i-card-body{padding:0 12px}.i-card .i-card-footer{padding:12px 0 0}.i-card .i-card-footer:empty{display:none}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
1546
1588
|
}
|
|
1547
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1589
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ICard, decorators: [{
|
|
1548
1590
|
type: Component,
|
|
1549
1591
|
args: [{ selector: 'i-card', imports: [IButton], template: "<div class=\"i-card\" [attr.id]=\"componentId\">\n <!-- Header Section -->\n <div class=\"i-card-header\">\n <ng-content select=\"[slot=header]\">\n @if (title) {\n <span class=\"i-card-title\">{{ title }}</span>\n }\n </ng-content>\n @if (closable) {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n [icon]=\"'pi pi-times'\"\n [size]=\"'small'\"\n (click)=\"onCloseCard()\"\n />\n }\n </div>\n\n <!-- Content Section -->\n <div class=\"i-card-body\">\n <ng-content></ng-content>\n </div>\n\n <!-- Footer Section -->\n <div class=\"i-card-footer\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n</div>\n", styles: [".i-card{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-card .i-card-close,.i-card .i-card-subtitle{color:var(--color-text-secondary)}:host{display:block}:host.i-card--full-height{height:100%}:host.i-card--full-height .i-card{height:100%;display:flex;flex-direction:column}:host.i-card--full-height .i-card .i-card-body{flex:1;overflow:auto}.i-card{border-radius:8px;padding:12px}.i-card .i-card-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.i-card .i-card-header .i-card-title{padding-left:12px;font-size:1.5em;font-weight:600}.i-card .i-card-body{padding:0 12px}.i-card .i-card-footer{padding:12px 0 0}.i-card .i-card-footer:empty{display:none}\n"] }]
|
|
1550
1592
|
}], propDecorators: { title: [{
|
|
@@ -1715,18 +1757,18 @@ class ICheckbox {
|
|
|
1715
1757
|
setDisabledState(isDisabled) {
|
|
1716
1758
|
this.disabled = isDisabled;
|
|
1717
1759
|
}
|
|
1718
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1719
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1760
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ICheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1761
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ICheckbox, isStandalone: true, selector: "i-checkbox", inputs: { label: "label", id: "id", disabled: "disabled", readonly: "readonly", size: "size", indeterminate: "indeterminate", checked: "checked" }, outputs: { onChange: "onChange" }, providers: [
|
|
1720
1762
|
{
|
|
1721
1763
|
provide: NG_VALUE_ACCESSOR,
|
|
1722
1764
|
useExisting: forwardRef(() => ICheckbox),
|
|
1723
1765
|
multi: true,
|
|
1724
1766
|
},
|
|
1725
|
-
], 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:#e0e0e0;background-color:#f5f5f5}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:#9e9e9e}.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"]
|
|
1767
|
+
], 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:#e0e0e0;background-color:#f5f5f5}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:#9e9e9e}.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"] });
|
|
1726
1768
|
}
|
|
1727
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1769
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ICheckbox, decorators: [{
|
|
1728
1770
|
type: Component,
|
|
1729
|
-
args: [{ selector: 'i-checkbox', standalone: true, imports: [
|
|
1771
|
+
args: [{ selector: 'i-checkbox', standalone: true, imports: [], providers: [
|
|
1730
1772
|
{
|
|
1731
1773
|
provide: NG_VALUE_ACCESSOR,
|
|
1732
1774
|
useExisting: forwardRef(() => ICheckbox),
|
|
@@ -1835,10 +1877,10 @@ class IChip {
|
|
|
1835
1877
|
this.onRemove.emit(event);
|
|
1836
1878
|
}
|
|
1837
1879
|
}
|
|
1838
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1839
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1880
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1881
|
+
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:#f5f5f5;color:#9e9e9e;border-color:#e0e0e0}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:#9e9e9e}.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 });
|
|
1840
1882
|
}
|
|
1841
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1883
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IChip, decorators: [{
|
|
1842
1884
|
type: Component,
|
|
1843
1885
|
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:#f5f5f5;color:#9e9e9e;border-color:#e0e0e0}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:#9e9e9e}.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"] }]
|
|
1844
1886
|
}], propDecorators: { label: [{
|
|
@@ -1991,12 +2033,12 @@ class IChipsComponent {
|
|
|
1991
2033
|
// Emit a single event for parents to clear their data source
|
|
1992
2034
|
this.closedAll.emit();
|
|
1993
2035
|
}
|
|
1994
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1995
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2036
|
+
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 });
|
|
2037
|
+
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:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.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 });
|
|
1996
2038
|
}
|
|
1997
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2039
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IChipsComponent, decorators: [{
|
|
1998
2040
|
type: Component,
|
|
1999
|
-
args: [{ selector: 'i-chips', standalone: true, imports: [
|
|
2041
|
+
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:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.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"] }]
|
|
2000
2042
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { chips: [{
|
|
2001
2043
|
type: Input
|
|
2002
2044
|
}], removable: [{
|
|
@@ -2041,10 +2083,10 @@ class IDialogActions {
|
|
|
2041
2083
|
onSubmit() {
|
|
2042
2084
|
this.submitEvent.emit();
|
|
2043
2085
|
}
|
|
2044
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2045
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2086
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2087
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: IDialogActions, isStandalone: true, selector: "i-dialog-actions", inputs: { submitLabel: "submitLabel", cancelLabel: "cancelLabel", severity: "severity" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"dialog-actions\">\n <i-button [text]=\"true\" severity=\"secondary\" (click)=\"onCancel()\">{{\n cancelLabel\n }}</i-button>\n <i-button [outlined]=\"true\" [severity]=\"severity\" (click)=\"onSubmit()\">{{\n submitLabel\n }}</i-button>\n</div>\n", styles: [".dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
2046
2088
|
}
|
|
2047
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2089
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialogActions, decorators: [{
|
|
2048
2090
|
type: Component,
|
|
2049
2091
|
args: [{ selector: 'i-dialog-actions', imports: [IButton], template: "<div class=\"dialog-actions\">\n <i-button [text]=\"true\" severity=\"secondary\" (click)=\"onCancel()\">{{\n cancelLabel\n }}</i-button>\n <i-button [outlined]=\"true\" [severity]=\"severity\" (click)=\"onSubmit()\">{{\n submitLabel\n }}</i-button>\n</div>\n", styles: [".dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}\n"] }]
|
|
2050
2092
|
}], propDecorators: { submitLabel: [{
|
|
@@ -2156,10 +2198,10 @@ class ConfirmationDialogComponent {
|
|
|
2156
2198
|
onCancel() {
|
|
2157
2199
|
this.dialogRef?.close(false);
|
|
2158
2200
|
}
|
|
2159
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2160
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2201
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: ConfirmationDialogComponent, isStandalone: true, selector: "i-confirmation-dialog", ngImport: i0, template: "<div class=\"confirmation-dialog\" [attr.id]=\"componentId\">\n <div class=\"confirmation-content\">\n <p class=\"confirmation-message\">{{ message() }}</p>\n </div>\n <i-dialog-actions\n [title]=\"header()\"\n [submitLabel]=\"acceptLabel\"\n [cancelLabel]=\"rejectLabel\"\n [severity]=\"severity()\"\n (cancelEvent)=\"onCancel()\"\n (submitEvent)=\"onConfirm()\"\n ></i-dialog-actions>\n</div>\n", styles: [".confirmation-dialog .confirmation-content{color:var(--color-text-primary)}.confirmation-dialog{min-width:300px}.confirmation-dialog .confirmation-content{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 8px}.confirmation-dialog .confirmation-content .confirmation-message{margin:0;font-size:1.1em;line-height:1.4}\n"], dependencies: [{ kind: "component", type: IDialogActions, selector: "i-dialog-actions", inputs: ["submitLabel", "cancelLabel", "severity"], outputs: ["cancelEvent", "submitEvent"] }] });
|
|
2161
2203
|
}
|
|
2162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
2163
2205
|
type: Component,
|
|
2164
2206
|
args: [{ selector: 'i-confirmation-dialog', standalone: true, imports: [IDialogActions], template: "<div class=\"confirmation-dialog\" [attr.id]=\"componentId\">\n <div class=\"confirmation-content\">\n <p class=\"confirmation-message\">{{ message() }}</p>\n </div>\n <i-dialog-actions\n [title]=\"header()\"\n [submitLabel]=\"acceptLabel\"\n [cancelLabel]=\"rejectLabel\"\n [severity]=\"severity()\"\n (cancelEvent)=\"onCancel()\"\n (submitEvent)=\"onConfirm()\"\n ></i-dialog-actions>\n</div>\n", styles: [".confirmation-dialog .confirmation-content{color:var(--color-text-primary)}.confirmation-dialog{min-width:300px}.confirmation-dialog .confirmation-content{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 8px}.confirmation-dialog .confirmation-content .confirmation-message{margin:0;font-size:1.1em;line-height:1.4}\n"] }]
|
|
2165
2207
|
}] });
|
|
@@ -2179,10 +2221,10 @@ class AbstractDialog {
|
|
|
2179
2221
|
breakpoints;
|
|
2180
2222
|
visible = false;
|
|
2181
2223
|
visibleChange = new EventEmitter();
|
|
2182
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2183
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2224
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AbstractDialog, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2225
|
+
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 });
|
|
2184
2226
|
}
|
|
2185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AbstractDialog, decorators: [{
|
|
2186
2228
|
type: Directive
|
|
2187
2229
|
}], propDecorators: { header: [{
|
|
2188
2230
|
type: Input
|
|
@@ -2318,12 +2360,12 @@ class IDialog extends AbstractDialog {
|
|
|
2318
2360
|
this.hide();
|
|
2319
2361
|
}
|
|
2320
2362
|
}
|
|
2321
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2322
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2363
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialog, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2364
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IDialog, isStandalone: true, selector: "i-dialog", host: { listeners: { "document:keydown.escape": "onEscapeKey()" } }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (visible) {\n<div\n class=\"i-dialog-overlay\"\n (click)=\"onOverlayClick($event)\"\n [attr.id]=\"componentId\"\n>\n <div\n #dialogElement\n class=\"i-dialog-container\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n (click)=\"$event.stopPropagation()\"\n >\n <i-card [title]=\"header\" [closable]=\"closable\" (closeCard)=\"onCloseClick()\">\n <!-- Main content -->\n <div class=\"i-dialog-content\" [ngStyle]=\"contentStyle\">\n <ng-content></ng-content>\n </div>\n </i-card>\n </div>\n</div>\n}\n", styles: [".i-dialog-overlay{background:#0006}.i-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s cubic-bezier(.4,0,.2,1);will-change:opacity;transform:translateZ(0)}.i-dialog-overlay .i-dialog-container{display:flex;flex-direction:column;max-width:90vw;max-height:80vh;animation:slideInDown .2s cubic-bezier(.4,0,.2,1);will-change:transform,opacity;transform:translateZ(0)}@media(max-width:960px){.i-dialog-overlay .i-dialog-container{max-width:75vw}}@media(max-width:640px){.i-dialog-overlay .i-dialog-container{max-width:90vw;max-height:80vh}}.i-dialog-overlay .i-dialog-container .i-card{display:flex;flex-direction:column;max-height:80vh;overflow:hidden}.i-dialog-overlay .i-dialog-container .i-card .i-card-body{flex:1;overflow-y:auto;min-height:0}.i-dialog-overlay .i-dialog-container .i-dialog-content{overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInDown{0%{opacity:0;transform:translate3d(0,-30px,0) scale3d(.95,.95,1)}to{opacity:1;transform:translateZ(0) scaleZ(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ICard, selector: "i-card", inputs: ["title", "closable", "fullHeight"], outputs: ["closeCard"] }] });
|
|
2323
2365
|
}
|
|
2324
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialog, decorators: [{
|
|
2325
2367
|
type: Component,
|
|
2326
|
-
args: [{ selector: 'i-dialog', imports: [CommonModule, ICard], template: "@if (visible) {\n<div\n class=\"i-dialog-overlay\"\n (click)=\"onOverlayClick($event)\"\n [attr.id]=\"componentId\"\n>\n <div\n #dialogElement\n class=\"i-dialog-container\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n (click)=\"$event.stopPropagation()\"\n >\n <i-card [title]=\"header\" [closable]=\"closable\" (closeCard)=\"onCloseClick()\">\n <!-- Main content -->\n <div class=\"i-dialog-content\" [ngStyle]=\"contentStyle\">\n <ng-content></ng-content>\n </div>\n </i-card>\n </div>\n</div>\n}\n", styles: [".i-dialog-overlay{background:#0006}.i-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s cubic-bezier(.4,0,.2,1);will-change:opacity;transform:translateZ(0)}.i-dialog-overlay .i-dialog-container{display:flex;flex-direction:column;max-width:90vw;max-height:80vh;animation:slideInDown .2s cubic-bezier(.4,0,.2,1);will-change:transform,opacity;transform:translateZ(0)}@media
|
|
2368
|
+
args: [{ selector: 'i-dialog', imports: [CommonModule, ICard], template: "@if (visible) {\n<div\n class=\"i-dialog-overlay\"\n (click)=\"onOverlayClick($event)\"\n [attr.id]=\"componentId\"\n>\n <div\n #dialogElement\n class=\"i-dialog-container\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n (click)=\"$event.stopPropagation()\"\n >\n <i-card [title]=\"header\" [closable]=\"closable\" (closeCard)=\"onCloseClick()\">\n <!-- Main content -->\n <div class=\"i-dialog-content\" [ngStyle]=\"contentStyle\">\n <ng-content></ng-content>\n </div>\n </i-card>\n </div>\n</div>\n}\n", styles: [".i-dialog-overlay{background:#0006}.i-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s cubic-bezier(.4,0,.2,1);will-change:opacity;transform:translateZ(0)}.i-dialog-overlay .i-dialog-container{display:flex;flex-direction:column;max-width:90vw;max-height:80vh;animation:slideInDown .2s cubic-bezier(.4,0,.2,1);will-change:transform,opacity;transform:translateZ(0)}@media(max-width:960px){.i-dialog-overlay .i-dialog-container{max-width:75vw}}@media(max-width:640px){.i-dialog-overlay .i-dialog-container{max-width:90vw;max-height:80vh}}.i-dialog-overlay .i-dialog-container .i-card{display:flex;flex-direction:column;max-height:80vh;overflow:hidden}.i-dialog-overlay .i-dialog-container .i-card .i-card-body{flex:1;overflow-y:auto;min-height:0}.i-dialog-overlay .i-dialog-container .i-dialog-content{overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInDown{0%{opacity:0;transform:translate3d(0,-30px,0) scale3d(.95,.95,1)}to{opacity:1;transform:translateZ(0) scaleZ(1)}}\n"] }]
|
|
2327
2369
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { dialogElement: [{
|
|
2328
2370
|
type: ViewChild,
|
|
2329
2371
|
args: ['dialogElement', { static: false }]
|
|
@@ -2506,10 +2548,10 @@ class DialogService {
|
|
|
2506
2548
|
}
|
|
2507
2549
|
return ref;
|
|
2508
2550
|
}
|
|
2509
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2510
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2551
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2552
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DialogService, providedIn: 'root' });
|
|
2511
2553
|
}
|
|
2512
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2554
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DialogService, decorators: [{
|
|
2513
2555
|
type: Injectable,
|
|
2514
2556
|
args: [{
|
|
2515
2557
|
providedIn: 'root',
|
|
@@ -2639,10 +2681,10 @@ class ConfirmationDialogService {
|
|
|
2639
2681
|
});
|
|
2640
2682
|
return ref;
|
|
2641
2683
|
}
|
|
2642
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2643
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2684
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ConfirmationDialogService, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2685
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ConfirmationDialogService, providedIn: 'root' });
|
|
2644
2686
|
}
|
|
2645
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2687
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ConfirmationDialogService, decorators: [{
|
|
2646
2688
|
type: Injectable,
|
|
2647
2689
|
args: [{
|
|
2648
2690
|
providedIn: 'root',
|
|
@@ -2694,10 +2736,10 @@ class IDialogBase {
|
|
|
2694
2736
|
}
|
|
2695
2737
|
return true;
|
|
2696
2738
|
}
|
|
2697
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2698
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2739
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialogBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2740
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: IDialogBase, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
|
|
2699
2741
|
}
|
|
2700
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2742
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialogBase, decorators: [{
|
|
2701
2743
|
type: Component,
|
|
2702
2744
|
args: [{
|
|
2703
2745
|
template: '',
|
|
@@ -2751,10 +2793,10 @@ class EmptyStateComponent {
|
|
|
2751
2793
|
this.imageLoaded = true;
|
|
2752
2794
|
}, 200);
|
|
2753
2795
|
}
|
|
2754
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2755
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2796
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2797
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: EmptyStateComponent, isStandalone: true, selector: "i-empty-state", inputs: { fixed: "fixed", colorScheme: "colorScheme" }, ngImport: i0, template: "<div class=\"flex justify-contents no-results-container\">\n <img\n [src]=\"\n 'assets/images/' +\n (colorScheme() === 'light' ? 'no-results-light' : 'no-results-dark') +\n '.png'\n \"\n alt=\"No Results\"\n class=\"no-results-image\"\n [class.loaded]=\"imageLoaded\"\n [class.fixed]=\"fixed\"\n [class.dynamic]=\"!fixed\"\n (load)=\"onImageLoad()\"\n />\n</div>\n", styles: [".i-empty-state__container{display:flex;align-items:center;justify-content:center;width:100%;height:80vh}.i-empty-state__image{height:auto;opacity:0;transition:opacity .8s ease-in-out}.i-empty-state__image--dynamic{max-width:40%}.i-empty-state__image--fixed{width:480px}.i-empty-state__image--loaded{opacity:.5}.no-results-container{display:flex;align-items:center;justify-content:center;width:100%;height:80vh}.no-results-image{height:auto;opacity:0;transition:opacity .8s ease-in-out}.no-results-image.dynamic{max-width:40%}.no-results-image.fixed{width:480px}.no-results-image.loaded{opacity:.5}\n"] });
|
|
2756
2798
|
}
|
|
2757
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2799
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
2758
2800
|
type: Component,
|
|
2759
2801
|
args: [{ selector: 'i-empty-state', standalone: true, template: "<div class=\"flex justify-contents no-results-container\">\n <img\n [src]=\"\n 'assets/images/' +\n (colorScheme() === 'light' ? 'no-results-light' : 'no-results-dark') +\n '.png'\n \"\n alt=\"No Results\"\n class=\"no-results-image\"\n [class.loaded]=\"imageLoaded\"\n [class.fixed]=\"fixed\"\n [class.dynamic]=\"!fixed\"\n (load)=\"onImageLoad()\"\n />\n</div>\n", styles: [".i-empty-state__container{display:flex;align-items:center;justify-content:center;width:100%;height:80vh}.i-empty-state__image{height:auto;opacity:0;transition:opacity .8s ease-in-out}.i-empty-state__image--dynamic{max-width:40%}.i-empty-state__image--fixed{width:480px}.i-empty-state__image--loaded{opacity:.5}.no-results-container{display:flex;align-items:center;justify-content:center;width:100%;height:80vh}.no-results-image{height:auto;opacity:0;transition:opacity .8s ease-in-out}.no-results-image.dynamic{max-width:40%}.no-results-image.fixed{width:480px}.no-results-image.loaded{opacity:.5}\n"] }]
|
|
2760
2802
|
}], propDecorators: { fixed: [{
|
|
@@ -2764,61 +2806,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
2764
2806
|
}] } });
|
|
2765
2807
|
|
|
2766
2808
|
/**
|
|
2767
|
-
*
|
|
2809
|
+
* Placeholder Component
|
|
2768
2810
|
*
|
|
2769
|
-
*
|
|
2770
|
-
*
|
|
2811
|
+
* Displays a centered placeholder area with an optional arrow icon and custom content.
|
|
2812
|
+
* Useful for empty selection states, drop zones, or instructional placeholders.
|
|
2771
2813
|
*
|
|
2772
2814
|
* @example
|
|
2773
2815
|
* ```html
|
|
2816
|
+
* <!-- Basic placeholder with left arrow -->
|
|
2817
|
+
* <i-placeholder arrowDirection="left">
|
|
2818
|
+
* Select an item from the list
|
|
2819
|
+
* </i-placeholder>
|
|
2820
|
+
*
|
|
2821
|
+
* <!-- Placeholder with no icon -->
|
|
2822
|
+
* <i-placeholder arrowDirection="none">
|
|
2823
|
+
* <h3>No items found</h3>
|
|
2824
|
+
* <p>Try adjusting your search criteria</p>
|
|
2825
|
+
* </i-placeholder>
|
|
2826
|
+
*
|
|
2827
|
+
* <!-- Placeholder with custom icon -->
|
|
2828
|
+
* <i-placeholder [customIcon]="'pi pi-inbox'">
|
|
2829
|
+
* Your inbox is empty
|
|
2830
|
+
* </i-placeholder>
|
|
2831
|
+
* ```
|
|
2832
|
+
*/
|
|
2833
|
+
class IPlaceholder {
|
|
2834
|
+
/**
|
|
2835
|
+
* Direction of the arrow icon.
|
|
2836
|
+
* Use 'none' to hide the icon completely.
|
|
2837
|
+
* @default 'left'
|
|
2838
|
+
*/
|
|
2839
|
+
arrowDirection = 'left';
|
|
2840
|
+
/**
|
|
2841
|
+
* Custom icon class to use instead of an arrow.
|
|
2842
|
+
* When set, this overrides arrowDirection.
|
|
2843
|
+
* @example 'pi pi-inbox', 'pi pi-search'
|
|
2844
|
+
*/
|
|
2845
|
+
customIcon = null;
|
|
2846
|
+
/**
|
|
2847
|
+
* Whether to show a subtle background pattern
|
|
2848
|
+
* @default false
|
|
2849
|
+
*/
|
|
2850
|
+
showPattern = false;
|
|
2851
|
+
/**
|
|
2852
|
+
* Gets the icon class based on configuration
|
|
2853
|
+
*/
|
|
2854
|
+
get iconClass() {
|
|
2855
|
+
if (this.customIcon) {
|
|
2856
|
+
return this.customIcon;
|
|
2857
|
+
}
|
|
2858
|
+
if (this.arrowDirection === 'none') {
|
|
2859
|
+
return null;
|
|
2860
|
+
}
|
|
2861
|
+
const arrowMap = {
|
|
2862
|
+
left: 'pi pi-arrow-left',
|
|
2863
|
+
right: 'pi pi-arrow-right',
|
|
2864
|
+
up: 'pi pi-arrow-up',
|
|
2865
|
+
down: 'pi pi-arrow-down',
|
|
2866
|
+
none: '',
|
|
2867
|
+
};
|
|
2868
|
+
return arrowMap[this.arrowDirection];
|
|
2869
|
+
}
|
|
2870
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2871
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IPlaceholder, isStandalone: true, selector: "i-placeholder", inputs: { arrowDirection: "arrowDirection", customIcon: "customIcon", showPattern: "showPattern" }, ngImport: i0, template: "<div class=\"i-placeholder\" [class.has-pattern]=\"showPattern\">\n <div class=\"i-placeholder-content\">\n @if (iconClass) {\n <i [class]=\"iconClass\"></i>\n }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".i-placeholder{background:var(--surface-card);border-radius:8px;border:2px dashed var(--surface-border);animation:placeholderFadeIn .3s ease;min-height:200px}.i-placeholder.has-pattern{background-image:radial-gradient(circle,var(--surface-border) 1px,transparent 1px);background-size:20px 20px}.i-placeholder-content{color:var(--color-text-secondary)}.i-placeholder-content i{color:var(--color-primary);opacity:.3}.i-placeholder{height:100%;display:flex;align-items:center;justify-content:center;max-width:100%;transition:none;animation:none}.i-placeholder .i-placeholder-content{text-align:center;max-width:400px;padding:2rem;transition:none;animation:none}.i-placeholder .i-placeholder-content i{font-size:4rem;margin-bottom:1.5rem;display:block}\n"] });
|
|
2872
|
+
}
|
|
2873
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IPlaceholder, decorators: [{
|
|
2874
|
+
type: Component,
|
|
2875
|
+
args: [{ selector: 'i-placeholder', standalone: true, imports: [], template: "<div class=\"i-placeholder\" [class.has-pattern]=\"showPattern\">\n <div class=\"i-placeholder-content\">\n @if (iconClass) {\n <i [class]=\"iconClass\"></i>\n }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".i-placeholder{background:var(--surface-card);border-radius:8px;border:2px dashed var(--surface-border);animation:placeholderFadeIn .3s ease;min-height:200px}.i-placeholder.has-pattern{background-image:radial-gradient(circle,var(--surface-border) 1px,transparent 1px);background-size:20px 20px}.i-placeholder-content{color:var(--color-text-secondary)}.i-placeholder-content i{color:var(--color-primary);opacity:.3}.i-placeholder{height:100%;display:flex;align-items:center;justify-content:center;max-width:100%;transition:none;animation:none}.i-placeholder .i-placeholder-content{text-align:center;max-width:400px;padding:2rem;transition:none;animation:none}.i-placeholder .i-placeholder-content i{font-size:4rem;margin-bottom:1.5rem;display:block}\n"] }]
|
|
2876
|
+
}], propDecorators: { arrowDirection: [{
|
|
2877
|
+
type: Input
|
|
2878
|
+
}], customIcon: [{
|
|
2879
|
+
type: Input
|
|
2880
|
+
}], showPattern: [{
|
|
2881
|
+
type: Input
|
|
2882
|
+
}] } });
|
|
2883
|
+
|
|
2884
|
+
/**
|
|
2885
|
+
* No Content Component
|
|
2886
|
+
*
|
|
2887
|
+
* A versatile empty state component that can be used anywhere in the application
|
|
2888
|
+
* when there is no data to display. Perfect for tables, lists, search results, etc.
|
|
2889
|
+
*
|
|
2890
|
+
* @example
|
|
2891
|
+
* ```html
|
|
2892
|
+
* <!-- Basic usage -->
|
|
2893
|
+
* <i-no-content></i-no-content>
|
|
2894
|
+
*
|
|
2895
|
+
* <!-- With custom message -->
|
|
2896
|
+
* <i-no-content [message]="'No products found'"></i-no-content>
|
|
2897
|
+
*
|
|
2898
|
+
* <!-- With custom icon -->
|
|
2899
|
+
* <i-no-content
|
|
2900
|
+
* [icon]="'pi pi-search'"
|
|
2901
|
+
* [message]="'No search results'">
|
|
2902
|
+
* </i-no-content>
|
|
2903
|
+
*
|
|
2774
2904
|
* <!-- In a table when no data -->
|
|
2775
2905
|
* <table>
|
|
2776
2906
|
* <tbody>
|
|
2777
2907
|
* @if (data.length === 0) {
|
|
2778
2908
|
* <tr>
|
|
2779
2909
|
* <td colspan="100%">
|
|
2780
|
-
* <i-
|
|
2910
|
+
* <i-no-content></i-no-content>
|
|
2781
2911
|
* </td>
|
|
2782
2912
|
* </tr>
|
|
2783
2913
|
* }
|
|
2784
2914
|
* </tbody>
|
|
2785
2915
|
* </table>
|
|
2786
|
-
*
|
|
2787
|
-
* <!-- With dark theme -->
|
|
2788
|
-
* <i-empty-state-table [colorScheme]="darkModeSignal"></i-empty-state-table>
|
|
2789
2916
|
* ```
|
|
2790
2917
|
*
|
|
2791
2918
|
* @remarks
|
|
2792
|
-
* This component
|
|
2793
|
-
* appropriate messaging and styling for empty table states.
|
|
2919
|
+
* This component provides a consistent empty state experience across the application.
|
|
2794
2920
|
*/
|
|
2795
|
-
class
|
|
2921
|
+
class NoContentComponent {
|
|
2796
2922
|
/**
|
|
2797
|
-
*
|
|
2798
|
-
* @default
|
|
2923
|
+
* Icon class to display (PrimeIcons format)
|
|
2924
|
+
* @default 'pi pi-inbox'
|
|
2799
2925
|
*/
|
|
2800
|
-
|
|
2926
|
+
icon = 'pi pi-inbox';
|
|
2801
2927
|
/**
|
|
2802
|
-
*
|
|
2803
|
-
* @
|
|
2928
|
+
* Message to display below the icon
|
|
2929
|
+
* @default 'No content available'
|
|
2804
2930
|
*/
|
|
2805
|
-
|
|
2806
|
-
|
|
2807
|
-
|
|
2808
|
-
* @internal
|
|
2809
|
-
*/
|
|
2810
|
-
onImageLoad() {
|
|
2811
|
-
setTimeout(() => {
|
|
2812
|
-
this.imageLoaded = true;
|
|
2813
|
-
}, 200);
|
|
2814
|
-
}
|
|
2815
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: EmptyStateTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2816
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: EmptyStateTableComponent, isStandalone: true, selector: "i-empty-state-table", inputs: { colorScheme: "colorScheme" }, ngImport: i0, template: "<div class=\"no-results-table-container\">\n <img\n [src]=\"\n 'assets/images/' +\n (colorScheme() === 'light' ? 'no-results-light' : 'no-results-dark') +\n '.png'\n \"\n alt=\"No Results\"\n class=\"no-results-image-fixed\"\n [class.loaded]=\"imageLoaded\"\n (load)=\"onImageLoad()\"\n />\n</div>\n", styles: [".i-empty-state-table__container{width:208px;height:208px}.i-empty-state-table__image{width:208px;height:auto;opacity:0;transition:opacity .8s ease-in-out}.i-empty-state-table__image--loaded{opacity:.5}.no-results-table-container{width:208px;height:208px}.no-results-image-fixed{width:208px;height:auto;opacity:0;transition:opacity .8s ease-in-out}.no-results-image-fixed.loaded{opacity:.5}\n"] });
|
|
2931
|
+
message = 'No content available';
|
|
2932
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NoContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2933
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: NoContentComponent, isStandalone: true, selector: "i-no-content", inputs: { icon: "icon", message: "message" }, ngImport: i0, template: "<i-placeholder [customIcon]=\"icon\" arrowDirection=\"none\">\n <p class=\"no-content-message\">{{ message }}</p>\n</i-placeholder>\n", styles: [".no-content-message{font-size:1rem;margin:.5rem 0 0;font-weight:500;color:var(--color-text-secondary)}\n"], dependencies: [{ kind: "component", type: IPlaceholder, selector: "i-placeholder", inputs: ["arrowDirection", "customIcon", "showPattern"] }] });
|
|
2817
2934
|
}
|
|
2818
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2935
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NoContentComponent, decorators: [{
|
|
2819
2936
|
type: Component,
|
|
2820
|
-
args: [{ selector: 'i-
|
|
2821
|
-
}], propDecorators: {
|
|
2937
|
+
args: [{ selector: 'i-no-content', standalone: true, imports: [IPlaceholder], template: "<i-placeholder [customIcon]=\"icon\" arrowDirection=\"none\">\n <p class=\"no-content-message\">{{ message }}</p>\n</i-placeholder>\n", styles: [".no-content-message{font-size:1rem;margin:.5rem 0 0;font-weight:500;color:var(--color-text-secondary)}\n"] }]
|
|
2938
|
+
}], propDecorators: { icon: [{
|
|
2939
|
+
type: Input
|
|
2940
|
+
}], message: [{
|
|
2822
2941
|
type: Input
|
|
2823
2942
|
}] } });
|
|
2824
2943
|
|
|
@@ -2933,10 +3052,10 @@ class LayoutService {
|
|
|
2933
3052
|
changeScale(value) {
|
|
2934
3053
|
document.documentElement.style.fontSize = `${value}px`;
|
|
2935
3054
|
}
|
|
2936
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2937
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3055
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3056
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LayoutService, providedIn: 'root' });
|
|
2938
3057
|
}
|
|
2939
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LayoutService, decorators: [{
|
|
2940
3059
|
type: Injectable,
|
|
2941
3060
|
args: [{
|
|
2942
3061
|
providedIn: 'root',
|
|
@@ -2997,22 +3116,22 @@ class TopbarComponent {
|
|
|
2997
3116
|
}
|
|
2998
3117
|
return this.config.logoLight || this.config.logoDark || '';
|
|
2999
3118
|
}
|
|
3000
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3001
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3119
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TopbarComponent, deps: [{ token: LayoutService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3120
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TopbarComponent, isStandalone: true, selector: "i-topbar", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"layout-topbar\">\n <a class=\"layout-topbar-logo\" routerLink=\"\">\n @if (logo) {\n <img [src]=\"logo\" [alt]=\"config.websiteName + ' logo'\" />\n }\n <span>{{ config.websiteName }}</span>\n </a>\n <i-button\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"'pi pi-bars'\"\n (clicked)=\"layoutService.toggleSidebar()\"\n ></i-button>\n <i-button\n class=\"layout-topbar-menu-button\"\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (clicked)=\"layoutService.showProfileSidebar()\"\n ></i-button>\n\n <div\n class=\"layout-topbar-menu\"\n [ngClass]=\"{\n 'layout-topbar-menu-mobile-active':\n layoutService.state().profileSidebarVisible\n }\"\n >\n <ng-content />\n @if (config.showThemeToggle !== false) {\n <i-button\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"isDark ? 'pi pi-moon' : 'pi pi-sun'\"\n (clicked)=\"changeTheme()\"\n />\n }\n </div>\n</div>\n", styles: [".layout-topbar{position:relative;height:5rem;z-index:997;width:100%;padding:0 2rem;background-color:var(--surface-card);transition:left .2s;display:flex;align-items:center;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.layout-topbar .layout-topbar-logo{display:flex;align-items:center;color:var(--surface-900);font-size:18px;font-weight:500;margin-right:50px;border-radius:12px;text-decoration:none;font-family:Montserrat,sans-serif}.layout-topbar .layout-topbar-logo img{height:2.5rem;margin-right:.5rem}.layout-topbar .layout-topbar-logo:focus{outline:0 none;outline-offset:0;transition:box-shadow .2s;box-shadow:inset var(--focus-ring)}.layout-topbar .layout-menu-button{margin-left:2rem}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-button i{font-size:1.25rem}.layout-topbar .layout-topbar-menu{gap:.5rem;margin:0 0 0 auto;padding:0;list-style:none;display:flex}@media(max-width:991px){.layout-topbar{justify-content:space-between}.layout-topbar .layout-topbar-logo{width:auto;order:2}.layout-topbar .layout-menu-button{margin-left:0;order:1}.layout-topbar .layout-topbar-menu-button{display:inline-flex;margin-left:0;order:3}.layout-topbar .layout-topbar-menu{margin-left:0;position:absolute;flex-direction:column;background-color:var(--surface-overlay);box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014;border-radius:12px;padding:1rem;right:2rem;top:5rem;display:none;-webkit-animation:scalein .15s linear;animation:scalein .15s linear;z-index:1000}.layout-topbar .layout-topbar-menu.layout-topbar-menu-mobile-active{display:block}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
3002
3121
|
}
|
|
3003
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3122
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
3004
3123
|
type: Component,
|
|
3005
|
-
args: [{ selector: 'i-topbar', imports: [RouterLink, NgClass, IButton], template: "<div class=\"layout-topbar\">\n <a class=\"layout-topbar-logo\" routerLink=\"\">\n @if (logo) {\n <img [src]=\"logo\" [alt]=\"config.websiteName + ' logo'\" />\n }\n <span>{{ config.websiteName }}</span>\n </a>\n <i-button\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"'pi pi-bars'\"\n (clicked)=\"layoutService.toggleSidebar()\"\n ></i-button>\n <i-button\n class=\"layout-topbar-menu-button\"\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (clicked)=\"layoutService.showProfileSidebar()\"\n ></i-button>\n\n <div\n class=\"layout-topbar-menu\"\n [ngClass]=\"{\n 'layout-topbar-menu-mobile-active':\n layoutService.state().profileSidebarVisible\n }\"\n >\n <ng-content />\n @if (config.showThemeToggle !== false) {\n <i-button\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"isDark ? 'pi pi-moon' : 'pi pi-sun'\"\n (clicked)=\"changeTheme()\"\n />\n }\n </div>\n</div>\n", styles: [".layout-topbar{position:relative;height:5rem;z-index:997;width:100%;padding:0 2rem;background-color:var(--surface-card);transition:left .2s;display:flex;align-items:center;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.layout-topbar .layout-topbar-logo{display:flex;align-items:center;color:var(--surface-900);font-size:18px;font-weight:500;margin-right:50px;border-radius:12px;text-decoration:none;font-family:Montserrat,sans-serif}.layout-topbar .layout-topbar-logo img{height:2.5rem;margin-right:.5rem}.layout-topbar .layout-topbar-logo:focus{outline:0 none;outline-offset:0;transition:box-shadow .2s;box-shadow:inset var(--focus-ring)}.layout-topbar .layout-menu-button{margin-left:2rem}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-button i{font-size:1.25rem}.layout-topbar .layout-topbar-menu{gap:.5rem;margin:0 0 0 auto;padding:0;list-style:none;display:flex}@media
|
|
3124
|
+
args: [{ selector: 'i-topbar', imports: [RouterLink, NgClass, IButton], template: "<div class=\"layout-topbar\">\n <a class=\"layout-topbar-logo\" routerLink=\"\">\n @if (logo) {\n <img [src]=\"logo\" [alt]=\"config.websiteName + ' logo'\" />\n }\n <span>{{ config.websiteName }}</span>\n </a>\n <i-button\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"'pi pi-bars'\"\n (clicked)=\"layoutService.toggleSidebar()\"\n ></i-button>\n <i-button\n class=\"layout-topbar-menu-button\"\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (clicked)=\"layoutService.showProfileSidebar()\"\n ></i-button>\n\n <div\n class=\"layout-topbar-menu\"\n [ngClass]=\"{\n 'layout-topbar-menu-mobile-active':\n layoutService.state().profileSidebarVisible\n }\"\n >\n <ng-content />\n @if (config.showThemeToggle !== false) {\n <i-button\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"isDark ? 'pi pi-moon' : 'pi pi-sun'\"\n (clicked)=\"changeTheme()\"\n />\n }\n </div>\n</div>\n", styles: [".layout-topbar{position:relative;height:5rem;z-index:997;width:100%;padding:0 2rem;background-color:var(--surface-card);transition:left .2s;display:flex;align-items:center;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.layout-topbar .layout-topbar-logo{display:flex;align-items:center;color:var(--surface-900);font-size:18px;font-weight:500;margin-right:50px;border-radius:12px;text-decoration:none;font-family:Montserrat,sans-serif}.layout-topbar .layout-topbar-logo img{height:2.5rem;margin-right:.5rem}.layout-topbar .layout-topbar-logo:focus{outline:0 none;outline-offset:0;transition:box-shadow .2s;box-shadow:inset var(--focus-ring)}.layout-topbar .layout-menu-button{margin-left:2rem}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-button i{font-size:1.25rem}.layout-topbar .layout-topbar-menu{gap:.5rem;margin:0 0 0 auto;padding:0;list-style:none;display:flex}@media(max-width:991px){.layout-topbar{justify-content:space-between}.layout-topbar .layout-topbar-logo{width:auto;order:2}.layout-topbar .layout-menu-button{margin-left:0;order:1}.layout-topbar .layout-topbar-menu-button{display:inline-flex;margin-left:0;order:3}.layout-topbar .layout-topbar-menu{margin-left:0;position:absolute;flex-direction:column;background-color:var(--surface-overlay);box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014;border-radius:12px;padding:1rem;right:2rem;top:5rem;display:none;-webkit-animation:scalein .15s linear;animation:scalein .15s linear;z-index:1000}.layout-topbar .layout-topbar-menu.layout-topbar-menu-mobile-active{display:block}}\n"] }]
|
|
3006
3125
|
}], ctorParameters: () => [{ type: LayoutService }], propDecorators: { config: [{
|
|
3007
3126
|
type: Input
|
|
3008
3127
|
}] } });
|
|
3009
3128
|
|
|
3010
3129
|
class MenuComponent {
|
|
3011
3130
|
model = [];
|
|
3012
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3013
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3131
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3132
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MenuComponent, isStandalone: true, selector: "i-menu", inputs: { model: "model" }, ngImport: i0, template: "<ul class=\"menu\">\n @for(group of model; track $index) {\n <li class=\"menu-group\">\n @if (group.label) {\n <div class=\"menu-group-label\">\n {{ group.label }}\n </div>\n }\n\n <ul class=\"menu-items\">\n @for(item of group.items; track $index) {\n <li class=\"menu-item\">\n <a\n [routerLink]=\"item.routerLink\"\n routerLinkActive=\"active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n >\n @if (item.icon) {\n <i class=\"{{ item.icon }}\"></i>\n }\n <span>{{ item.label }}</span>\n </a>\n\n @if (item.items) {\n <ul class=\"submenu\">\n @for(subItem of item.items; track $index) {\n <li class=\"submenu-item\">\n <a\n [routerLink]=\"subItem.routerLink\"\n routerLinkActive=\"active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n >\n @if (subItem.icon) {\n <i class=\"{{ subItem.icon }}\"></i>\n }\n <span>{{ subItem.label }}</span>\n </a>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n\n @if (group.separator) {\n <hr class=\"separator\" />\n }\n </li>\n }\n</ul>\n", styles: [".menu{list-style:none;margin:0;padding:0}.menu-group{margin-bottom:1rem}.menu-group .menu-group-label{font-size:1em;font-weight:600;text-transform:uppercase;padding:.5rem 1rem;color:var(--color-contrast)}.menu-group .menu-items{list-style:none;margin:0;padding:0}.menu-group .menu-items .menu-item a{display:flex;align-items:center;padding:.75rem 1rem;color:var(--color-text-primary);text-decoration:none;font-size:1em;border-left:3px solid transparent;transition:all .2s ease}.menu-group .menu-items .menu-item a i{margin-right:.5rem;font-size:1em}.menu-group .menu-items .menu-item a:hover{background-color:var(--surface-hover);border-radius:6px}.menu-group .menu-items .menu-item a.active{background-color:var(--surface-hover);border-radius:6px;border-left:3px solid var(--color-primary);font-weight:600}.menu-group .menu-items .menu-item .submenu{list-style:none;padding-left:1.5rem}.menu-group .menu-items .menu-item .submenu .submenu-item a{padding:.5rem 1rem;font-size:.95em;color:var(--color-text-tertiary)}.menu-group .menu-items .menu-item .submenu .submenu-item a:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.menu-group .menu-items .menu-item .submenu .submenu-item a.active{color:var(--color-primary);font-weight:600}.separator{border:none;border-top:1px solid #334155;margin:.5rem 0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
|
|
3014
3133
|
}
|
|
3015
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MenuComponent, decorators: [{
|
|
3016
3135
|
type: Component,
|
|
3017
3136
|
args: [{ selector: 'i-menu', imports: [RouterLink, RouterLinkActive], template: "<ul class=\"menu\">\n @for(group of model; track $index) {\n <li class=\"menu-group\">\n @if (group.label) {\n <div class=\"menu-group-label\">\n {{ group.label }}\n </div>\n }\n\n <ul class=\"menu-items\">\n @for(item of group.items; track $index) {\n <li class=\"menu-item\">\n <a\n [routerLink]=\"item.routerLink\"\n routerLinkActive=\"active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n >\n @if (item.icon) {\n <i class=\"{{ item.icon }}\"></i>\n }\n <span>{{ item.label }}</span>\n </a>\n\n @if (item.items) {\n <ul class=\"submenu\">\n @for(subItem of item.items; track $index) {\n <li class=\"submenu-item\">\n <a\n [routerLink]=\"subItem.routerLink\"\n routerLinkActive=\"active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n >\n @if (subItem.icon) {\n <i class=\"{{ subItem.icon }}\"></i>\n }\n <span>{{ subItem.label }}</span>\n </a>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n\n @if (group.separator) {\n <hr class=\"separator\" />\n }\n </li>\n }\n</ul>\n", styles: [".menu{list-style:none;margin:0;padding:0}.menu-group{margin-bottom:1rem}.menu-group .menu-group-label{font-size:1em;font-weight:600;text-transform:uppercase;padding:.5rem 1rem;color:var(--color-contrast)}.menu-group .menu-items{list-style:none;margin:0;padding:0}.menu-group .menu-items .menu-item a{display:flex;align-items:center;padding:.75rem 1rem;color:var(--color-text-primary);text-decoration:none;font-size:1em;border-left:3px solid transparent;transition:all .2s ease}.menu-group .menu-items .menu-item a i{margin-right:.5rem;font-size:1em}.menu-group .menu-items .menu-item a:hover{background-color:var(--surface-hover);border-radius:6px}.menu-group .menu-items .menu-item a.active{background-color:var(--surface-hover);border-radius:6px;border-left:3px solid var(--color-primary);font-weight:600}.menu-group .menu-items .menu-item .submenu{list-style:none;padding-left:1.5rem}.menu-group .menu-items .menu-item .submenu .submenu-item a{padding:.5rem 1rem;font-size:.95em;color:var(--color-text-tertiary)}.menu-group .menu-items .menu-item .submenu .submenu-item a:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.menu-group .menu-items .menu-item .submenu .submenu-item a.active{color:var(--color-primary);font-weight:600}.separator{border:none;border-top:1px solid #334155;margin:.5rem 0}\n"] }]
|
|
3018
3137
|
}], propDecorators: { model: [{
|
|
@@ -3027,12 +3146,12 @@ class SidebarComponent {
|
|
|
3027
3146
|
this.el = el;
|
|
3028
3147
|
this.layoutService = layoutService;
|
|
3029
3148
|
}
|
|
3030
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3031
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3149
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SidebarComponent, deps: [{ token: i0.ElementRef }, { token: LayoutService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3150
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SidebarComponent, isStandalone: true, selector: "i-sidebar", inputs: { menuModel: "menuModel" }, ngImport: i0, template: "<div class=\"sidebar\">\n @if (layoutService.state().isMobileViewport &&\n layoutService.state().isSidebarOpen) {\n <div class=\"sidebar-mobile-header\">\n <div class=\"sidebar-mobile-header-inner\">\n <i-button\n [size]=\"'xtra-small'\"\n [text]=\"true\"\n [severity]=\"'contrast'\"\n [icon]=\"'pi pi-times'\"\n (clicked)=\"layoutService.closeSidebar()\"\n ></i-button>\n </div>\n </div>\n }\n\n <div class=\"sidebar-menu-wrapper\">\n <i-menu [model]=\"menuModel\" />\n </div>\n</div>\n", styles: [".sidebar{display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;transition:transform .2s,left .2s;background-color:var(--surface-overlay);padding:24px 12px 40px;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.sidebar .sidebar-mobile-header{display:none}.sidebar .sidebar-mobile-header .sidebar-mobile-header-inner{display:flex;justify-content:flex-end;align-items:center}.sidebar .sidebar-menu-wrapper{flex:1}@media(max-width:991px){.sidebar{height:100%;padding:0}.sidebar .sidebar-mobile-header{display:block;position:sticky;top:0;z-index:3;background:var(--surface-overlay);padding:12px 12px 8px;box-shadow:0 2px 6px #0000000f}.sidebar .sidebar-menu-wrapper{flex:1 1 auto;max-height:calc(100vh - 56px);overflow:auto;padding:12px}}\n"], dependencies: [{ kind: "component", type: MenuComponent, selector: "i-menu", inputs: ["model"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
3032
3151
|
}
|
|
3033
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
3034
3153
|
type: Component,
|
|
3035
|
-
args: [{ selector: 'i-sidebar', imports: [MenuComponent, IButton], template: "<div class=\"sidebar\">\n @if (layoutService.state().isMobileViewport &&\n layoutService.state().isSidebarOpen) {\n <div class=\"sidebar-mobile-header\">\n <div class=\"sidebar-mobile-header-inner\">\n <i-button\n [size]=\"'xtra-small'\"\n [text]=\"true\"\n [severity]=\"'contrast'\"\n [icon]=\"'pi pi-times'\"\n (clicked)=\"layoutService.closeSidebar()\"\n ></i-button>\n </div>\n </div>\n }\n\n <div class=\"sidebar-menu-wrapper\">\n <i-menu [model]=\"menuModel\" />\n </div>\n</div>\n", styles: [".sidebar{
|
|
3154
|
+
args: [{ selector: 'i-sidebar', imports: [MenuComponent, IButton], template: "<div class=\"sidebar\">\n @if (layoutService.state().isMobileViewport &&\n layoutService.state().isSidebarOpen) {\n <div class=\"sidebar-mobile-header\">\n <div class=\"sidebar-mobile-header-inner\">\n <i-button\n [size]=\"'xtra-small'\"\n [text]=\"true\"\n [severity]=\"'contrast'\"\n [icon]=\"'pi pi-times'\"\n (clicked)=\"layoutService.closeSidebar()\"\n ></i-button>\n </div>\n </div>\n }\n\n <div class=\"sidebar-menu-wrapper\">\n <i-menu [model]=\"menuModel\" />\n </div>\n</div>\n", styles: [".sidebar{display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;transition:transform .2s,left .2s;background-color:var(--surface-overlay);padding:24px 12px 40px;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.sidebar .sidebar-mobile-header{display:none}.sidebar .sidebar-mobile-header .sidebar-mobile-header-inner{display:flex;justify-content:flex-end;align-items:center}.sidebar .sidebar-menu-wrapper{flex:1}@media(max-width:991px){.sidebar{height:100%;padding:0}.sidebar .sidebar-mobile-header{display:block;position:sticky;top:0;z-index:3;background:var(--surface-overlay);padding:12px 12px 8px;box-shadow:0 2px 6px #0000000f}.sidebar .sidebar-menu-wrapper{flex:1 1 auto;max-height:calc(100vh - 56px);overflow:auto;padding:12px}}\n"] }]
|
|
3036
3155
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: LayoutService }], propDecorators: { menuModel: [{
|
|
3037
3156
|
type: Input
|
|
3038
3157
|
}] } });
|
|
@@ -3094,13 +3213,13 @@ class LayoutComponent {
|
|
|
3094
3213
|
this.routerSubscription.unsubscribe();
|
|
3095
3214
|
}
|
|
3096
3215
|
}
|
|
3097
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3098
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3216
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LayoutComponent, deps: [{ token: LayoutService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
3217
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: LayoutComponent, isStandalone: true, selector: "i-layout", inputs: { config: "config", menuModel: "menuModel" }, host: { listeners: { "window:resize": "onWindowResize()" } }, ngImport: i0, template: "<div class=\"layout\">\n <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n <i-topbar [config]=\"config\">\n <ng-content select=\"[topbarActions]\" />\n </i-topbar>\n <div class=\"layout-body\">\n <div\n class=\"layout-sidebar-container\"\n [ngClass]=\"{\n 'sidebar-open': layoutService.state().isSidebarOpen,\n 'sidebar-closed': !layoutService.state().isSidebarOpen\n }\"\n >\n <i-sidebar [menuModel]=\"menuModel\" />\n </div>\n <div class=\"layout-main-container\">\n <div class=\"layout-main\">\n <router-outlet />\n </div>\n </div>\n </div>\n <div class=\"layout-mask\" (click)=\"hideMenu()\"></div>\n </div>\n</div>\n", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width:300px;height:100%;overflow-y:auto;transition:transform .3s ease,opacity .3s ease;opacity:1}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar{width:6px;height:6px}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-sidebar-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.layout .layout-wrapper .layout-body .layout-sidebar-container{scrollbar-color:var(--color-text-secondary) transparent}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-open{transform:translate(0);opacity:1;pointer-events:auto}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-closed{transform:translate(-100%);opacity:0;pointer-events:none}.layout .layout-wrapper .layout-body .layout-main-container{flex:1 1 auto;min-width:0;overflow-y:auto;padding:2rem;transition:margin-left .3s ease}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-color:var(--color-text-secondary) transparent}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar{width:6px;height:6px}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.layout .layout-wrapper .layout-body .layout-main-container .layout-main{width:100%;max-width:100%}.layout .layout-wrapper.layout-static-inactive .layout-main-container{margin-left:-300px}.layout .layout-wrapper.layout-overlay-active .layout-sidebar-container{position:fixed;left:0;top:5rem;height:calc(100vh - 5rem);z-index:999;background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@media(max-width:991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{position:fixed;left:0;top:0;height:100vh;z-index:999;transition:transform .2s ease;background:var(--surface-overlay);overflow-y:auto}.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%;padding:24px 10px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TopbarComponent, selector: "i-topbar", inputs: ["config"] }, { kind: "component", type: SidebarComponent, selector: "i-sidebar", inputs: ["menuModel"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
|
|
3099
3218
|
}
|
|
3100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
3101
3220
|
type: Component,
|
|
3102
|
-
args: [{ selector: 'i-layout', imports: [NgClass, TopbarComponent, SidebarComponent, RouterOutlet], template: "<div class=\"layout\">\n <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n <i-topbar [config]=\"config\">\n <ng-content select=\"[topbarActions]\" />\n </i-topbar>\n <div class=\"layout-body\">\n <div\n class=\"layout-sidebar-container\"\n [ngClass]=\"{\n 'sidebar-open': layoutService.state().isSidebarOpen,\n 'sidebar-closed': !layoutService.state().isSidebarOpen\n }\"\n >\n <i-sidebar [menuModel]=\"menuModel\" />\n </div>\n <div class=\"layout-main-container\">\n <div class=\"layout-main\">\n <router-outlet />\n </div>\n </div>\n </div>\n <div class=\"layout-mask\" (click)=\"hideMenu()\"></div>\n </div>\n</div>\n", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width:300px;height:100%;overflow-y:auto;transition:transform .3s ease,opacity .3s ease;opacity:1
|
|
3103
|
-
}], ctorParameters: () => [{ type: LayoutService }, { type: i2
|
|
3221
|
+
args: [{ selector: 'i-layout', imports: [NgClass, TopbarComponent, SidebarComponent, RouterOutlet], template: "<div class=\"layout\">\n <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n <i-topbar [config]=\"config\">\n <ng-content select=\"[topbarActions]\" />\n </i-topbar>\n <div class=\"layout-body\">\n <div\n class=\"layout-sidebar-container\"\n [ngClass]=\"{\n 'sidebar-open': layoutService.state().isSidebarOpen,\n 'sidebar-closed': !layoutService.state().isSidebarOpen\n }\"\n >\n <i-sidebar [menuModel]=\"menuModel\" />\n </div>\n <div class=\"layout-main-container\">\n <div class=\"layout-main\">\n <router-outlet />\n </div>\n </div>\n </div>\n <div class=\"layout-mask\" (click)=\"hideMenu()\"></div>\n </div>\n</div>\n", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width:300px;height:100%;overflow-y:auto;transition:transform .3s ease,opacity .3s ease;opacity:1}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar{width:6px;height:6px}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-sidebar-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.layout .layout-wrapper .layout-body .layout-sidebar-container{scrollbar-color:var(--color-text-secondary) transparent}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-open{transform:translate(0);opacity:1;pointer-events:auto}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-closed{transform:translate(-100%);opacity:0;pointer-events:none}.layout .layout-wrapper .layout-body .layout-main-container{flex:1 1 auto;min-width:0;overflow-y:auto;padding:2rem;transition:margin-left .3s ease}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-color:var(--color-text-secondary) transparent}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar{width:6px;height:6px}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.layout .layout-wrapper .layout-body .layout-main-container .layout-main{width:100%;max-width:100%}.layout .layout-wrapper.layout-static-inactive .layout-main-container{margin-left:-300px}.layout .layout-wrapper.layout-overlay-active .layout-sidebar-container{position:fixed;left:0;top:5rem;height:calc(100vh - 5rem);z-index:999;background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@media(max-width:991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{position:fixed;left:0;top:0;height:100vh;z-index:999;transition:transform .2s ease;background:var(--surface-overlay);overflow-y:auto}.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%;padding:24px 10px}}\n"] }]
|
|
3222
|
+
}], ctorParameters: () => [{ type: LayoutService }, { type: i2.Router }], propDecorators: { config: [{
|
|
3104
3223
|
type: Input
|
|
3105
3224
|
}], menuModel: [{
|
|
3106
3225
|
type: Input
|
|
@@ -3123,7 +3242,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
3123
3242
|
* title="Choose One"
|
|
3124
3243
|
* [options]="items"
|
|
3125
3244
|
* optionLabel="name"
|
|
3126
|
-
* optionValue="id"
|
|
3127
3245
|
* [multiple]="false"
|
|
3128
3246
|
* formControlName="selectedItem">
|
|
3129
3247
|
* </i-listbox>
|
|
@@ -3133,7 +3251,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
3133
3251
|
* title="Choose Multiple"
|
|
3134
3252
|
* [options]="items"
|
|
3135
3253
|
* optionLabel="name"
|
|
3136
|
-
* optionValue="id"
|
|
3137
3254
|
* [multiple]="true"
|
|
3138
3255
|
* actionIcon="pi pi-plus"
|
|
3139
3256
|
* actionTooltip="Add new item"
|
|
@@ -3146,7 +3263,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
3146
3263
|
* title="Select Items"
|
|
3147
3264
|
* [options]="items"
|
|
3148
3265
|
* optionLabel="name"
|
|
3149
|
-
* optionValue="id"
|
|
3150
3266
|
* optionLeftIcon="icon"
|
|
3151
3267
|
* optionRightIcon="statusIcon"
|
|
3152
3268
|
* formControlName="selection">
|
|
@@ -3191,7 +3307,6 @@ class IListbox {
|
|
|
3191
3307
|
// Convert options to signal input
|
|
3192
3308
|
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
3193
3309
|
optionLabel;
|
|
3194
|
-
optionValue;
|
|
3195
3310
|
placeholder;
|
|
3196
3311
|
id;
|
|
3197
3312
|
fluid = false;
|
|
@@ -3303,7 +3418,7 @@ class IListbox {
|
|
|
3303
3418
|
const optionValue = this.getOptionValue(option);
|
|
3304
3419
|
if (this.multiple) {
|
|
3305
3420
|
const currentValues = Array.isArray(this.value) ? [...this.value] : [];
|
|
3306
|
-
const index = currentValues.findIndex((val) => val === optionValue);
|
|
3421
|
+
const index = currentValues.findIndex((val) => JSON.stringify(val) === JSON.stringify(optionValue));
|
|
3307
3422
|
if (index > -1) {
|
|
3308
3423
|
currentValues.splice(index, 1);
|
|
3309
3424
|
}
|
|
@@ -3316,7 +3431,9 @@ class IListbox {
|
|
|
3316
3431
|
this.onTouchedCallback();
|
|
3317
3432
|
}
|
|
3318
3433
|
else {
|
|
3319
|
-
const newValue = this.value === optionValue
|
|
3434
|
+
const newValue = JSON.stringify(this.value) === JSON.stringify(optionValue)
|
|
3435
|
+
? null
|
|
3436
|
+
: optionValue;
|
|
3320
3437
|
this.value = newValue;
|
|
3321
3438
|
this.onChange.emit(newValue);
|
|
3322
3439
|
this.onChangeCallback(newValue);
|
|
@@ -3326,10 +3443,11 @@ class IListbox {
|
|
|
3326
3443
|
isOptionSelected(option) {
|
|
3327
3444
|
const optionValue = this.getOptionValue(option);
|
|
3328
3445
|
if (this.multiple) {
|
|
3329
|
-
return Array.isArray(this.value) &&
|
|
3446
|
+
return (Array.isArray(this.value) &&
|
|
3447
|
+
this.value.some((val) => JSON.stringify(val) === JSON.stringify(optionValue)));
|
|
3330
3448
|
}
|
|
3331
3449
|
else {
|
|
3332
|
-
return this.value === optionValue;
|
|
3450
|
+
return JSON.stringify(this.value) === JSON.stringify(optionValue);
|
|
3333
3451
|
}
|
|
3334
3452
|
}
|
|
3335
3453
|
clearSelection() {
|
|
@@ -3343,7 +3461,7 @@ class IListbox {
|
|
|
3343
3461
|
event.stopPropagation();
|
|
3344
3462
|
if (this.multiple) {
|
|
3345
3463
|
const currentValues = Array.isArray(this.value) ? [...this.value] : [];
|
|
3346
|
-
const index = currentValues.findIndex((val) => val === value);
|
|
3464
|
+
const index = currentValues.findIndex((val) => JSON.stringify(val) === JSON.stringify(value));
|
|
3347
3465
|
if (index > -1) {
|
|
3348
3466
|
currentValues.splice(index, 1);
|
|
3349
3467
|
this.value = currentValues;
|
|
@@ -3353,7 +3471,7 @@ class IListbox {
|
|
|
3353
3471
|
}
|
|
3354
3472
|
}
|
|
3355
3473
|
else {
|
|
3356
|
-
if (this.value === value) {
|
|
3474
|
+
if (JSON.stringify(this.value) === JSON.stringify(value)) {
|
|
3357
3475
|
this.value = null;
|
|
3358
3476
|
this.onChange.emit(null);
|
|
3359
3477
|
this.onChangeCallback(null);
|
|
@@ -3365,7 +3483,7 @@ class IListbox {
|
|
|
3365
3483
|
return option[this.optionLabel] || option['label'] || String(option);
|
|
3366
3484
|
}
|
|
3367
3485
|
getOptionValue(option) {
|
|
3368
|
-
return option
|
|
3486
|
+
return option;
|
|
3369
3487
|
}
|
|
3370
3488
|
getOptionSearchValue(option) {
|
|
3371
3489
|
if (this.filterBy && option[this.filterBy]) {
|
|
@@ -3382,12 +3500,12 @@ class IListbox {
|
|
|
3382
3500
|
if (this.value === null || this.value === undefined) {
|
|
3383
3501
|
return [];
|
|
3384
3502
|
}
|
|
3385
|
-
const option = currentOptions.find((opt) => this.getOptionValue(opt) === this.value);
|
|
3503
|
+
const option = currentOptions.find((opt) => JSON.stringify(this.getOptionValue(opt)) === JSON.stringify(this.value));
|
|
3386
3504
|
return option ? [this.getOptionLabel(option)] : [String(this.value)];
|
|
3387
3505
|
}
|
|
3388
3506
|
const values = Array.isArray(this.value) ? this.value : [];
|
|
3389
3507
|
return values.map((val) => {
|
|
3390
|
-
const option = currentOptions.find((opt) => this.getOptionValue(opt) === val);
|
|
3508
|
+
const option = currentOptions.find((opt) => JSON.stringify(this.getOptionValue(opt)) === JSON.stringify(val));
|
|
3391
3509
|
return option ? this.getOptionLabel(option) : String(val);
|
|
3392
3510
|
});
|
|
3393
3511
|
}
|
|
@@ -3409,7 +3527,7 @@ class IListbox {
|
|
|
3409
3527
|
if (this.value === null || this.value === undefined) {
|
|
3410
3528
|
return '';
|
|
3411
3529
|
}
|
|
3412
|
-
const option = currentOptions.find((opt) => this.getOptionValue(opt) === this.value);
|
|
3530
|
+
const option = currentOptions.find((opt) => JSON.stringify(this.getOptionValue(opt)) === JSON.stringify(this.value));
|
|
3413
3531
|
return option ? this.getOptionLabel(option) : String(this.value);
|
|
3414
3532
|
}
|
|
3415
3533
|
if (!this.value || (Array.isArray(this.value) && this.value.length === 0)) {
|
|
@@ -3511,31 +3629,30 @@ class IListbox {
|
|
|
3511
3629
|
: 'Invalid selection';
|
|
3512
3630
|
}
|
|
3513
3631
|
}
|
|
3514
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3515
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3632
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IListbox, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
3633
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IListbox, isStandalone: true, selector: "i-listbox", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: false, isRequired: false, transformFunction: null }, actionTooltip: { classPropertyName: "actionTooltip", publicName: "actionTooltip", isSignal: false, isRequired: false, transformFunction: null }, optionLeftIcon: { classPropertyName: "optionLeftIcon", publicName: "optionLeftIcon", isSignal: false, isRequired: false, transformFunction: null }, optionRightIcon: { classPropertyName: "optionRightIcon", publicName: "optionRightIcon", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: false, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClear: "onClear", onAction: "onAction" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
3516
3634
|
{
|
|
3517
3635
|
provide: NG_VALUE_ACCESSOR,
|
|
3518
3636
|
useExisting: forwardRef(() => IListbox),
|
|
3519
3637
|
multi: true,
|
|
3520
3638
|
},
|
|
3521
|
-
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"i-listbox-wrapper\"\n [class.i-listbox--fluid]=\"fluid\"\n [class.i-listbox--disabled]=\"disabled\"\n [class.i-listbox--invalid]=\"showErrors\"\n #dropdown\n>\n <!-- Header -->\n <div class=\"i-listbox-header\">\n <div class=\"i-listbox-header-content\">\n <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n @if (actionIcon) {\n <i-button\n [text]=\"true\"\n [size]=\"'small'\"\n [severity]=\"'contrast'\"\n [icon]=\"actionIcon\"\n [disabled]=\"disabled\"\n (clicked)=\"onActionClick($event)\"\n [attr.title]=\"actionTooltip\"\n ></i-button>\n }\n </div>\n\n <!-- Chips area for multiselect mode -->\n @if (multiple && hasValue()) {\n <i-chips\n class=\"i-listbox-chips\"\n [chips]=\"getSelectedChipItems()\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [collapseOnOverflow]=\"true\"\n [overflowLabel]=\"getDisplayLabel()\"\n (removeChip)=\"onChipRemove($event)\"\n ></i-chips>\n }\n </div>\n\n <!-- Dropdown content -->\n <div class=\"i-listbox-dropdown\">\n @if (filter) {\n <div class=\"i-listbox-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-listbox-options\">\n @for (option of filteredOptions(); track getOptionValue(option)) {\n <div\n class=\"i-listbox-option\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.has-icon]=\"\n !multiple && (getOptionLeftIcon(option) || getOptionRightIcon(option))\n \"\n (click)=\"toggleOption(option)\"\n >\n <!-- Checkbox only in multiple mode -->\n @if (multiple) {\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-listbox-checkbox\"\n ></i-checkbox>\n }\n\n <!-- Left icon -->\n @if (getOptionLeftIcon(option)) {\n <i\n [class]=\"getOptionLeftIcon(option)\"\n class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n ></i>\n }\n\n <span class=\"i-listbox-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n\n <!-- Right icon -->\n @if (getOptionRightIcon(option)) {\n <i\n [class]=\"getOptionRightIcon(option)\"\n class=\"i-listbox-option-icon i-listbox-option-icon--right\"\n ></i>\n }\n </div>\n } @if (filteredOptions().length === 0) {\n <div class=\"i-listbox-no-options\">No options found</div>\n }\n </div>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-listbox-error\">\n {{ getErrorMessage() }}\n </div>\n }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips{padding:4px 0}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:6px;height:6px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary);margin-left:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid"], outputs: ["clicked"] }] });
|
|
3639
|
+
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"i-listbox-wrapper\"\n [class.i-listbox--fluid]=\"fluid\"\n [class.i-listbox--disabled]=\"disabled\"\n [class.i-listbox--invalid]=\"showErrors\"\n #dropdown\n>\n <!-- Header -->\n <div class=\"i-listbox-header\">\n <div class=\"i-listbox-header-content\">\n <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n @if (actionIcon) {\n <i-button\n [text]=\"true\"\n [size]=\"'small'\"\n [severity]=\"'contrast'\"\n [icon]=\"actionIcon\"\n [disabled]=\"disabled\"\n (clicked)=\"onActionClick($event)\"\n [attr.title]=\"actionTooltip\"\n ></i-button>\n }\n </div>\n\n <!-- Chips area for multiselect mode -->\n @if (multiple && hasValue()) {\n <i-chips\n class=\"i-listbox-chips\"\n [chips]=\"getSelectedChipItems()\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [collapseOnOverflow]=\"true\"\n [overflowLabel]=\"getDisplayLabel()\"\n (removeChip)=\"onChipRemove($event)\"\n ></i-chips>\n }\n </div>\n\n <!-- Dropdown content -->\n <div class=\"i-listbox-dropdown\">\n @if (filter) {\n <div class=\"i-listbox-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-listbox-options\">\n @for (option of filteredOptions(); track getOptionValue(option)) {\n <div\n class=\"i-listbox-option\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.has-icon]=\"\n !multiple && (getOptionLeftIcon(option) || getOptionRightIcon(option))\n \"\n (click)=\"toggleOption(option)\"\n >\n <!-- Checkbox only in multiple mode -->\n @if (multiple) {\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-listbox-checkbox\"\n ></i-checkbox>\n }\n\n <!-- Left icon -->\n @if (getOptionLeftIcon(option)) {\n <i\n [class]=\"getOptionLeftIcon(option)\"\n class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n ></i>\n }\n\n <span class=\"i-listbox-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n\n <!-- Right icon -->\n @if (getOptionRightIcon(option)) {\n <i\n [class]=\"getOptionRightIcon(option)\"\n class=\"i-listbox-option-icon i-listbox-option-icon--right\"\n ></i>\n }\n </div>\n } @if (filteredOptions().length === 0) {\n <div class=\"i-listbox-no-options\">No options found</div>\n }\n </div>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-listbox-error\">\n {{ getErrorMessage() }}\n </div>\n }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips{padding:4px 0}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--color-text-secondary) transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:6px;height:6px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary);margin-left:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
3522
3640
|
}
|
|
3523
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3641
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IListbox, decorators: [{
|
|
3524
3642
|
type: Component,
|
|
3525
3643
|
args: [{ selector: 'i-listbox', standalone: true, imports: [
|
|
3526
|
-
CommonModule,
|
|
3527
3644
|
FormsModule,
|
|
3528
3645
|
IChipsComponent,
|
|
3529
3646
|
ICheckbox,
|
|
3530
3647
|
IInputText,
|
|
3531
|
-
IButton
|
|
3648
|
+
IButton
|
|
3532
3649
|
], providers: [
|
|
3533
3650
|
{
|
|
3534
3651
|
provide: NG_VALUE_ACCESSOR,
|
|
3535
3652
|
useExisting: forwardRef(() => IListbox),
|
|
3536
3653
|
multi: true,
|
|
3537
3654
|
},
|
|
3538
|
-
], template: "<div\n class=\"i-listbox-wrapper\"\n [class.i-listbox--fluid]=\"fluid\"\n [class.i-listbox--disabled]=\"disabled\"\n [class.i-listbox--invalid]=\"showErrors\"\n #dropdown\n>\n <!-- Header -->\n <div class=\"i-listbox-header\">\n <div class=\"i-listbox-header-content\">\n <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n @if (actionIcon) {\n <i-button\n [text]=\"true\"\n [size]=\"'small'\"\n [severity]=\"'contrast'\"\n [icon]=\"actionIcon\"\n [disabled]=\"disabled\"\n (clicked)=\"onActionClick($event)\"\n [attr.title]=\"actionTooltip\"\n ></i-button>\n }\n </div>\n\n <!-- Chips area for multiselect mode -->\n @if (multiple && hasValue()) {\n <i-chips\n class=\"i-listbox-chips\"\n [chips]=\"getSelectedChipItems()\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [collapseOnOverflow]=\"true\"\n [overflowLabel]=\"getDisplayLabel()\"\n (removeChip)=\"onChipRemove($event)\"\n ></i-chips>\n }\n </div>\n\n <!-- Dropdown content -->\n <div class=\"i-listbox-dropdown\">\n @if (filter) {\n <div class=\"i-listbox-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-listbox-options\">\n @for (option of filteredOptions(); track getOptionValue(option)) {\n <div\n class=\"i-listbox-option\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.has-icon]=\"\n !multiple && (getOptionLeftIcon(option) || getOptionRightIcon(option))\n \"\n (click)=\"toggleOption(option)\"\n >\n <!-- Checkbox only in multiple mode -->\n @if (multiple) {\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-listbox-checkbox\"\n ></i-checkbox>\n }\n\n <!-- Left icon -->\n @if (getOptionLeftIcon(option)) {\n <i\n [class]=\"getOptionLeftIcon(option)\"\n class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n ></i>\n }\n\n <span class=\"i-listbox-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n\n <!-- Right icon -->\n @if (getOptionRightIcon(option)) {\n <i\n [class]=\"getOptionRightIcon(option)\"\n class=\"i-listbox-option-icon i-listbox-option-icon--right\"\n ></i>\n }\n </div>\n } @if (filteredOptions().length === 0) {\n <div class=\"i-listbox-no-options\">No options found</div>\n }\n </div>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-listbox-error\">\n {{ getErrorMessage() }}\n </div>\n }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips{padding:4px 0}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:6px;height:6px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary);margin-left:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}\n"] }]
|
|
3655
|
+
], template: "<div\n class=\"i-listbox-wrapper\"\n [class.i-listbox--fluid]=\"fluid\"\n [class.i-listbox--disabled]=\"disabled\"\n [class.i-listbox--invalid]=\"showErrors\"\n #dropdown\n>\n <!-- Header -->\n <div class=\"i-listbox-header\">\n <div class=\"i-listbox-header-content\">\n <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n @if (actionIcon) {\n <i-button\n [text]=\"true\"\n [size]=\"'small'\"\n [severity]=\"'contrast'\"\n [icon]=\"actionIcon\"\n [disabled]=\"disabled\"\n (clicked)=\"onActionClick($event)\"\n [attr.title]=\"actionTooltip\"\n ></i-button>\n }\n </div>\n\n <!-- Chips area for multiselect mode -->\n @if (multiple && hasValue()) {\n <i-chips\n class=\"i-listbox-chips\"\n [chips]=\"getSelectedChipItems()\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [collapseOnOverflow]=\"true\"\n [overflowLabel]=\"getDisplayLabel()\"\n (removeChip)=\"onChipRemove($event)\"\n ></i-chips>\n }\n </div>\n\n <!-- Dropdown content -->\n <div class=\"i-listbox-dropdown\">\n @if (filter) {\n <div class=\"i-listbox-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-listbox-options\">\n @for (option of filteredOptions(); track getOptionValue(option)) {\n <div\n class=\"i-listbox-option\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.has-icon]=\"\n !multiple && (getOptionLeftIcon(option) || getOptionRightIcon(option))\n \"\n (click)=\"toggleOption(option)\"\n >\n <!-- Checkbox only in multiple mode -->\n @if (multiple) {\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-listbox-checkbox\"\n ></i-checkbox>\n }\n\n <!-- Left icon -->\n @if (getOptionLeftIcon(option)) {\n <i\n [class]=\"getOptionLeftIcon(option)\"\n class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n ></i>\n }\n\n <span class=\"i-listbox-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n\n <!-- Right icon -->\n @if (getOptionRightIcon(option)) {\n <i\n [class]=\"getOptionRightIcon(option)\"\n class=\"i-listbox-option-icon i-listbox-option-icon--right\"\n ></i>\n }\n </div>\n } @if (filteredOptions().length === 0) {\n <div class=\"i-listbox-no-options\">No options found</div>\n }\n </div>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-listbox-error\">\n {{ getErrorMessage() }}\n </div>\n }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips{padding:4px 0}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--color-text-secondary) transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:6px;height:6px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary);margin-left:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}\n"] }]
|
|
3539
3656
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { title: [{
|
|
3540
3657
|
type: Input
|
|
3541
3658
|
}], label: [{
|
|
@@ -3548,10 +3665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
3548
3665
|
type: Input
|
|
3549
3666
|
}], optionRightIcon: [{
|
|
3550
3667
|
type: Input
|
|
3551
|
-
}], optionLabel: [{
|
|
3552
|
-
type: Input,
|
|
3553
|
-
args: [{ required: true }]
|
|
3554
|
-
}], optionValue: [{
|
|
3668
|
+
}], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{
|
|
3555
3669
|
type: Input,
|
|
3556
3670
|
args: [{ required: true }]
|
|
3557
3671
|
}], placeholder: [{
|
|
@@ -3841,18 +3955,18 @@ class IRadioButton {
|
|
|
3841
3955
|
setDisabledState(isDisabled) {
|
|
3842
3956
|
this.disabled = isDisabled;
|
|
3843
3957
|
}
|
|
3844
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3845
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3958
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IRadioButton, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
3959
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IRadioButton, isStandalone: true, selector: "i-radio-button", inputs: { label: "label", value: "value", name: "name", inputId: "inputId", disabled: "disabled", fluid: "fluid" }, outputs: { onChange: "onChange" }, providers: [
|
|
3846
3960
|
{
|
|
3847
3961
|
provide: NG_VALUE_ACCESSOR,
|
|
3848
3962
|
useExisting: forwardRef(() => IRadioButton),
|
|
3849
3963
|
multi: true,
|
|
3850
3964
|
},
|
|
3851
|
-
], 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:#e0e0e0;background-color:#f5f5f5}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:#e0e0e0}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:#9e9e9e}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:#9e9e9e}.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"]
|
|
3965
|
+
], 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:#e0e0e0;background-color:#f5f5f5}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:#e0e0e0}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:#9e9e9e}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:#9e9e9e}.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"] });
|
|
3852
3966
|
}
|
|
3853
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3967
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IRadioButton, decorators: [{
|
|
3854
3968
|
type: Component,
|
|
3855
|
-
args: [{ selector: 'i-radio-button', standalone: true, imports: [
|
|
3969
|
+
args: [{ selector: 'i-radio-button', standalone: true, imports: [], providers: [
|
|
3856
3970
|
{
|
|
3857
3971
|
provide: NG_VALUE_ACCESSOR,
|
|
3858
3972
|
useExisting: forwardRef(() => IRadioButton),
|
|
@@ -3930,12 +4044,12 @@ class IMessage {
|
|
|
3930
4044
|
this.visible = false;
|
|
3931
4045
|
this.visibleChange.emit(this.visible);
|
|
3932
4046
|
}
|
|
3933
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3934
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4047
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4048
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IMessage, isStandalone: true, selector: "i-message", inputs: { severity: "severity", size: "size", icon: "icon", closable: "closable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "@if (visible) {\n<div\n class=\"i-message i-message-{{ severity }} i-message--{{ size }}\"\n role=\"alert\"\n>\n <div class=\"i-message-content\">\n <div class=\"i-message-icon\">\n <i [class]=\"getDefaultIcon()\"></i>\n </div>\n <div class=\"i-message-text\">\n <ng-content></ng-content>\n </div>\n @if (closable) {\n <button\n class=\"i-message-close\"\n type=\"button\"\n (click)=\"close()\"\n aria-label=\"Close\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </div>\n</div>\n}\n", styles: [".i-message{background-color:var(--surface-section);border-left:4px solid transparent}.i-message .i-message-text{color:var(--color-text-primary)}.i-message .i-message-close{color:var(--color-text-secondary)}.i-message .i-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-message.i-message-success{border-left-color:var(--color-success)}.i-message.i-message-success .i-message-icon{color:var(--color-success)}.i-message.i-message-info{border-left-color:var(--color-info)}.i-message.i-message-info .i-message-icon{color:var(--color-info)}.i-message.i-message-warning{border-left-color:var(--color-warning)}.i-message.i-message-warning .i-message-icon{color:var(--color-warning)}.i-message.i-message-danger{border-left-color:var(--color-danger)}.i-message.i-message-danger .i-message-icon{color:var(--color-danger)}.i-message.i-message-primary{border-left-color:var(--color-primary)}.i-message.i-message-primary .i-message-icon{color:var(--color-primary)}.i-message.i-message-secondary{border-left-color:var(--color-secondary)}.i-message.i-message-secondary .i-message-icon{color:var(--color-secondary)}.i-message.i-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-message.i-message-tertiary .i-message-icon{color:var(--color-text-tertiary)}.i-message.i-message-contrast{border-left-color:var(--color-contrast)}.i-message.i-message-contrast .i-message-icon{color:var(--color-contrast)}.i-message{display:flex;align-items:flex-start;border-radius:8px;margin-bottom:16px}.i-message:last-child{margin-bottom:0}.i-message--small .i-message-content{gap:8px;padding:8px 12px}.i-message--small .i-message-content .i-message-icon i{font-size:14px}.i-message--small .i-message-content .i-message-text{font-size:.95em}.i-message--small .i-message-content .i-message-close{padding:2px}.i-message--small .i-message-content .i-message-close i{font-size:10px}.i-message--medium .i-message-content{gap:12px;padding:16px}.i-message--medium .i-message-content .i-message-icon i{font-size:18px}.i-message--medium .i-message-content .i-message-text{font-size:1em}.i-message--medium .i-message-content .i-message-close i{font-size:12px}.i-message--large .i-message-content{gap:16px;padding:20px 24px}.i-message--large .i-message-content .i-message-icon i{font-size:24px}.i-message--large .i-message-content .i-message-text{font-size:1.1em}.i-message--large .i-message-content .i-message-close{padding:6px}.i-message--large .i-message-content .i-message-close i{font-size:14px}.i-message .i-message-content{display:flex;align-items:flex-start;width:100%}.i-message .i-message-content .i-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-message .i-message-content .i-message-text{flex:1;line-height:1.5;min-width:0;word-wrap:break-word}.i-message .i-message-content .i-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:background-color .2s,color .2s}\n"] });
|
|
3935
4049
|
}
|
|
3936
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4050
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IMessage, decorators: [{
|
|
3937
4051
|
type: Component,
|
|
3938
|
-
args: [{ selector: 'i-message', imports: [
|
|
4052
|
+
args: [{ selector: 'i-message', imports: [], template: "@if (visible) {\n<div\n class=\"i-message i-message-{{ severity }} i-message--{{ size }}\"\n role=\"alert\"\n>\n <div class=\"i-message-content\">\n <div class=\"i-message-icon\">\n <i [class]=\"getDefaultIcon()\"></i>\n </div>\n <div class=\"i-message-text\">\n <ng-content></ng-content>\n </div>\n @if (closable) {\n <button\n class=\"i-message-close\"\n type=\"button\"\n (click)=\"close()\"\n aria-label=\"Close\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </div>\n</div>\n}\n", styles: [".i-message{background-color:var(--surface-section);border-left:4px solid transparent}.i-message .i-message-text{color:var(--color-text-primary)}.i-message .i-message-close{color:var(--color-text-secondary)}.i-message .i-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-message.i-message-success{border-left-color:var(--color-success)}.i-message.i-message-success .i-message-icon{color:var(--color-success)}.i-message.i-message-info{border-left-color:var(--color-info)}.i-message.i-message-info .i-message-icon{color:var(--color-info)}.i-message.i-message-warning{border-left-color:var(--color-warning)}.i-message.i-message-warning .i-message-icon{color:var(--color-warning)}.i-message.i-message-danger{border-left-color:var(--color-danger)}.i-message.i-message-danger .i-message-icon{color:var(--color-danger)}.i-message.i-message-primary{border-left-color:var(--color-primary)}.i-message.i-message-primary .i-message-icon{color:var(--color-primary)}.i-message.i-message-secondary{border-left-color:var(--color-secondary)}.i-message.i-message-secondary .i-message-icon{color:var(--color-secondary)}.i-message.i-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-message.i-message-tertiary .i-message-icon{color:var(--color-text-tertiary)}.i-message.i-message-contrast{border-left-color:var(--color-contrast)}.i-message.i-message-contrast .i-message-icon{color:var(--color-contrast)}.i-message{display:flex;align-items:flex-start;border-radius:8px;margin-bottom:16px}.i-message:last-child{margin-bottom:0}.i-message--small .i-message-content{gap:8px;padding:8px 12px}.i-message--small .i-message-content .i-message-icon i{font-size:14px}.i-message--small .i-message-content .i-message-text{font-size:.95em}.i-message--small .i-message-content .i-message-close{padding:2px}.i-message--small .i-message-content .i-message-close i{font-size:10px}.i-message--medium .i-message-content{gap:12px;padding:16px}.i-message--medium .i-message-content .i-message-icon i{font-size:18px}.i-message--medium .i-message-content .i-message-text{font-size:1em}.i-message--medium .i-message-content .i-message-close i{font-size:12px}.i-message--large .i-message-content{gap:16px;padding:20px 24px}.i-message--large .i-message-content .i-message-icon i{font-size:24px}.i-message--large .i-message-content .i-message-text{font-size:1.1em}.i-message--large .i-message-content .i-message-close{padding:6px}.i-message--large .i-message-content .i-message-close i{font-size:14px}.i-message .i-message-content{display:flex;align-items:flex-start;width:100%}.i-message .i-message-content .i-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-message .i-message-content .i-message-text{flex:1;line-height:1.5;min-width:0;word-wrap:break-word}.i-message .i-message-content .i-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:background-color .2s,color .2s}\n"] }]
|
|
3939
4053
|
}], propDecorators: { severity: [{
|
|
3940
4054
|
type: Input
|
|
3941
4055
|
}], size: [{
|
|
@@ -3963,7 +4077,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
3963
4077
|
* label="Skills"
|
|
3964
4078
|
* [options]="skills"
|
|
3965
4079
|
* optionLabel="name"
|
|
3966
|
-
* optionValue="id"
|
|
3967
4080
|
* formControlName="selectedSkills">
|
|
3968
4081
|
* </i-multi-select>
|
|
3969
4082
|
*
|
|
@@ -4018,10 +4131,6 @@ class IMultiSelect {
|
|
|
4018
4131
|
* Property name to use as the display label for options
|
|
4019
4132
|
*/
|
|
4020
4133
|
optionLabel;
|
|
4021
|
-
/**
|
|
4022
|
-
* Property name to use as the value for options (if not set, entire object is used)
|
|
4023
|
-
*/
|
|
4024
|
-
optionValue;
|
|
4025
4134
|
/**
|
|
4026
4135
|
* Placeholder text when no options are selected
|
|
4027
4136
|
* @default 'Select options'
|
|
@@ -4130,20 +4239,9 @@ class IMultiSelect {
|
|
|
4130
4239
|
* @internal
|
|
4131
4240
|
*/
|
|
4132
4241
|
selectedChips = computed(() => {
|
|
4133
|
-
const currentOptions = this.options() || [];
|
|
4134
4242
|
const currentValue = this._value();
|
|
4135
|
-
if (!Array.isArray(currentOptions)) {
|
|
4136
|
-
return [];
|
|
4137
|
-
}
|
|
4138
4243
|
return currentValue.map((val) => {
|
|
4139
|
-
|
|
4140
|
-
if (!this.optionValue) {
|
|
4141
|
-
label = this.getOptionLabel(val);
|
|
4142
|
-
}
|
|
4143
|
-
else {
|
|
4144
|
-
const option = currentOptions.find((opt) => this.getOptionValue(opt) === val);
|
|
4145
|
-
label = option ? this.getOptionLabel(option) : String(val);
|
|
4146
|
-
}
|
|
4244
|
+
const label = this.getOptionLabel(val);
|
|
4147
4245
|
return {
|
|
4148
4246
|
label,
|
|
4149
4247
|
value: val,
|
|
@@ -4219,24 +4317,13 @@ class IMultiSelect {
|
|
|
4219
4317
|
*/
|
|
4220
4318
|
toggleOption(option) {
|
|
4221
4319
|
const currentValues = [...this.value];
|
|
4222
|
-
|
|
4223
|
-
|
|
4224
|
-
|
|
4225
|
-
|
|
4226
|
-
}
|
|
4227
|
-
else {
|
|
4228
|
-
currentValues.push(option);
|
|
4229
|
-
}
|
|
4320
|
+
const optionValue = this.getOptionValue(option);
|
|
4321
|
+
const index = currentValues.findIndex((val) => JSON.stringify(val) === JSON.stringify(optionValue));
|
|
4322
|
+
if (index > -1) {
|
|
4323
|
+
currentValues.splice(index, 1);
|
|
4230
4324
|
}
|
|
4231
4325
|
else {
|
|
4232
|
-
|
|
4233
|
-
const index = currentValues.findIndex((val) => val === optionValue);
|
|
4234
|
-
if (index > -1) {
|
|
4235
|
-
currentValues.splice(index, 1);
|
|
4236
|
-
}
|
|
4237
|
-
else {
|
|
4238
|
-
currentValues.push(optionValue);
|
|
4239
|
-
}
|
|
4326
|
+
currentValues.push(optionValue);
|
|
4240
4327
|
}
|
|
4241
4328
|
this.value = currentValues;
|
|
4242
4329
|
this.onChange.emit(currentValues);
|
|
@@ -4248,13 +4335,8 @@ class IMultiSelect {
|
|
|
4248
4335
|
* @internal
|
|
4249
4336
|
*/
|
|
4250
4337
|
isOptionSelected(option) {
|
|
4251
|
-
|
|
4252
|
-
|
|
4253
|
-
}
|
|
4254
|
-
else {
|
|
4255
|
-
const optionValue = this.getOptionValue(option);
|
|
4256
|
-
return this.value.includes(optionValue);
|
|
4257
|
-
}
|
|
4338
|
+
const optionValue = this.getOptionValue(option);
|
|
4339
|
+
return this.value.some((val) => JSON.stringify(val) === JSON.stringify(optionValue));
|
|
4258
4340
|
}
|
|
4259
4341
|
/**
|
|
4260
4342
|
* Clears all selections
|
|
@@ -4273,13 +4355,7 @@ class IMultiSelect {
|
|
|
4273
4355
|
onChipRemove(event) {
|
|
4274
4356
|
event.originalEvent.stopPropagation();
|
|
4275
4357
|
const currentValues = [...this.value];
|
|
4276
|
-
|
|
4277
|
-
if (!this.optionValue) {
|
|
4278
|
-
index = currentValues.findIndex((val) => JSON.stringify(val) === JSON.stringify(event.chip.value));
|
|
4279
|
-
}
|
|
4280
|
-
else {
|
|
4281
|
-
index = currentValues.findIndex((val) => val === event.chip.value);
|
|
4282
|
-
}
|
|
4358
|
+
const index = currentValues.findIndex((val) => JSON.stringify(val) === JSON.stringify(event.chip.value));
|
|
4283
4359
|
if (index > -1) {
|
|
4284
4360
|
currentValues.splice(index, 1);
|
|
4285
4361
|
this.value = currentValues;
|
|
@@ -4307,10 +4383,7 @@ class IMultiSelect {
|
|
|
4307
4383
|
* @internal
|
|
4308
4384
|
*/
|
|
4309
4385
|
getOptionValue(option) {
|
|
4310
|
-
|
|
4311
|
-
return option;
|
|
4312
|
-
}
|
|
4313
|
-
return option[this.optionValue] || option['value'] || option;
|
|
4386
|
+
return option;
|
|
4314
4387
|
}
|
|
4315
4388
|
/**
|
|
4316
4389
|
* Gets the searchable value for filtering
|
|
@@ -4327,18 +4400,8 @@ class IMultiSelect {
|
|
|
4327
4400
|
* @internal
|
|
4328
4401
|
*/
|
|
4329
4402
|
getSelectedLabels() {
|
|
4330
|
-
const currentOptions = this.options() || [];
|
|
4331
|
-
if (!Array.isArray(currentOptions)) {
|
|
4332
|
-
return [];
|
|
4333
|
-
}
|
|
4334
4403
|
return this.value.map((val) => {
|
|
4335
|
-
|
|
4336
|
-
return this.getOptionLabel(val);
|
|
4337
|
-
}
|
|
4338
|
-
else {
|
|
4339
|
-
const option = currentOptions.find((opt) => this.getOptionValue(opt) === val);
|
|
4340
|
-
return option ? this.getOptionLabel(option) : String(val);
|
|
4341
|
-
}
|
|
4404
|
+
return this.getOptionLabel(val);
|
|
4342
4405
|
});
|
|
4343
4406
|
}
|
|
4344
4407
|
/**
|
|
@@ -4455,31 +4518,29 @@ class IMultiSelect {
|
|
|
4455
4518
|
: 'Invalid selection';
|
|
4456
4519
|
}
|
|
4457
4520
|
}
|
|
4458
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4459
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4521
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IMultiSelect, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
4522
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IMultiSelect, isStandalone: true, selector: "i-multi-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: false, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClear: "onClear" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
4460
4523
|
{
|
|
4461
4524
|
provide: NG_VALUE_ACCESSOR,
|
|
4462
4525
|
useExisting: forwardRef(() => IMultiSelect),
|
|
4463
4526
|
multi: true,
|
|
4464
4527
|
},
|
|
4465
|
-
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"i-multi-select-wrapper\"\n [class.i-multi-select--fluid]=\"fluid\"\n #dropdown\n>\n <!-- Input container with click handler -->\n <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n <!-- Chips component with float label -->\n <i-chips\n [chips]=\"selectedChips()\"\n [boxed]=\"true\"\n [collapseOnOverflow]=\"true\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [allowCloseAll]=\"showClear && value && value.length > 0\"\n [useFloatLabel]=\"true\"\n [label]=\"label\"\n [showError]=\"showErrors\"\n (removeChip)=\"onChipRemove($event)\"\n (closedAll)=\"onChipsCloseAll()\"\n class=\"i-multi-select-chips\"\n ></i-chips>\n\n <!-- Icons overlay -->\n <div class=\"i-multi-select-icons-overlay\">\n <span class=\"i-multi-select-arrow-wrapper\">\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </span>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-multi-select-error\">\n {{ getErrorMessage() }}\n </div>\n }\n </div>\n\n @if (isOpen) {\n <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n @if (filter) {\n <div class=\"i-multi-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-multi-select-options\">\n <div\n *ngFor=\"let option of filteredOptions()\"\n class=\"i-multi-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-multi-select-checkbox\"\n ></i-checkbox>\n <span class=\"i-multi-select-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n </div>\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-multi-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;min-height:56px;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:18%;right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:6px;height:6px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
4528
|
+
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"i-multi-select-wrapper\"\n [class.i-multi-select--fluid]=\"fluid\"\n #dropdown\n >\n <!-- Input container with click handler -->\n <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n <!-- Chips component with float label -->\n <i-chips\n [chips]=\"selectedChips()\"\n [boxed]=\"true\"\n [collapseOnOverflow]=\"true\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [allowCloseAll]=\"showClear && value && value.length > 0\"\n [useFloatLabel]=\"true\"\n [label]=\"label\"\n [showError]=\"showErrors\"\n (removeChip)=\"onChipRemove($event)\"\n (closedAll)=\"onChipsCloseAll()\"\n class=\"i-multi-select-chips\"\n ></i-chips>\n\n <!-- Icons overlay -->\n <div class=\"i-multi-select-icons-overlay\">\n <span class=\"i-multi-select-arrow-wrapper\">\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </span>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-multi-select-error\">\n {{ getErrorMessage() }}\n </div>\n }\n </div>\n\n @if (isOpen) {\n <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n @if (filter) {\n <div class=\"i-multi-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-multi-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-multi-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-multi-select-checkbox\"\n ></i-checkbox>\n <span class=\"i-multi-select-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-multi-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;min-height:56px;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:18%;right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--color-text-secondary) transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:6px;height:6px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
4466
4529
|
}
|
|
4467
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4530
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IMultiSelect, decorators: [{
|
|
4468
4531
|
type: Component,
|
|
4469
|
-
args: [{ selector: 'i-multi-select', standalone: true, imports: [
|
|
4532
|
+
args: [{ selector: 'i-multi-select', standalone: true, imports: [FormsModule, IChipsComponent, ICheckbox, IInputText], providers: [
|
|
4470
4533
|
{
|
|
4471
4534
|
provide: NG_VALUE_ACCESSOR,
|
|
4472
4535
|
useExisting: forwardRef(() => IMultiSelect),
|
|
4473
4536
|
multi: true,
|
|
4474
4537
|
},
|
|
4475
|
-
], template: "<div\n class=\"i-multi-select-wrapper\"\n [class.i-multi-select--fluid]=\"fluid\"\n #dropdown\n>\n <!-- Input container with click handler -->\n <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n <!-- Chips component with float label -->\n <i-chips\n [chips]=\"selectedChips()\"\n [boxed]=\"true\"\n [collapseOnOverflow]=\"true\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [allowCloseAll]=\"showClear && value && value.length > 0\"\n [useFloatLabel]=\"true\"\n [label]=\"label\"\n [showError]=\"showErrors\"\n (removeChip)=\"onChipRemove($event)\"\n (closedAll)=\"onChipsCloseAll()\"\n class=\"i-multi-select-chips\"\n ></i-chips>\n\n <!-- Icons overlay -->\n <div class=\"i-multi-select-icons-overlay\">\n <span class=\"i-multi-select-arrow-wrapper\">\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </span>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n
|
|
4538
|
+
], template: "<div\n class=\"i-multi-select-wrapper\"\n [class.i-multi-select--fluid]=\"fluid\"\n #dropdown\n >\n <!-- Input container with click handler -->\n <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n <!-- Chips component with float label -->\n <i-chips\n [chips]=\"selectedChips()\"\n [boxed]=\"true\"\n [collapseOnOverflow]=\"true\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [allowCloseAll]=\"showClear && value && value.length > 0\"\n [useFloatLabel]=\"true\"\n [label]=\"label\"\n [showError]=\"showErrors\"\n (removeChip)=\"onChipRemove($event)\"\n (closedAll)=\"onChipsCloseAll()\"\n class=\"i-multi-select-chips\"\n ></i-chips>\n\n <!-- Icons overlay -->\n <div class=\"i-multi-select-icons-overlay\">\n <span class=\"i-multi-select-arrow-wrapper\">\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </span>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-multi-select-error\">\n {{ getErrorMessage() }}\n </div>\n }\n </div>\n\n @if (isOpen) {\n <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n @if (filter) {\n <div class=\"i-multi-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-multi-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-multi-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-multi-select-checkbox\"\n ></i-checkbox>\n <span class=\"i-multi-select-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-multi-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;min-height:56px;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:18%;right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--color-text-secondary) transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:6px;height:6px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"] }]
|
|
4476
4539
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { label: [{
|
|
4477
4540
|
type: Input
|
|
4478
|
-
}], optionLabel: [{
|
|
4541
|
+
}], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{
|
|
4479
4542
|
type: Input,
|
|
4480
4543
|
args: [{ required: true }]
|
|
4481
|
-
}], optionValue: [{
|
|
4482
|
-
type: Input
|
|
4483
4544
|
}], placeholder: [{
|
|
4484
4545
|
type: Input
|
|
4485
4546
|
}], id: [{
|
|
@@ -4517,6 +4578,248 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
4517
4578
|
args: ['document:click', ['$event']]
|
|
4518
4579
|
}] } });
|
|
4519
4580
|
|
|
4581
|
+
/**
|
|
4582
|
+
* Overlay Panel Component
|
|
4583
|
+
*
|
|
4584
|
+
* A floating panel that positions itself relative to a target element.
|
|
4585
|
+
* Supports automatic collision detection and positioning, with optional close button
|
|
4586
|
+
* and dismissable behavior.
|
|
4587
|
+
*
|
|
4588
|
+
* @example
|
|
4589
|
+
* ```html
|
|
4590
|
+
* <!-- Basic overlay panel -->
|
|
4591
|
+
* <i-button (clicked)="panel.toggle($event)">Show Panel</i-button>
|
|
4592
|
+
* <i-overlay-panel #panel>
|
|
4593
|
+
* <p>Panel content goes here</p>
|
|
4594
|
+
* </i-overlay-panel>
|
|
4595
|
+
*
|
|
4596
|
+
* <!-- With close button and custom position -->
|
|
4597
|
+
* <i-button (clicked)="panel2.toggle($event)">Show Panel</i-button>
|
|
4598
|
+
* <i-overlay-panel #panel2 [showCloseButton]="true" position="top">
|
|
4599
|
+
* <p>This panel opens above the button</p>
|
|
4600
|
+
* </i-overlay-panel>
|
|
4601
|
+
* ```
|
|
4602
|
+
*
|
|
4603
|
+
* @remarks
|
|
4604
|
+
* - Automatically positions itself to avoid viewport overflow
|
|
4605
|
+
* - Supports keyboard navigation (Escape to close)
|
|
4606
|
+
* - Click outside to dismiss (when dismissable is true)
|
|
4607
|
+
* - Includes arrow pointer to target element
|
|
4608
|
+
*/
|
|
4609
|
+
class IOverlayPanel {
|
|
4610
|
+
/**
|
|
4611
|
+
* Whether to show a close button in the top-right corner
|
|
4612
|
+
* @default false
|
|
4613
|
+
*/
|
|
4614
|
+
showCloseButton = false;
|
|
4615
|
+
/**
|
|
4616
|
+
* Whether the panel can be dismissed by clicking outside or pressing Escape
|
|
4617
|
+
* @default true
|
|
4618
|
+
*/
|
|
4619
|
+
dismissable = true;
|
|
4620
|
+
/**
|
|
4621
|
+
* Preferred position relative to the target element
|
|
4622
|
+
* Auto will choose the best position based on available space
|
|
4623
|
+
* @default auto
|
|
4624
|
+
*/
|
|
4625
|
+
position = 'auto';
|
|
4626
|
+
/**
|
|
4627
|
+
* Event emitted when visibility changes
|
|
4628
|
+
*/
|
|
4629
|
+
visibleChange = new EventEmitter();
|
|
4630
|
+
panelElement;
|
|
4631
|
+
visible = false;
|
|
4632
|
+
targetElement;
|
|
4633
|
+
documentClickListener;
|
|
4634
|
+
positionStyle = {};
|
|
4635
|
+
arrowStyle = {};
|
|
4636
|
+
arrowPosition = 'bottom';
|
|
4637
|
+
toggle(event) {
|
|
4638
|
+
if (this.visible) {
|
|
4639
|
+
this.hide();
|
|
4640
|
+
}
|
|
4641
|
+
else {
|
|
4642
|
+
this.show(event);
|
|
4643
|
+
}
|
|
4644
|
+
}
|
|
4645
|
+
show(event) {
|
|
4646
|
+
if (event) {
|
|
4647
|
+
event.preventDefault();
|
|
4648
|
+
event.stopPropagation();
|
|
4649
|
+
}
|
|
4650
|
+
this.targetElement = (event.target || event.currentTarget);
|
|
4651
|
+
this.visible = true;
|
|
4652
|
+
this.visibleChange.emit(this.visible);
|
|
4653
|
+
setTimeout(() => {
|
|
4654
|
+
this.align();
|
|
4655
|
+
this.bindDocumentClickListener();
|
|
4656
|
+
}, 0);
|
|
4657
|
+
}
|
|
4658
|
+
hide() {
|
|
4659
|
+
this.visible = false;
|
|
4660
|
+
this.visibleChange.emit(this.visible);
|
|
4661
|
+
this.unbindDocumentClickListener();
|
|
4662
|
+
}
|
|
4663
|
+
align() {
|
|
4664
|
+
if (!this.panelElement || !this.targetElement) {
|
|
4665
|
+
return;
|
|
4666
|
+
}
|
|
4667
|
+
const panel = this.panelElement.nativeElement;
|
|
4668
|
+
const target = this.targetElement.getBoundingClientRect();
|
|
4669
|
+
const viewport = {
|
|
4670
|
+
width: window.innerWidth,
|
|
4671
|
+
height: window.innerHeight,
|
|
4672
|
+
};
|
|
4673
|
+
const panelWidth = panel.offsetWidth;
|
|
4674
|
+
const panelHeight = panel.offsetHeight;
|
|
4675
|
+
const arrowSize = 8;
|
|
4676
|
+
let finalPosition = this.position === 'auto' ? 'bottom' : this.position;
|
|
4677
|
+
if (this.position === 'auto') {
|
|
4678
|
+
const spaceBelow = viewport.height - target.bottom;
|
|
4679
|
+
const spaceAbove = target.top;
|
|
4680
|
+
const spaceRight = viewport.width - target.right;
|
|
4681
|
+
const spaceLeft = target.left;
|
|
4682
|
+
if (spaceBelow >= panelHeight + arrowSize) {
|
|
4683
|
+
finalPosition = 'bottom';
|
|
4684
|
+
}
|
|
4685
|
+
else if (spaceAbove >= panelHeight + arrowSize) {
|
|
4686
|
+
finalPosition = 'top';
|
|
4687
|
+
}
|
|
4688
|
+
else if (spaceRight >= panelWidth + arrowSize) {
|
|
4689
|
+
finalPosition = 'right';
|
|
4690
|
+
}
|
|
4691
|
+
else if (spaceLeft >= panelWidth + arrowSize) {
|
|
4692
|
+
finalPosition = 'left';
|
|
4693
|
+
}
|
|
4694
|
+
else {
|
|
4695
|
+
finalPosition = 'bottom';
|
|
4696
|
+
}
|
|
4697
|
+
}
|
|
4698
|
+
this.arrowPosition = this.getOppositePosition(finalPosition);
|
|
4699
|
+
switch (finalPosition) {
|
|
4700
|
+
case 'bottom':
|
|
4701
|
+
this.positionStyle = {
|
|
4702
|
+
top: `${target.bottom + arrowSize + window.scrollY}px`,
|
|
4703
|
+
left: `${target.left + target.width / 2 - panelWidth / 2 + window.scrollX}px`,
|
|
4704
|
+
};
|
|
4705
|
+
this.arrowStyle = {
|
|
4706
|
+
left: '50%',
|
|
4707
|
+
transform: 'translateX(-50%)',
|
|
4708
|
+
};
|
|
4709
|
+
break;
|
|
4710
|
+
case 'top':
|
|
4711
|
+
this.positionStyle = {
|
|
4712
|
+
top: `${target.top - panelHeight - arrowSize + window.scrollY}px`,
|
|
4713
|
+
left: `${target.left + target.width / 2 - panelWidth / 2 + window.scrollX}px`,
|
|
4714
|
+
};
|
|
4715
|
+
this.arrowStyle = {
|
|
4716
|
+
left: '50%',
|
|
4717
|
+
transform: 'translateX(-50%)',
|
|
4718
|
+
};
|
|
4719
|
+
break;
|
|
4720
|
+
case 'left':
|
|
4721
|
+
this.positionStyle = {
|
|
4722
|
+
top: `${target.top + target.height / 2 - panelHeight / 2 + window.scrollY}px`,
|
|
4723
|
+
left: `${target.left - panelWidth - arrowSize + window.scrollX}px`,
|
|
4724
|
+
};
|
|
4725
|
+
this.arrowStyle = {
|
|
4726
|
+
top: '50%',
|
|
4727
|
+
transform: 'translateY(-50%)',
|
|
4728
|
+
};
|
|
4729
|
+
break;
|
|
4730
|
+
case 'right':
|
|
4731
|
+
this.positionStyle = {
|
|
4732
|
+
top: `${target.top + target.height / 2 - panelHeight / 2 + window.scrollY}px`,
|
|
4733
|
+
left: `${target.right + arrowSize + window.scrollX}px`,
|
|
4734
|
+
};
|
|
4735
|
+
this.arrowStyle = {
|
|
4736
|
+
top: '50%',
|
|
4737
|
+
transform: 'translateY(-50%)',
|
|
4738
|
+
};
|
|
4739
|
+
break;
|
|
4740
|
+
}
|
|
4741
|
+
const left = parseFloat(this.positionStyle['left']);
|
|
4742
|
+
const top = parseFloat(this.positionStyle['top']);
|
|
4743
|
+
if (left + panelWidth > viewport.width + window.scrollX) {
|
|
4744
|
+
this.positionStyle['left'] = `${viewport.width + window.scrollX - panelWidth - 10}px`;
|
|
4745
|
+
}
|
|
4746
|
+
if (left < window.scrollX) {
|
|
4747
|
+
this.positionStyle['left'] = `${window.scrollX + 10}px`;
|
|
4748
|
+
}
|
|
4749
|
+
if (top + panelHeight > viewport.height + window.scrollY) {
|
|
4750
|
+
this.positionStyle['top'] = `${viewport.height + window.scrollY - panelHeight - 10}px`;
|
|
4751
|
+
}
|
|
4752
|
+
if (top < window.scrollY) {
|
|
4753
|
+
this.positionStyle['top'] = `${window.scrollY + 10}px`;
|
|
4754
|
+
}
|
|
4755
|
+
}
|
|
4756
|
+
getOppositePosition(position) {
|
|
4757
|
+
switch (position) {
|
|
4758
|
+
case 'top':
|
|
4759
|
+
return 'bottom';
|
|
4760
|
+
case 'bottom':
|
|
4761
|
+
return 'top';
|
|
4762
|
+
case 'left':
|
|
4763
|
+
return 'right';
|
|
4764
|
+
case 'right':
|
|
4765
|
+
return 'left';
|
|
4766
|
+
}
|
|
4767
|
+
}
|
|
4768
|
+
onEscapeKey(event) {
|
|
4769
|
+
if (this.visible && this.dismissable) {
|
|
4770
|
+
this.hide();
|
|
4771
|
+
const keyboardEvent = event;
|
|
4772
|
+
if (typeof keyboardEvent.preventDefault === 'function') {
|
|
4773
|
+
keyboardEvent.preventDefault();
|
|
4774
|
+
}
|
|
4775
|
+
}
|
|
4776
|
+
}
|
|
4777
|
+
bindDocumentClickListener() {
|
|
4778
|
+
if (!this.documentClickListener && this.dismissable) {
|
|
4779
|
+
this.documentClickListener = (event) => {
|
|
4780
|
+
const target = event.target;
|
|
4781
|
+
if (!target) {
|
|
4782
|
+
return;
|
|
4783
|
+
}
|
|
4784
|
+
const panel = this.panelElement?.nativeElement;
|
|
4785
|
+
if (panel &&
|
|
4786
|
+
!panel.contains(target) &&
|
|
4787
|
+
this.targetElement &&
|
|
4788
|
+
!this.targetElement.contains(target)) {
|
|
4789
|
+
this.hide();
|
|
4790
|
+
}
|
|
4791
|
+
};
|
|
4792
|
+
document.addEventListener('click', this.documentClickListener);
|
|
4793
|
+
}
|
|
4794
|
+
}
|
|
4795
|
+
unbindDocumentClickListener() {
|
|
4796
|
+
if (this.documentClickListener) {
|
|
4797
|
+
document.removeEventListener('click', this.documentClickListener);
|
|
4798
|
+
this.documentClickListener = undefined;
|
|
4799
|
+
}
|
|
4800
|
+
}
|
|
4801
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IOverlayPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4802
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IOverlayPanel, isStandalone: true, selector: "i-overlay-panel", inputs: { showCloseButton: "showCloseButton", dismissable: "dismissable", position: "position" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "panelElement", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "@if (visible) {\n<div\n #panel\n class=\"overlay-panel\"\n [ngClass]=\"'overlay-panel-' + arrowPosition\"\n [ngStyle]=\"positionStyle\"\n role=\"dialog\"\n [attr.aria-hidden]=\"!visible\"\n>\n <div class=\"overlay-panel-content\">\n <ng-content></ng-content>\n </div>\n @if (showCloseButton) {\n <i-button\n class=\"overlay-panel-close\"\n size=\"small\"\n [icon]=\"'pi pi-times'\"\n [text]=\"true\"\n [severity]=\"'contrast'\"\n (clicked)=\"hide()\"\n ></i-button>\n }\n <div class=\"overlay-panel-arrow\" [ngStyle]=\"arrowStyle\"></div>\n</div>\n}\n", styles: [".overlay-panel{background:var(--color-component-background-secondary);border:1px solid var(--surface-border);color:var(--color-text-primary);box-shadow:0 2px 10px #0003}.overlay-panel-arrow:before{border-color:var(--surface-border)}.overlay-panel-arrow:after{border-color:var(--color-component-background-secondary)}.overlay-panel-bottom .overlay-panel-arrow:before{border-top-color:var(--surface-border)}.overlay-panel-bottom .overlay-panel-arrow:after{border-top-color:var(--color-component-background-secondary)}.overlay-panel-top .overlay-panel-arrow:before{border-bottom-color:var(--surface-border)}.overlay-panel-top .overlay-panel-arrow:after{border-bottom-color:var(--color-component-background-secondary)}.overlay-panel-right .overlay-panel-arrow:before{border-left-color:var(--surface-border)}.overlay-panel-right .overlay-panel-arrow:after{border-left-color:var(--color-component-background-secondary)}.overlay-panel-left .overlay-panel-arrow:before{border-right-color:var(--surface-border)}.overlay-panel-left .overlay-panel-arrow:after{border-right-color:var(--color-component-background-secondary)}.overlay-panel-close{color:var(--color-text-primary)}.overlay-panel-close:hover{color:var(--color-primary)}.overlay-panel{position:absolute;border-radius:6px;padding:1rem;z-index:1100;min-width:200px;animation:overlay-panel-show .2s ease-out}.overlay-panel.overlay-panel-top{transform-origin:center bottom}.overlay-panel.overlay-panel-bottom{transform-origin:center top}.overlay-panel.overlay-panel-left{transform-origin:right center}.overlay-panel.overlay-panel-right{transform-origin:left center}.overlay-panel-content{position:relative;z-index:1}.overlay-panel-close{position:absolute;top:.5rem;right:.5rem;z-index:2}.overlay-panel-arrow{position:absolute;width:16px;height:16px}.overlay-panel-arrow:before,.overlay-panel-arrow:after{content:\"\";position:absolute;width:0;height:0;border-style:solid}.overlay-panel-arrow:before{border-width:9px}.overlay-panel-arrow:after{border-width:8px}.overlay-panel-bottom .overlay-panel-arrow{bottom:-16px;left:50%;transform:translate(-50%)}.overlay-panel-bottom .overlay-panel-arrow:before{top:-9px;left:-9px;border-color:transparent transparent transparent transparent;border-bottom-width:0}.overlay-panel-bottom .overlay-panel-arrow:after{top:-8px;left:-8px;border-color:transparent transparent transparent transparent;border-bottom-width:0}.overlay-panel-top .overlay-panel-arrow{top:-16px;left:50%;transform:translate(-50%)}.overlay-panel-top .overlay-panel-arrow:before{top:7px;left:-9px;border-color:transparent transparent transparent transparent;border-top-width:0}.overlay-panel-top .overlay-panel-arrow:after{top:8px;left:-8px;border-color:transparent transparent transparent transparent;border-top-width:0}.overlay-panel-right .overlay-panel-arrow{right:-16px;top:50%;transform:translateY(-50%)}.overlay-panel-right .overlay-panel-arrow:before{left:7px;top:-9px;border-color:transparent transparent transparent transparent;border-right-width:0}.overlay-panel-right .overlay-panel-arrow:after{left:8px;top:-8px;border-color:transparent transparent transparent transparent;border-right-width:0}.overlay-panel-left .overlay-panel-arrow{left:-16px;top:50%;transform:translateY(-50%)}.overlay-panel-left .overlay-panel-arrow:before{left:-9px;top:-9px;border-color:transparent transparent transparent transparent;border-left-width:0}.overlay-panel-left .overlay-panel-arrow:after{left:-8px;top:-8px;border-color:transparent transparent transparent transparent;border-left-width:0}@keyframes overlay-panel-show{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
4803
|
+
}
|
|
4804
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IOverlayPanel, decorators: [{
|
|
4805
|
+
type: Component,
|
|
4806
|
+
args: [{ selector: 'i-overlay-panel', standalone: true, imports: [NgClass, NgStyle, IButton], template: "@if (visible) {\n<div\n #panel\n class=\"overlay-panel\"\n [ngClass]=\"'overlay-panel-' + arrowPosition\"\n [ngStyle]=\"positionStyle\"\n role=\"dialog\"\n [attr.aria-hidden]=\"!visible\"\n>\n <div class=\"overlay-panel-content\">\n <ng-content></ng-content>\n </div>\n @if (showCloseButton) {\n <i-button\n class=\"overlay-panel-close\"\n size=\"small\"\n [icon]=\"'pi pi-times'\"\n [text]=\"true\"\n [severity]=\"'contrast'\"\n (clicked)=\"hide()\"\n ></i-button>\n }\n <div class=\"overlay-panel-arrow\" [ngStyle]=\"arrowStyle\"></div>\n</div>\n}\n", styles: [".overlay-panel{background:var(--color-component-background-secondary);border:1px solid var(--surface-border);color:var(--color-text-primary);box-shadow:0 2px 10px #0003}.overlay-panel-arrow:before{border-color:var(--surface-border)}.overlay-panel-arrow:after{border-color:var(--color-component-background-secondary)}.overlay-panel-bottom .overlay-panel-arrow:before{border-top-color:var(--surface-border)}.overlay-panel-bottom .overlay-panel-arrow:after{border-top-color:var(--color-component-background-secondary)}.overlay-panel-top .overlay-panel-arrow:before{border-bottom-color:var(--surface-border)}.overlay-panel-top .overlay-panel-arrow:after{border-bottom-color:var(--color-component-background-secondary)}.overlay-panel-right .overlay-panel-arrow:before{border-left-color:var(--surface-border)}.overlay-panel-right .overlay-panel-arrow:after{border-left-color:var(--color-component-background-secondary)}.overlay-panel-left .overlay-panel-arrow:before{border-right-color:var(--surface-border)}.overlay-panel-left .overlay-panel-arrow:after{border-right-color:var(--color-component-background-secondary)}.overlay-panel-close{color:var(--color-text-primary)}.overlay-panel-close:hover{color:var(--color-primary)}.overlay-panel{position:absolute;border-radius:6px;padding:1rem;z-index:1100;min-width:200px;animation:overlay-panel-show .2s ease-out}.overlay-panel.overlay-panel-top{transform-origin:center bottom}.overlay-panel.overlay-panel-bottom{transform-origin:center top}.overlay-panel.overlay-panel-left{transform-origin:right center}.overlay-panel.overlay-panel-right{transform-origin:left center}.overlay-panel-content{position:relative;z-index:1}.overlay-panel-close{position:absolute;top:.5rem;right:.5rem;z-index:2}.overlay-panel-arrow{position:absolute;width:16px;height:16px}.overlay-panel-arrow:before,.overlay-panel-arrow:after{content:\"\";position:absolute;width:0;height:0;border-style:solid}.overlay-panel-arrow:before{border-width:9px}.overlay-panel-arrow:after{border-width:8px}.overlay-panel-bottom .overlay-panel-arrow{bottom:-16px;left:50%;transform:translate(-50%)}.overlay-panel-bottom .overlay-panel-arrow:before{top:-9px;left:-9px;border-color:transparent transparent transparent transparent;border-bottom-width:0}.overlay-panel-bottom .overlay-panel-arrow:after{top:-8px;left:-8px;border-color:transparent transparent transparent transparent;border-bottom-width:0}.overlay-panel-top .overlay-panel-arrow{top:-16px;left:50%;transform:translate(-50%)}.overlay-panel-top .overlay-panel-arrow:before{top:7px;left:-9px;border-color:transparent transparent transparent transparent;border-top-width:0}.overlay-panel-top .overlay-panel-arrow:after{top:8px;left:-8px;border-color:transparent transparent transparent transparent;border-top-width:0}.overlay-panel-right .overlay-panel-arrow{right:-16px;top:50%;transform:translateY(-50%)}.overlay-panel-right .overlay-panel-arrow:before{left:7px;top:-9px;border-color:transparent transparent transparent transparent;border-right-width:0}.overlay-panel-right .overlay-panel-arrow:after{left:8px;top:-8px;border-color:transparent transparent transparent transparent;border-right-width:0}.overlay-panel-left .overlay-panel-arrow{left:-16px;top:50%;transform:translateY(-50%)}.overlay-panel-left .overlay-panel-arrow:before{left:-9px;top:-9px;border-color:transparent transparent transparent transparent;border-left-width:0}.overlay-panel-left .overlay-panel-arrow:after{left:-8px;top:-8px;border-color:transparent transparent transparent transparent;border-left-width:0}@keyframes overlay-panel-show{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"] }]
|
|
4807
|
+
}], propDecorators: { showCloseButton: [{
|
|
4808
|
+
type: Input
|
|
4809
|
+
}], dismissable: [{
|
|
4810
|
+
type: Input
|
|
4811
|
+
}], position: [{
|
|
4812
|
+
type: Input
|
|
4813
|
+
}], visibleChange: [{
|
|
4814
|
+
type: Output
|
|
4815
|
+
}], panelElement: [{
|
|
4816
|
+
type: ViewChild,
|
|
4817
|
+
args: ['panel', { static: false }]
|
|
4818
|
+
}], onEscapeKey: [{
|
|
4819
|
+
type: HostListener,
|
|
4820
|
+
args: ['document:keydown.escape', ['$event']]
|
|
4821
|
+
}] } });
|
|
4822
|
+
|
|
4520
4823
|
/**
|
|
4521
4824
|
* Panel Component
|
|
4522
4825
|
*
|
|
@@ -4590,12 +4893,12 @@ class IPanel {
|
|
|
4590
4893
|
this.collapsedChange.emit(this.collapsed);
|
|
4591
4894
|
this.onToggle.emit(this.collapsed);
|
|
4592
4895
|
}
|
|
4593
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4594
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4896
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4897
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IPanel, isStandalone: true, selector: "i-panel", inputs: { header: "header", collapsed: "collapsed", toggleable: "toggleable" }, outputs: { collapsedChange: "collapsedChange", onToggle: "onToggle" }, ngImport: i0, template: "<div\n class=\"i-panel\"\n [class.i-panel--collapsed]=\"collapsed\"\n [class.i-panel--toggleable]=\"toggleable\"\n [attr.id]=\"componentId\"\n>\n <div class=\"i-panel-header-wrap\">\n @if (toggleable) {\n <button\n class=\"i-panel-header\"\n type=\"button\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"!collapsed\"\n >\n <i\n class=\"i-panel-toggle-icon pi\"\n [class.pi-minus]=\"!collapsed\"\n [class.pi-plus]=\"collapsed\"\n aria-hidden=\"true\"\n ></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </button>\n } @if (!toggleable) {\n <div class=\"i-panel-header\">\n <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </div>\n }\n </div>\n <div\n class=\"i-panel-content-wrapper\"\n [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n >\n <div class=\"i-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:var(--surface-card)}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:var(--color-text-secondary)}.i-panel.i-panel--toggleable .i-panel-header:hover{background:var(--surface-hover)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel{border-radius:8px;overflow:visible;position:relative;padding-top:14px;min-height:48px}.i-panel .i-panel-header-wrap{position:absolute;top:0;left:0;right:0;height:0;z-index:1}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:8px;position:relative;top:0;transform:translateY(-50%);padding:4px 12px;margin-left:20px;background:var(--surface-card);-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:var(--surface-card);cursor:pointer;padding:4px 12px;font-family:inherit;color:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:1em;line-height:1;display:inline-block;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:visible;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0;overflow:hidden}.i-panel .i-panel-content{padding:16px}\n"] });
|
|
4595
4898
|
}
|
|
4596
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4899
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IPanel, decorators: [{
|
|
4597
4900
|
type: Component,
|
|
4598
|
-
args: [{ selector: 'i-panel', template: "<div\n class=\"i-panel\"\n [class.i-panel--collapsed]=\"collapsed\"\n [class.i-panel--toggleable]=\"toggleable\"\n [attr.id]=\"componentId\"\n>\n <div class=\"i-panel-header-wrap\">\n @if (toggleable) {\n <button\n class=\"i-panel-header\"\n type=\"button\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"!collapsed\"\n >\n <i\n class=\"i-panel-toggle-icon pi\"\n [class.pi-minus]=\"!collapsed\"\n [class.pi-plus]=\"collapsed\"\n aria-hidden=\"true\"\n ></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </button>\n } @if (!toggleable) {\n <div class=\"i-panel-header\">\n <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </div>\n }\n </div>\n <div\n class=\"i-panel-content-wrapper\"\n [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n >\n <div class=\"i-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:var(--surface-card)}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:var(--color-text-secondary)}.i-panel.i-panel--toggleable .i-panel-header:hover{background:var(--surface-hover)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel{border-radius:8px;overflow:visible;position:relative;padding-top:14px;min-height:48px}.i-panel .i-panel-header-wrap{position:absolute;top:0;left:0;right:0;height:0;z-index:1}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:8px;position:relative;top:0;transform:translateY(-50%);padding:4px 12px;margin-left:20px;background:var(--surface-card);-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:var(--surface-card);cursor:pointer;padding:4px 12px;font-family:inherit;color:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:1em;line-height:1;display:inline-block;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:
|
|
4901
|
+
args: [{ selector: 'i-panel', template: "<div\n class=\"i-panel\"\n [class.i-panel--collapsed]=\"collapsed\"\n [class.i-panel--toggleable]=\"toggleable\"\n [attr.id]=\"componentId\"\n>\n <div class=\"i-panel-header-wrap\">\n @if (toggleable) {\n <button\n class=\"i-panel-header\"\n type=\"button\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"!collapsed\"\n >\n <i\n class=\"i-panel-toggle-icon pi\"\n [class.pi-minus]=\"!collapsed\"\n [class.pi-plus]=\"collapsed\"\n aria-hidden=\"true\"\n ></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </button>\n } @if (!toggleable) {\n <div class=\"i-panel-header\">\n <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </div>\n }\n </div>\n <div\n class=\"i-panel-content-wrapper\"\n [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n >\n <div class=\"i-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:var(--surface-card)}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:var(--color-text-secondary)}.i-panel.i-panel--toggleable .i-panel-header:hover{background:var(--surface-hover)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel{border-radius:8px;overflow:visible;position:relative;padding-top:14px;min-height:48px}.i-panel .i-panel-header-wrap{position:absolute;top:0;left:0;right:0;height:0;z-index:1}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:8px;position:relative;top:0;transform:translateY(-50%);padding:4px 12px;margin-left:20px;background:var(--surface-card);-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:var(--surface-card);cursor:pointer;padding:4px 12px;font-family:inherit;color:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:1em;line-height:1;display:inline-block;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:visible;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0;overflow:hidden}.i-panel .i-panel-content{padding:16px}\n"] }]
|
|
4599
4902
|
}], propDecorators: { header: [{
|
|
4600
4903
|
type: Input
|
|
4601
4904
|
}], collapsed: [{
|
|
@@ -4608,82 +4911,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
4608
4911
|
type: Output
|
|
4609
4912
|
}] } });
|
|
4610
4913
|
|
|
4611
|
-
/**
|
|
4612
|
-
* Placeholder Component
|
|
4613
|
-
*
|
|
4614
|
-
* Displays a centered placeholder area with an optional arrow icon and custom content.
|
|
4615
|
-
* Useful for empty selection states, drop zones, or instructional placeholders.
|
|
4616
|
-
*
|
|
4617
|
-
* @example
|
|
4618
|
-
* ```html
|
|
4619
|
-
* <!-- Basic placeholder with left arrow -->
|
|
4620
|
-
* <i-placeholder arrowDirection="left">
|
|
4621
|
-
* Select an item from the list
|
|
4622
|
-
* </i-placeholder>
|
|
4623
|
-
*
|
|
4624
|
-
* <!-- Placeholder with no icon -->
|
|
4625
|
-
* <i-placeholder arrowDirection="none">
|
|
4626
|
-
* <h3>No items found</h3>
|
|
4627
|
-
* <p>Try adjusting your search criteria</p>
|
|
4628
|
-
* </i-placeholder>
|
|
4629
|
-
*
|
|
4630
|
-
* <!-- Placeholder with custom icon -->
|
|
4631
|
-
* <i-placeholder [customIcon]="'pi pi-inbox'">
|
|
4632
|
-
* Your inbox is empty
|
|
4633
|
-
* </i-placeholder>
|
|
4634
|
-
* ```
|
|
4635
|
-
*/
|
|
4636
|
-
class IPlaceholder {
|
|
4637
|
-
/**
|
|
4638
|
-
* Direction of the arrow icon.
|
|
4639
|
-
* Use 'none' to hide the icon completely.
|
|
4640
|
-
* @default 'left'
|
|
4641
|
-
*/
|
|
4642
|
-
arrowDirection = 'left';
|
|
4643
|
-
/**
|
|
4644
|
-
* Custom icon class to use instead of an arrow.
|
|
4645
|
-
* When set, this overrides arrowDirection.
|
|
4646
|
-
* @example 'pi pi-inbox', 'pi pi-search'
|
|
4647
|
-
*/
|
|
4648
|
-
customIcon = null;
|
|
4649
|
-
/**
|
|
4650
|
-
* Whether to show a subtle background pattern
|
|
4651
|
-
* @default false
|
|
4652
|
-
*/
|
|
4653
|
-
showPattern = false;
|
|
4654
|
-
/**
|
|
4655
|
-
* Gets the icon class based on configuration
|
|
4656
|
-
*/
|
|
4657
|
-
get iconClass() {
|
|
4658
|
-
if (this.customIcon) {
|
|
4659
|
-
return this.customIcon;
|
|
4660
|
-
}
|
|
4661
|
-
if (this.arrowDirection === 'none') {
|
|
4662
|
-
return null;
|
|
4663
|
-
}
|
|
4664
|
-
const arrowMap = {
|
|
4665
|
-
left: 'pi pi-arrow-left',
|
|
4666
|
-
right: 'pi pi-arrow-right',
|
|
4667
|
-
up: 'pi pi-arrow-up',
|
|
4668
|
-
down: 'pi pi-arrow-down',
|
|
4669
|
-
none: '',
|
|
4670
|
-
};
|
|
4671
|
-
return arrowMap[this.arrowDirection];
|
|
4672
|
-
}
|
|
4673
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: IPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4674
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: IPlaceholder, isStandalone: true, selector: "i-placeholder", inputs: { arrowDirection: "arrowDirection", customIcon: "customIcon", showPattern: "showPattern" }, ngImport: i0, template: "<div class=\"i-placeholder\" [class.has-pattern]=\"showPattern\">\n <div class=\"i-placeholder-content\">\n @if (iconClass) {\n <i [class]=\"iconClass\"></i>\n }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".i-placeholder{background:var(--surface-card);border-radius:8px;border:2px dashed var(--surface-border);animation:placeholderFadeIn .3s ease;min-height:200px}.i-placeholder.has-pattern{background-image:radial-gradient(circle,var(--surface-border) 1px,transparent 1px);background-size:20px 20px}.i-placeholder-content{color:var(--color-text-secondary)}.i-placeholder-content i{color:var(--color-primary);opacity:.3}.i-placeholder{height:100%;display:flex;align-items:center;justify-content:center;max-width:100%;transition:none;animation:none}.i-placeholder .i-placeholder-content{text-align:center;max-width:400px;padding:2rem;transition:none;animation:none}.i-placeholder .i-placeholder-content i{font-size:4rem;margin-bottom:1.5rem;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
4675
|
-
}
|
|
4676
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: IPlaceholder, decorators: [{
|
|
4677
|
-
type: Component,
|
|
4678
|
-
args: [{ selector: 'i-placeholder', standalone: true, imports: [CommonModule], template: "<div class=\"i-placeholder\" [class.has-pattern]=\"showPattern\">\n <div class=\"i-placeholder-content\">\n @if (iconClass) {\n <i [class]=\"iconClass\"></i>\n }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".i-placeholder{background:var(--surface-card);border-radius:8px;border:2px dashed var(--surface-border);animation:placeholderFadeIn .3s ease;min-height:200px}.i-placeholder.has-pattern{background-image:radial-gradient(circle,var(--surface-border) 1px,transparent 1px);background-size:20px 20px}.i-placeholder-content{color:var(--color-text-secondary)}.i-placeholder-content i{color:var(--color-primary);opacity:.3}.i-placeholder{height:100%;display:flex;align-items:center;justify-content:center;max-width:100%;transition:none;animation:none}.i-placeholder .i-placeholder-content{text-align:center;max-width:400px;padding:2rem;transition:none;animation:none}.i-placeholder .i-placeholder-content i{font-size:4rem;margin-bottom:1.5rem;display:block}\n"] }]
|
|
4679
|
-
}], propDecorators: { arrowDirection: [{
|
|
4680
|
-
type: Input
|
|
4681
|
-
}], customIcon: [{
|
|
4682
|
-
type: Input
|
|
4683
|
-
}], showPattern: [{
|
|
4684
|
-
type: Input
|
|
4685
|
-
}] } });
|
|
4686
|
-
|
|
4687
4914
|
/**
|
|
4688
4915
|
* Select Component
|
|
4689
4916
|
*
|
|
@@ -4697,7 +4924,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
4697
4924
|
* label="Country"
|
|
4698
4925
|
* [options]="countries"
|
|
4699
4926
|
* optionLabel="name"
|
|
4700
|
-
* optionValue="code"
|
|
4701
4927
|
* formControlName="country">
|
|
4702
4928
|
* </i-select>
|
|
4703
4929
|
*
|
|
@@ -4716,7 +4942,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
4716
4942
|
* label="Category"
|
|
4717
4943
|
* [options]="categories"
|
|
4718
4944
|
* optionLabel="label"
|
|
4719
|
-
* optionValue="value"
|
|
4720
4945
|
* [showClear]="true"
|
|
4721
4946
|
* (onClear)="handleClear()"
|
|
4722
4947
|
* formControlName="category">
|
|
@@ -4751,10 +4976,6 @@ class ISelect {
|
|
|
4751
4976
|
* Property name to use as the display label for options
|
|
4752
4977
|
*/
|
|
4753
4978
|
optionLabel;
|
|
4754
|
-
/**
|
|
4755
|
-
* Property name to use as the value for options (if not set, entire object is used)
|
|
4756
|
-
*/
|
|
4757
|
-
optionValue;
|
|
4758
4979
|
/**
|
|
4759
4980
|
* Placeholder text when no option is selected
|
|
4760
4981
|
* @default 'Select an option'
|
|
@@ -4963,10 +5184,7 @@ class ISelect {
|
|
|
4963
5184
|
* @internal
|
|
4964
5185
|
*/
|
|
4965
5186
|
getOptionValue(option) {
|
|
4966
|
-
|
|
4967
|
-
return option;
|
|
4968
|
-
}
|
|
4969
|
-
return option[this.optionValue] || option['value'] || String(option);
|
|
5187
|
+
return option;
|
|
4970
5188
|
}
|
|
4971
5189
|
/**
|
|
4972
5190
|
* Checks if an option is currently selected
|
|
@@ -4976,12 +5194,7 @@ class ISelect {
|
|
|
4976
5194
|
if (this.value === null || this.value === undefined) {
|
|
4977
5195
|
return false;
|
|
4978
5196
|
}
|
|
4979
|
-
|
|
4980
|
-
return JSON.stringify(option) === JSON.stringify(this.value);
|
|
4981
|
-
}
|
|
4982
|
-
else {
|
|
4983
|
-
return this.getOptionValue(option) === this.value;
|
|
4984
|
-
}
|
|
5197
|
+
return JSON.stringify(option) === JSON.stringify(this.value);
|
|
4985
5198
|
}
|
|
4986
5199
|
/**
|
|
4987
5200
|
* Gets the searchable value for filtering
|
|
@@ -5098,31 +5311,29 @@ class ISelect {
|
|
|
5098
5311
|
: 'Invalid selection';
|
|
5099
5312
|
}
|
|
5100
5313
|
}
|
|
5101
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5102
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5314
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ISelect, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
5315
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ISelect, isStandalone: true, selector: "i-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, useFloatLabel: { classPropertyName: "useFloatLabel", publicName: "useFloatLabel", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClear: "onClear" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
5103
5316
|
{
|
|
5104
5317
|
provide: NG_VALUE_ACCESSOR,
|
|
5105
5318
|
useExisting: forwardRef(() => ISelect),
|
|
5106
5319
|
multi: true,
|
|
5107
5320
|
},
|
|
5108
|
-
], 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
|
|
5321
|
+
], 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:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.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"] }] });
|
|
5109
5322
|
}
|
|
5110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ISelect, decorators: [{
|
|
5111
5324
|
type: Component,
|
|
5112
|
-
args: [{ selector: 'i-select', standalone: true, imports: [
|
|
5325
|
+
args: [{ selector: 'i-select', standalone: true, imports: [FormsModule, IInputText], providers: [
|
|
5113
5326
|
{
|
|
5114
5327
|
provide: NG_VALUE_ACCESSOR,
|
|
5115
5328
|
useExisting: forwardRef(() => ISelect),
|
|
5116
5329
|
multi: true,
|
|
5117
5330
|
},
|
|
5118
|
-
], 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
|
|
5331
|
+
], 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:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.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"] }]
|
|
5119
5332
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { label: [{
|
|
5120
5333
|
type: Input
|
|
5121
|
-
}], optionLabel: [{
|
|
5334
|
+
}], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{
|
|
5122
5335
|
type: Input,
|
|
5123
5336
|
args: [{ required: true }]
|
|
5124
|
-
}], optionValue: [{
|
|
5125
|
-
type: Input
|
|
5126
5337
|
}], placeholder: [{
|
|
5127
5338
|
type: Input
|
|
5128
5339
|
}], useFloatLabel: [{
|
|
@@ -5201,14 +5412,14 @@ class ITabPanel {
|
|
|
5201
5412
|
* @internal
|
|
5202
5413
|
*/
|
|
5203
5414
|
contentTemplate;
|
|
5204
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5205
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5415
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5416
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: ITabPanel, isStandalone: true, selector: "i-tab-panel", inputs: { header: "header", icon: "icon", disabled: "disabled", closable: "closable" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: `
|
|
5206
5417
|
<ng-template #contentTemplate>
|
|
5207
5418
|
<ng-content></ng-content>
|
|
5208
5419
|
</ng-template>
|
|
5209
5420
|
`, isInline: true });
|
|
5210
5421
|
}
|
|
5211
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5422
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITabPanel, decorators: [{
|
|
5212
5423
|
type: Component,
|
|
5213
5424
|
args: [{
|
|
5214
5425
|
selector: 'i-tab-panel',
|
|
@@ -5403,10 +5614,10 @@ class ITabs {
|
|
|
5403
5614
|
const tabElement = document.getElementById(`${this.componentId}-tab-${index}`);
|
|
5404
5615
|
tabElement?.focus();
|
|
5405
5616
|
}
|
|
5406
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5407
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5617
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5618
|
+
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:#9e9e9e;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:thin}.i-tabs .i-tabs__header::-webkit-scrollbar{height:4px}.i-tabs .i-tabs__header::-webkit-scrollbar-thumb{border-radius:4px}.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"] }] });
|
|
5408
5619
|
}
|
|
5409
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5620
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITabs, decorators: [{
|
|
5410
5621
|
type: Component,
|
|
5411
5622
|
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:#9e9e9e;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:thin}.i-tabs .i-tabs__header::-webkit-scrollbar{height:4px}.i-tabs .i-tabs__header::-webkit-scrollbar-thumb{border-radius:4px}.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"] }]
|
|
5412
5623
|
}], propDecorators: { activeIndex: [{
|
|
@@ -5906,12 +6117,12 @@ class ITreeView {
|
|
|
5906
6117
|
this.selectAllChecked =
|
|
5907
6118
|
allNodes.length > 0 && selectedNodes.length === allNodes.length;
|
|
5908
6119
|
}
|
|
5909
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5910
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: ITreeView, isStandalone: true, selector: "i-tree-view", inputs: { value: "value", selectionMode: "selectionMode", selection: "selection", scrollHeight: "scrollHeight", loading: "loading", emptyMessage: "emptyMessage", togglerTemplate: "togglerTemplate", filter: "filter", filterBy: "filterBy", filterMode: "filterMode", filterPlaceholder: "filterPlaceholder", filteredNodes: "filteredNodes", validateDrop: "validateDrop", propagateSelectionUp: "propagateSelectionUp", propagateSelectionDown: "propagateSelectionDown", selectAll: "selectAll" }, outputs: { onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [(ngModel)]=\"filterValue\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n (input)=\"onFilterKeyup($event)\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n } @if (selectAll && selectionMode === 'checkbox') {\n <div class=\"i-tree-view-select-all-container\">\n <div class=\"select-box\">\n <i-checkbox\n [(ngModel)]=\"selectAllChecked\"\n [id]=\"componentId + '-select-all'\"\n [label]=\"'Select All'\"\n (ngModelChange)=\"onSelectAllChange()\"\n />\n </div>\n </div>\n }\n\n <div class=\"i-tree-view-container\">\n @if (loading) {\n <div class=\"i-tree-view-loading\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n <span>Loading...</span>\n </div>\n } @else if (filteredValue.length === 0) {\n <div class=\"i-tree-view-empty\">\n <span>{{ emptyMessage }}</span>\n </div>\n } @else {\n <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n @for (node of filteredValue; track node.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n <div\n class=\"i-tree-view-node\"\n [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n [class.i-tree-view-node--expanded]=\"node.expanded\"\n [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n [class.i-tree-view-node--temporary-highlight]=\"\n isTemporarilyHighlighted(node)\n \"\n [class]=\"node.styleClass\"\n [style.padding-left.rem]=\"level * 1\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n [attr.aria-selected]=\"isSelected(node)\"\n [attr.aria-level]=\"level + 1\"\n tabindex=\"0\"\n (click)=\"onNodeClick($event, node)\"\n (keydown.enter)=\"onNodeClick($event, node)\"\n (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n >\n <div class=\"i-tree-view-node-content\">\n @if (hasChildren(node)) {\n <button\n type=\"button\"\n class=\"i-tree-view-toggler\"\n (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <i [class]=\"getToggleIcon(node)\"></i>\n </button>\n } @else {\n <span class=\"i-tree-view-toggler-spacer\"></span>\n } @if (selectionMode === 'checkbox') {\n <div class=\"i-tree-view-checkbox-container\">\n <i-checkbox\n [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n [indeterminate]=\"isPartiallySelected(node)\"\n (onChange)=\"onCheckboxChange($event, node)\"\n [id]=\"getCheckboxId(node)\"\n size=\"small\"\n tabindex=\"-1\"\n >\n </i-checkbox>\n </div>\n }\n\n <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n </div>\n </div>\n\n @if (hasChildren(node) && node.expanded) {\n <ul class=\"i-tree-view-children\" role=\"group\">\n @for (child of node.children; track child.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--surface-ground);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 0 0 8px;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;border-bottom:1px solid var(--border-color, #e0e0e0);flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:6px;height:6px}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:1em}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{font-size:16px}.i-tree-view-wrapper .i-tree-view-empty{display:flex;align-items:center;justify-content:center;padding:20px;font-size:1em;font-style:italic}.i-tree-view-root,.i-tree-view-children{list-style:none;margin:0;padding:0}.i-tree-view-children{padding-left:0}.i-tree-view-node{position:relative;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.i-tree-view-node:focus{outline:none}.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{animation:highlight-fade .7s ease-out}.i-tree-view-node .i-tree-view-node-content{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:all .15s ease;min-height:32px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;border-radius:2px;transition:all .15s ease}.i-tree-view-node .i-tree-view-toggler:focus{outline:none}.i-tree-view-node .i-tree-view-toggler i{font-size:12px;transition:transform .15s ease}.i-tree-view-node .i-tree-view-toggler-spacer{width:20px;height:20px;flex-shrink:0}.i-tree-view-node .i-tree-view-checkbox-container{display:flex;align-items:center;flex-shrink:0}.i-tree-view-node .i-tree-view-node-icon{font-size:1em;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:1em;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
6120
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITreeView, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6121
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITreeView, isStandalone: true, selector: "i-tree-view", inputs: { value: "value", selectionMode: "selectionMode", selection: "selection", scrollHeight: "scrollHeight", loading: "loading", emptyMessage: "emptyMessage", togglerTemplate: "togglerTemplate", filter: "filter", filterBy: "filterBy", filterMode: "filterMode", filterPlaceholder: "filterPlaceholder", filteredNodes: "filteredNodes", validateDrop: "validateDrop", propagateSelectionUp: "propagateSelectionUp", propagateSelectionDown: "propagateSelectionDown", selectAll: "selectAll" }, outputs: { onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [(ngModel)]=\"filterValue\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n (input)=\"onFilterKeyup($event)\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n } @if (selectAll && selectionMode === 'checkbox') {\n <div class=\"i-tree-view-select-all-container\">\n <div class=\"select-box\">\n <i-checkbox\n [(ngModel)]=\"selectAllChecked\"\n [id]=\"componentId + '-select-all'\"\n [label]=\"'Select All'\"\n (ngModelChange)=\"onSelectAllChange()\"\n />\n </div>\n </div>\n }\n\n <div class=\"i-tree-view-container\">\n @if (loading) {\n <div class=\"i-tree-view-loading\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n <span>Loading...</span>\n </div>\n } @else if (filteredValue.length === 0) {\n <div class=\"i-tree-view-empty\">\n <span>{{ emptyMessage }}</span>\n </div>\n } @else {\n <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n @for (node of filteredValue; track node.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n <div\n class=\"i-tree-view-node\"\n [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n [class.i-tree-view-node--expanded]=\"node.expanded\"\n [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n [class.i-tree-view-node--temporary-highlight]=\"\n isTemporarilyHighlighted(node)\n \"\n [class]=\"node.styleClass\"\n [style.padding-left.rem]=\"level * 1\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n [attr.aria-selected]=\"isSelected(node)\"\n [attr.aria-level]=\"level + 1\"\n tabindex=\"0\"\n (click)=\"onNodeClick($event, node)\"\n (keydown.enter)=\"onNodeClick($event, node)\"\n (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n >\n <div class=\"i-tree-view-node-content\">\n @if (hasChildren(node)) {\n <button\n type=\"button\"\n class=\"i-tree-view-toggler\"\n (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <i [class]=\"getToggleIcon(node)\"></i>\n </button>\n } @else {\n <span class=\"i-tree-view-toggler-spacer\"></span>\n } @if (selectionMode === 'checkbox') {\n <div class=\"i-tree-view-checkbox-container\">\n <i-checkbox\n [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n [indeterminate]=\"isPartiallySelected(node)\"\n (onChange)=\"onCheckboxChange($event, node)\"\n [id]=\"getCheckboxId(node)\"\n size=\"small\"\n tabindex=\"-1\"\n >\n </i-checkbox>\n </div>\n }\n\n <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n </div>\n </div>\n\n @if (hasChildren(node) && node.expanded) {\n <ul class=\"i-tree-view-children\" role=\"group\">\n @for (child of node.children; track child.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--surface-ground);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 0 0 8px;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;border-bottom:1px solid var(--border-color, #e0e0e0);flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--color-text-secondary) transparent}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:6px;height:6px}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:1em}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{font-size:16px}.i-tree-view-wrapper .i-tree-view-empty{display:flex;align-items:center;justify-content:center;padding:20px;font-size:1em;font-style:italic}.i-tree-view-root,.i-tree-view-children{list-style:none;margin:0;padding:0}.i-tree-view-children{padding-left:0}.i-tree-view-node{position:relative;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.i-tree-view-node:focus{outline:none}.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{animation:highlight-fade .7s ease-out}.i-tree-view-node .i-tree-view-node-content{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:all .15s ease;min-height:32px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;border-radius:2px;transition:all .15s ease}.i-tree-view-node .i-tree-view-toggler:focus{outline:none}.i-tree-view-node .i-tree-view-toggler i{font-size:12px;transition:transform .15s ease}.i-tree-view-node .i-tree-view-toggler-spacer{width:20px;height:20px;flex-shrink:0}.i-tree-view-node .i-tree-view-checkbox-container{display:flex;align-items:center;flex-shrink:0}.i-tree-view-node .i-tree-view-node-icon{font-size:1em;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:1em;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
5911
6122
|
}
|
|
5912
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITreeView, decorators: [{
|
|
5913
6124
|
type: Component,
|
|
5914
|
-
args: [{ selector: 'i-tree-view', standalone: true, imports: [CommonModule, FormsModule, ICheckbox, IInputText], template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [(ngModel)]=\"filterValue\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n (input)=\"onFilterKeyup($event)\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n } @if (selectAll && selectionMode === 'checkbox') {\n <div class=\"i-tree-view-select-all-container\">\n <div class=\"select-box\">\n <i-checkbox\n [(ngModel)]=\"selectAllChecked\"\n [id]=\"componentId + '-select-all'\"\n [label]=\"'Select All'\"\n (ngModelChange)=\"onSelectAllChange()\"\n />\n </div>\n </div>\n }\n\n <div class=\"i-tree-view-container\">\n @if (loading) {\n <div class=\"i-tree-view-loading\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n <span>Loading...</span>\n </div>\n } @else if (filteredValue.length === 0) {\n <div class=\"i-tree-view-empty\">\n <span>{{ emptyMessage }}</span>\n </div>\n } @else {\n <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n @for (node of filteredValue; track node.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n <div\n class=\"i-tree-view-node\"\n [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n [class.i-tree-view-node--expanded]=\"node.expanded\"\n [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n [class.i-tree-view-node--temporary-highlight]=\"\n isTemporarilyHighlighted(node)\n \"\n [class]=\"node.styleClass\"\n [style.padding-left.rem]=\"level * 1\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n [attr.aria-selected]=\"isSelected(node)\"\n [attr.aria-level]=\"level + 1\"\n tabindex=\"0\"\n (click)=\"onNodeClick($event, node)\"\n (keydown.enter)=\"onNodeClick($event, node)\"\n (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n >\n <div class=\"i-tree-view-node-content\">\n @if (hasChildren(node)) {\n <button\n type=\"button\"\n class=\"i-tree-view-toggler\"\n (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <i [class]=\"getToggleIcon(node)\"></i>\n </button>\n } @else {\n <span class=\"i-tree-view-toggler-spacer\"></span>\n } @if (selectionMode === 'checkbox') {\n <div class=\"i-tree-view-checkbox-container\">\n <i-checkbox\n [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n [indeterminate]=\"isPartiallySelected(node)\"\n (onChange)=\"onCheckboxChange($event, node)\"\n [id]=\"getCheckboxId(node)\"\n size=\"small\"\n tabindex=\"-1\"\n >\n </i-checkbox>\n </div>\n }\n\n <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n </div>\n </div>\n\n @if (hasChildren(node) && node.expanded) {\n <ul class=\"i-tree-view-children\" role=\"group\">\n @for (child of node.children; track child.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--surface-ground);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 0 0 8px;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;border-bottom:1px solid var(--border-color, #e0e0e0);flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box
|
|
6125
|
+
args: [{ selector: 'i-tree-view', standalone: true, imports: [CommonModule, FormsModule, ICheckbox, IInputText], template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [(ngModel)]=\"filterValue\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n (input)=\"onFilterKeyup($event)\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n } @if (selectAll && selectionMode === 'checkbox') {\n <div class=\"i-tree-view-select-all-container\">\n <div class=\"select-box\">\n <i-checkbox\n [(ngModel)]=\"selectAllChecked\"\n [id]=\"componentId + '-select-all'\"\n [label]=\"'Select All'\"\n (ngModelChange)=\"onSelectAllChange()\"\n />\n </div>\n </div>\n }\n\n <div class=\"i-tree-view-container\">\n @if (loading) {\n <div class=\"i-tree-view-loading\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n <span>Loading...</span>\n </div>\n } @else if (filteredValue.length === 0) {\n <div class=\"i-tree-view-empty\">\n <span>{{ emptyMessage }}</span>\n </div>\n } @else {\n <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n @for (node of filteredValue; track node.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n <div\n class=\"i-tree-view-node\"\n [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n [class.i-tree-view-node--expanded]=\"node.expanded\"\n [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n [class.i-tree-view-node--temporary-highlight]=\"\n isTemporarilyHighlighted(node)\n \"\n [class]=\"node.styleClass\"\n [style.padding-left.rem]=\"level * 1\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n [attr.aria-selected]=\"isSelected(node)\"\n [attr.aria-level]=\"level + 1\"\n tabindex=\"0\"\n (click)=\"onNodeClick($event, node)\"\n (keydown.enter)=\"onNodeClick($event, node)\"\n (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n >\n <div class=\"i-tree-view-node-content\">\n @if (hasChildren(node)) {\n <button\n type=\"button\"\n class=\"i-tree-view-toggler\"\n (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <i [class]=\"getToggleIcon(node)\"></i>\n </button>\n } @else {\n <span class=\"i-tree-view-toggler-spacer\"></span>\n } @if (selectionMode === 'checkbox') {\n <div class=\"i-tree-view-checkbox-container\">\n <i-checkbox\n [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n [indeterminate]=\"isPartiallySelected(node)\"\n (onChange)=\"onCheckboxChange($event, node)\"\n [id]=\"getCheckboxId(node)\"\n size=\"small\"\n tabindex=\"-1\"\n >\n </i-checkbox>\n </div>\n }\n\n <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n </div>\n </div>\n\n @if (hasChildren(node) && node.expanded) {\n <ul class=\"i-tree-view-children\" role=\"group\">\n @for (child of node.children; track child.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--surface-ground);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 0 0 8px;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;border-bottom:1px solid var(--border-color, #e0e0e0);flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--color-text-secondary) transparent}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:6px;height:6px}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:1em}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{font-size:16px}.i-tree-view-wrapper .i-tree-view-empty{display:flex;align-items:center;justify-content:center;padding:20px;font-size:1em;font-style:italic}.i-tree-view-root,.i-tree-view-children{list-style:none;margin:0;padding:0}.i-tree-view-children{padding-left:0}.i-tree-view-node{position:relative;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.i-tree-view-node:focus{outline:none}.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{animation:highlight-fade .7s ease-out}.i-tree-view-node .i-tree-view-node-content{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:all .15s ease;min-height:32px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;border-radius:2px;transition:all .15s ease}.i-tree-view-node .i-tree-view-toggler:focus{outline:none}.i-tree-view-node .i-tree-view-toggler i{font-size:12px;transition:transform .15s ease}.i-tree-view-node .i-tree-view-toggler-spacer{width:20px;height:20px;flex-shrink:0}.i-tree-view-node .i-tree-view-checkbox-container{display:flex;align-items:center;flex-shrink:0}.i-tree-view-node .i-tree-view-node-icon{font-size:1em;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:1em;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
5915
6126
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
5916
6127
|
type: Input
|
|
5917
6128
|
}], selectionMode: [{
|
|
@@ -6177,10 +6388,10 @@ class WhisperService {
|
|
|
6177
6388
|
generateId() {
|
|
6178
6389
|
return Math.random().toString(36).substr(2, 9);
|
|
6179
6390
|
}
|
|
6180
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6181
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
6391
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WhisperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
6392
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WhisperService, providedIn: 'root' });
|
|
6182
6393
|
}
|
|
6183
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6394
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WhisperService, decorators: [{
|
|
6184
6395
|
type: Injectable,
|
|
6185
6396
|
args: [{
|
|
6186
6397
|
providedIn: 'root',
|
|
@@ -6413,12 +6624,12 @@ class IWhisper {
|
|
|
6413
6624
|
trackByMessage(index, message) {
|
|
6414
6625
|
return message.id;
|
|
6415
6626
|
}
|
|
6416
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6417
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6627
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IWhisper, deps: [{ token: WhisperService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6628
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IWhisper, isStandalone: true, selector: "i-whisper", inputs: { key: "key", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", style: "style", position: "position", preventOpenDuplicates: "preventOpenDuplicates", preventDuplicates: "preventDuplicates" }, ngImport: i0, template: "@if (messages && messages.length > 0) {\n <div\n [ngClass]=\"getContainerClass()\"\n [ngStyle]=\"style\"\n [attr.id]=\"componentId\"\n >\n @for (message of messages; track trackByMessage($index, message)) {\n <div\n [ngClass]=\"getMessageClass(message)\"\n [attr.data-whisper-key]=\"message.key\"\n [attr.aria-live]=\"'polite'\"\n [attr.aria-atomic]=\"'true'\"\n role=\"alert\"\n >\n <div class=\"i-whisper-message-content\">\n <div class=\"i-whisper-message-icon\">\n <i [ngClass]=\"['pi', getMessageIcon(message.severity)]\"> </i>\n </div>\n <div class=\"i-whisper-message-text\">\n @if (message.summary) {\n <div class=\"i-whisper-message-summary\">\n {{ message.summary }}\n </div>\n }\n @if (message.detail) {\n <div class=\"i-whisper-message-detail\">\n {{ message.detail }}\n </div>\n }\n </div>\n @if (message.closable === true) {\n <i-button\n [severity]=\"message.severity\"\n size=\"small\"\n [text]=\"true\"\n icon=\"pi pi-times\"\n (click)=\"onClose(message)\"\n [attr.aria-label]=\"'Close'\"\n />\n }\n </div>\n </div>\n }\n </div>\n }\n", styles: [".i-whisper-message{background:var(--surface-section);color:var(--color-text-primary);border-left:4px solid transparent}.i-whisper-message .i-whisper-message-close{color:var(--color-text-secondary)}.i-whisper-message .i-whisper-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-whisper-message.i-whisper-message-success{border-left-color:var(--color-success)}.i-whisper-message.i-whisper-message-success .i-whisper-message-icon{color:var(--color-success)}.i-whisper-message.i-whisper-message-info{border-left-color:var(--color-info)}.i-whisper-message.i-whisper-message-info .i-whisper-message-icon{color:var(--color-info)}.i-whisper-message.i-whisper-message-warning{border-left-color:var(--color-warning)}.i-whisper-message.i-whisper-message-warning .i-whisper-message-icon{color:var(--color-warning)}.i-whisper-message.i-whisper-message-danger{border-left-color:var(--color-danger)}.i-whisper-message.i-whisper-message-danger .i-whisper-message-icon{color:var(--color-danger)}.i-whisper-message.i-whisper-message-primary{border-left-color:var(--color-primary)}.i-whisper-message.i-whisper-message-primary .i-whisper-message-icon{color:var(--color-primary)}.i-whisper-message.i-whisper-message-secondary{border-left-color:var(--color-secondary)}.i-whisper-message.i-whisper-message-secondary .i-whisper-message-icon{color:var(--color-secondary)}.i-whisper-message.i-whisper-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-tertiary .i-whisper-message-icon{color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-contrast{border-left-color:var(--color-contrast)}.i-whisper-message.i-whisper-message-contrast .i-whisper-message-icon{color:var(--color-contrast)}.i-whisper{position:fixed;z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:8px;max-width:400px;min-width:300px}.i-whisper.i-whisper-top-left{top:20px;left:20px}.i-whisper.i-whisper-top-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-top-center{top:20px;left:50%;transform:translate(-50%)}.i-whisper.i-whisper-top-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-top-right{top:20px;right:20px}.i-whisper.i-whisper-top-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper.i-whisper-bottom-left{bottom:20px;left:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-bottom-center{bottom:20px;left:50%;transform:translate(-50%);flex-direction:column-reverse}.i-whisper.i-whisper-bottom-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-bottom-right{bottom:20px;right:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper .i-whisper-message{pointer-events:auto;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;animation:whisperSlideIn .3s ease-out;margin-bottom:4px;min-height:56px;display:flex;align-items:center}.i-whisper .i-whisper-message .i-whisper-message-content{display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px}.i-whisper .i-whisper-message .i-whisper-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-whisper .i-whisper-message .i-whisper-message-icon i{font-size:20px}.i-whisper .i-whisper-message .i-whisper-message-text{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-whisper .i-whisper-message .i-whisper-message-summary{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-whisper .i-whisper-message .i-whisper-message-detail{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-whisper .i-whisper-message .i-whisper-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;margin-left:8px;transition:background-color .2s}.i-whisper .i-whisper-message .i-whisper-message-close:hover{background-color:#0000001a}.i-whisper .i-whisper-message .i-whisper-message-close i{font-size:18px}.i-whisper .i-whisper-message.i-whisper-message-exit{animation:whisperSlideOut .3s ease-in forwards}@keyframes whisperSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes whisperSlideOut{0%{opacity:1;transform:translate(0);max-height:200px;margin-bottom:4px}to{opacity:0;transform:translate(100%);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}}@media(max-width:768px){.i-whisper{max-width:calc(100vw - 40px);min-width:280px}.i-whisper.i-whisper-top-center,.i-whisper.i-whisper-bottom-center{left:20px;right:20px;transform:none;max-width:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6418
6629
|
}
|
|
6419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6630
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IWhisper, decorators: [{
|
|
6420
6631
|
type: Component,
|
|
6421
|
-
args: [{ selector: 'i-whisper', standalone: true, imports: [NgClass,
|
|
6632
|
+
args: [{ selector: 'i-whisper', standalone: true, imports: [NgClass, NgStyle, IButton], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (messages && messages.length > 0) {\n <div\n [ngClass]=\"getContainerClass()\"\n [ngStyle]=\"style\"\n [attr.id]=\"componentId\"\n >\n @for (message of messages; track trackByMessage($index, message)) {\n <div\n [ngClass]=\"getMessageClass(message)\"\n [attr.data-whisper-key]=\"message.key\"\n [attr.aria-live]=\"'polite'\"\n [attr.aria-atomic]=\"'true'\"\n role=\"alert\"\n >\n <div class=\"i-whisper-message-content\">\n <div class=\"i-whisper-message-icon\">\n <i [ngClass]=\"['pi', getMessageIcon(message.severity)]\"> </i>\n </div>\n <div class=\"i-whisper-message-text\">\n @if (message.summary) {\n <div class=\"i-whisper-message-summary\">\n {{ message.summary }}\n </div>\n }\n @if (message.detail) {\n <div class=\"i-whisper-message-detail\">\n {{ message.detail }}\n </div>\n }\n </div>\n @if (message.closable === true) {\n <i-button\n [severity]=\"message.severity\"\n size=\"small\"\n [text]=\"true\"\n icon=\"pi pi-times\"\n (click)=\"onClose(message)\"\n [attr.aria-label]=\"'Close'\"\n />\n }\n </div>\n </div>\n }\n </div>\n }\n", styles: [".i-whisper-message{background:var(--surface-section);color:var(--color-text-primary);border-left:4px solid transparent}.i-whisper-message .i-whisper-message-close{color:var(--color-text-secondary)}.i-whisper-message .i-whisper-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-whisper-message.i-whisper-message-success{border-left-color:var(--color-success)}.i-whisper-message.i-whisper-message-success .i-whisper-message-icon{color:var(--color-success)}.i-whisper-message.i-whisper-message-info{border-left-color:var(--color-info)}.i-whisper-message.i-whisper-message-info .i-whisper-message-icon{color:var(--color-info)}.i-whisper-message.i-whisper-message-warning{border-left-color:var(--color-warning)}.i-whisper-message.i-whisper-message-warning .i-whisper-message-icon{color:var(--color-warning)}.i-whisper-message.i-whisper-message-danger{border-left-color:var(--color-danger)}.i-whisper-message.i-whisper-message-danger .i-whisper-message-icon{color:var(--color-danger)}.i-whisper-message.i-whisper-message-primary{border-left-color:var(--color-primary)}.i-whisper-message.i-whisper-message-primary .i-whisper-message-icon{color:var(--color-primary)}.i-whisper-message.i-whisper-message-secondary{border-left-color:var(--color-secondary)}.i-whisper-message.i-whisper-message-secondary .i-whisper-message-icon{color:var(--color-secondary)}.i-whisper-message.i-whisper-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-tertiary .i-whisper-message-icon{color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-contrast{border-left-color:var(--color-contrast)}.i-whisper-message.i-whisper-message-contrast .i-whisper-message-icon{color:var(--color-contrast)}.i-whisper{position:fixed;z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:8px;max-width:400px;min-width:300px}.i-whisper.i-whisper-top-left{top:20px;left:20px}.i-whisper.i-whisper-top-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-top-center{top:20px;left:50%;transform:translate(-50%)}.i-whisper.i-whisper-top-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-top-right{top:20px;right:20px}.i-whisper.i-whisper-top-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper.i-whisper-bottom-left{bottom:20px;left:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-bottom-center{bottom:20px;left:50%;transform:translate(-50%);flex-direction:column-reverse}.i-whisper.i-whisper-bottom-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-bottom-right{bottom:20px;right:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper .i-whisper-message{pointer-events:auto;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;animation:whisperSlideIn .3s ease-out;margin-bottom:4px;min-height:56px;display:flex;align-items:center}.i-whisper .i-whisper-message .i-whisper-message-content{display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px}.i-whisper .i-whisper-message .i-whisper-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-whisper .i-whisper-message .i-whisper-message-icon i{font-size:20px}.i-whisper .i-whisper-message .i-whisper-message-text{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-whisper .i-whisper-message .i-whisper-message-summary{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-whisper .i-whisper-message .i-whisper-message-detail{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-whisper .i-whisper-message .i-whisper-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;margin-left:8px;transition:background-color .2s}.i-whisper .i-whisper-message .i-whisper-message-close:hover{background-color:#0000001a}.i-whisper .i-whisper-message .i-whisper-message-close i{font-size:18px}.i-whisper .i-whisper-message.i-whisper-message-exit{animation:whisperSlideOut .3s ease-in forwards}@keyframes whisperSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes whisperSlideOut{0%{opacity:1;transform:translate(0);max-height:200px;margin-bottom:4px}to{opacity:0;transform:translate(100%);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}}@media(max-width:768px){.i-whisper{max-width:calc(100vw - 40px);min-width:280px}.i-whisper.i-whisper-top-center,.i-whisper.i-whisper-bottom-center{left:20px;right:20px;transform:none;max-width:none}}\n"] }]
|
|
6422
6633
|
}], ctorParameters: () => [{ type: WhisperService }, { type: i0.ChangeDetectorRef }], propDecorators: { key: [{
|
|
6423
6634
|
type: Input
|
|
6424
6635
|
}], autoZIndex: [{
|
|
@@ -7315,10 +7526,10 @@ class ITable {
|
|
|
7315
7526
|
trackByColumn(index, column) {
|
|
7316
7527
|
return column.field;
|
|
7317
7528
|
}
|
|
7318
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7319
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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 }, 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()" } }, 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 } @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 [style.max-height]=\"height || scrollHeight || null\"\n >\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 } @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\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)=\"onColumnFilterInput(column.field, $event)\"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\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 } @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\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 [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></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 } @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\">({{ group.data.length }})</span>\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 } @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n } @for (column of getGroupColumns(group); track trackByColumn($index,\n column)) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n >\n {{ column.header }}\n </th>\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)) { @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-empty-state-table></i-empty-state-table>\n </td>\n </tr>\n } @else { @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 } @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 } @for (column of getGroupColumns(group); track trackByColumn($index,\n column)) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n >\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </td>\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 (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 || 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 </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-empty-state-table></i-empty-state-table>\n </td>\n </tr>\n } @else { @for (row of processedData(); track trackByRow($index, row);\n let rowIndex = $index) {\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 } @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 } @for (column of columns(); track trackByColumn($index, column)) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n >\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </td>\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 (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 </tbody>\n }\n </table>\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(--surface-section)}.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(--surface-ground)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--color-component-background);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(--surface-ground)}.i-table-wrapper table tbody tr.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--surface-section)}.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(--surface-ground)}.i-table-wrapper table tbody .i-table-group-header{background:var(--surface-section);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(--surface-ground);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{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.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:rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}:host-context([data-theme=dark]) .i-table-loading-overlay{background:#00000080}.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;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.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::-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::-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--scrollable{overflow-y:auto}.i-table-wrapper .i-table-container--scrollable thead{position:sticky;top:0;z-index:2}.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}@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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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"], outputs: ["clicked"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: EmptyStateTableComponent, selector: "i-empty-state-table", inputs: ["colorScheme"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] });
|
|
7529
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7530
|
+
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 }, 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()" } }, 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 } @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 [style.max-height]=\"height || scrollHeight || null\"\n >\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 } @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\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)=\"onColumnFilterInput(column.field, $event)\"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\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 } @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\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 [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></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 } @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\">({{ group.data.length }})</span>\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 } @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n } @for (column of getGroupColumns(group); track trackByColumn($index,\n column)) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n >\n {{ column.header }}\n </th>\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)) { @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 { @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 } @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 } @for (column of getGroupColumns(group); track trackByColumn($index,\n column)) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n >\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </td>\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 (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 || 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 </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 { @for (row of processedData(); track trackByRow($index, row);\n let rowIndex = $index) {\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 } @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 } @for (column of columns(); track trackByColumn($index, column)) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n >\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </td>\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 (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 </tbody>\n }\n </table>\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(--surface-section)}.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(--surface-ground)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--color-component-background);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(--surface-ground)}.i-table-wrapper table tbody tr.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--surface-section)}.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(--surface-ground)}.i-table-wrapper table tbody .i-table-group-header{background:var(--surface-section);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(--surface-ground);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{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.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:rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}:host-context([data-theme=dark]) .i-table-loading-overlay{background:#00000080}.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 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}@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: 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: NoContentComponent, selector: "i-no-content", inputs: ["icon", "message"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
|
|
7320
7531
|
}
|
|
7321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7532
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITable, decorators: [{
|
|
7322
7533
|
type: Component,
|
|
7323
7534
|
args: [{ selector: 'i-table', standalone: true, imports: [
|
|
7324
7535
|
CommonModule,
|
|
@@ -7326,9 +7537,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
7326
7537
|
IInputText,
|
|
7327
7538
|
IButton,
|
|
7328
7539
|
ICheckbox,
|
|
7329
|
-
|
|
7330
|
-
], 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 } @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 [style.max-height]=\"height || scrollHeight || null\"\n >\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 } @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\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)=\"onColumnFilterInput(column.field, $event)\"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\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 } @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\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 [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></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 } @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\">({{ group.data.length }})</span>\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 } @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n } @for (column of getGroupColumns(group); track trackByColumn($index,\n column)) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n >\n {{ column.header }}\n </th>\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)) { @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-empty-state-table></i-empty-state-table>\n </td>\n </tr>\n } @else { @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 } @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 } @for (column of getGroupColumns(group); track trackByColumn($index,\n column)) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n >\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </td>\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 (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 || 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 </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-empty-state-table></i-empty-state-table>\n </td>\n </tr>\n } @else { @for (row of processedData(); track trackByRow($index, row);\n let rowIndex = $index) {\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 } @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 } @for (column of columns(); track trackByColumn($index, column)) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n >\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </td>\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 (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 </tbody>\n }\n </table>\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(--surface-section)}.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(--surface-ground)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--color-component-background);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(--surface-ground)}.i-table-wrapper table tbody tr.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--surface-section)}.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(--surface-ground)}.i-table-wrapper table tbody .i-table-group-header{background:var(--surface-section);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(--surface-ground);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{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.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:rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}:host-context([data-theme=dark]) .i-table-loading-overlay{background:#00000080}.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;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.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::-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::-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--scrollable{overflow-y:auto}.i-table-wrapper .i-table-container--scrollable thead{position:sticky;top:0;z-index:2}.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}@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"] }]
|
|
7331
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { emptyMessage: [{
|
|
7540
|
+
NoContentComponent,
|
|
7541
|
+
], 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 } @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 [style.max-height]=\"height || scrollHeight || null\"\n >\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 } @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\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)=\"onColumnFilterInput(column.field, $event)\"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\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 } @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\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 [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></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 } @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\">({{ group.data.length }})</span>\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 } @if (rowExpandable) {\n <th class=\"i-table-expand-header\"></th>\n } @for (column of getGroupColumns(group); track trackByColumn($index,\n column)) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n >\n {{ column.header }}\n </th>\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)) { @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 { @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 } @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 } @for (column of getGroupColumns(group); track trackByColumn($index,\n column)) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n >\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </td>\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 (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 || 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 </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 { @for (row of processedData(); track trackByRow($index, row);\n let rowIndex = $index) {\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 } @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 } @for (column of columns(); track trackByColumn($index, column)) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n >\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </td>\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 (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 </tbody>\n }\n </table>\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(--surface-section)}.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(--surface-ground)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--color-component-background);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(--surface-ground)}.i-table-wrapper table tbody tr.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--surface-section)}.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(--surface-ground)}.i-table-wrapper table tbody .i-table-group-header{background:var(--surface-section);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(--surface-ground);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{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.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:rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}:host-context([data-theme=dark]) .i-table-loading-overlay{background:#00000080}.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 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}@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"] }]
|
|
7542
|
+
}], 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: [{
|
|
7332
7543
|
type: Input
|
|
7333
7544
|
}], sortable: [{
|
|
7334
7545
|
type: Input
|
|
@@ -8035,12 +8246,12 @@ class IChart {
|
|
|
8035
8246
|
getChartInstanceCount() {
|
|
8036
8247
|
return this.chartInstances.length;
|
|
8037
8248
|
}
|
|
8038
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8039
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8249
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8250
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IChart, isStandalone: true, selector: "i-chart", inputs: { charts: "charts", height: "height", responsive: "responsive" }, viewQueries: [{ propertyName: "canvasElements", predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"i-charts-container\">\n @for (chartDisplay of chartDisplays; track chartDisplay) {\n <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n <canvas #chartCanvas></canvas>\n </div>\n }\n</div>\n", styles: [".i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-item{flex:1 1 45%;min-width:300px;box-sizing:border-box}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-item{width:100%}}\n"] });
|
|
8040
8251
|
}
|
|
8041
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IChart, decorators: [{
|
|
8042
8253
|
type: Component,
|
|
8043
|
-
args: [{ selector: 'i-chart', standalone: true, imports: [], template: "<div class=\"i-charts-container\">\n @for (chartDisplay of chartDisplays; track chartDisplay) {\n <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n <canvas #chartCanvas></canvas>\n </div>\n }\n</div>\n", styles: [".i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-item{flex:1 1 45%;min-width:300px;box-sizing:border-box}@media
|
|
8254
|
+
args: [{ selector: 'i-chart', standalone: true, imports: [], template: "<div class=\"i-charts-container\">\n @for (chartDisplay of chartDisplays; track chartDisplay) {\n <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n <canvas #chartCanvas></canvas>\n </div>\n }\n</div>\n", styles: [".i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-item{flex:1 1 45%;min-width:300px;box-sizing:border-box}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-item{width:100%}}\n"] }]
|
|
8044
8255
|
}], propDecorators: { charts: [{
|
|
8045
8256
|
type: Input
|
|
8046
8257
|
}], height: [{
|
|
@@ -8102,10 +8313,10 @@ class DataUpdateEventService {
|
|
|
8102
8313
|
notifyDataUpdated() {
|
|
8103
8314
|
this.dataUpdatedSource.next();
|
|
8104
8315
|
}
|
|
8105
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8106
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
8316
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataUpdateEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
8317
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataUpdateEventService, providedIn: 'root' });
|
|
8107
8318
|
}
|
|
8108
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataUpdateEventService, decorators: [{
|
|
8109
8320
|
type: Injectable,
|
|
8110
8321
|
args: [{
|
|
8111
8322
|
providedIn: 'root',
|
|
@@ -8253,13 +8464,13 @@ class SeoService {
|
|
|
8253
8464
|
removeTag(attrSelector) {
|
|
8254
8465
|
this.meta.removeTag(attrSelector);
|
|
8255
8466
|
}
|
|
8256
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8257
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
8467
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SeoService, deps: [{ token: i1$2.Meta }, { token: i1$2.Title }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
8468
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SeoService, providedIn: 'root' });
|
|
8258
8469
|
}
|
|
8259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8470
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SeoService, decorators: [{
|
|
8260
8471
|
type: Injectable,
|
|
8261
8472
|
args: [{ providedIn: 'root' }]
|
|
8262
|
-
}], ctorParameters: () => [{ type: i1$
|
|
8473
|
+
}], ctorParameters: () => [{ type: i1$2.Meta }, { type: i1$2.Title }] });
|
|
8263
8474
|
|
|
8264
8475
|
/**
|
|
8265
8476
|
* Service for managing structured data (JSON-LD) for SEO.
|
|
@@ -8453,10 +8664,10 @@ class StructuredDataService {
|
|
|
8453
8664
|
}
|
|
8454
8665
|
return schema;
|
|
8455
8666
|
}
|
|
8456
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8457
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
8667
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StructuredDataService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
8668
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StructuredDataService, providedIn: 'root' });
|
|
8458
8669
|
}
|
|
8459
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8670
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StructuredDataService, decorators: [{
|
|
8460
8671
|
type: Injectable,
|
|
8461
8672
|
args: [{ providedIn: 'root' }]
|
|
8462
8673
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
@@ -8510,5 +8721,5 @@ var zindexutils = ZIndexUtils();
|
|
|
8510
8721
|
* Generated bundle index. Do not edit.
|
|
8511
8722
|
*/
|
|
8512
8723
|
|
|
8513
|
-
export { AbstractDialog, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent,
|
|
8724
|
+
export { AbstractDialog, 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, LocalStorageThemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId };
|
|
8514
8725
|
//# sourceMappingURL=integra-ng.mjs.map
|