invensys-ng 22.1.7 → 22.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/invensys-ng.mjs +269 -159
- package/fesm2022/invensys-ng.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/themes/_native-select.scss +34 -9
- package/src/lib/themes/_option-field.scss +183 -40
- package/src/lib/themes/body.theme.scss +2 -2
- package/src/lib/themes/color-palette.scss +13 -13
- package/src/lib/themes/color-variables.scss +2 -3
- package/src/lib/themes/colors.theme.scss +25 -25
- package/src/lib/themes/get-color.scss +2 -2
- package/src/lib/themes/scrollbar-mixins.scss +2 -5
- package/src/lib/themes/theme.scss +4 -4
- package/src/lib/themes/typography.theme.scss +7 -7
- package/src/lib/themes/whisper-layout.scss +3 -1
- package/types/invensys-ng.d.ts +35 -6
package/fesm2022/invensys-ng.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
-
import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Directive, ElementRef, EnvironmentInjector, EventEmitter, HostBinding, HostListener, Inject, Injectable, InjectionToken, Input, Optional, Output, Self, ViewChild, ViewChildren, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, createComponent, effect, forwardRef, inject, input, output, signal, viewChild } from "@angular/core";
|
|
2
|
+
import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Directive, ElementRef, EnvironmentInjector, EventEmitter, HostBinding, HostListener, Inject, Injectable, InjectionToken, Input, Optional, Output, Self, ViewChild, ViewChildren, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, createComponent, effect, forwardRef, inject, input, output, signal, viewChild } from "@angular/core";
|
|
3
3
|
import * as i2$2 from "@angular/common";
|
|
4
4
|
import { CommonModule, DOCUMENT, NgClass, NgStyle, NgTemplateOutlet } from "@angular/common";
|
|
5
5
|
import * as i1$1 from "@angular/forms";
|
|
@@ -9,7 +9,8 @@ import { NavigationEnd, RouterLink, RouterLinkActive, RouterOutlet } from "@angu
|
|
|
9
9
|
import { map, switchMap, take, takeUntil } from "rxjs/operators";
|
|
10
10
|
import { BehaviorSubject, Subject, filter, forkJoin, of } from "rxjs";
|
|
11
11
|
import * as i2 from "@angular/cdk/overlay";
|
|
12
|
-
import { OverlayModule } from "@angular/cdk/overlay";
|
|
12
|
+
import { Overlay, OverlayModule } from "@angular/cdk/overlay";
|
|
13
|
+
import { TemplatePortal } from "@angular/cdk/portal";
|
|
13
14
|
import { animate, state, style, transition, trigger } from "@angular/animations";
|
|
14
15
|
import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
|
|
15
16
|
import { Chart, registerables } from "chart.js";
|
|
@@ -70,7 +71,7 @@ var IAccordion = class IAccordion {
|
|
|
70
71
|
},
|
|
71
72
|
ngImport: i0,
|
|
72
73
|
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\n class=\"pi i-accordion-toggle-icon\"\n [class.pi-chevron-down]=\"!expanded\"\n [class.pi-chevron-up]=\"expanded\"\n ></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",
|
|
73
|
-
styles: [".i-accordion{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-accordion .i-accordion-header{color:var(--color-text-primary)}.i-accordion .i-accordion-header:hover:not(.disabled .i-accordion .i-accordion-header){background:var(--surface-hover)}.i-accordion .i-accordion-header .i-accordion-icon{color:var(--color-primary)}.i-accordion .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-secondary)}.i-accordion .i-accordion-content{color:var(--color-text-primary)}.i-accordion.disabled .i-accordion-header{color:var(--color-text-disabled);cursor:not-allowed}.i-accordion.disabled .i-accordion-header .i-accordion-icon,.i-accordion.disabled .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-disabled)}.i-accordion{border-radius:8px;overflow:visible}.i-accordion.expanded .i-accordion-header{border-radius:8px 8px 0 0}.i-accordion:not(.expanded) .i-accordion-header{border-radius:8px}.i-accordion.disabled{opacity:.6}.i-accordion.disabled .i-accordion-header{cursor:not-allowed}.i-accordion .i-accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-accordion .i-accordion-header .i-accordion-header-content{display:flex;align-items:center;gap:12px}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-icon{font-size:
|
|
74
|
+
styles: [".i-accordion{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-accordion .i-accordion-header{color:var(--color-text-primary)}.i-accordion .i-accordion-header:hover:not(.disabled .i-accordion .i-accordion-header){background:var(--surface-hover)}.i-accordion .i-accordion-header .i-accordion-icon{color:var(--color-primary)}.i-accordion .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-secondary)}.i-accordion .i-accordion-content{color:var(--color-text-primary)}.i-accordion.disabled .i-accordion-header{color:var(--color-text-disabled);cursor:not-allowed}.i-accordion.disabled .i-accordion-header .i-accordion-icon,.i-accordion.disabled .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-disabled)}.i-accordion{border-radius:8px;overflow:visible}.i-accordion.expanded .i-accordion-header{border-radius:8px 8px 0 0}.i-accordion:not(.expanded) .i-accordion-header{border-radius:8px}.i-accordion.disabled{opacity:.6}.i-accordion.disabled .i-accordion-header{cursor:not-allowed}.i-accordion .i-accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-accordion .i-accordion-header .i-accordion-header-content{display:flex;align-items:center;gap:12px}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-icon{font-size:12px}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-title{font-weight:600;font-size:12px}.i-accordion .i-accordion-header .i-accordion-toggle-icon{font-size:12px;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"],
|
|
74
75
|
changeDetection: i0.ChangeDetectionStrategy.Eager
|
|
75
76
|
});
|
|
76
77
|
};
|
|
@@ -85,7 +86,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
85
86
|
selector: "i-accordion",
|
|
86
87
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
87
88
|
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\n class=\"pi i-accordion-toggle-icon\"\n [class.pi-chevron-down]=\"!expanded\"\n [class.pi-chevron-up]=\"expanded\"\n ></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",
|
|
88
|
-
styles: [".i-accordion{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-accordion .i-accordion-header{color:var(--color-text-primary)}.i-accordion .i-accordion-header:hover:not(.disabled .i-accordion .i-accordion-header){background:var(--surface-hover)}.i-accordion .i-accordion-header .i-accordion-icon{color:var(--color-primary)}.i-accordion .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-secondary)}.i-accordion .i-accordion-content{color:var(--color-text-primary)}.i-accordion.disabled .i-accordion-header{color:var(--color-text-disabled);cursor:not-allowed}.i-accordion.disabled .i-accordion-header .i-accordion-icon,.i-accordion.disabled .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-disabled)}.i-accordion{border-radius:8px;overflow:visible}.i-accordion.expanded .i-accordion-header{border-radius:8px 8px 0 0}.i-accordion:not(.expanded) .i-accordion-header{border-radius:8px}.i-accordion.disabled{opacity:.6}.i-accordion.disabled .i-accordion-header{cursor:not-allowed}.i-accordion .i-accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-accordion .i-accordion-header .i-accordion-header-content{display:flex;align-items:center;gap:12px}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-icon{font-size:
|
|
89
|
+
styles: [".i-accordion{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-accordion .i-accordion-header{color:var(--color-text-primary)}.i-accordion .i-accordion-header:hover:not(.disabled .i-accordion .i-accordion-header){background:var(--surface-hover)}.i-accordion .i-accordion-header .i-accordion-icon{color:var(--color-primary)}.i-accordion .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-secondary)}.i-accordion .i-accordion-content{color:var(--color-text-primary)}.i-accordion.disabled .i-accordion-header{color:var(--color-text-disabled);cursor:not-allowed}.i-accordion.disabled .i-accordion-header .i-accordion-icon,.i-accordion.disabled .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-disabled)}.i-accordion{border-radius:8px;overflow:visible}.i-accordion.expanded .i-accordion-header{border-radius:8px 8px 0 0}.i-accordion:not(.expanded) .i-accordion-header{border-radius:8px}.i-accordion.disabled{opacity:.6}.i-accordion.disabled .i-accordion-header{cursor:not-allowed}.i-accordion .i-accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-accordion .i-accordion-header .i-accordion-header-content{display:flex;align-items:center;gap:12px}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-icon{font-size:12px}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-title{font-weight:600;font-size:12px}.i-accordion .i-accordion-header .i-accordion-toggle-icon{font-size:12px;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"]
|
|
89
90
|
}]
|
|
90
91
|
}],
|
|
91
92
|
propDecorators: {
|
|
@@ -218,7 +219,7 @@ var IProgressSpinner = class IProgressSpinner {
|
|
|
218
219
|
},
|
|
219
220
|
ngImport: i0,
|
|
220
221
|
template: "<div\n class=\"spinner-container\"\n [class]=\"sizeClass\"\n [ngClass]=\"severityClass\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"status\"\n>\n <div class=\"spinner-rings\">\n <div class=\"spinner-ring spinner-ring-1\"></div>\n <div class=\"spinner-ring spinner-ring-2\"></div>\n <div class=\"spinner-ring spinner-ring-3\"></div>\n </div>\n</div>\n",
|
|
221
|
-
styles: [".spinner-rings{color:var(--color-primary)}.spinner--primary .spinner-rings{color:var(--color-contrast-inverse)}.spinner--primary--text .spinner-rings{color:var(--color-primary)}.spinner--secondary .spinner-rings{color:var(--color-contrast-inverse)}.spinner--secondary--text .spinner-rings{color:var(--color-secondary)}.spinner--tertiary .spinner-rings{color:var(--color-contrast-inverse)}.spinner--tertiary--text .spinner-rings{color:var(--color-tertiary)}.spinner--success .spinner-rings{color:var(--color-contrast-inverse)}.spinner--success--text .spinner-rings{color:var(--color-success)}.spinner--info .spinner-rings{color:var(--color-contrast-inverse)}.spinner--info--text .spinner-rings{color:var(--color-info)}.spinner--warning .spinner-rings{color
|
|
222
|
+
styles: [".spinner-rings{color:var(--color-primary)}.spinner--primary .spinner-rings{color:var(--color-contrast-inverse)}.spinner--primary--text .spinner-rings{color:var(--color-primary)}.spinner--secondary .spinner-rings{color:var(--color-contrast-inverse)}.spinner--secondary--text .spinner-rings{color:var(--color-secondary)}.spinner--tertiary .spinner-rings{color:var(--color-contrast-inverse)}.spinner--tertiary--text .spinner-rings{color:var(--color-tertiary)}.spinner--success .spinner-rings{color:var(--color-contrast-inverse)}.spinner--success--text .spinner-rings{color:var(--color-success)}.spinner--info .spinner-rings{color:var(--color-contrast-inverse)}.spinner--info--text .spinner-rings{color:var(--color-info)}.spinner--warning .spinner-rings{color:var(--color-text-contrast)}.spinner--warning--text .spinner-rings{color:var(--color-warning)}.spinner--danger .spinner-rings{color:var(--color-text-contrast)}.spinner--danger--text .spinner-rings{color:var(--color-danger)}.spinner--contrast .spinner-rings{color:var(--color-contrast-inverse)}.spinner--contrast--text .spinner-rings{color:var(--color-text-secondary)}.spinner-ring{border-color:transparent}.spinner-ring-1{border-top-color:currentColor;border-right-color:currentColor}.spinner-ring-2{border-bottom-color:currentColor;border-left-color:currentColor}.spinner-ring-3{border-top-color:currentColor;border-right-color:currentColor}.spinner-container{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:visible}.spinner-container.spinner-small{width:24px;height:24px}.spinner-container.spinner-medium{width:48px;height:48px}.spinner-container.spinner-large{width:72px;height:72px}.spinner-rings{position:relative;width:100%;height:100%;transform:translateZ(0);will-change:transform}.spinner-ring{position:absolute;top:50%;left:50%;border-radius:50%;border-width:2px;border-style:solid;box-sizing:border-box;transform:translate(-50%,-50%);will-change:transform,opacity;backface-visibility:hidden}.spinner-ring-1{width:100%;height:100%;animation:spinner-spin-1 2.4s cubic-bezier(.68,-.55,.27,1.55) infinite;opacity:.9}.spinner-ring-2{width:75%;height:75%;animation:spinner-spin-2 2.4s cubic-bezier(.68,-.55,.27,1.55) infinite;animation-delay:-.3s;opacity:.7}.spinner-ring-3{width:50%;height:50%;animation:spinner-spin-3 2.4s cubic-bezier(.68,-.55,.27,1.55) infinite;animation-delay:-.6s;opacity:.5}@keyframes spinner-spin-1{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes spinner-spin-2{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}@keyframes spinner-spin-3{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}\n"],
|
|
222
223
|
dependencies: [{
|
|
223
224
|
kind: "directive",
|
|
224
225
|
type: NgClass,
|
|
@@ -240,7 +241,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
240
241
|
imports: [NgClass],
|
|
241
242
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
242
243
|
template: "<div\n class=\"spinner-container\"\n [class]=\"sizeClass\"\n [ngClass]=\"severityClass\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"status\"\n>\n <div class=\"spinner-rings\">\n <div class=\"spinner-ring spinner-ring-1\"></div>\n <div class=\"spinner-ring spinner-ring-2\"></div>\n <div class=\"spinner-ring spinner-ring-3\"></div>\n </div>\n</div>\n",
|
|
243
|
-
styles: [".spinner-rings{color:var(--color-primary)}.spinner--primary .spinner-rings{color:var(--color-contrast-inverse)}.spinner--primary--text .spinner-rings{color:var(--color-primary)}.spinner--secondary .spinner-rings{color:var(--color-contrast-inverse)}.spinner--secondary--text .spinner-rings{color:var(--color-secondary)}.spinner--tertiary .spinner-rings{color:var(--color-contrast-inverse)}.spinner--tertiary--text .spinner-rings{color:var(--color-tertiary)}.spinner--success .spinner-rings{color:var(--color-contrast-inverse)}.spinner--success--text .spinner-rings{color:var(--color-success)}.spinner--info .spinner-rings{color:var(--color-contrast-inverse)}.spinner--info--text .spinner-rings{color:var(--color-info)}.spinner--warning .spinner-rings{color
|
|
244
|
+
styles: [".spinner-rings{color:var(--color-primary)}.spinner--primary .spinner-rings{color:var(--color-contrast-inverse)}.spinner--primary--text .spinner-rings{color:var(--color-primary)}.spinner--secondary .spinner-rings{color:var(--color-contrast-inverse)}.spinner--secondary--text .spinner-rings{color:var(--color-secondary)}.spinner--tertiary .spinner-rings{color:var(--color-contrast-inverse)}.spinner--tertiary--text .spinner-rings{color:var(--color-tertiary)}.spinner--success .spinner-rings{color:var(--color-contrast-inverse)}.spinner--success--text .spinner-rings{color:var(--color-success)}.spinner--info .spinner-rings{color:var(--color-contrast-inverse)}.spinner--info--text .spinner-rings{color:var(--color-info)}.spinner--warning .spinner-rings{color:var(--color-text-contrast)}.spinner--warning--text .spinner-rings{color:var(--color-warning)}.spinner--danger .spinner-rings{color:var(--color-text-contrast)}.spinner--danger--text .spinner-rings{color:var(--color-danger)}.spinner--contrast .spinner-rings{color:var(--color-contrast-inverse)}.spinner--contrast--text .spinner-rings{color:var(--color-text-secondary)}.spinner-ring{border-color:transparent}.spinner-ring-1{border-top-color:currentColor;border-right-color:currentColor}.spinner-ring-2{border-bottom-color:currentColor;border-left-color:currentColor}.spinner-ring-3{border-top-color:currentColor;border-right-color:currentColor}.spinner-container{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:visible}.spinner-container.spinner-small{width:24px;height:24px}.spinner-container.spinner-medium{width:48px;height:48px}.spinner-container.spinner-large{width:72px;height:72px}.spinner-rings{position:relative;width:100%;height:100%;transform:translateZ(0);will-change:transform}.spinner-ring{position:absolute;top:50%;left:50%;border-radius:50%;border-width:2px;border-style:solid;box-sizing:border-box;transform:translate(-50%,-50%);will-change:transform,opacity;backface-visibility:hidden}.spinner-ring-1{width:100%;height:100%;animation:spinner-spin-1 2.4s cubic-bezier(.68,-.55,.27,1.55) infinite;opacity:.9}.spinner-ring-2{width:75%;height:75%;animation:spinner-spin-2 2.4s cubic-bezier(.68,-.55,.27,1.55) infinite;animation-delay:-.3s;opacity:.7}.spinner-ring-3{width:50%;height:50%;animation:spinner-spin-3 2.4s cubic-bezier(.68,-.55,.27,1.55) infinite;animation-delay:-.6s;opacity:.5}@keyframes spinner-spin-1{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes spinner-spin-2{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}@keyframes spinner-spin-3{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}\n"]
|
|
244
245
|
}]
|
|
245
246
|
}],
|
|
246
247
|
propDecorators: {
|
|
@@ -331,8 +332,8 @@ var IButton = class IButton {
|
|
|
331
332
|
read: ElementRef
|
|
332
333
|
}],
|
|
333
334
|
ngImport: i0,
|
|
334
|
-
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 [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-busy]=\"loading || null\"\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 }\n <div\n [ngClass]=\"[\n 'button-content',\n iconOnly ? 'icon-only' : '',\n loading ? 'button-content--hidden' : '',\n ]\"\n >\n @if (icon) {\n <i
|
|
335
|
-
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
|
|
335
|
+
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 [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-busy]=\"loading || null\"\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 }\n <div\n [ngClass]=\"[\n 'button-content',\n iconOnly ? 'icon-only' : '',\n loading ? 'button-content--hidden' : '',\n ]\"\n >\n @if (icon) {\n <i aria-hidden=\"true\" [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 </button>\n</div>\n",
|
|
336
|
+
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:var(--color-text-contrast)}.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:var(--color-text-contrast)}.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}.i-button:disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);box-shadow:none;cursor:not-allowed}.i-button.i-button--outlined:disabled{background:transparent;border-color:var(--color-disabled-border)!important;color:var(--color-text-disabled)}.i-button.i-button--text:disabled{background:transparent;border-color:transparent;color:var(--color-text-disabled)}.i-button-wrapper .i-button{border-color:transparent}.i-button-wrapper .i-button--raised{box-shadow:0 3px 1px -2px color-mix(in srgb,#000000 20%,transparent),0 2px 2px color-mix(in srgb,#000000 14%,transparent),0 1px 5px color-mix(in srgb,#000000 12%,transparent)}.i-button-wrapper .i-button--outlined,.i-button-wrapper .i-button--text{box-shadow:none}:host{display:inline-block}:host.i-button-fluid{display:block;width:100%}.i-button-wrapper .i-button{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 16px;font-weight:550;border-width:1px;border-style:solid;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-content--hidden{visibility:hidden}.i-button-wrapper .i-button .button-loading-spinner{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2;opacity:1;contain:layout style paint}.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;font-weight:500}.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{pointer-events:none}.i-button-wrapper .i-button:disabled:not(.i-button--loading) .button-content,.i-button-wrapper .i-button--outlined:disabled:not(.i-button--loading) .button-content,.i-button-wrapper .i-button:disabled:not(.i-button--loading) .i-button__icon,.i-button-wrapper .i-button--outlined:disabled:not(.i-button--loading) .i-button__icon{opacity:1}.i-button-wrapper .i-button--loading .button-loading-spinner{opacity:1!important}.i-button-wrapper .i-button--outlined{border-width:1px;border-style:solid}.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)}@media(pointer:coarse){.i-button-wrapper .i-button{min-height:44px;min-width:44px;touch-action:manipulation}}@media(pointer:coarse){:host-context(.i-calendar-days) .i-button-wrapper .i-button{min-width:0;padding-inline:0}}\n"],
|
|
336
337
|
dependencies: [{
|
|
337
338
|
kind: "directive",
|
|
338
339
|
type: NgClass,
|
|
@@ -365,8 +366,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
365
366
|
standalone: true,
|
|
366
367
|
imports: [NgClass, IProgressSpinner],
|
|
367
368
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
368
|
-
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 [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-busy]=\"loading || null\"\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 }\n <div\n [ngClass]=\"[\n 'button-content',\n iconOnly ? 'icon-only' : '',\n loading ? 'button-content--hidden' : '',\n ]\"\n >\n @if (icon) {\n <i
|
|
369
|
-
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
|
|
369
|
+
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 [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-busy]=\"loading || null\"\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 }\n <div\n [ngClass]=\"[\n 'button-content',\n iconOnly ? 'icon-only' : '',\n loading ? 'button-content--hidden' : '',\n ]\"\n >\n @if (icon) {\n <i aria-hidden=\"true\" [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 </button>\n</div>\n",
|
|
370
|
+
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:var(--color-text-contrast)}.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:var(--color-text-contrast)}.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}.i-button:disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);box-shadow:none;cursor:not-allowed}.i-button.i-button--outlined:disabled{background:transparent;border-color:var(--color-disabled-border)!important;color:var(--color-text-disabled)}.i-button.i-button--text:disabled{background:transparent;border-color:transparent;color:var(--color-text-disabled)}.i-button-wrapper .i-button{border-color:transparent}.i-button-wrapper .i-button--raised{box-shadow:0 3px 1px -2px color-mix(in srgb,#000000 20%,transparent),0 2px 2px color-mix(in srgb,#000000 14%,transparent),0 1px 5px color-mix(in srgb,#000000 12%,transparent)}.i-button-wrapper .i-button--outlined,.i-button-wrapper .i-button--text{box-shadow:none}:host{display:inline-block}:host.i-button-fluid{display:block;width:100%}.i-button-wrapper .i-button{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 16px;font-weight:550;border-width:1px;border-style:solid;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-content--hidden{visibility:hidden}.i-button-wrapper .i-button .button-loading-spinner{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2;opacity:1;contain:layout style paint}.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;font-weight:500}.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{pointer-events:none}.i-button-wrapper .i-button:disabled:not(.i-button--loading) .button-content,.i-button-wrapper .i-button--outlined:disabled:not(.i-button--loading) .button-content,.i-button-wrapper .i-button:disabled:not(.i-button--loading) .i-button__icon,.i-button-wrapper .i-button--outlined:disabled:not(.i-button--loading) .i-button__icon{opacity:1}.i-button-wrapper .i-button--loading .button-loading-spinner{opacity:1!important}.i-button-wrapper .i-button--outlined{border-width:1px;border-style:solid}.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)}@media(pointer:coarse){.i-button-wrapper .i-button{min-height:44px;min-width:44px;touch-action:manipulation}}@media(pointer:coarse){:host-context(.i-calendar-days) .i-button-wrapper .i-button{min-width:0;padding-inline:0}}\n"]
|
|
370
371
|
}]
|
|
371
372
|
}],
|
|
372
373
|
ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }],
|
|
@@ -433,7 +434,7 @@ var TooltipComponent = class TooltipComponent {
|
|
|
433
434
|
</div>
|
|
434
435
|
`,
|
|
435
436
|
isInline: true,
|
|
436
|
-
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
|
|
437
|
+
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__arrow{border-color:transparent}.i-tooltip{position:relative;padding:8px 12px;border-radius:4px;font-size:10.8px;line-height:1.4;white-space:nowrap;max-width:200px;word-wrap:break-word;white-space:normal;z-index:10000;opacity:0;animation:fadeIn .2s ease-in-out forwards}.i-tooltip__arrow{position:absolute;width:0;height:0;border-width:6px;border-style:solid}.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"],
|
|
437
438
|
changeDetection: i0.ChangeDetectionStrategy.Eager
|
|
438
439
|
});
|
|
439
440
|
};
|
|
@@ -461,7 +462,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
461
462
|
</div>
|
|
462
463
|
`,
|
|
463
464
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
464
|
-
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
|
|
465
|
+
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__arrow{border-color:transparent}.i-tooltip{position:relative;padding:8px 12px;border-radius:4px;font-size:10.8px;line-height:1.4;white-space:nowrap;max-width:200px;word-wrap:break-word;white-space:normal;z-index:10000;opacity:0;animation:fadeIn .2s ease-in-out forwards}.i-tooltip__arrow{position:absolute;width:0;height:0;border-width:6px;border-style:solid}.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"]
|
|
465
466
|
}]
|
|
466
467
|
}],
|
|
467
468
|
propDecorators: {
|
|
@@ -779,8 +780,8 @@ var IInputText = class IInputText {
|
|
|
779
780
|
errorMessages: "errorMessages"
|
|
780
781
|
},
|
|
781
782
|
ngImport: i0,
|
|
782
|
-
template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n #inputElement\n [id]=\"id || componentId\"\n [type]=\"type\"\n [attr.aria-label]=\"!useFloatLabel ? label : null\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n @if (type ===
|
|
783
|
-
styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:
|
|
783
|
+
template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n #inputElement\n [id]=\"id || componentId\"\n [type]=\"type\"\n [attr.aria-label]=\"!useFloatLabel ? label : null\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n @if (type === 'number' && !disabled && !readonly) {\n <div class=\"i-input-spinners\">\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-up\"\n (click)=\"incrementNumber(inputElement)\"\n [attr.aria-label]=\"'Increment ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-up\"></i>\n </button>\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-down\"\n (click)=\"decrementNumber(inputElement)\"\n [attr.aria-label]=\"'Decrement ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-down\"></i>\n </button>\n </div>\n }\n </div>\n @if (useFloatLabel) {\n <label [for]=\"id || componentId\" class=\"i-label\" [class.floated]=\"forceFloated || hasValue\">{{\n label\n }}</label>\n }\n <ng-content></ng-content>\n </div>\n</div>\n",
|
|
784
|
+
styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}.i-input-wrapper .i-input.hide-text{color:transparent;text-shadow:none}.i-input-wrapper .i-input.readonly{caret-color:transparent}.i-input-wrapper .i-input-icon{color:inherit}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:12px}.i-input-wrapper.i-input--fluid{width:100%}.i-input-wrapper.i-input--no-float{margin-top:0;height:auto}.i-input-wrapper .i-input-container{display:flex;align-items:center;gap:8px}.i-input-wrapper .i-input{box-sizing:border-box;width:100%;border-radius:4px;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}.i-input-wrapper .i-input:focus{outline:none}.i-input-wrapper .i-input.has-icon{padding-left:34px}.i-input-wrapper .i-input.hide-text{cursor:pointer}.i-input-wrapper .i-input.readonly{cursor:pointer;-webkit-user-select:none;user-select:none}.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;pointer-events:none;transform:translateY(-50%)}.i-input-wrapper .float-label{position:relative;display:flex;align-items:stretch}.i-input-wrapper .float-label .i-input-icon{left:10px}.i-input-wrapper .float-label .i-input{padding:14px 10px}.i-input-wrapper .float-label .i-input.has-icon{padding-left:34px}.i-input-wrapper .float-label .i-label{position:absolute;top:14px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none}.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:focus)+.i-label,.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:not(:placeholder-shown))+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-input-wrapper .float-label.has-icon .i-input-icon-wrapper:not(:has(.i-input:focus)):not(:has(.i-input:not(:placeholder-shown)))+.i-label:not(.floated){left:34px}.i-input-wrapper .normal-input{position:relative}.i-input-wrapper .normal-input .i-input-icon{left:12px}.i-input-wrapper .normal-input .i-input{padding:8px 12px}.i-input-wrapper .normal-input .i-input.has-icon{padding-left:38px}.i-input-wrapper .i-input[type=number]{padding-right:32px}.i-input-wrapper .i-input[type=number]::-webkit-outer-spin-button,.i-input-wrapper .i-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.i-input-wrapper .i-input[type=number]{appearance:textfield;-moz-appearance:textfield}.i-input-wrapper .i-input-spinners{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}.i-input-wrapper .i-input-spinner-button{display:flex;align-items:center;justify-content:center;width:24px;height:16px;border:none;border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease;padding:0;font-size:10px}.i-input-wrapper .i-input-spinner-button i{font-size:10px;line-height:1}.i-input-wrapper .i-input-spinner-button:focus{outline:none}@media(pointer:coarse){.i-input-wrapper .i-input{min-height:44px;font-size:16px}}@media(pointer:coarse){.i-input-wrapper .i-input-spinners{display:none}}\n"],
|
|
784
785
|
dependencies: [
|
|
785
786
|
{
|
|
786
787
|
kind: "ngmodule",
|
|
@@ -818,8 +819,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
818
819
|
standalone: true,
|
|
819
820
|
imports: [CommonModule, TooltipDirective],
|
|
820
821
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
821
|
-
template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n #inputElement\n [id]=\"id || componentId\"\n [type]=\"type\"\n [attr.aria-label]=\"!useFloatLabel ? label : null\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n @if (type ===
|
|
822
|
-
styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:
|
|
822
|
+
template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n #inputElement\n [id]=\"id || componentId\"\n [type]=\"type\"\n [attr.aria-label]=\"!useFloatLabel ? label : null\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n @if (type === 'number' && !disabled && !readonly) {\n <div class=\"i-input-spinners\">\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-up\"\n (click)=\"incrementNumber(inputElement)\"\n [attr.aria-label]=\"'Increment ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-up\"></i>\n </button>\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-down\"\n (click)=\"decrementNumber(inputElement)\"\n [attr.aria-label]=\"'Decrement ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-down\"></i>\n </button>\n </div>\n }\n </div>\n @if (useFloatLabel) {\n <label [for]=\"id || componentId\" class=\"i-label\" [class.floated]=\"forceFloated || hasValue\">{{\n label\n }}</label>\n }\n <ng-content></ng-content>\n </div>\n</div>\n",
|
|
823
|
+
styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}.i-input-wrapper .i-input.hide-text{color:transparent;text-shadow:none}.i-input-wrapper .i-input.readonly{caret-color:transparent}.i-input-wrapper .i-input-icon{color:inherit}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:12px}.i-input-wrapper.i-input--fluid{width:100%}.i-input-wrapper.i-input--no-float{margin-top:0;height:auto}.i-input-wrapper .i-input-container{display:flex;align-items:center;gap:8px}.i-input-wrapper .i-input{box-sizing:border-box;width:100%;border-radius:4px;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}.i-input-wrapper .i-input:focus{outline:none}.i-input-wrapper .i-input.has-icon{padding-left:34px}.i-input-wrapper .i-input.hide-text{cursor:pointer}.i-input-wrapper .i-input.readonly{cursor:pointer;-webkit-user-select:none;user-select:none}.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;pointer-events:none;transform:translateY(-50%)}.i-input-wrapper .float-label{position:relative;display:flex;align-items:stretch}.i-input-wrapper .float-label .i-input-icon{left:10px}.i-input-wrapper .float-label .i-input{padding:14px 10px}.i-input-wrapper .float-label .i-input.has-icon{padding-left:34px}.i-input-wrapper .float-label .i-label{position:absolute;top:14px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none}.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:focus)+.i-label,.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:not(:placeholder-shown))+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-input-wrapper .float-label.has-icon .i-input-icon-wrapper:not(:has(.i-input:focus)):not(:has(.i-input:not(:placeholder-shown)))+.i-label:not(.floated){left:34px}.i-input-wrapper .normal-input{position:relative}.i-input-wrapper .normal-input .i-input-icon{left:12px}.i-input-wrapper .normal-input .i-input{padding:8px 12px}.i-input-wrapper .normal-input .i-input.has-icon{padding-left:38px}.i-input-wrapper .i-input[type=number]{padding-right:32px}.i-input-wrapper .i-input[type=number]::-webkit-outer-spin-button,.i-input-wrapper .i-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.i-input-wrapper .i-input[type=number]{appearance:textfield;-moz-appearance:textfield}.i-input-wrapper .i-input-spinners{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}.i-input-wrapper .i-input-spinner-button{display:flex;align-items:center;justify-content:center;width:24px;height:16px;border:none;border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease;padding:0;font-size:10px}.i-input-wrapper .i-input-spinner-button i{font-size:10px;line-height:1}.i-input-wrapper .i-input-spinner-button:focus{outline:none}@media(pointer:coarse){.i-input-wrapper .i-input{min-height:44px;font-size:16px}}@media(pointer:coarse){.i-input-wrapper .i-input-spinners{display:none}}\n"]
|
|
823
824
|
}]
|
|
824
825
|
}],
|
|
825
826
|
ctorParameters: () => [{
|
|
@@ -1114,8 +1115,8 @@ var ICalendar = class ICalendar {
|
|
|
1114
1115
|
read: ElementRef
|
|
1115
1116
|
}],
|
|
1116
1117
|
ngImport: i0,
|
|
1117
|
-
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
|
|
1118
|
-
styles: [".i-calendar-panel{background:var(--color-component-background);border:1px solid var(--surface-border);box-shadow:0 4px 12px
|
|
1118
|
+
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 #calendarPanel class=\"i-calendar-panel\" (click)=\"$event.stopPropagation()\">\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 [severity]=\"'contrast'\" [text]=\"true\" (clicked)=\"showMonthView()\">\n {{ getHeaderTitle() }}\n </i-button>\n } @else if (currentView === 'month') {\n <i-button [severity]=\"'contrast'\" [text]=\"true\" (clicked)=\"showYearView()\">\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) {\n @for (date of week; track date) {\n @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 }\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",
|
|
1119
|
+
styles: [".i-calendar-panel{background:var(--color-component-background);border:1px solid var(--surface-border);box-shadow:0 4px 12px color-mix(in srgb,#000000 15%,transparent)}.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}@media(max-width:768px){.i-calendar-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(360px,100vw - 24px);min-width:0;max-height:calc(100dvh - 24px);overflow:auto;animation:none}}@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:12px}.i-calendar-title-text{font-weight:600;font-size:12px}.i-calendar-body{padding:12px}.i-calendar-selection{border-radius:4px}@media(max-width:768px){.i-calendar-selection{min-width:0}}.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}@media(max-width:768px){.i-calendar-days{grid-template-columns:repeat(7,minmax(0,1fr))}}.i-calendar-month-view,.i-calendar-year-view{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}\n"],
|
|
1119
1120
|
dependencies: [
|
|
1120
1121
|
{
|
|
1121
1122
|
kind: "ngmodule",
|
|
@@ -1206,8 +1207,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1206
1207
|
useExisting: forwardRef(() => ICalendar),
|
|
1207
1208
|
multi: true
|
|
1208
1209
|
}],
|
|
1209
|
-
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
|
|
1210
|
-
styles: [".i-calendar-panel{background:var(--color-component-background);border:1px solid var(--surface-border);box-shadow:0 4px 12px
|
|
1210
|
+
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 #calendarPanel class=\"i-calendar-panel\" (click)=\"$event.stopPropagation()\">\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 [severity]=\"'contrast'\" [text]=\"true\" (clicked)=\"showMonthView()\">\n {{ getHeaderTitle() }}\n </i-button>\n } @else if (currentView === 'month') {\n <i-button [severity]=\"'contrast'\" [text]=\"true\" (clicked)=\"showYearView()\">\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) {\n @for (date of week; track date) {\n @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 }\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",
|
|
1211
|
+
styles: [".i-calendar-panel{background:var(--color-component-background);border:1px solid var(--surface-border);box-shadow:0 4px 12px color-mix(in srgb,#000000 15%,transparent)}.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}@media(max-width:768px){.i-calendar-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(360px,100vw - 24px);min-width:0;max-height:calc(100dvh - 24px);overflow:auto;animation:none}}@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:12px}.i-calendar-title-text{font-weight:600;font-size:12px}.i-calendar-body{padding:12px}.i-calendar-selection{border-radius:4px}@media(max-width:768px){.i-calendar-selection{min-width:0}}.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}@media(max-width:768px){.i-calendar-days{grid-template-columns:repeat(7,minmax(0,1fr))}}.i-calendar-month-view,.i-calendar-year-view{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}\n"]
|
|
1211
1212
|
}]
|
|
1212
1213
|
}],
|
|
1213
1214
|
ctorParameters: () => [{ type: i0.ElementRef }],
|
|
@@ -1266,7 +1267,7 @@ var ICard = class ICard {
|
|
|
1266
1267
|
host: { properties: { "class.i-card--full-height": "this.isFullHeight" } },
|
|
1267
1268
|
ngImport: i0,
|
|
1268
1269
|
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",
|
|
1269
|
-
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}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:#00000059}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:#00000080}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-corner{background:transparent}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.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:
|
|
1270
|
+
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}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:#00000059}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:#00000080}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-corner{background:transparent}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.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:18px;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}@media(max-width:768px){.i-card{border-radius:0}.i-card .i-card-body{padding-left:0;padding-right:0}}:host{min-width:0;max-width:100%}:host.i-card--full-height .i-card .i-card-body{min-height:0;overscroll-behavior:contain}.i-card-title{min-width:0;overflow-wrap:anywhere}\n"],
|
|
1270
1271
|
dependencies: [{
|
|
1271
1272
|
kind: "component",
|
|
1272
1273
|
type: IButton,
|
|
@@ -1302,7 +1303,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1302
1303
|
imports: [IButton],
|
|
1303
1304
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
1304
1305
|
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",
|
|
1305
|
-
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}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:#00000059}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:#00000080}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-corner{background:transparent}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.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:
|
|
1306
|
+
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}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:#00000059}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:#00000080}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-corner{background:transparent}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.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:18px;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}@media(max-width:768px){.i-card{border-radius:0}.i-card .i-card-body{padding-left:0;padding-right:0}}:host{min-width:0;max-width:100%}:host.i-card--full-height .i-card .i-card-body{min-height:0;overscroll-behavior:contain}.i-card-title{min-width:0;overflow-wrap:anywhere}\n"]
|
|
1306
1307
|
}]
|
|
1307
1308
|
}],
|
|
1308
1309
|
propDecorators: {
|
|
@@ -1431,8 +1432,8 @@ var ICardButton = class ICardButton {
|
|
|
1431
1432
|
outputs: { clicked: "clicked" },
|
|
1432
1433
|
host: { properties: { "class.i-card-button--full-height": "fullHeight()" } },
|
|
1433
1434
|
ngImport: i0,
|
|
1434
|
-
template: "<ng-template #card>\n <i-card [title]=\"title()\" [fullHeight]=\"fullHeight()\">\n <ng-content select=\"[slot=header]\" ngProjectAs=\"[slot=header]\">\n @if (title()) {
|
|
1435
|
-
styles: [":host{display:block;min-width:0}:host(.i-card-button--full-height){height:100%}:host(.i-card-button--full-height) .i-card-button{height:100%}.i-card-title{padding-left:12px;font-size:
|
|
1435
|
+
template: "<ng-template #card>\n <i-card [title]=\"title()\" [fullHeight]=\"fullHeight()\">\n <ng-content select=\"[slot=header]\" ngProjectAs=\"[slot=header]\">\n @if (title()) {\n <span class=\"i-card-title\">{{ title() }}</span>\n }\n </ng-content>\n <ng-content />\n <ng-content select=\"[slot=footer]\" ngProjectAs=\"[slot=footer]\" />\n </i-card>\n</ng-template>\n\n@if (routerLink() !== null) {\n <a\n class=\"i-card-button\"\n [class.i-card-button--selected]=\"selected()\"\n [routerLink]=\"disabled() ? null : routerLink()\"\n [queryParams]=\"queryParams()\"\n [fragment]=\"fragment()\"\n [target]=\"target()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-current]=\"selected() ? 'page' : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.tabindex]=\"disabled() ? -1 : null\"\n (click)=\"activate($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"card\" />\n </a>\n} @else {\n <button\n type=\"button\"\n class=\"i-card-button\"\n [class.i-card-button--selected]=\"selected()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-pressed]=\"selected()\"\n (click)=\"activate($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"card\" />\n </button>\n}\n",
|
|
1436
|
+
styles: [":host{display:block;min-width:0}:host(.i-card-button--full-height){height:100%}:host(.i-card-button--full-height) .i-card-button{height:100%}.i-card-title{padding-left:12px;font-size:18px;font-weight:600}.i-card-button{display:block;box-sizing:border-box;width:100%;padding:0;border-width:1px;border-style:solid;border-radius:8px;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.i-card-button:hover:not(:disabled):not([aria-disabled=true]){transform:translateY(-4px)}.i-card-button:focus-visible{outline-width:2px;outline-style:solid;outline-offset:3px}.i-card-button:disabled,.i-card-button[aria-disabled=true]{cursor:default;opacity:.65}@media(prefers-reduced-motion:reduce){.i-card-button{transition:none}}@media(prefers-reduced-motion:reduce){.i-card-button:hover:not(:disabled):not([aria-disabled=true]){transform:none}}.i-card-button{border-color:transparent;background:transparent;color:var(--color-text-primary)}.i-card-button:hover:not(:disabled):not([aria-disabled=true]){box-shadow:0 2px 10px #0003;border-color:var(--surface-border)}.i-card-button:hover:not(:disabled):not([aria-disabled=true]).i-card-button--selected{border-color:var(--color-primary)}.i-card-button.i-card-button--selected{border-color:var(--color-primary)}.i-card-button:focus-visible{outline-color:var(--color-primary)}\n"],
|
|
1436
1437
|
dependencies: [
|
|
1437
1438
|
{
|
|
1438
1439
|
kind: "component",
|
|
@@ -1494,8 +1495,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1494
1495
|
],
|
|
1495
1496
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1496
1497
|
host: { "[class.i-card-button--full-height]": "fullHeight()" },
|
|
1497
|
-
template: "<ng-template #card>\n <i-card [title]=\"title()\" [fullHeight]=\"fullHeight()\">\n <ng-content select=\"[slot=header]\" ngProjectAs=\"[slot=header]\">\n @if (title()) {
|
|
1498
|
-
styles: [":host{display:block;min-width:0}:host(.i-card-button--full-height){height:100%}:host(.i-card-button--full-height) .i-card-button{height:100%}.i-card-title{padding-left:12px;font-size:
|
|
1498
|
+
template: "<ng-template #card>\n <i-card [title]=\"title()\" [fullHeight]=\"fullHeight()\">\n <ng-content select=\"[slot=header]\" ngProjectAs=\"[slot=header]\">\n @if (title()) {\n <span class=\"i-card-title\">{{ title() }}</span>\n }\n </ng-content>\n <ng-content />\n <ng-content select=\"[slot=footer]\" ngProjectAs=\"[slot=footer]\" />\n </i-card>\n</ng-template>\n\n@if (routerLink() !== null) {\n <a\n class=\"i-card-button\"\n [class.i-card-button--selected]=\"selected()\"\n [routerLink]=\"disabled() ? null : routerLink()\"\n [queryParams]=\"queryParams()\"\n [fragment]=\"fragment()\"\n [target]=\"target()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-current]=\"selected() ? 'page' : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.tabindex]=\"disabled() ? -1 : null\"\n (click)=\"activate($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"card\" />\n </a>\n} @else {\n <button\n type=\"button\"\n class=\"i-card-button\"\n [class.i-card-button--selected]=\"selected()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-pressed]=\"selected()\"\n (click)=\"activate($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"card\" />\n </button>\n}\n",
|
|
1499
|
+
styles: [":host{display:block;min-width:0}:host(.i-card-button--full-height){height:100%}:host(.i-card-button--full-height) .i-card-button{height:100%}.i-card-title{padding-left:12px;font-size:18px;font-weight:600}.i-card-button{display:block;box-sizing:border-box;width:100%;padding:0;border-width:1px;border-style:solid;border-radius:8px;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.i-card-button:hover:not(:disabled):not([aria-disabled=true]){transform:translateY(-4px)}.i-card-button:focus-visible{outline-width:2px;outline-style:solid;outline-offset:3px}.i-card-button:disabled,.i-card-button[aria-disabled=true]{cursor:default;opacity:.65}@media(prefers-reduced-motion:reduce){.i-card-button{transition:none}}@media(prefers-reduced-motion:reduce){.i-card-button:hover:not(:disabled):not([aria-disabled=true]){transform:none}}.i-card-button{border-color:transparent;background:transparent;color:var(--color-text-primary)}.i-card-button:hover:not(:disabled):not([aria-disabled=true]){box-shadow:0 2px 10px #0003;border-color:var(--surface-border)}.i-card-button:hover:not(:disabled):not([aria-disabled=true]).i-card-button--selected{border-color:var(--color-primary)}.i-card-button.i-card-button--selected{border-color:var(--color-primary)}.i-card-button:focus-visible{outline-color:var(--color-primary)}\n"]
|
|
1499
1500
|
}]
|
|
1500
1501
|
}],
|
|
1501
1502
|
propDecorators: {
|
|
@@ -1657,8 +1658,8 @@ var ICheckbox = class ICheckbox {
|
|
|
1657
1658
|
multi: true
|
|
1658
1659
|
}],
|
|
1659
1660
|
ngImport: i0,
|
|
1660
|
-
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 (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 [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n (keydown.enter)=\"$event.preventDefault(); toggle()\"\n>\n <div
|
|
1661
|
-
styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:
|
|
1661
|
+
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 (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 [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n (keydown.enter)=\"$event.preventDefault(); toggle()\"\n>\n <div class=\"i-checkbox\" [class.i-checkbox--checked]=\"checked\" aria-hidden=\"true\">\n @if (!checked && indeterminate) {\n <i class=\"pi pi-minus i-checkbox-icon\"></i>\n }\n @if (!indeterminate) {\n <i class=\"pi pi-check i-checkbox-icon\" [style.opacity]=\"checked ? '1' : '0'\"></i>\n }\n </div>\n @if (label) {\n <label [id]=\"(id || componentId) + '-label'\" class=\"i-checkbox-label\">\n {{ label }}\n </label>\n }\n</div>\n",
|
|
1662
|
+
styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 30%,transparent)}.i-checkbox-wrapper:focus-visible{outline-color:currentColor}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:12px}.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:10.8px;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:12px;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:14.4px;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}.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}.i-checkbox-wrapper{cursor:pointer;border-radius:4px}.i-checkbox-wrapper:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}.i-checkbox-wrapper.i-checkbox--disabled{cursor:not-allowed}@media(pointer:coarse){.i-checkbox-wrapper:not(.i-checkbox--readonly){min-height:44px;min-width:44px;justify-content:center}}@media(pointer:coarse){.i-checkbox-wrapper .i-checkbox{flex-shrink:0}}\n"],
|
|
1662
1663
|
changeDetection: i0.ChangeDetectionStrategy.Eager
|
|
1663
1664
|
});
|
|
1664
1665
|
};
|
|
@@ -1679,8 +1680,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1679
1680
|
useExisting: forwardRef(() => ICheckbox),
|
|
1680
1681
|
multi: true
|
|
1681
1682
|
}],
|
|
1682
|
-
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 (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 [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n (keydown.enter)=\"$event.preventDefault(); toggle()\"\n>\n <div
|
|
1683
|
-
styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:
|
|
1683
|
+
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 (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 [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n (keydown.enter)=\"$event.preventDefault(); toggle()\"\n>\n <div class=\"i-checkbox\" [class.i-checkbox--checked]=\"checked\" aria-hidden=\"true\">\n @if (!checked && indeterminate) {\n <i class=\"pi pi-minus i-checkbox-icon\"></i>\n }\n @if (!indeterminate) {\n <i class=\"pi pi-check i-checkbox-icon\" [style.opacity]=\"checked ? '1' : '0'\"></i>\n }\n </div>\n @if (label) {\n <label [id]=\"(id || componentId) + '-label'\" class=\"i-checkbox-label\">\n {{ label }}\n </label>\n }\n</div>\n",
|
|
1684
|
+
styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 30%,transparent)}.i-checkbox-wrapper:focus-visible{outline-color:currentColor}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:12px}.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:10.8px;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:12px;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:14.4px;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}.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}.i-checkbox-wrapper{cursor:pointer;border-radius:4px}.i-checkbox-wrapper:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}.i-checkbox-wrapper.i-checkbox--disabled{cursor:not-allowed}@media(pointer:coarse){.i-checkbox-wrapper:not(.i-checkbox--readonly){min-height:44px;min-width:44px;justify-content:center}}@media(pointer:coarse){.i-checkbox-wrapper .i-checkbox{flex-shrink:0}}\n"]
|
|
1684
1685
|
}]
|
|
1685
1686
|
}],
|
|
1686
1687
|
propDecorators: {
|
|
@@ -1732,8 +1733,8 @@ var IChip = class IChip {
|
|
|
1732
1733
|
},
|
|
1733
1734
|
outputs: { onRemove: "onRemove" },
|
|
1734
1735
|
ngImport: i0,
|
|
1735
|
-
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 }\n @if (image) {\n <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n }\n @if (label) {\n <span class=\"i-chip-text\">{{ label }}</span>\n }\n <ng-content></ng-content>\n @if (removable && !disabled) {\n <button
|
|
1736
|
-
styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:
|
|
1736
|
+
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 }\n @if (image) {\n <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n }\n @if (label) {\n <span class=\"i-chip-text\">{{ label }}</span>\n }\n <ng-content></ng-content>\n @if (removable && !disabled) {\n <button\n type=\"button\"\n [class]=\"removeIcon\"\n class=\"i-chip-remove-icon\"\n [attr.aria-label]=\"'Remove ' + label\"\n (click)=\"onRemoveClick($event)\"\n ></button>\n }\n</div>\n",
|
|
1737
|
+
styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip .i-chip-remove-icon{background:transparent;color:inherit}.i-chip .i-chip-remove-icon:focus-visible{outline-color:currentColor}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;max-width:min(150px,100%);box-sizing:border-box;min-height:32px}.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{border:0;padding:0;cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0;margin-left:0;display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:2;pointer-events:auto;width:24px;height:24px;border-radius:50%}.i-chip .i-chip-remove-icon:focus-visible{outline-width:2px;outline-style:solid;outline-offset:-2px}.i-chip .i-chip-remove-icon:hover{opacity:1}@media(pointer:coarse){.i-chip{min-height:40px;padding:4px 8px}}@media(pointer:coarse){.i-chip .i-chip-remove-icon{width:32px;height:32px}}\n"],
|
|
1737
1738
|
dependencies: [{
|
|
1738
1739
|
kind: "ngmodule",
|
|
1739
1740
|
type: CommonModule
|
|
@@ -1758,8 +1759,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1758
1759
|
standalone: true,
|
|
1759
1760
|
imports: [CommonModule],
|
|
1760
1761
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1761
|
-
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 }\n @if (image) {\n <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n }\n @if (label) {\n <span class=\"i-chip-text\">{{ label }}</span>\n }\n <ng-content></ng-content>\n @if (removable && !disabled) {\n <button
|
|
1762
|
-
styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:
|
|
1762
|
+
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 }\n @if (image) {\n <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n }\n @if (label) {\n <span class=\"i-chip-text\">{{ label }}</span>\n }\n <ng-content></ng-content>\n @if (removable && !disabled) {\n <button\n type=\"button\"\n [class]=\"removeIcon\"\n class=\"i-chip-remove-icon\"\n [attr.aria-label]=\"'Remove ' + label\"\n (click)=\"onRemoveClick($event)\"\n ></button>\n }\n</div>\n",
|
|
1763
|
+
styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip .i-chip-remove-icon{background:transparent;color:inherit}.i-chip .i-chip-remove-icon:focus-visible{outline-color:currentColor}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;max-width:min(150px,100%);box-sizing:border-box;min-height:32px}.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{border:0;padding:0;cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0;margin-left:0;display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:2;pointer-events:auto;width:24px;height:24px;border-radius:50%}.i-chip .i-chip-remove-icon:focus-visible{outline-width:2px;outline-style:solid;outline-offset:-2px}.i-chip .i-chip-remove-icon:hover{opacity:1}@media(pointer:coarse){.i-chip{min-height:40px;padding:4px 8px}}@media(pointer:coarse){.i-chip .i-chip-remove-icon{width:32px;height:32px}}\n"]
|
|
1763
1764
|
}]
|
|
1764
1765
|
}],
|
|
1765
1766
|
propDecorators: {
|
|
@@ -1919,8 +1920,8 @@ var IChipsComponent = class IChipsComponent {
|
|
|
1919
1920
|
}],
|
|
1920
1921
|
usesOnChanges: true,
|
|
1921
1922
|
ngImport: i0,
|
|
1922
|
-
template: "<div class=\"i-chips-wrapper\" [class.i-chips-wrapper--error]=\"showError\" [attr.id]=\"componentId\">\n <div
|
|
1923
|
-
styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}:host{display:block;width:100%;min-width:0;max-width:100%}.i-chips-wrapper{width:100%;min-width:0}.i-chips-container{display:flex;align-items:center;gap:8px;width:100%;min-width:0;box-sizing:border-box}.i-chips-viewport{position:relative;flex:1;min-width:0}.i-chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}.i-chips-list i-chip{min-width:0;max-width:100%}.i-chips-viewport--collapse{overflow:hidden}.i-chips-viewport--collapse .i-chips-list{flex-wrap:nowrap}.i-chips-viewport--collapse .i-chips-list i-chip{flex-shrink:0}.i-chips-viewport--overflow .i-chips-list{visibility:hidden}.i-chips-summary{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}.i-chips-clear{position:relative;z-index:2;flex:0 0 32px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:4px;
|
|
1923
|
+
template: "<div class=\"i-chips-wrapper\" [class.i-chips-wrapper--error]=\"showError\" [attr.id]=\"componentId\">\n <div\n class=\"i-chips-container\"\n [class.i-chips-box]=\"boxed\"\n [class.i-chips--disabled]=\"disabled\"\n [class.i-chips--empty]=\"!chips.length\"\n role=\"group\"\n [attr.aria-label]=\"label || 'Selected items'\"\n >\n <div\n class=\"i-chips-viewport\"\n #chipsViewport\n [class.i-chips-viewport--collapse]=\"collapseOnOverflow\"\n [class.i-chips-viewport--overflow]=\"collapseOnOverflow && chipsOverflow\"\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 @if (collapseOnOverflow && chipsOverflow) {\n <span class=\"i-chips-summary\">{{ overflowText }}</span>\n }\n </div>\n @if (allowCloseAll && chips.length > 0) {\n <button\n type=\"button\"\n class=\"i-chips-clear\"\n aria-label=\"Clear all selected items\"\n [disabled]=\"disabled\"\n (click)=\"onCloseAllClicked($event)\"\n >\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n</div>\n",
|
|
1924
|
+
styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}.i-chips-clear{color:var(--color-text-secondary);background:transparent}.i-chips-clear:focus-visible{outline-color:var(--color-primary)}:host{display:block;width:100%;min-width:0;max-width:100%}.i-chips-wrapper{width:100%;min-width:0}.i-chips-container{display:flex;align-items:center;gap:8px;width:100%;min-width:0;box-sizing:border-box}.i-chips-viewport{position:relative;flex:1;min-width:0}.i-chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}.i-chips-list i-chip{min-width:0;max-width:100%}.i-chips-viewport--collapse{overflow:hidden}.i-chips-viewport--collapse .i-chips-list{flex-wrap:nowrap}.i-chips-viewport--collapse .i-chips-list i-chip{flex-shrink:0}.i-chips-viewport--overflow .i-chips-list{visibility:hidden}.i-chips-summary{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}.i-chips-clear{position:relative;z-index:2;flex:0 0 32px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:4px;cursor:pointer;pointer-events:auto}.i-chips-clear:focus-visible{outline-width:2px;outline-style:solid;outline-offset:-2px}.i-chips-clear:disabled{opacity:.5;cursor:not-allowed}@media(pointer:coarse){.i-chips-clear{flex-basis:44px;width:44px;height:44px}}.i-chips-box{padding:6px 8px;border-radius:4px}\n"],
|
|
1924
1925
|
dependencies: [{
|
|
1925
1926
|
kind: "component",
|
|
1926
1927
|
type: IChip,
|
|
@@ -1951,8 +1952,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1951
1952
|
standalone: true,
|
|
1952
1953
|
imports: [IChip],
|
|
1953
1954
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1954
|
-
template: "<div class=\"i-chips-wrapper\" [class.i-chips-wrapper--error]=\"showError\" [attr.id]=\"componentId\">\n <div
|
|
1955
|
-
styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}:host{display:block;width:100%;min-width:0;max-width:100%}.i-chips-wrapper{width:100%;min-width:0}.i-chips-container{display:flex;align-items:center;gap:8px;width:100%;min-width:0;box-sizing:border-box}.i-chips-viewport{position:relative;flex:1;min-width:0}.i-chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}.i-chips-list i-chip{min-width:0;max-width:100%}.i-chips-viewport--collapse{overflow:hidden}.i-chips-viewport--collapse .i-chips-list{flex-wrap:nowrap}.i-chips-viewport--collapse .i-chips-list i-chip{flex-shrink:0}.i-chips-viewport--overflow .i-chips-list{visibility:hidden}.i-chips-summary{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}.i-chips-clear{position:relative;z-index:2;flex:0 0 32px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:4px;
|
|
1955
|
+
template: "<div class=\"i-chips-wrapper\" [class.i-chips-wrapper--error]=\"showError\" [attr.id]=\"componentId\">\n <div\n class=\"i-chips-container\"\n [class.i-chips-box]=\"boxed\"\n [class.i-chips--disabled]=\"disabled\"\n [class.i-chips--empty]=\"!chips.length\"\n role=\"group\"\n [attr.aria-label]=\"label || 'Selected items'\"\n >\n <div\n class=\"i-chips-viewport\"\n #chipsViewport\n [class.i-chips-viewport--collapse]=\"collapseOnOverflow\"\n [class.i-chips-viewport--overflow]=\"collapseOnOverflow && chipsOverflow\"\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 @if (collapseOnOverflow && chipsOverflow) {\n <span class=\"i-chips-summary\">{{ overflowText }}</span>\n }\n </div>\n @if (allowCloseAll && chips.length > 0) {\n <button\n type=\"button\"\n class=\"i-chips-clear\"\n aria-label=\"Clear all selected items\"\n [disabled]=\"disabled\"\n (click)=\"onCloseAllClicked($event)\"\n >\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n</div>\n",
|
|
1956
|
+
styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}.i-chips-clear{color:var(--color-text-secondary);background:transparent}.i-chips-clear:focus-visible{outline-color:var(--color-primary)}:host{display:block;width:100%;min-width:0;max-width:100%}.i-chips-wrapper{width:100%;min-width:0}.i-chips-container{display:flex;align-items:center;gap:8px;width:100%;min-width:0;box-sizing:border-box}.i-chips-viewport{position:relative;flex:1;min-width:0}.i-chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}.i-chips-list i-chip{min-width:0;max-width:100%}.i-chips-viewport--collapse{overflow:hidden}.i-chips-viewport--collapse .i-chips-list{flex-wrap:nowrap}.i-chips-viewport--collapse .i-chips-list i-chip{flex-shrink:0}.i-chips-viewport--overflow .i-chips-list{visibility:hidden}.i-chips-summary{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}.i-chips-clear{position:relative;z-index:2;flex:0 0 32px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:4px;cursor:pointer;pointer-events:auto}.i-chips-clear:focus-visible{outline-width:2px;outline-style:solid;outline-offset:-2px}.i-chips-clear:disabled{opacity:.5;cursor:not-allowed}@media(pointer:coarse){.i-chips-clear{flex-basis:44px;width:44px;height:44px}}.i-chips-box{padding:6px 8px;border-radius:4px}\n"]
|
|
1956
1957
|
}]
|
|
1957
1958
|
}],
|
|
1958
1959
|
ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }],
|
|
@@ -2025,8 +2026,8 @@ var IDialogActions = class IDialogActions {
|
|
|
2025
2026
|
submitEvent: "submitEvent"
|
|
2026
2027
|
},
|
|
2027
2028
|
ngImport: i0,
|
|
2028
|
-
template: "<div class=\"dialog-actions\">\n @if (showCancel) {\n <i-button [text]=\"true\" severity=\"secondary\" (clicked)=\"onCancel()\">{{
|
|
2029
|
-
styles: [":host{display:block}.dialog-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap
|
|
2029
|
+
template: "<div class=\"dialog-actions\">\n @if (showCancel) {\n <i-button [text]=\"true\" severity=\"secondary\" (clicked)=\"onCancel()\">{{ cancelLabel }}</i-button>\n }\n @if (showSubmit) {\n <i-button\n [outlined]=\"submitOutlined\"\n [severity]=\"severity\"\n [disabled]=\"submitDisabled || submitLoading\"\n [loading]=\"submitLoading\"\n type=\"submit\"\n (clicked)=\"onSubmit()\"\n >{{ submitLabel }}</i-button\n >\n }\n</div>\n",
|
|
2030
|
+
styles: [":host{display:block}.dialog-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:9px;padding-top:12px;border-top-width:1px;border-top-style:solid}.dialog-actions{border-top-color:var(--surface-border)}\n"],
|
|
2030
2031
|
dependencies: [{
|
|
2031
2032
|
kind: "component",
|
|
2032
2033
|
type: IButton,
|
|
@@ -2061,8 +2062,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2061
2062
|
selector: "i-dialog-actions",
|
|
2062
2063
|
imports: [IButton],
|
|
2063
2064
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
2064
|
-
template: "<div class=\"dialog-actions\">\n @if (showCancel) {\n <i-button [text]=\"true\" severity=\"secondary\" (clicked)=\"onCancel()\">{{
|
|
2065
|
-
styles: [":host{display:block}.dialog-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap
|
|
2065
|
+
template: "<div class=\"dialog-actions\">\n @if (showCancel) {\n <i-button [text]=\"true\" severity=\"secondary\" (clicked)=\"onCancel()\">{{ cancelLabel }}</i-button>\n }\n @if (showSubmit) {\n <i-button\n [outlined]=\"submitOutlined\"\n [severity]=\"severity\"\n [disabled]=\"submitDisabled || submitLoading\"\n [loading]=\"submitLoading\"\n type=\"submit\"\n (clicked)=\"onSubmit()\"\n >{{ submitLabel }}</i-button\n >\n }\n</div>\n",
|
|
2066
|
+
styles: [":host{display:block}.dialog-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:9px;padding-top:12px;border-top-width:1px;border-top-style:solid}.dialog-actions{border-top-color:var(--surface-border)}\n"]
|
|
2066
2067
|
}]
|
|
2067
2068
|
}],
|
|
2068
2069
|
propDecorators: {
|
|
@@ -2117,7 +2118,7 @@ var ConfirmationDialogComponent = class ConfirmationDialogComponent {
|
|
|
2117
2118
|
selector: "i-confirmation-dialog",
|
|
2118
2119
|
ngImport: i0,
|
|
2119
2120
|
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",
|
|
2120
|
-
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}
|
|
2121
|
+
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}@media(max-width:640px){:host,.confirmation-dialog{min-width:0;max-width:100%}}\n"],
|
|
2121
2122
|
dependencies: [{
|
|
2122
2123
|
kind: "component",
|
|
2123
2124
|
type: IDialogActions,
|
|
@@ -2150,7 +2151,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2150
2151
|
imports: [IDialogActions],
|
|
2151
2152
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
2152
2153
|
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",
|
|
2153
|
-
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}
|
|
2154
|
+
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}@media(max-width:640px){:host,.confirmation-dialog{min-width:0;max-width:100%}}\n"]
|
|
2154
2155
|
}]
|
|
2155
2156
|
}]
|
|
2156
2157
|
});
|
|
@@ -2214,6 +2215,17 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2214
2215
|
});
|
|
2215
2216
|
var IDialog = class IDialog extends AbstractDialog {
|
|
2216
2217
|
cdr;
|
|
2218
|
+
static openDialogs = [];
|
|
2219
|
+
static scrollLocks = /* @__PURE__ */ new WeakMap();
|
|
2220
|
+
document = inject(DOCUMENT);
|
|
2221
|
+
overlayService = inject(Overlay);
|
|
2222
|
+
viewContainerRef = inject(ViewContainerRef);
|
|
2223
|
+
overlayRef;
|
|
2224
|
+
overlay;
|
|
2225
|
+
initialized = false;
|
|
2226
|
+
scrollLocked = false;
|
|
2227
|
+
previousFocus;
|
|
2228
|
+
dialogTemplate;
|
|
2217
2229
|
dialogElement;
|
|
2218
2230
|
componentId = UniqueComponentId("i-dialog-");
|
|
2219
2231
|
currentWidth = "";
|
|
@@ -2223,25 +2235,87 @@ var IDialog = class IDialog extends AbstractDialog {
|
|
|
2223
2235
|
this.cdr = cdr;
|
|
2224
2236
|
}
|
|
2225
2237
|
ngOnInit() {
|
|
2226
|
-
|
|
2238
|
+
this.initialized = true;
|
|
2227
2239
|
this.applyBreakpoints();
|
|
2240
|
+
if (this.visible) this.attachOverlay();
|
|
2241
|
+
}
|
|
2242
|
+
ngOnChanges(changes) {
|
|
2243
|
+
if (changes["visible"] && this.initialized) {
|
|
2244
|
+
if (this.visible) this.attachOverlay();
|
|
2245
|
+
else this.detachOverlay();
|
|
2246
|
+
}
|
|
2247
|
+
if (changes["width"] || changes["height"] || changes["breakpoints"]) this.applyBreakpoints();
|
|
2248
|
+
if (changes["modal"] && this.overlay) this.updateScrollLock();
|
|
2228
2249
|
}
|
|
2229
2250
|
ngOnDestroy() {
|
|
2230
|
-
this.
|
|
2251
|
+
this.detachOverlay();
|
|
2252
|
+
}
|
|
2253
|
+
attachOverlay() {
|
|
2254
|
+
if (this.overlayRef) return;
|
|
2255
|
+
this.previousFocus = this.document.activeElement;
|
|
2256
|
+
this.overlayRef = this.overlayService.create();
|
|
2257
|
+
this.overlayRef.attach(new TemplatePortal(this.dialogTemplate, this.viewContainerRef));
|
|
2258
|
+
this.overlay = this.overlayRef.overlayElement.querySelector(".i-dialog-overlay");
|
|
2259
|
+
IDialog.openDialogs.push(this);
|
|
2260
|
+
this.updateScrollLock();
|
|
2261
|
+
this.overlay.querySelector(".i-dialog-container")?.focus({ preventScroll: true });
|
|
2262
|
+
}
|
|
2263
|
+
detachOverlay() {
|
|
2264
|
+
if (!this.overlay) return;
|
|
2265
|
+
const restoreFocus = this.overlay.contains(this.document.activeElement);
|
|
2266
|
+
const index = IDialog.openDialogs.indexOf(this);
|
|
2267
|
+
if (index !== -1) IDialog.openDialogs.splice(index, 1);
|
|
2268
|
+
this.releaseScrollLock();
|
|
2269
|
+
this.overlayRef?.dispose();
|
|
2270
|
+
this.overlayRef = void 0;
|
|
2271
|
+
this.overlay = void 0;
|
|
2272
|
+
if (restoreFocus && this.previousFocus?.isConnected) this.previousFocus.focus({ preventScroll: true });
|
|
2273
|
+
this.previousFocus = void 0;
|
|
2274
|
+
}
|
|
2275
|
+
updateScrollLock() {
|
|
2276
|
+
if (!this.modal) {
|
|
2277
|
+
this.releaseScrollLock();
|
|
2278
|
+
return;
|
|
2279
|
+
}
|
|
2280
|
+
if (this.scrollLocked) return;
|
|
2281
|
+
const lock = IDialog.scrollLocks.get(this.document) ?? {
|
|
2282
|
+
count: 0,
|
|
2283
|
+
overflow: this.document.body.style.overflow
|
|
2284
|
+
};
|
|
2285
|
+
lock.count++;
|
|
2286
|
+
IDialog.scrollLocks.set(this.document, lock);
|
|
2287
|
+
this.document.body.style.overflow = "hidden";
|
|
2288
|
+
this.scrollLocked = true;
|
|
2289
|
+
}
|
|
2290
|
+
releaseScrollLock() {
|
|
2291
|
+
if (!this.scrollLocked) return;
|
|
2292
|
+
const lock = IDialog.scrollLocks.get(this.document);
|
|
2293
|
+
if (--lock.count === 0) {
|
|
2294
|
+
this.document.body.style.overflow = lock.overflow;
|
|
2295
|
+
IDialog.scrollLocks.delete(this.document);
|
|
2296
|
+
}
|
|
2297
|
+
this.scrollLocked = false;
|
|
2231
2298
|
}
|
|
2232
2299
|
show() {
|
|
2233
2300
|
this.visible = true;
|
|
2234
|
-
this.visibleChange.emit(true);
|
|
2235
|
-
document.body.style.overflow = "hidden";
|
|
2236
2301
|
this.cdr.detectChanges();
|
|
2302
|
+
this.attachOverlay();
|
|
2303
|
+
this.cdr.detectChanges();
|
|
2304
|
+
this.visibleChange.emit(true);
|
|
2237
2305
|
}
|
|
2238
2306
|
hide() {
|
|
2239
2307
|
this.visible = false;
|
|
2308
|
+
this.detachOverlay();
|
|
2309
|
+
this.cdr.detectChanges();
|
|
2240
2310
|
this.visibleChange.emit(false);
|
|
2241
|
-
document.body.style.overflow = "";
|
|
2242
2311
|
}
|
|
2243
|
-
onEscapeKey() {
|
|
2244
|
-
|
|
2312
|
+
onEscapeKey(event) {
|
|
2313
|
+
const topDialog = IDialog.openDialogs.at(-1);
|
|
2314
|
+
if (event?.defaultPrevented || topDialog && topDialog !== this) return;
|
|
2315
|
+
if (this.visible) {
|
|
2316
|
+
event?.preventDefault();
|
|
2317
|
+
if (this.closable) this.hide();
|
|
2318
|
+
}
|
|
2245
2319
|
}
|
|
2246
2320
|
onOverlayClick(event) {
|
|
2247
2321
|
const target = event.target;
|
|
@@ -2272,7 +2346,6 @@ var IDialog = class IDialog extends AbstractDialog {
|
|
|
2272
2346
|
this.currentWidth = this.width;
|
|
2273
2347
|
this.currentHeight = this.height || "";
|
|
2274
2348
|
}
|
|
2275
|
-
this.cdr.detectChanges();
|
|
2276
2349
|
}
|
|
2277
2350
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
2278
2351
|
minVersion: "12.0.0",
|
|
@@ -2283,25 +2356,32 @@ var IDialog = class IDialog extends AbstractDialog {
|
|
|
2283
2356
|
target: i0.ɵɵFactoryTarget.Component
|
|
2284
2357
|
});
|
|
2285
2358
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
2286
|
-
minVersion: "
|
|
2359
|
+
minVersion: "14.0.0",
|
|
2287
2360
|
version: "22.2.3",
|
|
2288
2361
|
type: IDialog,
|
|
2289
2362
|
isStandalone: true,
|
|
2290
2363
|
selector: "i-dialog",
|
|
2291
2364
|
host: { listeners: {
|
|
2292
|
-
"document:keydown.escape": "onEscapeKey()",
|
|
2365
|
+
"document:keydown.escape": "onEscapeKey($event)",
|
|
2293
2366
|
"window:resize": "onWindowResize()"
|
|
2294
2367
|
} },
|
|
2295
2368
|
viewQueries: [{
|
|
2369
|
+
propertyName: "dialogTemplate",
|
|
2370
|
+
first: true,
|
|
2371
|
+
predicate: ["dialogTemplate"],
|
|
2372
|
+
descendants: true,
|
|
2373
|
+
static: true
|
|
2374
|
+
}, {
|
|
2296
2375
|
propertyName: "dialogElement",
|
|
2297
2376
|
first: true,
|
|
2298
2377
|
predicate: ["dialogElement"],
|
|
2299
2378
|
descendants: true
|
|
2300
2379
|
}],
|
|
2301
2380
|
usesInheritance: true,
|
|
2381
|
+
usesOnChanges: true,
|
|
2302
2382
|
ngImport: i0,
|
|
2303
|
-
template: "
|
|
2304
|
-
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;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}}@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)}}.i-dialog-overlay{box-sizing:border-box}.i-dialog-overlay .i-dialog-container{min-height:0;max-height:calc(100dvh - 32px)}
|
|
2383
|
+
template: "<ng-template #dialogTemplate>\n <div class=\"i-dialog-overlay\" (click)=\"onOverlayClick($event)\" [attr.id]=\"componentId\">\n <div\n #dialogElement\n class=\"i-dialog-container\"\n role=\"dialog\"\n [attr.aria-modal]=\"modal\"\n [attr.aria-label]=\"header\"\n tabindex=\"-1\"\n [style.width]=\"currentWidth || width\"\n [style.height]=\"currentHeight || height\"\n >\n <i-card\n [title]=\"header\"\n [closable]=\"closable\"\n [fullHeight]=\"true\"\n (closeCard)=\"onCloseClick()\"\n >\n <!-- Main content -->\n <div class=\"i-dialog-content\" [ngStyle]=\"contentStyle\">\n <ng-content></ng-content>\n </div>\n <!-- Footer content -->\n <ng-content slot=\"footer\" select=\"[slot='footer']\"></ng-content>\n </i-card>\n </div>\n </div>\n</ng-template>\n",
|
|
2384
|
+
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;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}}@media(max-width:640px){.i-dialog-overlay{padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}}@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)}}.i-dialog-overlay{box-sizing:border-box}.i-dialog-overlay .i-dialog-container{min-height:0;max-height:calc(100dvh - 32px)}@media(max-width:640px){.i-dialog-overlay .i-dialog-container{max-width:100%;max-height:calc(100dvh - 32px)}}.i-dialog-container>i-card{min-height:0;overflow:auto;overscroll-behavior:contain}@media(max-width:640px){.i-dialog-content{overflow-wrap:anywhere}}\n"],
|
|
2305
2385
|
dependencies: [
|
|
2306
2386
|
{
|
|
2307
2387
|
kind: "ngmodule",
|
|
@@ -2339,19 +2419,23 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2339
2419
|
selector: "i-dialog",
|
|
2340
2420
|
imports: [CommonModule, ICard],
|
|
2341
2421
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
2342
|
-
template: "
|
|
2343
|
-
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;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}}@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)}}.i-dialog-overlay{box-sizing:border-box}.i-dialog-overlay .i-dialog-container{min-height:0;max-height:calc(100dvh - 32px)}
|
|
2422
|
+
template: "<ng-template #dialogTemplate>\n <div class=\"i-dialog-overlay\" (click)=\"onOverlayClick($event)\" [attr.id]=\"componentId\">\n <div\n #dialogElement\n class=\"i-dialog-container\"\n role=\"dialog\"\n [attr.aria-modal]=\"modal\"\n [attr.aria-label]=\"header\"\n tabindex=\"-1\"\n [style.width]=\"currentWidth || width\"\n [style.height]=\"currentHeight || height\"\n >\n <i-card\n [title]=\"header\"\n [closable]=\"closable\"\n [fullHeight]=\"true\"\n (closeCard)=\"onCloseClick()\"\n >\n <!-- Main content -->\n <div class=\"i-dialog-content\" [ngStyle]=\"contentStyle\">\n <ng-content></ng-content>\n </div>\n <!-- Footer content -->\n <ng-content slot=\"footer\" select=\"[slot='footer']\"></ng-content>\n </i-card>\n </div>\n </div>\n</ng-template>\n",
|
|
2423
|
+
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;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}}@media(max-width:640px){.i-dialog-overlay{padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}}@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)}}.i-dialog-overlay{box-sizing:border-box}.i-dialog-overlay .i-dialog-container{min-height:0;max-height:calc(100dvh - 32px)}@media(max-width:640px){.i-dialog-overlay .i-dialog-container{max-width:100%;max-height:calc(100dvh - 32px)}}.i-dialog-container>i-card{min-height:0;overflow:auto;overscroll-behavior:contain}@media(max-width:640px){.i-dialog-content{overflow-wrap:anywhere}}\n"]
|
|
2344
2424
|
}]
|
|
2345
2425
|
}],
|
|
2346
2426
|
ctorParameters: () => [{ type: i0.ChangeDetectorRef }],
|
|
2347
2427
|
propDecorators: {
|
|
2428
|
+
dialogTemplate: [{
|
|
2429
|
+
type: ViewChild,
|
|
2430
|
+
args: ["dialogTemplate", { static: true }]
|
|
2431
|
+
}],
|
|
2348
2432
|
dialogElement: [{
|
|
2349
2433
|
type: ViewChild,
|
|
2350
2434
|
args: ["dialogElement", { static: false }]
|
|
2351
2435
|
}],
|
|
2352
2436
|
onEscapeKey: [{
|
|
2353
2437
|
type: HostListener,
|
|
2354
|
-
args: ["document:keydown.escape"]
|
|
2438
|
+
args: ["document:keydown.escape", ["$event"]]
|
|
2355
2439
|
}],
|
|
2356
2440
|
onWindowResize: [{
|
|
2357
2441
|
type: HostListener,
|
|
@@ -2404,7 +2488,7 @@ var DialogService = class DialogService {
|
|
|
2404
2488
|
if (!visible && !isClosing) ref.close();
|
|
2405
2489
|
});
|
|
2406
2490
|
dialogRef.instance.show();
|
|
2407
|
-
const dialogContent = dialogRef.
|
|
2491
|
+
const dialogContent = dialogRef.instance.dialogElement?.nativeElement.querySelector(".i-dialog-content");
|
|
2408
2492
|
if (dialogContent) dialogContent.appendChild(componentRef.location.nativeElement);
|
|
2409
2493
|
return ref;
|
|
2410
2494
|
}
|
|
@@ -2581,8 +2665,8 @@ var IDivider = class IDivider {
|
|
|
2581
2665
|
align: "align"
|
|
2582
2666
|
},
|
|
2583
2667
|
ngImport: i0,
|
|
2584
|
-
template: "<div\n class=\"i-divider\"\n [class.i-divider--horizontal]=\"layout === 'horizontal'\"\n [class.i-divider--vertical]=\"layout === 'vertical'\"\n [class.i-divider--align-start]=\"align === 'start'\"\n [class.i-divider--align-center]=\"align === 'center'\"\n [class.i-divider--align-end]=\"align === 'end'\"\n role=\"separator\"\n [attr.aria-orientation]=\"layout\"\n>\n @if (layout ===
|
|
2585
|
-
styles: [".i-divider{color:var(--color-text-secondary)}.i-divider .i-divider-line{background:var(--surface-border)}:host{display:block}:host:has(.i-divider--vertical){display:inline-flex;align-self:stretch}.i-divider{display:flex;align-items:center}.i-divider--horizontal{width:100%;min-height:
|
|
2668
|
+
template: "<div\n class=\"i-divider\"\n [class.i-divider--horizontal]=\"layout === 'horizontal'\"\n [class.i-divider--vertical]=\"layout === 'vertical'\"\n [class.i-divider--align-start]=\"align === 'start'\"\n [class.i-divider--align-center]=\"align === 'center'\"\n [class.i-divider--align-end]=\"align === 'end'\"\n role=\"separator\"\n [attr.aria-orientation]=\"layout\"\n>\n @if (layout === 'horizontal') {\n <span class=\"i-divider-line\"></span>\n <span class=\"i-divider-content\"><ng-content></ng-content></span>\n <span class=\"i-divider-line\"></span>\n } @else {\n <span class=\"i-divider-line\"></span>\n }\n</div>\n",
|
|
2669
|
+
styles: [".i-divider{color:var(--color-text-secondary)}.i-divider .i-divider-line{background:var(--surface-border)}:host{display:block}:host:has(.i-divider--vertical){display:inline-flex;align-self:stretch}.i-divider{display:flex;align-items:center}.i-divider--horizontal{width:100%;min-height:18px;margin:12px 0}.i-divider--horizontal .i-divider-line{height:1px;min-width:12px}.i-divider--horizontal .i-divider-content{display:inline-flex;align-items:center;flex-shrink:0;padding:0 9px;font-size:10.5px;font-weight:500;line-height:1;white-space:nowrap}.i-divider--horizontal .i-divider-content:empty{display:none}.i-divider--horizontal.i-divider--align-start .i-divider-line:first-child{max-width:24px}.i-divider--horizontal.i-divider--align-center .i-divider-line{flex:1 1 0}.i-divider--horizontal.i-divider--align-end .i-divider-line:last-child{max-width:24px}.i-divider--vertical{align-self:stretch;justify-content:center;min-height:24px;margin:0 12px}.i-divider--vertical .i-divider-line{width:1px;min-height:100%}\n"],
|
|
2586
2670
|
changeDetection: i0.ChangeDetectionStrategy.Eager
|
|
2587
2671
|
});
|
|
2588
2672
|
};
|
|
@@ -2598,8 +2682,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2598
2682
|
standalone: true,
|
|
2599
2683
|
imports: [],
|
|
2600
2684
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
2601
|
-
template: "<div\n class=\"i-divider\"\n [class.i-divider--horizontal]=\"layout === 'horizontal'\"\n [class.i-divider--vertical]=\"layout === 'vertical'\"\n [class.i-divider--align-start]=\"align === 'start'\"\n [class.i-divider--align-center]=\"align === 'center'\"\n [class.i-divider--align-end]=\"align === 'end'\"\n role=\"separator\"\n [attr.aria-orientation]=\"layout\"\n>\n @if (layout ===
|
|
2602
|
-
styles: [".i-divider{color:var(--color-text-secondary)}.i-divider .i-divider-line{background:var(--surface-border)}:host{display:block}:host:has(.i-divider--vertical){display:inline-flex;align-self:stretch}.i-divider{display:flex;align-items:center}.i-divider--horizontal{width:100%;min-height:
|
|
2685
|
+
template: "<div\n class=\"i-divider\"\n [class.i-divider--horizontal]=\"layout === 'horizontal'\"\n [class.i-divider--vertical]=\"layout === 'vertical'\"\n [class.i-divider--align-start]=\"align === 'start'\"\n [class.i-divider--align-center]=\"align === 'center'\"\n [class.i-divider--align-end]=\"align === 'end'\"\n role=\"separator\"\n [attr.aria-orientation]=\"layout\"\n>\n @if (layout === 'horizontal') {\n <span class=\"i-divider-line\"></span>\n <span class=\"i-divider-content\"><ng-content></ng-content></span>\n <span class=\"i-divider-line\"></span>\n } @else {\n <span class=\"i-divider-line\"></span>\n }\n</div>\n",
|
|
2686
|
+
styles: [".i-divider{color:var(--color-text-secondary)}.i-divider .i-divider-line{background:var(--surface-border)}:host{display:block}:host:has(.i-divider--vertical){display:inline-flex;align-self:stretch}.i-divider{display:flex;align-items:center}.i-divider--horizontal{width:100%;min-height:18px;margin:12px 0}.i-divider--horizontal .i-divider-line{height:1px;min-width:12px}.i-divider--horizontal .i-divider-content{display:inline-flex;align-items:center;flex-shrink:0;padding:0 9px;font-size:10.5px;font-weight:500;line-height:1;white-space:nowrap}.i-divider--horizontal .i-divider-content:empty{display:none}.i-divider--horizontal.i-divider--align-start .i-divider-line:first-child{max-width:24px}.i-divider--horizontal.i-divider--align-center .i-divider-line{flex:1 1 0}.i-divider--horizontal.i-divider--align-end .i-divider-line:last-child{max-width:24px}.i-divider--vertical{align-self:stretch;justify-content:center;min-height:24px;margin:0 12px}.i-divider--vertical .i-divider-line{width:1px;min-height:100%}\n"]
|
|
2603
2687
|
}]
|
|
2604
2688
|
}],
|
|
2605
2689
|
propDecorators: {
|
|
@@ -2707,8 +2791,8 @@ var IMessage = class IMessage {
|
|
|
2707
2791
|
},
|
|
2708
2792
|
outputs: { visibleChange: "visibleChange" },
|
|
2709
2793
|
ngImport: i0,
|
|
2710
|
-
template: "@if (visible) {\n <div
|
|
2711
|
-
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
|
|
2794
|
+
template: "@if (visible) {\n <div class=\"i-message i-message-{{ severity }} i-message--{{ size }}\" role=\"alert\">\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 class=\"i-message-close\" type=\"button\" (click)=\"close()\" aria-label=\"Close\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </div>\n </div>\n}\n",
|
|
2795
|
+
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 .i-message-content .i-message-close{background:none}.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:11.4px}.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,.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:13.2px}.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{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"],
|
|
2712
2796
|
changeDetection: i0.ChangeDetectionStrategy.Eager
|
|
2713
2797
|
});
|
|
2714
2798
|
};
|
|
@@ -2723,8 +2807,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2723
2807
|
selector: "i-message",
|
|
2724
2808
|
imports: [],
|
|
2725
2809
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
2726
|
-
template: "@if (visible) {\n <div
|
|
2727
|
-
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
|
|
2810
|
+
template: "@if (visible) {\n <div class=\"i-message i-message-{{ severity }} i-message--{{ size }}\" role=\"alert\">\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 class=\"i-message-close\" type=\"button\" (click)=\"close()\" aria-label=\"Close\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </div>\n </div>\n}\n",
|
|
2811
|
+
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 .i-message-content .i-message-close{background:none}.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:11.4px}.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,.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:13.2px}.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{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"]
|
|
2728
2812
|
}]
|
|
2729
2813
|
}],
|
|
2730
2814
|
propDecorators: {
|
|
@@ -2890,8 +2974,8 @@ var IFileUpload = class IFileUpload {
|
|
|
2890
2974
|
validationError: "validationError"
|
|
2891
2975
|
},
|
|
2892
2976
|
ngImport: i0,
|
|
2893
|
-
template: "<div class=\"i-file-upload\" [class.i-file-upload--disabled]=\"disabled\">\n <div
|
|
2894
|
-
styles: [".i-file-upload{color:var(--color-text-primary)}.i-file-upload__drop-zone{border-color:var(--surface-border);background:var(--surface-card)}.i-file-upload__drop-zone--active,.i-file-upload__drop-zone:focus-within{border-color:var(--color-primary);background:var(--surface-hover)}.i-file-upload__icon,.i-file-upload__row>i{color:var(--color-primary)}.i-file-upload__description{color:var(--color-text-secondary)}.i-file-upload__row{border-color:var(--surface-border)}.i-file-upload--
|
|
2977
|
+
template: "<div class=\"i-file-upload\" [class.i-file-upload--disabled]=\"disabled\">\n <div\n class=\"i-file-upload__drop-zone\"\n [class.i-file-upload__drop-zone--active]=\"dragging && !disabled\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <i [class]=\"uploadIcon + ' i-file-upload__icon'\" aria-hidden=\"true\"></i>\n <strong>{{ dropLabel }}</strong>\n <span class=\"i-file-upload__description\">{{ description }}</span>\n <input\n #fileInput\n type=\"file\"\n hidden\n [multiple]=\"limits.multiple\"\n [accept]=\"accept\"\n [disabled]=\"disabled\"\n (change)=\"onSelect($event)\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"componentId + '-limits'\"\n />\n <i-button\n icon=\"pi pi-plus\"\n [outlined]=\"true\"\n [disabled]=\"disabled\"\n [ariaLabel]=\"ariaLabel\"\n (clicked)=\"fileInput.click()\"\n >{{ chooseLabel }}</i-button\n >\n <small [id]=\"componentId + '-limits'\" class=\"i-file-upload__description\">{{\n limitsLabel\n }}</small>\n @if (accept) {\n <small class=\"i-file-upload__description\">Accepted types: {{ accept }}</small>\n }\n </div>\n @if (error) {\n <i-message severity=\"danger\" role=\"alert\">{{ error.message }}</i-message>\n }\n <div class=\"i-file-upload__list\" aria-live=\"polite\" aria-relevant=\"additions removals text\">\n @if (files.length) {\n <strong>{{ files.length }} file{{ files.length === 1 ? '' : 's' }} selected</strong>\n @for (file of files; track $index) {\n <div class=\"i-file-upload__row\">\n <i [class]=\"fileIcon\" aria-hidden=\"true\"></i>\n <span class=\"i-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n <small class=\"i-file-upload__description\">{{ formatSize(file.size) }}</small>\n <i-button\n icon=\"pi pi-times\"\n [text]=\"true\"\n size=\"small\"\n [ariaLabel]=\"'Remove ' + file.name\"\n [disabled]=\"disabled\"\n (clicked)=\"remove($index)\"\n />\n </div>\n }\n }\n </div>\n</div>\n",
|
|
2978
|
+
styles: [".i-file-upload{color:var(--color-text-primary)}.i-file-upload__drop-zone{border-color:var(--surface-border);background:var(--surface-card)}.i-file-upload__drop-zone--active,.i-file-upload__drop-zone:focus-within{border-color:var(--color-primary);background:var(--surface-hover)}.i-file-upload__icon,.i-file-upload__row>i{color:var(--color-primary)}.i-file-upload__description{color:var(--color-text-secondary)}.i-file-upload__row{border-color:var(--surface-border)}.i-file-upload--disabled__drop-zone{background:var(--color-disabled-background);border-color:var(--color-disabled-border)}:host{display:block}.i-file-upload{display:flex;flex-direction:column;gap:12px}.i-file-upload__drop-zone{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 12px;text-align:center;border-width:2px;border-style:dashed;border-radius:8px;transition:border-color .2s,background .2s}.i-file-upload__icon{font-size:24px}.i-file-upload--disabled__drop-zone{opacity:.65}.i-file-upload__list{display:flex;flex-direction:column;gap:6px}.i-file-upload__row{display:flex;align-items:center;gap:9px;padding:6px;border-bottom-width:1px;border-bottom-style:solid}.i-file-upload__row small{white-space:nowrap}.i-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:480px){.i-file-upload__row{flex-wrap:wrap}}@media(max-width:480px){.i-file-upload__name{flex-basis:calc(100% - 48px)}}\n"],
|
|
2895
2979
|
dependencies: [{
|
|
2896
2980
|
kind: "component",
|
|
2897
2981
|
type: IButton,
|
|
@@ -2939,8 +3023,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2939
3023
|
standalone: true,
|
|
2940
3024
|
imports: [IButton, IMessage],
|
|
2941
3025
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2942
|
-
template: "<div class=\"i-file-upload\" [class.i-file-upload--disabled]=\"disabled\">\n <div
|
|
2943
|
-
styles: [".i-file-upload{color:var(--color-text-primary)}.i-file-upload__drop-zone{border-color:var(--surface-border);background:var(--surface-card)}.i-file-upload__drop-zone--active,.i-file-upload__drop-zone:focus-within{border-color:var(--color-primary);background:var(--surface-hover)}.i-file-upload__icon,.i-file-upload__row>i{color:var(--color-primary)}.i-file-upload__description{color:var(--color-text-secondary)}.i-file-upload__row{border-color:var(--surface-border)}.i-file-upload--
|
|
3026
|
+
template: "<div class=\"i-file-upload\" [class.i-file-upload--disabled]=\"disabled\">\n <div\n class=\"i-file-upload__drop-zone\"\n [class.i-file-upload__drop-zone--active]=\"dragging && !disabled\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <i [class]=\"uploadIcon + ' i-file-upload__icon'\" aria-hidden=\"true\"></i>\n <strong>{{ dropLabel }}</strong>\n <span class=\"i-file-upload__description\">{{ description }}</span>\n <input\n #fileInput\n type=\"file\"\n hidden\n [multiple]=\"limits.multiple\"\n [accept]=\"accept\"\n [disabled]=\"disabled\"\n (change)=\"onSelect($event)\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"componentId + '-limits'\"\n />\n <i-button\n icon=\"pi pi-plus\"\n [outlined]=\"true\"\n [disabled]=\"disabled\"\n [ariaLabel]=\"ariaLabel\"\n (clicked)=\"fileInput.click()\"\n >{{ chooseLabel }}</i-button\n >\n <small [id]=\"componentId + '-limits'\" class=\"i-file-upload__description\">{{\n limitsLabel\n }}</small>\n @if (accept) {\n <small class=\"i-file-upload__description\">Accepted types: {{ accept }}</small>\n }\n </div>\n @if (error) {\n <i-message severity=\"danger\" role=\"alert\">{{ error.message }}</i-message>\n }\n <div class=\"i-file-upload__list\" aria-live=\"polite\" aria-relevant=\"additions removals text\">\n @if (files.length) {\n <strong>{{ files.length }} file{{ files.length === 1 ? '' : 's' }} selected</strong>\n @for (file of files; track $index) {\n <div class=\"i-file-upload__row\">\n <i [class]=\"fileIcon\" aria-hidden=\"true\"></i>\n <span class=\"i-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n <small class=\"i-file-upload__description\">{{ formatSize(file.size) }}</small>\n <i-button\n icon=\"pi pi-times\"\n [text]=\"true\"\n size=\"small\"\n [ariaLabel]=\"'Remove ' + file.name\"\n [disabled]=\"disabled\"\n (clicked)=\"remove($index)\"\n />\n </div>\n }\n }\n </div>\n</div>\n",
|
|
3027
|
+
styles: [".i-file-upload{color:var(--color-text-primary)}.i-file-upload__drop-zone{border-color:var(--surface-border);background:var(--surface-card)}.i-file-upload__drop-zone--active,.i-file-upload__drop-zone:focus-within{border-color:var(--color-primary);background:var(--surface-hover)}.i-file-upload__icon,.i-file-upload__row>i{color:var(--color-primary)}.i-file-upload__description{color:var(--color-text-secondary)}.i-file-upload__row{border-color:var(--surface-border)}.i-file-upload--disabled__drop-zone{background:var(--color-disabled-background);border-color:var(--color-disabled-border)}:host{display:block}.i-file-upload{display:flex;flex-direction:column;gap:12px}.i-file-upload__drop-zone{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 12px;text-align:center;border-width:2px;border-style:dashed;border-radius:8px;transition:border-color .2s,background .2s}.i-file-upload__icon{font-size:24px}.i-file-upload--disabled__drop-zone{opacity:.65}.i-file-upload__list{display:flex;flex-direction:column;gap:6px}.i-file-upload__row{display:flex;align-items:center;gap:9px;padding:6px;border-bottom-width:1px;border-bottom-style:solid}.i-file-upload__row small{white-space:nowrap}.i-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:480px){.i-file-upload__row{flex-wrap:wrap}}@media(max-width:480px){.i-file-upload__name{flex-basis:calc(100% - 48px)}}\n"]
|
|
2944
3028
|
}]
|
|
2945
3029
|
}],
|
|
2946
3030
|
propDecorators: {
|
|
@@ -3084,8 +3168,8 @@ var ITextarea = class ITextarea {
|
|
|
3084
3168
|
charCountWarnAt: "charCountWarnAt"
|
|
3085
3169
|
},
|
|
3086
3170
|
ngImport: i0,
|
|
3087
|
-
template: "<div\n class=\"i-textarea-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-textarea--fluid]=\"fluid\"\n [class.i-textarea--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div
|
|
3088
|
-
styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.i-textarea[disabled]+.i-textarea-label{color:var(--color-text-disabled)}.invalid .i-textarea{border-color:var(--color-danger)}.invalid .i-textarea-label,.invalid .i-error{color:var(--color-danger)}.i-char-count{color:var(--color-text-secondary)}.i-char-count.i-char-count--warn{color:var(--color-warning)}.i-char-count.i-char-count--over{color:var(--color-danger)}.i-textarea-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:
|
|
3171
|
+
template: "<div\n class=\"i-textarea-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-textarea--fluid]=\"fluid\"\n [class.i-textarea--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\" class=\"i-textarea-container\">\n <div class=\"i-textarea-icon-wrapper\">\n <textarea\n #textareaElement\n [id]=\"id || componentId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [rows]=\"rows\"\n [attr.maxlength]=\"maxLength || null\"\n [value]=\"value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-textarea\"\n [class.readonly]=\"readonly\"\n [class.no-resize]=\"!resizable\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n ></textarea>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-textarea-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <div class=\"i-textarea-footer\">\n @if (showErrors && getErrorMessage()) {\n <span class=\"i-error\">{{ getErrorMessage() }}</span>\n }\n @if (maxLength) {\n <span\n class=\"i-char-count\"\n [class.i-char-count--warn]=\"charCountWarning\"\n [class.i-char-count--over]=\"charCountOver\"\n >\n {{ currentLength }}/{{ maxLength }}\n </span>\n }\n </div>\n</div>\n",
|
|
3172
|
+
styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.i-textarea[disabled]+.i-textarea-label{color:var(--color-text-disabled)}.invalid .i-textarea{border-color:var(--color-danger)}.invalid .i-textarea-label,.invalid .i-error{color:var(--color-danger)}.i-char-count{color:var(--color-text-secondary)}.i-char-count.i-char-count--warn{color:var(--color-warning)}.i-char-count.i-char-count--over{color:var(--color-danger)}.i-textarea-wrapper .i-textarea.readonly{caret-color:transparent}.i-textarea-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:12px}.i-textarea-wrapper.i-textarea--fluid{width:100%}.i-textarea-wrapper.i-textarea--no-float{margin-top:0;height:auto}.i-textarea-wrapper .i-textarea-container{display:flex;align-items:flex-start;gap:8px}.i-textarea-wrapper .i-textarea{box-sizing:border-box;width:100%;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease;font-family:inherit;font-size:inherit;line-height:1.5;resize:vertical}.i-textarea-wrapper .i-textarea:focus{outline:none}.i-textarea-wrapper .i-textarea.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;resize:none}.i-textarea-wrapper .i-textarea.no-resize{resize:none}.i-textarea-wrapper .i-textarea-icon-wrapper{position:relative;width:100%;display:flex}.i-textarea-wrapper .float-label{position:relative;display:flex;align-items:flex-start}.i-textarea-wrapper .float-label .i-textarea{padding:20px 10px 8px}.i-textarea-wrapper .float-label .i-textarea-label{position:absolute;top:16px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none;font-size:12px}.i-textarea-wrapper .float-label .i-textarea:focus+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-textarea-wrapper .normal-input{position:relative}.i-textarea-wrapper .normal-input .i-textarea{padding:8px 12px}.i-textarea-wrapper .i-textarea-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:16px}.i-textarea-wrapper .i-char-count{font-size:9px}.i-textarea-wrapper .i-error{font-size:9px;flex:1}@media(pointer:coarse){.i-textarea-wrapper .i-textarea{font-size:16px;min-height:88px}}\n"],
|
|
3089
3173
|
dependencies: [
|
|
3090
3174
|
{
|
|
3091
3175
|
kind: "ngmodule",
|
|
@@ -3123,8 +3207,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3123
3207
|
standalone: true,
|
|
3124
3208
|
imports: [CommonModule, TooltipDirective],
|
|
3125
3209
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
3126
|
-
template: "<div\n class=\"i-textarea-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-textarea--fluid]=\"fluid\"\n [class.i-textarea--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div
|
|
3127
|
-
styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.i-textarea[disabled]+.i-textarea-label{color:var(--color-text-disabled)}.invalid .i-textarea{border-color:var(--color-danger)}.invalid .i-textarea-label,.invalid .i-error{color:var(--color-danger)}.i-char-count{color:var(--color-text-secondary)}.i-char-count.i-char-count--warn{color:var(--color-warning)}.i-char-count.i-char-count--over{color:var(--color-danger)}.i-textarea-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:
|
|
3210
|
+
template: "<div\n class=\"i-textarea-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-textarea--fluid]=\"fluid\"\n [class.i-textarea--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\" class=\"i-textarea-container\">\n <div class=\"i-textarea-icon-wrapper\">\n <textarea\n #textareaElement\n [id]=\"id || componentId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [rows]=\"rows\"\n [attr.maxlength]=\"maxLength || null\"\n [value]=\"value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-textarea\"\n [class.readonly]=\"readonly\"\n [class.no-resize]=\"!resizable\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n ></textarea>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-textarea-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <div class=\"i-textarea-footer\">\n @if (showErrors && getErrorMessage()) {\n <span class=\"i-error\">{{ getErrorMessage() }}</span>\n }\n @if (maxLength) {\n <span\n class=\"i-char-count\"\n [class.i-char-count--warn]=\"charCountWarning\"\n [class.i-char-count--over]=\"charCountOver\"\n >\n {{ currentLength }}/{{ maxLength }}\n </span>\n }\n </div>\n</div>\n",
|
|
3211
|
+
styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.i-textarea[disabled]+.i-textarea-label{color:var(--color-text-disabled)}.invalid .i-textarea{border-color:var(--color-danger)}.invalid .i-textarea-label,.invalid .i-error{color:var(--color-danger)}.i-char-count{color:var(--color-text-secondary)}.i-char-count.i-char-count--warn{color:var(--color-warning)}.i-char-count.i-char-count--over{color:var(--color-danger)}.i-textarea-wrapper .i-textarea.readonly{caret-color:transparent}.i-textarea-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:12px}.i-textarea-wrapper.i-textarea--fluid{width:100%}.i-textarea-wrapper.i-textarea--no-float{margin-top:0;height:auto}.i-textarea-wrapper .i-textarea-container{display:flex;align-items:flex-start;gap:8px}.i-textarea-wrapper .i-textarea{box-sizing:border-box;width:100%;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease;font-family:inherit;font-size:inherit;line-height:1.5;resize:vertical}.i-textarea-wrapper .i-textarea:focus{outline:none}.i-textarea-wrapper .i-textarea.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;resize:none}.i-textarea-wrapper .i-textarea.no-resize{resize:none}.i-textarea-wrapper .i-textarea-icon-wrapper{position:relative;width:100%;display:flex}.i-textarea-wrapper .float-label{position:relative;display:flex;align-items:flex-start}.i-textarea-wrapper .float-label .i-textarea{padding:20px 10px 8px}.i-textarea-wrapper .float-label .i-textarea-label{position:absolute;top:16px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none;font-size:12px}.i-textarea-wrapper .float-label .i-textarea:focus+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-textarea-wrapper .normal-input{position:relative}.i-textarea-wrapper .normal-input .i-textarea{padding:8px 12px}.i-textarea-wrapper .i-textarea-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:16px}.i-textarea-wrapper .i-char-count{font-size:9px}.i-textarea-wrapper .i-error{font-size:9px;flex:1}@media(pointer:coarse){.i-textarea-wrapper .i-textarea{font-size:16px;min-height:88px}}\n"]
|
|
3128
3212
|
}]
|
|
3129
3213
|
}],
|
|
3130
3214
|
ctorParameters: () => [{
|
|
@@ -3183,7 +3267,7 @@ var ITag = class ITag {
|
|
|
3183
3267
|
},
|
|
3184
3268
|
ngImport: i0,
|
|
3185
3269
|
template: "<span\n class=\"i-tag\"\n [ngClass]=\"[\n severity ? 'i-tag-' + severity : '',\n rounded ? 'i-tag-rounded' : '',\n size === 'lg' ? 'i-tag-lg' : size === 'sm' ? 'i-tag-sm' : '',\n ]\"\n>\n @if (icon) {\n <i [class]=\"icon\" class=\"i-tag-icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"i-tag-value\">{{ value }}</span>\n</span>\n",
|
|
3186
|
-
styles: ["
|
|
3270
|
+
styles: ["@charset \"UTF-8\";.i-tag{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-tag.i-tag-primary{background:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)}.i-tag.i-tag-secondary{background:color-mix(in srgb,var(--color-secondary) 15%,transparent);color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)}.i-tag.i-tag-tertiary{background:color-mix(in srgb,var(--color-tertiary) 15%,transparent);color:var(--color-tertiary);border-color:color-mix(in srgb,var(--color-tertiary) 40%,transparent)}.i-tag.i-tag-success{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)}.i-tag.i-tag-info{background:color-mix(in srgb,var(--color-info) 15%,transparent);color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)}.i-tag.i-tag-warning{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)}.i-tag.i-tag-danger{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)}.i-tag.i-tag-contrast{background:var(--color-component-background-solid);color:var(--color-text-contrast);border-color:var(--color-component-background-solid)}.i-tag .i-tag-icon{color:inherit}.i-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:4px;font-size:9.6px;font-weight:600;letter-spacing:.192px;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1.4;transition:opacity .15s ease}.i-tag.i-tag-rounded{border-radius:999px}.i-tag.i-tag-lg{font-size:10.8px;padding:4px 12px;letter-spacing:.216px}.i-tag.i-tag-lg .i-tag-icon{font-size:9.72px}.i-tag.i-tag-sm{font-size:8.64px;padding:2px 8px;letter-spacing:.1728px}.i-tag.i-tag-sm .i-tag-icon{font-size:7.776px}.i-tag .i-tag-icon{font-size:8.64px;flex-shrink:0}.i-tag .i-tag-value{line-height:1}\n"],
|
|
3187
3271
|
dependencies: [{
|
|
3188
3272
|
kind: "ngmodule",
|
|
3189
3273
|
type: CommonModule
|
|
@@ -3209,7 +3293,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3209
3293
|
imports: [CommonModule],
|
|
3210
3294
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3211
3295
|
template: "<span\n class=\"i-tag\"\n [ngClass]=\"[\n severity ? 'i-tag-' + severity : '',\n rounded ? 'i-tag-rounded' : '',\n size === 'lg' ? 'i-tag-lg' : size === 'sm' ? 'i-tag-sm' : '',\n ]\"\n>\n @if (icon) {\n <i [class]=\"icon\" class=\"i-tag-icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"i-tag-value\">{{ value }}</span>\n</span>\n",
|
|
3212
|
-
styles: ["
|
|
3296
|
+
styles: ["@charset \"UTF-8\";.i-tag{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-tag.i-tag-primary{background:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)}.i-tag.i-tag-secondary{background:color-mix(in srgb,var(--color-secondary) 15%,transparent);color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)}.i-tag.i-tag-tertiary{background:color-mix(in srgb,var(--color-tertiary) 15%,transparent);color:var(--color-tertiary);border-color:color-mix(in srgb,var(--color-tertiary) 40%,transparent)}.i-tag.i-tag-success{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)}.i-tag.i-tag-info{background:color-mix(in srgb,var(--color-info) 15%,transparent);color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)}.i-tag.i-tag-warning{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)}.i-tag.i-tag-danger{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)}.i-tag.i-tag-contrast{background:var(--color-component-background-solid);color:var(--color-text-contrast);border-color:var(--color-component-background-solid)}.i-tag .i-tag-icon{color:inherit}.i-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:4px;font-size:9.6px;font-weight:600;letter-spacing:.192px;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1.4;transition:opacity .15s ease}.i-tag.i-tag-rounded{border-radius:999px}.i-tag.i-tag-lg{font-size:10.8px;padding:4px 12px;letter-spacing:.216px}.i-tag.i-tag-lg .i-tag-icon{font-size:9.72px}.i-tag.i-tag-sm{font-size:8.64px;padding:2px 8px;letter-spacing:.1728px}.i-tag.i-tag-sm .i-tag-icon{font-size:7.776px}.i-tag .i-tag-icon{font-size:8.64px;flex-shrink:0}.i-tag .i-tag-value{line-height:1}\n"]
|
|
3213
3297
|
}]
|
|
3214
3298
|
}],
|
|
3215
3299
|
propDecorators: {
|
|
@@ -3259,7 +3343,7 @@ var IPlaceholder = class IPlaceholder {
|
|
|
3259
3343
|
},
|
|
3260
3344
|
ngImport: i0,
|
|
3261
3345
|
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",
|
|
3262
|
-
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:
|
|
3346
|
+
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:24px;transition:none;animation:none}.i-placeholder .i-placeholder-content i{font-size:48px;margin-bottom:18px;display:block}\n"],
|
|
3263
3347
|
changeDetection: i0.ChangeDetectionStrategy.Eager
|
|
3264
3348
|
});
|
|
3265
3349
|
};
|
|
@@ -3276,7 +3360,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3276
3360
|
imports: [],
|
|
3277
3361
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
3278
3362
|
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",
|
|
3279
|
-
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:
|
|
3363
|
+
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:24px;transition:none;animation:none}.i-placeholder .i-placeholder-content i{font-size:48px;margin-bottom:18px;display:block}\n"]
|
|
3280
3364
|
}]
|
|
3281
3365
|
}],
|
|
3282
3366
|
propDecorators: {
|
|
@@ -3308,7 +3392,7 @@ var NoContentComponent = class NoContentComponent {
|
|
|
3308
3392
|
},
|
|
3309
3393
|
ngImport: i0,
|
|
3310
3394
|
template: "<i-placeholder [customIcon]=\"icon\" arrowDirection=\"none\">\n <p class=\"no-content-message\">{{ message }}</p>\n</i-placeholder>\n",
|
|
3311
|
-
styles: ["
|
|
3395
|
+
styles: [""],
|
|
3312
3396
|
dependencies: [{
|
|
3313
3397
|
kind: "component",
|
|
3314
3398
|
type: IPlaceholder,
|
|
@@ -3334,8 +3418,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3334
3418
|
standalone: true,
|
|
3335
3419
|
imports: [IPlaceholder],
|
|
3336
3420
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
3337
|
-
template: "<i-placeholder [customIcon]=\"icon\" arrowDirection=\"none\">\n <p class=\"no-content-message\">{{ message }}</p>\n</i-placeholder>\n"
|
|
3338
|
-
styles: [".no-content-message{font-size:1rem;margin:.5rem 0 0;font-weight:500;color:var(--color-text-secondary)}\n"]
|
|
3421
|
+
template: "<i-placeholder [customIcon]=\"icon\" arrowDirection=\"none\">\n <p class=\"no-content-message\">{{ message }}</p>\n</i-placeholder>\n"
|
|
3339
3422
|
}]
|
|
3340
3423
|
}],
|
|
3341
3424
|
propDecorators: {
|
|
@@ -3499,8 +3582,8 @@ var TopbarComponent = class TopbarComponent {
|
|
|
3499
3582
|
selector: "i-topbar",
|
|
3500
3583
|
inputs: { config: "config" },
|
|
3501
3584
|
ngImport: i0,
|
|
3502
|
-
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'
|
|
3503
|
-
styles: [".layout-topbar{position:relative;height:var(--layout-topbar-height,
|
|
3585
|
+
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': 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",
|
|
3586
|
+
styles: [".layout-topbar{position:relative;height:var(--layout-topbar-height, 60px);z-index:997;width:100%;padding:0 24px;transition:left .2s;display:flex;align-items:center}.layout-topbar .layout-topbar-logo{display:flex;align-items:center;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:30px;margin-right:6px}.layout-topbar .layout-topbar-logo:focus{outline:0 none;outline-offset:0;transition:box-shadow .2s}.layout-topbar .layout-menu-button{margin-left:24px}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-button i{font-size:15px}.layout-topbar .layout-topbar-menu{gap:6px;margin:0 0 0 auto;padding:0;list-style:none;display:flex}@media(max-width:991px){.layout-topbar{box-sizing:border-box;padding:0 12px;gap:8px;justify-content:space-between}.layout-topbar .layout-topbar-logo{width:auto;min-width:0;margin-right:0;order:2}.layout-topbar .layout-topbar-logo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layout-topbar .layout-topbar-logo img{flex-shrink:0}.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;border-radius:12px;padding:12px;right:24px;top:60px;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}}.layout-topbar{background-color:var(--surface-card);box-shadow:0 3px 5px color-mix(in srgb,#000000 2%,transparent),0 0 2px color-mix(in srgb,#000000 5%,transparent),0 1px 4px color-mix(in srgb,#000000 8%,transparent)}.layout-topbar .layout-topbar-logo{color:var(--color-text-primary)}.layout-topbar .layout-topbar-logo:focus{box-shadow:inset 0 0 0 2px var(--color-primary)}@media(max-width:991px){.layout-topbar .layout-topbar-menu{background-color:var(--surface-overlay);box-shadow:0 3px 5px color-mix(in srgb,#000000 2%,transparent),0 0 2px color-mix(in srgb,#000000 5%,transparent),0 1px 4px color-mix(in srgb,#000000 8%,transparent)}}\n"],
|
|
3504
3587
|
dependencies: [
|
|
3505
3588
|
{
|
|
3506
3589
|
kind: "directive",
|
|
@@ -3566,8 +3649,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3566
3649
|
NgClass,
|
|
3567
3650
|
IButton
|
|
3568
3651
|
],
|
|
3569
|
-
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'
|
|
3570
|
-
styles: [".layout-topbar{position:relative;height:var(--layout-topbar-height,
|
|
3652
|
+
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': 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",
|
|
3653
|
+
styles: [".layout-topbar{position:relative;height:var(--layout-topbar-height, 60px);z-index:997;width:100%;padding:0 24px;transition:left .2s;display:flex;align-items:center}.layout-topbar .layout-topbar-logo{display:flex;align-items:center;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:30px;margin-right:6px}.layout-topbar .layout-topbar-logo:focus{outline:0 none;outline-offset:0;transition:box-shadow .2s}.layout-topbar .layout-menu-button{margin-left:24px}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-button i{font-size:15px}.layout-topbar .layout-topbar-menu{gap:6px;margin:0 0 0 auto;padding:0;list-style:none;display:flex}@media(max-width:991px){.layout-topbar{box-sizing:border-box;padding:0 12px;gap:8px;justify-content:space-between}.layout-topbar .layout-topbar-logo{width:auto;min-width:0;margin-right:0;order:2}.layout-topbar .layout-topbar-logo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layout-topbar .layout-topbar-logo img{flex-shrink:0}.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;border-radius:12px;padding:12px;right:24px;top:60px;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}}.layout-topbar{background-color:var(--surface-card);box-shadow:0 3px 5px color-mix(in srgb,#000000 2%,transparent),0 0 2px color-mix(in srgb,#000000 5%,transparent),0 1px 4px color-mix(in srgb,#000000 8%,transparent)}.layout-topbar .layout-topbar-logo{color:var(--color-text-primary)}.layout-topbar .layout-topbar-logo:focus{box-shadow:inset 0 0 0 2px var(--color-primary)}@media(max-width:991px){.layout-topbar .layout-topbar-menu{background-color:var(--surface-overlay);box-shadow:0 3px 5px color-mix(in srgb,#000000 2%,transparent),0 0 2px color-mix(in srgb,#000000 5%,transparent),0 1px 4px color-mix(in srgb,#000000 8%,transparent)}}\n"]
|
|
3571
3654
|
}]
|
|
3572
3655
|
}],
|
|
3573
3656
|
ctorParameters: () => [{ type: LayoutService }],
|
|
@@ -3665,7 +3748,7 @@ var MenuComponent = class MenuComponent {
|
|
|
3665
3748
|
inputs: { model: "model" },
|
|
3666
3749
|
ngImport: i0,
|
|
3667
3750
|
template: "<ul class=\"menu\">\n @for (group of filteredModel(); 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",
|
|
3668
|
-
styles: [".menu{list-style:none;margin:0;padding:0}.menu-group{margin-bottom:
|
|
3751
|
+
styles: [".menu{list-style:none;margin:0;padding:0}.menu-group{margin-bottom:12px}.menu-group .menu-group-label{font-size:12px;font-weight:600;text-transform:uppercase;padding:6px 12px}.menu-group .menu-items{list-style:none;margin:0;padding:0}.menu-group .menu-items .menu-item a{display:flex;align-items:center;padding:9px 12px;text-decoration:none;font-size:12px;border-left-width:3px;border-left-style:solid;transition:all .2s ease}.menu-group .menu-items .menu-item a i{margin-right:6px;font-size:12px}.menu-group .menu-items .menu-item a:hover{border-radius:6px}.menu-group .menu-items .menu-item a.active{border-radius:6px;border-left-width:3px;border-left-style:solid;font-weight:600}.menu-group .menu-items .menu-item .submenu{list-style:none;padding-left:18px}.menu-group .menu-items .menu-item .submenu .submenu-item a{padding:6px 12px;font-size:11.4px}.menu-group .menu-items .menu-item .submenu .submenu-item a.active{font-weight:600}.menu-group .menu-group-label{color:var(--color-contrast)}.menu-group .menu-items .menu-item a{color:var(--color-text-secondary);border-left-color:transparent}.menu-group .menu-items .menu-item a:hover{background-color:var(--surface-hover)}.menu-group .menu-items .menu-item a.active{background-color:var(--surface-hover);border-left-color:var(--color-primary)}.menu-group .menu-items .menu-item .submenu .submenu-item a{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)}\n"],
|
|
3669
3752
|
dependencies: [{
|
|
3670
3753
|
kind: "directive",
|
|
3671
3754
|
type: RouterLink,
|
|
@@ -3711,7 +3794,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3711
3794
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
3712
3795
|
imports: [RouterLink, RouterLinkActive],
|
|
3713
3796
|
template: "<ul class=\"menu\">\n @for (group of filteredModel(); 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",
|
|
3714
|
-
styles: [".menu{list-style:none;margin:0;padding:0}.menu-group{margin-bottom:
|
|
3797
|
+
styles: [".menu{list-style:none;margin:0;padding:0}.menu-group{margin-bottom:12px}.menu-group .menu-group-label{font-size:12px;font-weight:600;text-transform:uppercase;padding:6px 12px}.menu-group .menu-items{list-style:none;margin:0;padding:0}.menu-group .menu-items .menu-item a{display:flex;align-items:center;padding:9px 12px;text-decoration:none;font-size:12px;border-left-width:3px;border-left-style:solid;transition:all .2s ease}.menu-group .menu-items .menu-item a i{margin-right:6px;font-size:12px}.menu-group .menu-items .menu-item a:hover{border-radius:6px}.menu-group .menu-items .menu-item a.active{border-radius:6px;border-left-width:3px;border-left-style:solid;font-weight:600}.menu-group .menu-items .menu-item .submenu{list-style:none;padding-left:18px}.menu-group .menu-items .menu-item .submenu .submenu-item a{padding:6px 12px;font-size:11.4px}.menu-group .menu-items .menu-item .submenu .submenu-item a.active{font-weight:600}.menu-group .menu-group-label{color:var(--color-contrast)}.menu-group .menu-items .menu-item a{color:var(--color-text-secondary);border-left-color:transparent}.menu-group .menu-items .menu-item a:hover{background-color:var(--surface-hover)}.menu-group .menu-items .menu-item a.active{background-color:var(--surface-hover);border-left-color:var(--color-primary)}.menu-group .menu-items .menu-item .submenu .submenu-item a{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)}\n"]
|
|
3715
3798
|
}]
|
|
3716
3799
|
}],
|
|
3717
3800
|
propDecorators: { model: [{ type: Input }] }
|
|
@@ -3740,8 +3823,8 @@ var SidebarComponent = class SidebarComponent {
|
|
|
3740
3823
|
selector: "i-sidebar",
|
|
3741
3824
|
inputs: { menuModel: "menuModel" },
|
|
3742
3825
|
ngImport: i0,
|
|
3743
|
-
template: "<div class=\"sidebar\">\n @if (
|
|
3744
|
-
styles: [".sidebar{display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;min-height:100%;transition:transform .2s,left .2s;
|
|
3826
|
+
template: "<div class=\"sidebar\">\n @if (layoutService.state().isMobileViewport && 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",
|
|
3827
|
+
styles: [".sidebar{display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;min-height:100%;transition:transform .2s,left .2s;padding:24px 12px 40px}.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;padding:12px 12px 8px}.sidebar .sidebar-menu-wrapper{flex:1 1 auto;max-height:calc(100vh - 56px);overflow:auto;padding:12px}}.sidebar{background-color:var(--surface-overlay);box-shadow:0 3px 5px color-mix(in srgb,#000000 2%,transparent),0 0 2px color-mix(in srgb,#000000 5%,transparent),0 1px 4px color-mix(in srgb,#000000 8%,transparent)}@media(max-width:991px){.sidebar .sidebar-mobile-header{background:var(--surface-overlay);box-shadow:0 2px 6px color-mix(in srgb,#000000 6%,transparent)}}\n"],
|
|
3745
3828
|
dependencies: [{
|
|
3746
3829
|
kind: "component",
|
|
3747
3830
|
type: MenuComponent,
|
|
@@ -3781,8 +3864,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3781
3864
|
selector: "i-sidebar",
|
|
3782
3865
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
3783
3866
|
imports: [MenuComponent, IButton],
|
|
3784
|
-
template: "<div class=\"sidebar\">\n @if (
|
|
3785
|
-
styles: [".sidebar{display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;min-height:100%;transition:transform .2s,left .2s;
|
|
3867
|
+
template: "<div class=\"sidebar\">\n @if (layoutService.state().isMobileViewport && 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",
|
|
3868
|
+
styles: [".sidebar{display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;min-height:100%;transition:transform .2s,left .2s;padding:24px 12px 40px}.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;padding:12px 12px 8px}.sidebar .sidebar-menu-wrapper{flex:1 1 auto;max-height:calc(100vh - 56px);overflow:auto;padding:12px}}.sidebar{background-color:var(--surface-overlay);box-shadow:0 3px 5px color-mix(in srgb,#000000 2%,transparent),0 0 2px color-mix(in srgb,#000000 5%,transparent),0 1px 4px color-mix(in srgb,#000000 8%,transparent)}@media(max-width:991px){.sidebar .sidebar-mobile-header{background:var(--surface-overlay);box-shadow:0 2px 6px color-mix(in srgb,#000000 6%,transparent)}}\n"]
|
|
3786
3869
|
}]
|
|
3787
3870
|
}],
|
|
3788
3871
|
ctorParameters: () => [{ type: i0.ElementRef }, { type: LayoutService }],
|
|
@@ -3955,8 +4038,8 @@ var LayoutComponent = class LayoutComponent {
|
|
|
3955
4038
|
descendants: true
|
|
3956
4039
|
}],
|
|
3957
4040
|
ngImport: i0,
|
|
3958
|
-
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\" #mainContainer>\n @if (
|
|
3959
|
-
styles: [".layout{--layout-topbar-height:
|
|
4041
|
+
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\" #mainContainer>\n @if (config.enablePullToRefresh && layoutService.state().isMobileViewport) {\n <div\n class=\"pull-to-refresh-indicator\"\n [style.transform]=\"\n 'translateY(' + Math.max(-INDICATOR_OFFSET, pullDistance() - INDICATOR_OFFSET) + 'px)'\n \"\n [style.opacity]=\"Math.min(1, pullDistance() / PULL_THRESHOLD)\"\n >\n <div class=\"refresh-icon\" [class.refreshing]=\"isRefreshing()\">\n <i class=\"pi pi-refresh\"></i>\n </div>\n <div class=\"refresh-text\">\n {{\n isRefreshing()\n ? 'Refreshing...'\n : pullDistance() >= PULL_THRESHOLD\n ? 'Release to refresh'\n : 'Pull to refresh'\n }}\n </div>\n </div>\n }\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",
|
|
4042
|
+
styles: [".layout{--layout-topbar-height: 60px}.layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}@media(max-width:991px){.layout .layout-wrapper:has(i-page-layout){overflow-y:auto;scrollbar-gutter:stable;overscroll-behavior-y:contain}}@media(max-width:991px){.layout .layout-wrapper:has(i-page-layout)>i-topbar{position:sticky;top:0;z-index:1;flex:0 0 auto}}@media(max-width:991px){.layout .layout-wrapper:has(i-page-layout)>i-topbar:has(.layout-topbar-menu-mobile-active){z-index:11}}@media(max-width:991px){.layout .layout-wrapper:has(i-page-layout) .layout-body{flex:1 0 auto}}.layout .layout-wrapper:has(i-page-layout) .layout-body .layout-main-container{container-type:size;--layout-content-height: 100cqh}@media(max-width:991px){.layout .layout-wrapper:has(i-page-layout) .layout-body .layout-main-container{container-type:normal;overflow:visible}}.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:min(300px,100vw - 44px);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:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-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(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.layout .layout-wrapper .layout-body .layout-sidebar-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}@media(max-width:991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{position:fixed;left:0;top:0;height:100vh;height:100dvh;z-index:999;transition:transform .2s ease;overflow-y:auto}}.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:0;transition:margin-left .3s ease;position:relative}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-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(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}@media(max-width:991px){.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%}}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator{position:absolute;top:0;left:0;right:0;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;z-index:10;transition:opacity .2s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon{font-size:18px;transition:transform .3s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon.refreshing{animation:spin 1s linear infinite}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-text{font-size:10.5px;font-weight:500}.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:60px;height:calc(100vh - 60px);height:calc(100dvh - 60px);z-index:999}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{background:var(--surface-overlay)}}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon{color:var(--color-primary)}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-text{color:var(--color-text-secondary)}.layout .layout-wrapper.layout-overlay-active .layout-sidebar-container{background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{background:color-mix(in srgb,#000000 40%,transparent)}\n"],
|
|
3960
4043
|
dependencies: [
|
|
3961
4044
|
{
|
|
3962
4045
|
kind: "directive",
|
|
@@ -4009,8 +4092,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
4009
4092
|
SidebarComponent,
|
|
4010
4093
|
RouterOutlet
|
|
4011
4094
|
],
|
|
4012
|
-
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\" #mainContainer>\n @if (
|
|
4013
|
-
styles: [".layout{--layout-topbar-height:
|
|
4095
|
+
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\" #mainContainer>\n @if (config.enablePullToRefresh && layoutService.state().isMobileViewport) {\n <div\n class=\"pull-to-refresh-indicator\"\n [style.transform]=\"\n 'translateY(' + Math.max(-INDICATOR_OFFSET, pullDistance() - INDICATOR_OFFSET) + 'px)'\n \"\n [style.opacity]=\"Math.min(1, pullDistance() / PULL_THRESHOLD)\"\n >\n <div class=\"refresh-icon\" [class.refreshing]=\"isRefreshing()\">\n <i class=\"pi pi-refresh\"></i>\n </div>\n <div class=\"refresh-text\">\n {{\n isRefreshing()\n ? 'Refreshing...'\n : pullDistance() >= PULL_THRESHOLD\n ? 'Release to refresh'\n : 'Pull to refresh'\n }}\n </div>\n </div>\n }\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",
|
|
4096
|
+
styles: [".layout{--layout-topbar-height: 60px}.layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}@media(max-width:991px){.layout .layout-wrapper:has(i-page-layout){overflow-y:auto;scrollbar-gutter:stable;overscroll-behavior-y:contain}}@media(max-width:991px){.layout .layout-wrapper:has(i-page-layout)>i-topbar{position:sticky;top:0;z-index:1;flex:0 0 auto}}@media(max-width:991px){.layout .layout-wrapper:has(i-page-layout)>i-topbar:has(.layout-topbar-menu-mobile-active){z-index:11}}@media(max-width:991px){.layout .layout-wrapper:has(i-page-layout) .layout-body{flex:1 0 auto}}.layout .layout-wrapper:has(i-page-layout) .layout-body .layout-main-container{container-type:size;--layout-content-height: 100cqh}@media(max-width:991px){.layout .layout-wrapper:has(i-page-layout) .layout-body .layout-main-container{container-type:normal;overflow:visible}}.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:min(300px,100vw - 44px);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:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-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(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.layout .layout-wrapper .layout-body .layout-sidebar-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}@media(max-width:991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{position:fixed;left:0;top:0;height:100vh;height:100dvh;z-index:999;transition:transform .2s ease;overflow-y:auto}}.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:0;transition:margin-left .3s ease;position:relative}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-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(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}@media(max-width:991px){.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%}}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator{position:absolute;top:0;left:0;right:0;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;z-index:10;transition:opacity .2s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon{font-size:18px;transition:transform .3s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon.refreshing{animation:spin 1s linear infinite}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-text{font-size:10.5px;font-weight:500}.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:60px;height:calc(100vh - 60px);height:calc(100dvh - 60px);z-index:999}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{background:var(--surface-overlay)}}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon{color:var(--color-primary)}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-text{color:var(--color-text-secondary)}.layout .layout-wrapper.layout-overlay-active .layout-sidebar-container{background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{background:color-mix(in srgb,#000000 40%,transparent)}\n"]
|
|
4014
4097
|
}]
|
|
4015
4098
|
}],
|
|
4016
4099
|
ctorParameters: () => [{ type: LayoutService }, { type: i2$1.Router }],
|
|
@@ -4115,6 +4198,7 @@ var PageLayoutComponent = class PageLayoutComponent {
|
|
|
4115
4198
|
headerText = input.required(...ngDevMode ? [{ debugName: "headerText" }] : /* istanbul ignore next */ []);
|
|
4116
4199
|
eyebrowText = input("", ...ngDevMode ? [{ debugName: "eyebrowText" }] : /* istanbul ignore next */ []);
|
|
4117
4200
|
showHeader = input(true, ...ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []);
|
|
4201
|
+
sidebarPosition = input("left", ...ngDevMode ? [{ debugName: "sidebarPosition" }] : /* istanbul ignore next */ []);
|
|
4118
4202
|
sidebar = contentChild(PageSidebarDirective, ...ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []);
|
|
4119
4203
|
headerActions = contentChild(PageHeaderActionsDirective, ...ngDevMode ? [{ debugName: "headerActions" }] : /* istanbul ignore next */ []);
|
|
4120
4204
|
header = viewChild("header", ...ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []);
|
|
@@ -4186,6 +4270,13 @@ var PageLayoutComponent = class PageLayoutComponent {
|
|
|
4186
4270
|
isSignal: true,
|
|
4187
4271
|
isRequired: false,
|
|
4188
4272
|
transformFunction: null
|
|
4273
|
+
},
|
|
4274
|
+
sidebarPosition: {
|
|
4275
|
+
classPropertyName: "sidebarPosition",
|
|
4276
|
+
publicName: "sidebarPosition",
|
|
4277
|
+
isSignal: true,
|
|
4278
|
+
isRequired: false,
|
|
4279
|
+
transformFunction: null
|
|
4189
4280
|
}
|
|
4190
4281
|
},
|
|
4191
4282
|
queries: [{
|
|
@@ -4215,8 +4306,8 @@ var PageLayoutComponent = class PageLayoutComponent {
|
|
|
4215
4306
|
isSignal: true
|
|
4216
4307
|
}],
|
|
4217
4308
|
ngImport: i0,
|
|
4218
|
-
template: "<div
|
|
4219
|
-
styles: [":host{display:block;min-width:0
|
|
4309
|
+
template: "<div\n class=\"page-layout\"\n [class.with-sidebar]=\"sidebar()\"\n [class.sidebar-right]=\"sidebarPosition() === 'right'\"\n>\n @if (sidebar()) {\n <aside class=\"sidebar\">\n <ng-content select=\"[iPageSidebar]\" />\n </aside>\n }\n <div class=\"page-body\" #body>\n @if (showHeader()) {\n <header class=\"page-header\" #header>\n <div class=\"page-heading\">\n @if (eyebrowText()) {\n <div class=\"eyebrow\">{{ eyebrowText() }}</div>\n }\n <h1>{{ headerText() }}</h1>\n <ng-content select=\"[iPageHeaderContent]\" />\n </div>\n @if (headerActions()) {\n <div class=\"header-actions\">\n <ng-content select=\"[iPageHeaderActions]\" />\n </div>\n }\n </header>\n }\n <div class=\"page-content\">\n <ng-content />\n </div>\n </div>\n</div>\n",
|
|
4310
|
+
styles: [":host{display:block;min-width:0}:host .page-layout{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;grid-template-areas:\"body\"}:host .page-layout.with-sidebar{grid-template-columns:minmax(0,var(--page-layout-sidebar-width, 216px)) minmax(0,1fr);grid-template-areas:\"sidebar body\"}@media(max-width:991px){:host .page-layout.with-sidebar{grid-template-columns:minmax(0,1fr);grid-template-areas:\"sidebar\" \"body\"}}:host .page-layout.with-sidebar.sidebar-right{grid-template-columns:minmax(0,1fr) minmax(0,var(--page-layout-sidebar-width, 216px));grid-template-areas:\"body sidebar\"}@media(max-width:991px){:host .page-layout.with-sidebar.sidebar-right{grid-template-columns:minmax(0,1fr);grid-template-areas:\"body\" \"sidebar\"}}:host .page-layout .sidebar{grid-area:sidebar;position:sticky;top:0;min-width:0;max-height:var(--layout-content-height, 100dvh);overflow:auto;padding:var(--page-layout-padding, 18px);box-sizing:border-box}@media(max-width:991px){:host .page-layout .sidebar{position:static;max-height:none;overflow:visible;padding:var(--page-layout-padding, 9px)}}:host .page-layout .page-body{grid-area:body;min-width:0}:host .page-layout .page-body .page-header{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:var(--page-layout-padding, 18px);box-sizing:border-box}@media(max-width:991px){:host .page-layout .page-body .page-header{transform:translateY(var(--page-header-snap-offset, 0px));min-height:var(--layout-topbar-height, 0px);gap:6px;padding:var(--page-layout-padding, 9px)}}:host .page-layout .page-body .page-header .page-heading{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}:host .page-layout .page-body .page-header .page-heading .eyebrow{margin:0 0 4.8px;text-transform:uppercase;font-size:9px;font-weight:700}:host .page-layout .page-body .page-header .header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;max-width:100%}:host .page-layout .page-body .page-content{min-width:0;padding:var(--page-layout-padding, 18px);padding-bottom:max(var(--page-layout-padding, 18px),env(safe-area-inset-bottom))}@media(max-width:991px){:host .page-layout .page-body .page-content{padding:var(--page-layout-padding, 9px);padding-bottom:max(var(--page-layout-padding, 9px),env(safe-area-inset-bottom))}}:host{color:var(--color-text-primary)}:host .page-layout .page-body .page-header{background:var(--surface-ground)}:host .page-layout .page-body .page-header .page-heading .eyebrow{color:var(--color-primary)}\n"],
|
|
4220
4311
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
4221
4312
|
});
|
|
4222
4313
|
};
|
|
@@ -4230,8 +4321,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
4230
4321
|
args: [{
|
|
4231
4322
|
selector: "i-page-layout",
|
|
4232
4323
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4233
|
-
template: "<div
|
|
4234
|
-
styles: [":host{display:block;min-width:0
|
|
4324
|
+
template: "<div\n class=\"page-layout\"\n [class.with-sidebar]=\"sidebar()\"\n [class.sidebar-right]=\"sidebarPosition() === 'right'\"\n>\n @if (sidebar()) {\n <aside class=\"sidebar\">\n <ng-content select=\"[iPageSidebar]\" />\n </aside>\n }\n <div class=\"page-body\" #body>\n @if (showHeader()) {\n <header class=\"page-header\" #header>\n <div class=\"page-heading\">\n @if (eyebrowText()) {\n <div class=\"eyebrow\">{{ eyebrowText() }}</div>\n }\n <h1>{{ headerText() }}</h1>\n <ng-content select=\"[iPageHeaderContent]\" />\n </div>\n @if (headerActions()) {\n <div class=\"header-actions\">\n <ng-content select=\"[iPageHeaderActions]\" />\n </div>\n }\n </header>\n }\n <div class=\"page-content\">\n <ng-content />\n </div>\n </div>\n</div>\n",
|
|
4325
|
+
styles: [":host{display:block;min-width:0}:host .page-layout{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;grid-template-areas:\"body\"}:host .page-layout.with-sidebar{grid-template-columns:minmax(0,var(--page-layout-sidebar-width, 216px)) minmax(0,1fr);grid-template-areas:\"sidebar body\"}@media(max-width:991px){:host .page-layout.with-sidebar{grid-template-columns:minmax(0,1fr);grid-template-areas:\"sidebar\" \"body\"}}:host .page-layout.with-sidebar.sidebar-right{grid-template-columns:minmax(0,1fr) minmax(0,var(--page-layout-sidebar-width, 216px));grid-template-areas:\"body sidebar\"}@media(max-width:991px){:host .page-layout.with-sidebar.sidebar-right{grid-template-columns:minmax(0,1fr);grid-template-areas:\"body\" \"sidebar\"}}:host .page-layout .sidebar{grid-area:sidebar;position:sticky;top:0;min-width:0;max-height:var(--layout-content-height, 100dvh);overflow:auto;padding:var(--page-layout-padding, 18px);box-sizing:border-box}@media(max-width:991px){:host .page-layout .sidebar{position:static;max-height:none;overflow:visible;padding:var(--page-layout-padding, 9px)}}:host .page-layout .page-body{grid-area:body;min-width:0}:host .page-layout .page-body .page-header{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:var(--page-layout-padding, 18px);box-sizing:border-box}@media(max-width:991px){:host .page-layout .page-body .page-header{transform:translateY(var(--page-header-snap-offset, 0px));min-height:var(--layout-topbar-height, 0px);gap:6px;padding:var(--page-layout-padding, 9px)}}:host .page-layout .page-body .page-header .page-heading{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}:host .page-layout .page-body .page-header .page-heading .eyebrow{margin:0 0 4.8px;text-transform:uppercase;font-size:9px;font-weight:700}:host .page-layout .page-body .page-header .header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;max-width:100%}:host .page-layout .page-body .page-content{min-width:0;padding:var(--page-layout-padding, 18px);padding-bottom:max(var(--page-layout-padding, 18px),env(safe-area-inset-bottom))}@media(max-width:991px){:host .page-layout .page-body .page-content{padding:var(--page-layout-padding, 9px);padding-bottom:max(var(--page-layout-padding, 9px),env(safe-area-inset-bottom))}}:host{color:var(--color-text-primary)}:host .page-layout .page-body .page-header{background:var(--surface-ground)}:host .page-layout .page-body .page-header .page-heading .eyebrow{color:var(--color-primary)}\n"]
|
|
4235
4326
|
}]
|
|
4236
4327
|
}],
|
|
4237
4328
|
ctorParameters: () => [],
|
|
@@ -4260,6 +4351,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
4260
4351
|
required: false
|
|
4261
4352
|
}]
|
|
4262
4353
|
}],
|
|
4354
|
+
sidebarPosition: [{
|
|
4355
|
+
type: i0.Input,
|
|
4356
|
+
args: [{
|
|
4357
|
+
isSignal: true,
|
|
4358
|
+
alias: "sidebarPosition",
|
|
4359
|
+
required: false
|
|
4360
|
+
}]
|
|
4361
|
+
}],
|
|
4263
4362
|
sidebar: [{
|
|
4264
4363
|
type: i0.ContentChild,
|
|
4265
4364
|
args: [i0.forwardRef(() => PageSidebarDirective), { isSignal: true }]
|
|
@@ -4689,8 +4788,8 @@ var IListbox = class IListbox {
|
|
|
4689
4788
|
descendants: true
|
|
4690
4789
|
}],
|
|
4691
4790
|
ngImport: i0,
|
|
4692
|
-
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 [class.i-listbox--menu]=\"displayAsMenu\"\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 && showChips) {\n <div class=\"i-listbox-chips-wrapper\">\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 </div>\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 [label]=\"'Search ' + title\"\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 <button
|
|
4693
|
-
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
|
|
4791
|
+
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 [class.i-listbox--menu]=\"displayAsMenu\"\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 && showChips) {\n <div class=\"i-listbox-chips-wrapper\">\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 </div>\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 [label]=\"'Search ' + title\"\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 <button\n type=\"button\"\n [disabled]=\"disabled\"\n class=\"i-listbox-option\"\n [attr.aria-pressed]=\"isOptionSelected(option)\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n (click)=\"toggleOption(option)\"\n >\n <!-- Checkbox only in multiple mode -->\n @if (multiple) {\n <span\n aria-hidden=\"true\"\n class=\"pi i-listbox-checkbox\"\n [class.pi-check-square]=\"isOptionSelected(option)\"\n [class.pi-stop]=\"!isOptionSelected(option)\"\n ></span>\n }\n\n <!-- Left icon -->\n @if (getOptionIcon(option) && !displayAsMenu) {\n <i\n [class]=\"getOptionIcon(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 chevron for menu mode -->\n @if (displayAsMenu) {\n <i class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"></i>\n }\n </button>\n }\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",
|
|
4792
|
+
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:var(--color-text-contrast)}.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-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 .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{border-color:var(--surface-border);background:var(--color-component-background)}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{border-bottom-color:var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{background:var(--color-primary);color:var(--color-text-contrast)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.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-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{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:color-mix(in srgb,var(--color-danger) 5%,transparent);border-top-color:var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-options .i-listbox-option{color:inherit;background:transparent}.i-listbox-wrapper .i-listbox-options .i-listbox-option:focus-visible{outline-color:currentColor}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border-width:1px;border-style:solid;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-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom-width:1px;border-bottom-style:solid}.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:13.8px}.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;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:12px}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-wrapper{height:32px}.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-width:1px;border-bottom-style:solid}.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:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-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(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, 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:12px;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.selected{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--chevron{margin-left:auto;font-size:12px;opacity:.6}.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}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:10.8px;border-top-width:1px;border-top-style:solid}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:12.6px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{border-left-width:3px;border-left-style:solid;font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}@media(max-width:991px){.i-listbox-wrapper .i-listbox-options{max-height:120px}}@media(max-width:768px){.i-listbox-wrapper .i-listbox-options{max-height:min(320px,50dvh)}}.i-listbox-wrapper .i-listbox-options .i-listbox-option{width:100%;box-sizing:border-box;text-align:left;font-family:inherit;border:0}.i-listbox-wrapper .i-listbox-options .i-listbox-option:focus-visible{outline-width:2px;outline-style:solid;outline-offset:-2px}@media(pointer:coarse){.i-listbox-wrapper .i-listbox-options .i-listbox-option{min-height:44px;box-sizing:border-box}}\n"],
|
|
4694
4793
|
dependencies: [
|
|
4695
4794
|
{
|
|
4696
4795
|
kind: "ngmodule",
|
|
@@ -4800,8 +4899,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
4800
4899
|
useExisting: forwardRef(() => IListbox),
|
|
4801
4900
|
multi: true
|
|
4802
4901
|
}],
|
|
4803
|
-
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 [class.i-listbox--menu]=\"displayAsMenu\"\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 && showChips) {\n <div class=\"i-listbox-chips-wrapper\">\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 </div>\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 [label]=\"'Search ' + title\"\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 <button
|
|
4804
|
-
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
|
|
4902
|
+
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 [class.i-listbox--menu]=\"displayAsMenu\"\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 && showChips) {\n <div class=\"i-listbox-chips-wrapper\">\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 </div>\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 [label]=\"'Search ' + title\"\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 <button\n type=\"button\"\n [disabled]=\"disabled\"\n class=\"i-listbox-option\"\n [attr.aria-pressed]=\"isOptionSelected(option)\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n (click)=\"toggleOption(option)\"\n >\n <!-- Checkbox only in multiple mode -->\n @if (multiple) {\n <span\n aria-hidden=\"true\"\n class=\"pi i-listbox-checkbox\"\n [class.pi-check-square]=\"isOptionSelected(option)\"\n [class.pi-stop]=\"!isOptionSelected(option)\"\n ></span>\n }\n\n <!-- Left icon -->\n @if (getOptionIcon(option) && !displayAsMenu) {\n <i\n [class]=\"getOptionIcon(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 chevron for menu mode -->\n @if (displayAsMenu) {\n <i class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"></i>\n }\n </button>\n }\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",
|
|
4903
|
+
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:var(--color-text-contrast)}.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-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 .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{border-color:var(--surface-border);background:var(--color-component-background)}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{border-bottom-color:var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{background:var(--color-primary);color:var(--color-text-contrast)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.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-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{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:color-mix(in srgb,var(--color-danger) 5%,transparent);border-top-color:var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-options .i-listbox-option{color:inherit;background:transparent}.i-listbox-wrapper .i-listbox-options .i-listbox-option:focus-visible{outline-color:currentColor}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border-width:1px;border-style:solid;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-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom-width:1px;border-bottom-style:solid}.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:13.8px}.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;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:12px}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-wrapper{height:32px}.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-width:1px;border-bottom-style:solid}.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:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-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(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, 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:12px;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.selected{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--chevron{margin-left:auto;font-size:12px;opacity:.6}.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}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:10.8px;border-top-width:1px;border-top-style:solid}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:12.6px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{border-left-width:3px;border-left-style:solid;font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}@media(max-width:991px){.i-listbox-wrapper .i-listbox-options{max-height:120px}}@media(max-width:768px){.i-listbox-wrapper .i-listbox-options{max-height:min(320px,50dvh)}}.i-listbox-wrapper .i-listbox-options .i-listbox-option{width:100%;box-sizing:border-box;text-align:left;font-family:inherit;border:0}.i-listbox-wrapper .i-listbox-options .i-listbox-option:focus-visible{outline-width:2px;outline-style:solid;outline-offset:-2px}@media(pointer:coarse){.i-listbox-wrapper .i-listbox-options .i-listbox-option{min-height:44px;box-sizing:border-box}}\n"]
|
|
4805
4904
|
}]
|
|
4806
4905
|
}],
|
|
4807
4906
|
ctorParameters: () => [{ type: i0.Injector }],
|
|
@@ -4991,8 +5090,8 @@ var IRadioButton = class IRadioButton {
|
|
|
4991
5090
|
multi: true
|
|
4992
5091
|
}],
|
|
4993
5092
|
ngImport: i0,
|
|
4994
|
-
template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\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 [attr.tabindex]=\"disabled ? -1 : 0\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n>\n <div
|
|
4995
|
-
styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:
|
|
5093
|
+
template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\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 [attr.tabindex]=\"disabled ? -1 : 0\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n>\n <div class=\"i-radio-button\" [class.i-radio-button--checked]=\"checked\" aria-hidden=\"true\">\n <span class=\"i-radio-button-icon\"></span>\n </div>\n @if (label) {\n <label [id]=\"effectiveInputId + '-label'\" class=\"i-radio-button-label\">\n {{ label }}\n </label>\n }\n</div>\n",
|
|
5094
|
+
styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 30%,transparent)}.i-radio-button-wrapper:focus-visible{outline-color:currentColor}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:12px}.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}.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}@media(pointer:coarse){.i-radio-button-wrapper{min-height:44px;min-width:44px;justify-content:center}}.i-radio-button-wrapper{cursor:pointer;border-radius:4px}.i-radio-button-wrapper:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}.i-radio-button-wrapper.i-radio-button--disabled{cursor:not-allowed}@media(pointer:coarse){.i-radio-button-wrapper .i-radio-button{flex-shrink:0}}\n"],
|
|
4996
5095
|
changeDetection: i0.ChangeDetectionStrategy.Eager
|
|
4997
5096
|
});
|
|
4998
5097
|
};
|
|
@@ -5013,8 +5112,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5013
5112
|
useExisting: forwardRef(() => IRadioButton),
|
|
5014
5113
|
multi: true
|
|
5015
5114
|
}],
|
|
5016
|
-
template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\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 [attr.tabindex]=\"disabled ? -1 : 0\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n>\n <div
|
|
5017
|
-
styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:
|
|
5115
|
+
template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\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 [attr.tabindex]=\"disabled ? -1 : 0\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n>\n <div class=\"i-radio-button\" [class.i-radio-button--checked]=\"checked\" aria-hidden=\"true\">\n <span class=\"i-radio-button-icon\"></span>\n </div>\n @if (label) {\n <label [id]=\"effectiveInputId + '-label'\" class=\"i-radio-button-label\">\n {{ label }}\n </label>\n }\n</div>\n",
|
|
5116
|
+
styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 30%,transparent)}.i-radio-button-wrapper:focus-visible{outline-color:currentColor}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:12px}.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}.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}@media(pointer:coarse){.i-radio-button-wrapper{min-height:44px;min-width:44px;justify-content:center}}.i-radio-button-wrapper{cursor:pointer;border-radius:4px}.i-radio-button-wrapper:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}.i-radio-button-wrapper.i-radio-button--disabled{cursor:not-allowed}@media(pointer:coarse){.i-radio-button-wrapper .i-radio-button{flex-shrink:0}}\n"]
|
|
5018
5117
|
}]
|
|
5019
5118
|
}],
|
|
5020
5119
|
ctorParameters: () => [
|
|
@@ -5452,7 +5551,7 @@ var IMultiSelect = class IMultiSelect {
|
|
|
5452
5551
|
}
|
|
5453
5552
|
],
|
|
5454
5553
|
ngImport: i0,
|
|
5455
|
-
template: "<div
|
|
5554
|
+
template: "<div\n class=\"i-option-field\"\n [class.i-option-field--open]=\"isOpen\"\n [class.native-on-mobile]=\"nativeOnMobile\"\n [class.i-option-field--float]=\"useFloatLabel\"\n [class.i-option-field--filled]=\"value.length > 0\"\n [class.i-option-field--disabled]=\"disabled\"\n [class.i-option-field--invalid]=\"showErrors\"\n #dropdown\n>\n <div class=\"i-option-control\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n <div class=\"i-option-value\">\n @if (value.length > 0 && value.length <= maxSelectedLabels) {\n <i-chips\n [chips]=\"selectedChips()\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [collapseOnOverflow]=\"true\"\n [overflowLabel]=\"getDisplayLabel()\"\n (removeChip)=\"onChipRemove($event)\"\n ></i-chips>\n } @else {\n <span class=\"i-option-text\" [class.i-option-placeholder]=\"!value.length\">{{\n getDisplayLabel() || (useFloatLabel ? '' : placeholder)\n }}</span>\n }\n </div>\n <button\n #trigger\n type=\"button\"\n class=\"i-option-trigger\"\n [id]=\"id || componentId\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"label + ': ' + (getDisplayLabel() || placeholder)\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? componentId + '-options' : null\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n (click)=\"toggleDropdown()\"\n (keydown.arrowdown)=\"$event.preventDefault(); openDropdown()\"\n (blur)=\"touch()\"\n ></button>\n @if (nativeOnMobile) {\n <select\n class=\"i-native-select\"\n [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"label\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n multiple\n size=\"1\"\n (pointerdown)=\"closeDropdown()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"touch()\"\n >\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">\n {{ getOptionLabel(option) }}\n </option>\n }\n </select>\n }\n <div class=\"i-option-actions\">\n @if (showClear && value.length > 0) {\n <button\n type=\"button\"\n class=\"i-option-clear\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"'Clear ' + label\"\n (click)=\"clearSelection(); $event.stopPropagation()\"\n >\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n <span class=\"i-option-arrow\" aria-hidden=\"true\"\n ><i class=\"pi pi-chevron-down\" [class.flipped]=\"isOpen\"></i\n ></span>\n </div>\n </div>\n @if (label && useFloatLabel) {\n <label class=\"i-option-label\" [for]=\"id || componentId\">{{ label }}</label>\n }\n @if (showErrors) {\n <div class=\"i-option-error\" [id]=\"componentId + '-error'\" role=\"alert\">\n {{ getErrorMessage() }}\n </div>\n }\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen && !disabled\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayWidth]=\"\n isOpen ? origin.elementRef.nativeElement.getBoundingClientRect().width : undefined\n \"\n [cdkConnectedOverlayViewportMargin]=\"12\"\n [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"onDocumentClick($event)\"\n (attach)=\"focusOptions()\"\n (detach)=\"closeDropdown()\"\n>\n <div class=\"i-option-panel\" #optionsPanel (keydown)=\"onPanelKeydown($event)\">\n @if (filter) {\n <div class=\"i-option-filter\">\n <input\n #searchInput\n type=\"search\"\n class=\"i-option-search\"\n placeholder=\"Search...\"\n [attr.aria-label]=\"'Search ' + label\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n />\n </div>\n }\n <div\n class=\"i-option-list\"\n role=\"listbox\"\n [id]=\"componentId + '-options'\"\n [attr.aria-label]=\"label\"\n aria-multiselectable=\"true\"\n >\n @for (option of filteredOptions(); track $index) {\n <button\n type=\"button\"\n class=\"i-option\"\n role=\"option\"\n [class.selected]=\"isOptionSelected(option)\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <span class=\"i-option-check\" aria-hidden=\"true\"\n ><i [class]=\"isOptionSelected(option) ? 'pi pi-check-square' : 'pi pi-stop'\"></i\n ></span>\n <span>{{ getOptionLabel(option) }}</span>\n </button>\n }\n @if (!filteredOptions().length) {\n <div class=\"i-option-empty\">No options found</div>\n }\n </div>\n </div>\n</ng-template>\n",
|
|
5456
5555
|
styles: [":host{display:block;min-width:0;max-width:100%}.i-option-field{position:relative;width:100%}.i-option-field--float{margin-top:1.5em}.i-option-control{position:relative;display:flex;align-items:center;width:100%;min-height:42px;box-sizing:border-box;border:1px solid var(--surface-border);border-radius:4px;color:var(--color-text-primary);background:var(--color-component-background)}.i-option-control:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-option-value{flex:1;min-width:0;padding:4px 0 4px 12px;pointer-events:none}.i-option-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-option-placeholder{color:var(--color-text-secondary)}.i-option-trigger,.i-native-select{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;margin:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;z-index:1}.i-option-trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-native-select{display:none;opacity:0;font-size:16px}.i-option-actions{display:flex;align-items:center;flex-shrink:0;pointer-events:none}.i-option-clear{position:relative;z-index:2;pointer-events:auto;display:inline-flex;justify-content:center;align-items:center;width:32px;height:32px;flex-shrink:0;padding:0;border:0;border-radius:4px;background:transparent;color:var(--color-text-secondary);cursor:pointer}.i-option-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-arrow{width:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.i-option-arrow i{transition:transform .15s ease}.i-option-arrow .flipped{transform:rotate(180deg)}.i-option-label{padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;position:absolute;top:21px;left:12px;transform:translateY(-50%);pointer-events:none;color:var(--color-text-secondary)}.i-option-field--open .i-option-label,.i-option-field--filled .i-option-label,.i-option-field:focus-within .i-option-label{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-option-field--invalid .i-option-control{border-color:var(--color-danger)}.i-option-field--invalid .i-option-label{color:var(--color-danger)}.i-option-field--disabled .i-option-control{background:var(--color-disabled-background);color:var(--color-text-disabled)}.i-option-field--disabled .i-option-trigger,.i-option-field--disabled .i-native-select{cursor:not-allowed}.i-option-error{margin-top:4px;font-size:12px;color:var(--color-danger)}.i-option-panel{width:100%;min-width:0;box-sizing:border-box;max-height:min(360px,100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--surface-border);border-radius:4px;background:var(--color-component-background);color:var(--color-text-primary);box-shadow:0 4px 12px #00000026}.i-option-filter{padding:8px;flex-shrink:0}.i-option-search{box-sizing:border-box;width:100%;min-width:0;min-height:40px;padding:8px;font:inherit;border:1px solid var(--surface-border);border-radius:4px;color:inherit;background:var(--color-component-background)}.i-option-search:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-list{overflow:auto;min-height:0;overscroll-behavior:contain}.i-option{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px;border:0;font:inherit;text-align:left;overflow-wrap:anywhere;background:transparent;color:inherit;cursor:pointer}.i-option:hover,.i-option.selected{background:var(--surface-hover)}.i-option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-check{flex-shrink:0;color:var(--color-primary)}.i-option-empty{padding:12px;color:var(--color-text-secondary)}@media(pointer:coarse){.i-option-control,.i-option{min-height:44px}.i-option-clear{width:44px;height:44px}.i-option-search{min-height:44px;font-size:16px}}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-option-trigger{display:none}.native-on-mobile .i-native-select{display:block}}\n"],
|
|
5457
5556
|
dependencies: [
|
|
5458
5557
|
{
|
|
@@ -5588,7 +5687,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5588
5687
|
useExisting: forwardRef(() => IMultiSelect),
|
|
5589
5688
|
multi: true
|
|
5590
5689
|
}],
|
|
5591
|
-
template: "<div
|
|
5690
|
+
template: "<div\n class=\"i-option-field\"\n [class.i-option-field--open]=\"isOpen\"\n [class.native-on-mobile]=\"nativeOnMobile\"\n [class.i-option-field--float]=\"useFloatLabel\"\n [class.i-option-field--filled]=\"value.length > 0\"\n [class.i-option-field--disabled]=\"disabled\"\n [class.i-option-field--invalid]=\"showErrors\"\n #dropdown\n>\n <div class=\"i-option-control\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n <div class=\"i-option-value\">\n @if (value.length > 0 && value.length <= maxSelectedLabels) {\n <i-chips\n [chips]=\"selectedChips()\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [collapseOnOverflow]=\"true\"\n [overflowLabel]=\"getDisplayLabel()\"\n (removeChip)=\"onChipRemove($event)\"\n ></i-chips>\n } @else {\n <span class=\"i-option-text\" [class.i-option-placeholder]=\"!value.length\">{{\n getDisplayLabel() || (useFloatLabel ? '' : placeholder)\n }}</span>\n }\n </div>\n <button\n #trigger\n type=\"button\"\n class=\"i-option-trigger\"\n [id]=\"id || componentId\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"label + ': ' + (getDisplayLabel() || placeholder)\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? componentId + '-options' : null\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n (click)=\"toggleDropdown()\"\n (keydown.arrowdown)=\"$event.preventDefault(); openDropdown()\"\n (blur)=\"touch()\"\n ></button>\n @if (nativeOnMobile) {\n <select\n class=\"i-native-select\"\n [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"label\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n multiple\n size=\"1\"\n (pointerdown)=\"closeDropdown()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"touch()\"\n >\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">\n {{ getOptionLabel(option) }}\n </option>\n }\n </select>\n }\n <div class=\"i-option-actions\">\n @if (showClear && value.length > 0) {\n <button\n type=\"button\"\n class=\"i-option-clear\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"'Clear ' + label\"\n (click)=\"clearSelection(); $event.stopPropagation()\"\n >\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n <span class=\"i-option-arrow\" aria-hidden=\"true\"\n ><i class=\"pi pi-chevron-down\" [class.flipped]=\"isOpen\"></i\n ></span>\n </div>\n </div>\n @if (label && useFloatLabel) {\n <label class=\"i-option-label\" [for]=\"id || componentId\">{{ label }}</label>\n }\n @if (showErrors) {\n <div class=\"i-option-error\" [id]=\"componentId + '-error'\" role=\"alert\">\n {{ getErrorMessage() }}\n </div>\n }\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen && !disabled\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayWidth]=\"\n isOpen ? origin.elementRef.nativeElement.getBoundingClientRect().width : undefined\n \"\n [cdkConnectedOverlayViewportMargin]=\"12\"\n [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"onDocumentClick($event)\"\n (attach)=\"focusOptions()\"\n (detach)=\"closeDropdown()\"\n>\n <div class=\"i-option-panel\" #optionsPanel (keydown)=\"onPanelKeydown($event)\">\n @if (filter) {\n <div class=\"i-option-filter\">\n <input\n #searchInput\n type=\"search\"\n class=\"i-option-search\"\n placeholder=\"Search...\"\n [attr.aria-label]=\"'Search ' + label\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n />\n </div>\n }\n <div\n class=\"i-option-list\"\n role=\"listbox\"\n [id]=\"componentId + '-options'\"\n [attr.aria-label]=\"label\"\n aria-multiselectable=\"true\"\n >\n @for (option of filteredOptions(); track $index) {\n <button\n type=\"button\"\n class=\"i-option\"\n role=\"option\"\n [class.selected]=\"isOptionSelected(option)\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <span class=\"i-option-check\" aria-hidden=\"true\"\n ><i [class]=\"isOptionSelected(option) ? 'pi pi-check-square' : 'pi pi-stop'\"></i\n ></span>\n <span>{{ getOptionLabel(option) }}</span>\n </button>\n }\n @if (!filteredOptions().length) {\n <div class=\"i-option-empty\">No options found</div>\n }\n </div>\n </div>\n</ng-template>\n",
|
|
5592
5691
|
styles: [":host{display:block;min-width:0;max-width:100%}.i-option-field{position:relative;width:100%}.i-option-field--float{margin-top:1.5em}.i-option-control{position:relative;display:flex;align-items:center;width:100%;min-height:42px;box-sizing:border-box;border:1px solid var(--surface-border);border-radius:4px;color:var(--color-text-primary);background:var(--color-component-background)}.i-option-control:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-option-value{flex:1;min-width:0;padding:4px 0 4px 12px;pointer-events:none}.i-option-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-option-placeholder{color:var(--color-text-secondary)}.i-option-trigger,.i-native-select{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;margin:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;z-index:1}.i-option-trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-native-select{display:none;opacity:0;font-size:16px}.i-option-actions{display:flex;align-items:center;flex-shrink:0;pointer-events:none}.i-option-clear{position:relative;z-index:2;pointer-events:auto;display:inline-flex;justify-content:center;align-items:center;width:32px;height:32px;flex-shrink:0;padding:0;border:0;border-radius:4px;background:transparent;color:var(--color-text-secondary);cursor:pointer}.i-option-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-arrow{width:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.i-option-arrow i{transition:transform .15s ease}.i-option-arrow .flipped{transform:rotate(180deg)}.i-option-label{padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;position:absolute;top:21px;left:12px;transform:translateY(-50%);pointer-events:none;color:var(--color-text-secondary)}.i-option-field--open .i-option-label,.i-option-field--filled .i-option-label,.i-option-field:focus-within .i-option-label{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-option-field--invalid .i-option-control{border-color:var(--color-danger)}.i-option-field--invalid .i-option-label{color:var(--color-danger)}.i-option-field--disabled .i-option-control{background:var(--color-disabled-background);color:var(--color-text-disabled)}.i-option-field--disabled .i-option-trigger,.i-option-field--disabled .i-native-select{cursor:not-allowed}.i-option-error{margin-top:4px;font-size:12px;color:var(--color-danger)}.i-option-panel{width:100%;min-width:0;box-sizing:border-box;max-height:min(360px,100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--surface-border);border-radius:4px;background:var(--color-component-background);color:var(--color-text-primary);box-shadow:0 4px 12px #00000026}.i-option-filter{padding:8px;flex-shrink:0}.i-option-search{box-sizing:border-box;width:100%;min-width:0;min-height:40px;padding:8px;font:inherit;border:1px solid var(--surface-border);border-radius:4px;color:inherit;background:var(--color-component-background)}.i-option-search:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-list{overflow:auto;min-height:0;overscroll-behavior:contain}.i-option{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px;border:0;font:inherit;text-align:left;overflow-wrap:anywhere;background:transparent;color:inherit;cursor:pointer}.i-option:hover,.i-option.selected{background:var(--surface-hover)}.i-option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-check{flex-shrink:0;color:var(--color-primary)}.i-option-empty{padding:12px;color:var(--color-text-secondary)}@media(pointer:coarse){.i-option-control,.i-option{min-height:44px}.i-option-clear{width:44px;height:44px}.i-option-search{min-height:44px;font-size:16px}}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-option-trigger{display:none}.native-on-mobile .i-native-select{display:block}}\n"]
|
|
5593
5692
|
}]
|
|
5594
5693
|
}],
|
|
@@ -5896,7 +5995,7 @@ var IOverlayPanel = class IOverlayPanel {
|
|
|
5896
5995
|
}],
|
|
5897
5996
|
ngImport: i0,
|
|
5898
5997
|
template: "@if (render) {\n <div\n #container\n class=\"overlay-panel\"\n [class.overlay-panel-visible]=\"overlayVisible\"\n (click)=\"onContainerClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n [@animation]=\"visible ? 'open' : 'closed'\"\n (@animation.start)=\"onAnimationStart($event)\"\n (@animation.done)=\"onAnimationEnd($event)\"\n role=\"dialog\"\n [attr.aria-hidden]=\"!visible\"\n >\n <i-button\n class=\"overlay-panel-close\"\n size=\"xtra-small\"\n [icon]=\"'pi pi-times'\"\n [text]=\"true\"\n [severity]=\"'contrast'\"\n (clicked)=\"hide()\"\n ></i-button>\n <div class=\"overlay-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n}\n",
|
|
5899
|
-
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-top .overlay-panel-arrow{border-top-color:var(--color-component-background-secondary)}.overlay-panel-bottom .overlay-panel-arrow{border-bottom-color:var(--color-component-background-secondary)}.overlay-panel-left .overlay-panel-arrow{border-left-color:var(--color-component-background-secondary)}.overlay-panel-right .overlay-panel-arrow{border-right-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:fixed;border-radius:4px;padding:
|
|
5998
|
+
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-top .overlay-panel-arrow{border-top-color:var(--color-component-background-secondary)}.overlay-panel-bottom .overlay-panel-arrow{border-bottom-color:var(--color-component-background-secondary)}.overlay-panel-left .overlay-panel-arrow{border-left-color:var(--color-component-background-secondary)}.overlay-panel-right .overlay-panel-arrow{border-right-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{box-shadow:0 2px 12px color-mix(in srgb,#000000 10%,transparent)}.overlay-panel{position:fixed;border-radius:4px;padding:12px;min-width:200px;max-width:600px;transform-origin:center top}.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 .overlay-panel-content{position:relative;z-index:1;margin-top:18px}.overlay-panel .overlay-panel-close{position:absolute;top:10px;right:5px;z-index:2}.overlay-panel{box-sizing:border-box;max-width:min(600px,100vw - 20px);max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain}\n"],
|
|
5900
5999
|
dependencies: [{
|
|
5901
6000
|
kind: "ngmodule",
|
|
5902
6001
|
type: CommonModule
|
|
@@ -5968,7 +6067,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5968
6067
|
transition("open => closed", animate("150ms ease-in"))
|
|
5969
6068
|
])],
|
|
5970
6069
|
template: "@if (render) {\n <div\n #container\n class=\"overlay-panel\"\n [class.overlay-panel-visible]=\"overlayVisible\"\n (click)=\"onContainerClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n [@animation]=\"visible ? 'open' : 'closed'\"\n (@animation.start)=\"onAnimationStart($event)\"\n (@animation.done)=\"onAnimationEnd($event)\"\n role=\"dialog\"\n [attr.aria-hidden]=\"!visible\"\n >\n <i-button\n class=\"overlay-panel-close\"\n size=\"xtra-small\"\n [icon]=\"'pi pi-times'\"\n [text]=\"true\"\n [severity]=\"'contrast'\"\n (clicked)=\"hide()\"\n ></i-button>\n <div class=\"overlay-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n}\n",
|
|
5971
|
-
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-top .overlay-panel-arrow{border-top-color:var(--color-component-background-secondary)}.overlay-panel-bottom .overlay-panel-arrow{border-bottom-color:var(--color-component-background-secondary)}.overlay-panel-left .overlay-panel-arrow{border-left-color:var(--color-component-background-secondary)}.overlay-panel-right .overlay-panel-arrow{border-right-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:fixed;border-radius:4px;padding:
|
|
6070
|
+
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-top .overlay-panel-arrow{border-top-color:var(--color-component-background-secondary)}.overlay-panel-bottom .overlay-panel-arrow{border-bottom-color:var(--color-component-background-secondary)}.overlay-panel-left .overlay-panel-arrow{border-left-color:var(--color-component-background-secondary)}.overlay-panel-right .overlay-panel-arrow{border-right-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{box-shadow:0 2px 12px color-mix(in srgb,#000000 10%,transparent)}.overlay-panel{position:fixed;border-radius:4px;padding:12px;min-width:200px;max-width:600px;transform-origin:center top}.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 .overlay-panel-content{position:relative;z-index:1;margin-top:18px}.overlay-panel .overlay-panel-close{position:absolute;top:10px;right:5px;z-index:2}.overlay-panel{box-sizing:border-box;max-width:min(600px,100vw - 20px);max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain}\n"]
|
|
5972
6071
|
}]
|
|
5973
6072
|
}],
|
|
5974
6073
|
ctorParameters: () => [
|
|
@@ -6026,8 +6125,8 @@ var IPanel = class IPanel {
|
|
|
6026
6125
|
onToggle: "onToggle"
|
|
6027
6126
|
},
|
|
6028
6127
|
ngImport: i0,
|
|
6029
|
-
template: "<fieldset\n class=\"i-panel\"\n [class.i-panel--collapsed]=\"collapsed\"\n [class.i-panel--toggleable]=\"toggleable\"\n [attr.id]=\"componentId\"\n>\n <legend class=\"i-panel-header-wrap\">\n @if (toggleable) {\n <button\n class=\"i-panel-header\"\n type=\"button\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"!collapsed\"\n >\n <i\n class=\"i-panel-toggle-icon pi\"\n [class.pi-minus]=\"!collapsed\"\n [class.pi-plus]=\"collapsed\"\n aria-hidden=\"true\"\n ></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </button>\n }\n @if (!toggleable) {\n <div class=\"i-panel-header\">\n <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </div>\n }\n </legend>\n <div
|
|
6030
|
-
styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:transparent}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:inherit}.i-panel.i-panel--toggleable .i-panel-header:hover{color:var(--color-primary)}.i-panel .i-panel-content{color:var(--color-text-primary)}@media(pointer:coarse){.i-panel .i-panel-header-wrap .i-panel-header:where(button){min-height:44px}}.i-panel{border-radius:8px;overflow:visible;position:relative;margin:0;padding:0;min-inline-size:0;min-height:48px}.i-panel .i-panel-header-wrap{padding:0;margin-left:20px;max-width:calc(100% - 40px)}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:8px;max-width:100%;box-sizing:border-box;padding:4px 12px
|
|
6128
|
+
template: "<fieldset\n class=\"i-panel\"\n [class.i-panel--collapsed]=\"collapsed\"\n [class.i-panel--toggleable]=\"toggleable\"\n [attr.id]=\"componentId\"\n>\n <legend class=\"i-panel-header-wrap\">\n @if (toggleable) {\n <button\n class=\"i-panel-header\"\n type=\"button\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"!collapsed\"\n >\n <i\n class=\"i-panel-toggle-icon pi\"\n [class.pi-minus]=\"!collapsed\"\n [class.pi-plus]=\"collapsed\"\n aria-hidden=\"true\"\n ></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </button>\n }\n @if (!toggleable) {\n <div class=\"i-panel-header\">\n <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </div>\n }\n </legend>\n <div class=\"i-panel-content-wrapper\" [class.i-panel-content-wrapper--collapsed]=\"collapsed\">\n <div class=\"i-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</fieldset>\n",
|
|
6129
|
+
styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:transparent}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:inherit}.i-panel.i-panel--toggleable .i-panel-header:hover{color:var(--color-primary)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel .i-panel-header-wrap .i-panel-header{background:transparent}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){background:transparent}@media(pointer:coarse){.i-panel .i-panel-header-wrap .i-panel-header:where(button){min-height:44px}}.i-panel{border-radius:8px;overflow:visible;position:relative;margin:0;padding:0;min-inline-size:0;min-height:48px}.i-panel .i-panel-header-wrap{padding:0;margin-left:20px;max-width:calc(100% - 40px)}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:8px;max-width:100%;box-sizing:border-box;padding:4px 12px;-webkit-user-select:none;user-select:none;transition:color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;cursor:pointer;padding:4px 12px;font-family:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block;flex-shrink:0}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:12px;line-height:1;display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:visible;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0;overflow:hidden}.i-panel .i-panel-content{padding:16px}\n"],
|
|
6031
6130
|
changeDetection: i0.ChangeDetectionStrategy.Eager
|
|
6032
6131
|
});
|
|
6033
6132
|
};
|
|
@@ -6041,8 +6140,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6041
6140
|
args: [{
|
|
6042
6141
|
selector: "i-panel",
|
|
6043
6142
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
6044
|
-
template: "<fieldset\n class=\"i-panel\"\n [class.i-panel--collapsed]=\"collapsed\"\n [class.i-panel--toggleable]=\"toggleable\"\n [attr.id]=\"componentId\"\n>\n <legend class=\"i-panel-header-wrap\">\n @if (toggleable) {\n <button\n class=\"i-panel-header\"\n type=\"button\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"!collapsed\"\n >\n <i\n class=\"i-panel-toggle-icon pi\"\n [class.pi-minus]=\"!collapsed\"\n [class.pi-plus]=\"collapsed\"\n aria-hidden=\"true\"\n ></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </button>\n }\n @if (!toggleable) {\n <div class=\"i-panel-header\">\n <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </div>\n }\n </legend>\n <div
|
|
6045
|
-
styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:transparent}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:inherit}.i-panel.i-panel--toggleable .i-panel-header:hover{color:var(--color-primary)}.i-panel .i-panel-content{color:var(--color-text-primary)}@media(pointer:coarse){.i-panel .i-panel-header-wrap .i-panel-header:where(button){min-height:44px}}.i-panel{border-radius:8px;overflow:visible;position:relative;margin:0;padding:0;min-inline-size:0;min-height:48px}.i-panel .i-panel-header-wrap{padding:0;margin-left:20px;max-width:calc(100% - 40px)}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:8px;max-width:100%;box-sizing:border-box;padding:4px 12px
|
|
6143
|
+
template: "<fieldset\n class=\"i-panel\"\n [class.i-panel--collapsed]=\"collapsed\"\n [class.i-panel--toggleable]=\"toggleable\"\n [attr.id]=\"componentId\"\n>\n <legend class=\"i-panel-header-wrap\">\n @if (toggleable) {\n <button\n class=\"i-panel-header\"\n type=\"button\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"!collapsed\"\n >\n <i\n class=\"i-panel-toggle-icon pi\"\n [class.pi-minus]=\"!collapsed\"\n [class.pi-plus]=\"collapsed\"\n aria-hidden=\"true\"\n ></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </button>\n }\n @if (!toggleable) {\n <div class=\"i-panel-header\">\n <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n <span class=\"i-panel-title\">{{ header }}</span>\n </div>\n }\n </legend>\n <div class=\"i-panel-content-wrapper\" [class.i-panel-content-wrapper--collapsed]=\"collapsed\">\n <div class=\"i-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</fieldset>\n",
|
|
6144
|
+
styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:transparent}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:inherit}.i-panel.i-panel--toggleable .i-panel-header:hover{color:var(--color-primary)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel .i-panel-header-wrap .i-panel-header{background:transparent}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){background:transparent}@media(pointer:coarse){.i-panel .i-panel-header-wrap .i-panel-header:where(button){min-height:44px}}.i-panel{border-radius:8px;overflow:visible;position:relative;margin:0;padding:0;min-inline-size:0;min-height:48px}.i-panel .i-panel-header-wrap{padding:0;margin-left:20px;max-width:calc(100% - 40px)}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:8px;max-width:100%;box-sizing:border-box;padding:4px 12px;-webkit-user-select:none;user-select:none;transition:color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;cursor:pointer;padding:4px 12px;font-family:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block;flex-shrink:0}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:12px;line-height:1;display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:visible;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0;overflow:hidden}.i-panel .i-panel-content{padding:16px}\n"]
|
|
6046
6145
|
}]
|
|
6047
6146
|
}],
|
|
6048
6147
|
propDecorators: {
|
|
@@ -6394,7 +6493,7 @@ var ISelect = class ISelect {
|
|
|
6394
6493
|
}
|
|
6395
6494
|
],
|
|
6396
6495
|
ngImport: i0,
|
|
6397
|
-
template: "<div
|
|
6496
|
+
template: "<div\n class=\"i-option-field\"\n [class.i-option-field--open]=\"isOpen\"\n [class.native-on-mobile]=\"nativeOnMobile\"\n [class.i-option-field--float]=\"useFloatLabel\"\n [class.i-option-field--filled]=\"value != null\"\n [class.i-option-field--disabled]=\"disabled\"\n [class.i-option-field--invalid]=\"showErrors\"\n #dropdown\n>\n <div class=\"i-option-control\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n <div class=\"i-option-value\">\n <span class=\"i-option-text\" [class.i-option-placeholder]=\"value == null\">{{\n getSelectedLabel() || (useFloatLabel ? '' : placeholder)\n }}</span>\n </div>\n <button\n #trigger\n type=\"button\"\n class=\"i-option-trigger\"\n [id]=\"id || componentId\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"label + ': ' + (getSelectedLabel() || placeholder)\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? componentId + '-options' : null\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n (click)=\"toggleDropdown()\"\n (keydown.arrowdown)=\"$event.preventDefault(); openDropdown()\"\n (blur)=\"touch()\"\n ></button>\n @if (nativeOnMobile) {\n <select\n class=\"i-native-select\"\n [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"label\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n (pointerdown)=\"closeDropdown()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"touch()\"\n >\n <option value=\"-1\" disabled [selected]=\"nativeSelectedIndex === '-1'\">\n {{ placeholder }}\n </option>\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">\n {{ getOptionLabel(option) }}\n </option>\n }\n </select>\n }\n <div class=\"i-option-actions\">\n @if (showClear && value != null) {\n <button\n type=\"button\"\n class=\"i-option-clear\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"'Clear ' + label\"\n (click)=\"clearSelection(); $event.stopPropagation()\"\n >\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n <span class=\"i-option-arrow\" aria-hidden=\"true\"\n ><i class=\"pi pi-chevron-down\" [class.flipped]=\"isOpen\"></i\n ></span>\n </div>\n </div>\n @if (label && useFloatLabel) {\n <label class=\"i-option-label\" [for]=\"id || componentId\">{{ label }}</label>\n }\n @if (showErrors) {\n <div class=\"i-option-error\" [id]=\"componentId + '-error'\" role=\"alert\">\n {{ getErrorMessage() }}\n </div>\n }\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen && !disabled\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayWidth]=\"\n isOpen ? origin.elementRef.nativeElement.getBoundingClientRect().width : undefined\n \"\n [cdkConnectedOverlayViewportMargin]=\"12\"\n [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"onDocumentClick($event)\"\n (attach)=\"focusOptions()\"\n (detach)=\"closeDropdown()\"\n>\n <div class=\"i-option-panel\" #optionsPanel (keydown)=\"onPanelKeydown($event)\">\n @if (filter) {\n <div class=\"i-option-filter\">\n <input\n #searchInput\n type=\"search\"\n class=\"i-option-search\"\n placeholder=\"Search...\"\n [attr.aria-label]=\"'Search ' + label\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n />\n </div>\n }\n <div\n class=\"i-option-list\"\n role=\"listbox\"\n [id]=\"componentId + '-options'\"\n [attr.aria-label]=\"label\"\n >\n @for (option of filteredOptions(); track $index) {\n <button\n type=\"button\"\n class=\"i-option\"\n role=\"option\"\n [class.selected]=\"isOptionSelected(option)\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n >\n <span>{{ getOptionLabel(option) }}</span>\n </button>\n }\n @if (!filteredOptions().length) {\n <div class=\"i-option-empty\">No options found</div>\n }\n </div>\n </div>\n</ng-template>\n",
|
|
6398
6497
|
styles: [":host{display:block;min-width:0;max-width:100%}.i-option-field{position:relative;width:100%}.i-option-field--float{margin-top:1.5em}.i-option-control{position:relative;display:flex;align-items:center;width:100%;min-height:42px;box-sizing:border-box;border:1px solid var(--surface-border);border-radius:4px;color:var(--color-text-primary);background:var(--color-component-background)}.i-option-control:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-option-value{flex:1;min-width:0;padding:4px 0 4px 12px;pointer-events:none}.i-option-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-option-placeholder{color:var(--color-text-secondary)}.i-option-trigger,.i-native-select{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;margin:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;z-index:1}.i-option-trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-native-select{display:none;opacity:0;font-size:16px}.i-option-actions{display:flex;align-items:center;flex-shrink:0;pointer-events:none}.i-option-clear{position:relative;z-index:2;pointer-events:auto;display:inline-flex;justify-content:center;align-items:center;width:32px;height:32px;flex-shrink:0;padding:0;border:0;border-radius:4px;background:transparent;color:var(--color-text-secondary);cursor:pointer}.i-option-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-arrow{width:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.i-option-arrow i{transition:transform .15s ease}.i-option-arrow .flipped{transform:rotate(180deg)}.i-option-label{padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;position:absolute;top:21px;left:12px;transform:translateY(-50%);pointer-events:none;color:var(--color-text-secondary)}.i-option-field--open .i-option-label,.i-option-field--filled .i-option-label,.i-option-field:focus-within .i-option-label{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-option-field--invalid .i-option-control{border-color:var(--color-danger)}.i-option-field--invalid .i-option-label{color:var(--color-danger)}.i-option-field--disabled .i-option-control{background:var(--color-disabled-background);color:var(--color-text-disabled)}.i-option-field--disabled .i-option-trigger,.i-option-field--disabled .i-native-select{cursor:not-allowed}.i-option-error{margin-top:4px;font-size:12px;color:var(--color-danger)}.i-option-panel{width:100%;min-width:0;box-sizing:border-box;max-height:min(360px,100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--surface-border);border-radius:4px;background:var(--color-component-background);color:var(--color-text-primary);box-shadow:0 4px 12px #00000026}.i-option-filter{padding:8px;flex-shrink:0}.i-option-search{box-sizing:border-box;width:100%;min-width:0;min-height:40px;padding:8px;font:inherit;border:1px solid var(--surface-border);border-radius:4px;color:inherit;background:var(--color-component-background)}.i-option-search:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-list{overflow:auto;min-height:0;overscroll-behavior:contain}.i-option{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px;border:0;font:inherit;text-align:left;overflow-wrap:anywhere;background:transparent;color:inherit;cursor:pointer}.i-option:hover,.i-option.selected{background:var(--surface-hover)}.i-option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-check{flex-shrink:0;color:var(--color-primary)}.i-option-empty{padding:12px;color:var(--color-text-secondary)}@media(pointer:coarse){.i-option-control,.i-option{min-height:44px}.i-option-clear{width:44px;height:44px}.i-option-search{min-height:44px;font-size:16px}}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-option-trigger{display:none}.native-on-mobile .i-native-select{display:block}}\n"],
|
|
6399
6498
|
dependencies: [
|
|
6400
6499
|
{
|
|
@@ -6508,7 +6607,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6508
6607
|
useExisting: forwardRef(() => ISelect),
|
|
6509
6608
|
multi: true
|
|
6510
6609
|
}],
|
|
6511
|
-
template: "<div
|
|
6610
|
+
template: "<div\n class=\"i-option-field\"\n [class.i-option-field--open]=\"isOpen\"\n [class.native-on-mobile]=\"nativeOnMobile\"\n [class.i-option-field--float]=\"useFloatLabel\"\n [class.i-option-field--filled]=\"value != null\"\n [class.i-option-field--disabled]=\"disabled\"\n [class.i-option-field--invalid]=\"showErrors\"\n #dropdown\n>\n <div class=\"i-option-control\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n <div class=\"i-option-value\">\n <span class=\"i-option-text\" [class.i-option-placeholder]=\"value == null\">{{\n getSelectedLabel() || (useFloatLabel ? '' : placeholder)\n }}</span>\n </div>\n <button\n #trigger\n type=\"button\"\n class=\"i-option-trigger\"\n [id]=\"id || componentId\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"label + ': ' + (getSelectedLabel() || placeholder)\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? componentId + '-options' : null\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n (click)=\"toggleDropdown()\"\n (keydown.arrowdown)=\"$event.preventDefault(); openDropdown()\"\n (blur)=\"touch()\"\n ></button>\n @if (nativeOnMobile) {\n <select\n class=\"i-native-select\"\n [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"label\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n (pointerdown)=\"closeDropdown()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"touch()\"\n >\n <option value=\"-1\" disabled [selected]=\"nativeSelectedIndex === '-1'\">\n {{ placeholder }}\n </option>\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">\n {{ getOptionLabel(option) }}\n </option>\n }\n </select>\n }\n <div class=\"i-option-actions\">\n @if (showClear && value != null) {\n <button\n type=\"button\"\n class=\"i-option-clear\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"'Clear ' + label\"\n (click)=\"clearSelection(); $event.stopPropagation()\"\n >\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n <span class=\"i-option-arrow\" aria-hidden=\"true\"\n ><i class=\"pi pi-chevron-down\" [class.flipped]=\"isOpen\"></i\n ></span>\n </div>\n </div>\n @if (label && useFloatLabel) {\n <label class=\"i-option-label\" [for]=\"id || componentId\">{{ label }}</label>\n }\n @if (showErrors) {\n <div class=\"i-option-error\" [id]=\"componentId + '-error'\" role=\"alert\">\n {{ getErrorMessage() }}\n </div>\n }\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen && !disabled\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayWidth]=\"\n isOpen ? origin.elementRef.nativeElement.getBoundingClientRect().width : undefined\n \"\n [cdkConnectedOverlayViewportMargin]=\"12\"\n [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"onDocumentClick($event)\"\n (attach)=\"focusOptions()\"\n (detach)=\"closeDropdown()\"\n>\n <div class=\"i-option-panel\" #optionsPanel (keydown)=\"onPanelKeydown($event)\">\n @if (filter) {\n <div class=\"i-option-filter\">\n <input\n #searchInput\n type=\"search\"\n class=\"i-option-search\"\n placeholder=\"Search...\"\n [attr.aria-label]=\"'Search ' + label\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n />\n </div>\n }\n <div\n class=\"i-option-list\"\n role=\"listbox\"\n [id]=\"componentId + '-options'\"\n [attr.aria-label]=\"label\"\n >\n @for (option of filteredOptions(); track $index) {\n <button\n type=\"button\"\n class=\"i-option\"\n role=\"option\"\n [class.selected]=\"isOptionSelected(option)\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n >\n <span>{{ getOptionLabel(option) }}</span>\n </button>\n }\n @if (!filteredOptions().length) {\n <div class=\"i-option-empty\">No options found</div>\n }\n </div>\n </div>\n</ng-template>\n",
|
|
6512
6611
|
styles: [":host{display:block;min-width:0;max-width:100%}.i-option-field{position:relative;width:100%}.i-option-field--float{margin-top:1.5em}.i-option-control{position:relative;display:flex;align-items:center;width:100%;min-height:42px;box-sizing:border-box;border:1px solid var(--surface-border);border-radius:4px;color:var(--color-text-primary);background:var(--color-component-background)}.i-option-control:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-option-value{flex:1;min-width:0;padding:4px 0 4px 12px;pointer-events:none}.i-option-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-option-placeholder{color:var(--color-text-secondary)}.i-option-trigger,.i-native-select{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;margin:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;z-index:1}.i-option-trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-native-select{display:none;opacity:0;font-size:16px}.i-option-actions{display:flex;align-items:center;flex-shrink:0;pointer-events:none}.i-option-clear{position:relative;z-index:2;pointer-events:auto;display:inline-flex;justify-content:center;align-items:center;width:32px;height:32px;flex-shrink:0;padding:0;border:0;border-radius:4px;background:transparent;color:var(--color-text-secondary);cursor:pointer}.i-option-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-arrow{width:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.i-option-arrow i{transition:transform .15s ease}.i-option-arrow .flipped{transform:rotate(180deg)}.i-option-label{padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;position:absolute;top:21px;left:12px;transform:translateY(-50%);pointer-events:none;color:var(--color-text-secondary)}.i-option-field--open .i-option-label,.i-option-field--filled .i-option-label,.i-option-field:focus-within .i-option-label{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-option-field--invalid .i-option-control{border-color:var(--color-danger)}.i-option-field--invalid .i-option-label{color:var(--color-danger)}.i-option-field--disabled .i-option-control{background:var(--color-disabled-background);color:var(--color-text-disabled)}.i-option-field--disabled .i-option-trigger,.i-option-field--disabled .i-native-select{cursor:not-allowed}.i-option-error{margin-top:4px;font-size:12px;color:var(--color-danger)}.i-option-panel{width:100%;min-width:0;box-sizing:border-box;max-height:min(360px,100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--surface-border);border-radius:4px;background:var(--color-component-background);color:var(--color-text-primary);box-shadow:0 4px 12px #00000026}.i-option-filter{padding:8px;flex-shrink:0}.i-option-search{box-sizing:border-box;width:100%;min-width:0;min-height:40px;padding:8px;font:inherit;border:1px solid var(--surface-border);border-radius:4px;color:inherit;background:var(--color-component-background)}.i-option-search:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-list{overflow:auto;min-height:0;overscroll-behavior:contain}.i-option{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px;border:0;font:inherit;text-align:left;overflow-wrap:anywhere;background:transparent;color:inherit;cursor:pointer}.i-option:hover,.i-option.selected{background:var(--surface-hover)}.i-option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-check{flex-shrink:0;color:var(--color-primary)}.i-option-empty{padding:12px;color:var(--color-text-secondary)}@media(pointer:coarse){.i-option-control,.i-option{min-height:44px}.i-option-clear{width:44px;height:44px}.i-option-search{min-height:44px;font-size:16px}}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-option-trigger{display:none}.native-on-mobile .i-native-select{display:block}}\n"]
|
|
6513
6612
|
}]
|
|
6514
6613
|
}],
|
|
@@ -6754,8 +6853,8 @@ var IStepper = class IStepper {
|
|
|
6754
6853
|
predicate: IStep
|
|
6755
6854
|
}],
|
|
6756
6855
|
ngImport: i0,
|
|
6757
|
-
template: "<div class=\"i-stepper\" [ngClass]=\"'i-stepper--' + orientation\" [attr.id]=\"componentId\">\n <div class=\"i-stepper__body\">\n
|
|
6758
|
-
styles: [":host{display:block;container-type:inline-size}.i-stepper{display:flex;flex-direction:column;width:100%;min-width:0}.i-stepper__body{display:flex;min-width:0}.i-stepper--horizontal .i-stepper__body{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}.i-stepper--vertical .i-stepper__body{gap:24px;align-items:flex-start}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%);display:grid;gap:16px}.i-stepper--vertical .i-stepper__panel{flex:1 1 0;min-width:0;padding-top:0}.i-stepper__navigation{margin:0;padding:0;list-style:none}.i-stepper__item{position:relative;min-width:0}.i-stepper__trigger{border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px;position:relative;z-index:1;box-sizing:border-box;height:100%;border:0;border-bottom:4px
|
|
6856
|
+
template: "<div class=\"i-stepper\" [ngClass]=\"'i-stepper--' + orientation\" [attr.id]=\"componentId\">\n <div class=\"i-stepper__body\">\n <ol class=\"i-stepper__navigation\" [attr.aria-label]=\"ariaLabel\">\n @for (step of steps; track step; let index = $index; let last = $last) {\n <li\n class=\"i-stepper__item\"\n [class.i-stepper__item--active]=\"activeIndex === index\"\n [class.i-stepper__item--completed]=\"step.completed\"\n [class.i-stepper__item--disabled]=\"!canSelect(index)\"\n >\n <button\n class=\"i-stepper__trigger\"\n type=\"button\"\n [attr.id]=\"componentId + '-step-' + index\"\n [attr.aria-current]=\"activeIndex === index ? 'step' : null\"\n [attr.aria-controls]=\"componentId + '-panel-' + index\"\n [attr.aria-describedby]=\"\n step.description ? componentId + '-description-' + index : null\n \"\n [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n [disabled]=\"!canSelect(index)\"\n (click)=\"selectStep($event, index)\"\n (keydown)=\"onKeyDown($event, index)\"\n >\n <span class=\"i-stepper__sr-only\">Step {{ index + 1 }} of {{ steps.length }}.</span>\n <span class=\"i-stepper__indicator\" aria-hidden=\"true\">\n @if (step.icon) {\n <i [ngClass]=\"step.icon\"></i>\n } @else {\n {{ index + 1 }}\n }\n </span>\n <span class=\"i-stepper__copy\">\n <span class=\"i-stepper__label\">{{ step.label }}</span>\n @if (step.description) {\n <span\n class=\"i-stepper__description\"\n [attr.id]=\"componentId + '-description-' + index\"\n >{{ step.description }}</span\n >\n }\n </span>\n @if (step.optional && !step.completed) {\n <span class=\"i-stepper__optional\">Optional</span>\n }\n @if (step.completed) {\n <span class=\"i-stepper__completion\"\n ><i class=\"pi pi-check\" aria-hidden=\"true\"></i\n ><span class=\"i-stepper__sr-only\">Completed.</span></span\n >\n } @else if (!last) {\n <i class=\"pi pi-chevron-right i-stepper__chevron\" aria-hidden=\"true\"></i>\n }\n </button>\n @if (!last) {\n <span class=\"i-stepper__connector\" aria-hidden=\"true\"></span>\n }\n </li>\n }\n </ol>\n @for (step of steps; track step; let index = $index) {\n <section\n class=\"i-stepper__panel\"\n [class.i-stepper__panel--active]=\"activeIndex === index\"\n [attr.id]=\"componentId + '-panel-' + index\"\n [attr.aria-labelledby]=\"componentId + '-step-' + index\"\n [attr.hidden]=\"activeIndex !== index || null\"\n role=\"region\"\n >\n @if (activeIndex === index) {\n <ng-container [ngTemplateOutlet]=\"step.contentTemplate\" />\n }\n </section>\n }\n </div>\n <div class=\"i-stepper__actions\"><ng-content select=\"[stepperActions]\" /></div>\n</div>\n",
|
|
6857
|
+
styles: [":host{display:block;container-type:inline-size}.i-stepper{display:flex;flex-direction:column;width:100%;min-width:0}.i-stepper__body{display:flex;min-width:0}.i-stepper--horizontal .i-stepper__body{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}@container (max-width: 900px){.i-stepper--horizontal .i-stepper__navigation{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:16px}}.i-stepper--vertical .i-stepper__body{gap:24px;align-items:flex-start}@container (max-width: 768px){.i-stepper--vertical .i-stepper__body{flex-direction:column}}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%);display:grid;gap:16px}@container (max-width: 768px){.i-stepper--vertical .i-stepper__navigation{flex-basis:auto;width:100%}}.i-stepper--vertical .i-stepper__panel{flex:1 1 0;min-width:0;padding-top:0}@container (max-width: 768px){.i-stepper--vertical .i-stepper__panel{flex-basis:auto;width:100%}}.i-stepper__navigation{margin:0;padding:0;list-style:none}.i-stepper__item{position:relative;min-width:0}.i-stepper__trigger{border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px;position:relative;z-index:1;box-sizing:border-box;height:100%;border:0;border-bottom-width:4px;border-bottom-style:solid;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}@media(prefers-reduced-motion:reduce){.i-stepper__trigger{transition:none}}.i-stepper__indicator{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-stepper__indicator i{font-size:20px}.i-stepper__indicator{font-size:20px;line-height:1}.i-stepper__copy{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-stepper__label{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-stepper__description{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-stepper__completion{flex-shrink:0;font-size:18px;line-height:1}.i-stepper__optional{flex-shrink:0;font-size:9.6px}.i-stepper__chevron{flex-shrink:0;font-size:12px}.i-stepper__connector{position:absolute;left:100%;top:50%;width:24px;height:2px;transform:translateY(-50%)}.i-stepper--vertical .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--vertical .i-stepper__chevron{transform:rotate(90deg)}.i-stepper__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.i-stepper__panel{display:none;min-width:0;padding-top:24px}.i-stepper__panel--active{display:flow-root}.i-stepper__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.i-stepper__actions:empty{display:none}@container (max-width: 900px){.i-stepper--horizontal .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}}@container (max-width: 900px){.i-stepper--horizontal .i-stepper__chevron{transform:rotate(90deg)}}.i-stepper{color:var(--color-text-primary)}.i-stepper__trigger{background:var(--surface-section);color:var(--color-text-primary);border-bottom-color:var(--color-text-tertiary)}.i-stepper__trigger:hover:not(:disabled){background:var(--surface-hover)}.i-stepper__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-stepper__trigger:disabled{cursor:not-allowed}.i-stepper__indicator{color:var(--color-text-tertiary)}.i-stepper__optional{color:var(--color-text-secondary)}.i-stepper__completion{color:var(--color-success)}.i-stepper__chevron{color:var(--color-text-secondary)}.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--completed>.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__chevron{color:var(--color-primary)}.i-stepper__item--completed .i-stepper__trigger{border-bottom-color:var(--color-success)}.i-stepper__item--completed .i-stepper__indicator{color:var(--color-success)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__trigger{border-bottom-color:var(--color-primary)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__indicator{color:var(--color-primary)}.i-stepper__item--disabled{opacity:.55}.i-stepper__trigger{border-bottom-color:transparent}\n"],
|
|
6759
6858
|
dependencies: [{
|
|
6760
6859
|
kind: "directive",
|
|
6761
6860
|
type: NgClass,
|
|
@@ -6786,8 +6885,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6786
6885
|
standalone: true,
|
|
6787
6886
|
imports: [NgClass, NgTemplateOutlet],
|
|
6788
6887
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
6789
|
-
template: "<div class=\"i-stepper\" [ngClass]=\"'i-stepper--' + orientation\" [attr.id]=\"componentId\">\n <div class=\"i-stepper__body\">\n
|
|
6790
|
-
styles: [":host{display:block;container-type:inline-size}.i-stepper{display:flex;flex-direction:column;width:100%;min-width:0}.i-stepper__body{display:flex;min-width:0}.i-stepper--horizontal .i-stepper__body{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}.i-stepper--vertical .i-stepper__body{gap:24px;align-items:flex-start}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%);display:grid;gap:16px}.i-stepper--vertical .i-stepper__panel{flex:1 1 0;min-width:0;padding-top:0}.i-stepper__navigation{margin:0;padding:0;list-style:none}.i-stepper__item{position:relative;min-width:0}.i-stepper__trigger{border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px;position:relative;z-index:1;box-sizing:border-box;height:100%;border:0;border-bottom:4px
|
|
6888
|
+
template: "<div class=\"i-stepper\" [ngClass]=\"'i-stepper--' + orientation\" [attr.id]=\"componentId\">\n <div class=\"i-stepper__body\">\n <ol class=\"i-stepper__navigation\" [attr.aria-label]=\"ariaLabel\">\n @for (step of steps; track step; let index = $index; let last = $last) {\n <li\n class=\"i-stepper__item\"\n [class.i-stepper__item--active]=\"activeIndex === index\"\n [class.i-stepper__item--completed]=\"step.completed\"\n [class.i-stepper__item--disabled]=\"!canSelect(index)\"\n >\n <button\n class=\"i-stepper__trigger\"\n type=\"button\"\n [attr.id]=\"componentId + '-step-' + index\"\n [attr.aria-current]=\"activeIndex === index ? 'step' : null\"\n [attr.aria-controls]=\"componentId + '-panel-' + index\"\n [attr.aria-describedby]=\"\n step.description ? componentId + '-description-' + index : null\n \"\n [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n [disabled]=\"!canSelect(index)\"\n (click)=\"selectStep($event, index)\"\n (keydown)=\"onKeyDown($event, index)\"\n >\n <span class=\"i-stepper__sr-only\">Step {{ index + 1 }} of {{ steps.length }}.</span>\n <span class=\"i-stepper__indicator\" aria-hidden=\"true\">\n @if (step.icon) {\n <i [ngClass]=\"step.icon\"></i>\n } @else {\n {{ index + 1 }}\n }\n </span>\n <span class=\"i-stepper__copy\">\n <span class=\"i-stepper__label\">{{ step.label }}</span>\n @if (step.description) {\n <span\n class=\"i-stepper__description\"\n [attr.id]=\"componentId + '-description-' + index\"\n >{{ step.description }}</span\n >\n }\n </span>\n @if (step.optional && !step.completed) {\n <span class=\"i-stepper__optional\">Optional</span>\n }\n @if (step.completed) {\n <span class=\"i-stepper__completion\"\n ><i class=\"pi pi-check\" aria-hidden=\"true\"></i\n ><span class=\"i-stepper__sr-only\">Completed.</span></span\n >\n } @else if (!last) {\n <i class=\"pi pi-chevron-right i-stepper__chevron\" aria-hidden=\"true\"></i>\n }\n </button>\n @if (!last) {\n <span class=\"i-stepper__connector\" aria-hidden=\"true\"></span>\n }\n </li>\n }\n </ol>\n @for (step of steps; track step; let index = $index) {\n <section\n class=\"i-stepper__panel\"\n [class.i-stepper__panel--active]=\"activeIndex === index\"\n [attr.id]=\"componentId + '-panel-' + index\"\n [attr.aria-labelledby]=\"componentId + '-step-' + index\"\n [attr.hidden]=\"activeIndex !== index || null\"\n role=\"region\"\n >\n @if (activeIndex === index) {\n <ng-container [ngTemplateOutlet]=\"step.contentTemplate\" />\n }\n </section>\n }\n </div>\n <div class=\"i-stepper__actions\"><ng-content select=\"[stepperActions]\" /></div>\n</div>\n",
|
|
6889
|
+
styles: [":host{display:block;container-type:inline-size}.i-stepper{display:flex;flex-direction:column;width:100%;min-width:0}.i-stepper__body{display:flex;min-width:0}.i-stepper--horizontal .i-stepper__body{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}@container (max-width: 900px){.i-stepper--horizontal .i-stepper__navigation{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:16px}}.i-stepper--vertical .i-stepper__body{gap:24px;align-items:flex-start}@container (max-width: 768px){.i-stepper--vertical .i-stepper__body{flex-direction:column}}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%);display:grid;gap:16px}@container (max-width: 768px){.i-stepper--vertical .i-stepper__navigation{flex-basis:auto;width:100%}}.i-stepper--vertical .i-stepper__panel{flex:1 1 0;min-width:0;padding-top:0}@container (max-width: 768px){.i-stepper--vertical .i-stepper__panel{flex-basis:auto;width:100%}}.i-stepper__navigation{margin:0;padding:0;list-style:none}.i-stepper__item{position:relative;min-width:0}.i-stepper__trigger{border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px;position:relative;z-index:1;box-sizing:border-box;height:100%;border:0;border-bottom-width:4px;border-bottom-style:solid;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}@media(prefers-reduced-motion:reduce){.i-stepper__trigger{transition:none}}.i-stepper__indicator{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-stepper__indicator i{font-size:20px}.i-stepper__indicator{font-size:20px;line-height:1}.i-stepper__copy{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-stepper__label{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-stepper__description{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-stepper__completion{flex-shrink:0;font-size:18px;line-height:1}.i-stepper__optional{flex-shrink:0;font-size:9.6px}.i-stepper__chevron{flex-shrink:0;font-size:12px}.i-stepper__connector{position:absolute;left:100%;top:50%;width:24px;height:2px;transform:translateY(-50%)}.i-stepper--vertical .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--vertical .i-stepper__chevron{transform:rotate(90deg)}.i-stepper__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.i-stepper__panel{display:none;min-width:0;padding-top:24px}.i-stepper__panel--active{display:flow-root}.i-stepper__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.i-stepper__actions:empty{display:none}@container (max-width: 900px){.i-stepper--horizontal .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}}@container (max-width: 900px){.i-stepper--horizontal .i-stepper__chevron{transform:rotate(90deg)}}.i-stepper{color:var(--color-text-primary)}.i-stepper__trigger{background:var(--surface-section);color:var(--color-text-primary);border-bottom-color:var(--color-text-tertiary)}.i-stepper__trigger:hover:not(:disabled){background:var(--surface-hover)}.i-stepper__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-stepper__trigger:disabled{cursor:not-allowed}.i-stepper__indicator{color:var(--color-text-tertiary)}.i-stepper__optional{color:var(--color-text-secondary)}.i-stepper__completion{color:var(--color-success)}.i-stepper__chevron{color:var(--color-text-secondary)}.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--completed>.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__chevron{color:var(--color-primary)}.i-stepper__item--completed .i-stepper__trigger{border-bottom-color:var(--color-success)}.i-stepper__item--completed .i-stepper__indicator{color:var(--color-success)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__trigger{border-bottom-color:var(--color-primary)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__indicator{color:var(--color-primary)}.i-stepper__item--disabled{opacity:.55}.i-stepper__trigger{border-bottom-color:transparent}\n"]
|
|
6791
6890
|
}]
|
|
6792
6891
|
}],
|
|
6793
6892
|
propDecorators: {
|
|
@@ -6982,8 +7081,8 @@ var ITabs = class ITabs {
|
|
|
6982
7081
|
predicate: ITabPanel
|
|
6983
7082
|
}],
|
|
6984
7083
|
ngImport: i0,
|
|
6985
|
-
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 <div class=\"i-tabs__tab-item\" role=\"presentation\">\n
|
|
6986
|
-
styles: [".i-tabs{border:1px solid var(--surface-border)}.i-tabs__header{border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%;box-sizing:border-box;border-radius:8px}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab-item{display:flex;align-items:center;flex-shrink:0}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;
|
|
7084
|
+
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 <div class=\"i-tabs__tab-item\" role=\"presentation\">\n <button\n type=\"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 </button>\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 </div>\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",
|
|
7085
|
+
styles: [".i-tabs{border:1px solid var(--surface-border)}.i-tabs__header{border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs .i-tabs__tab,.i-tabs .i-tabs__tab-close{background:transparent}.i-tabs{display:flex;flex-direction:column;width:100%;box-sizing:border-box;border-radius:8px}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab-item{display:flex;align-items:center;flex-shrink:0}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;font-size:12px;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-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;cursor:pointer}.i-tabs .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1;border-radius:inherit;border-top-left-radius:0;border-top-right-radius:0}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}@media(max-width:768px){.i-tabs .i-tabs__panels .i-tabs__panel{padding-left:0;padding-right:0}}:host,.i-tabs,.i-tabs__panels{min-width:0;max-width:100%}.i-tabs .i-tabs__tab{flex-shrink:0}@media(pointer:coarse){.i-tabs .i-tabs__tab{min-height:44px}}@media(pointer:coarse){.i-tabs .i-tabs__tab-close{width:32px;height:32px;margin-left:4px;flex-shrink:0}}\n"],
|
|
6987
7086
|
dependencies: [{
|
|
6988
7087
|
kind: "directive",
|
|
6989
7088
|
type: NgClass,
|
|
@@ -7014,8 +7113,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7014
7113
|
standalone: true,
|
|
7015
7114
|
imports: [NgClass, NgTemplateOutlet],
|
|
7016
7115
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
7017
|
-
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 <div class=\"i-tabs__tab-item\" role=\"presentation\">\n
|
|
7018
|
-
styles: [".i-tabs{border:1px solid var(--surface-border)}.i-tabs__header{border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%;box-sizing:border-box;border-radius:8px}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab-item{display:flex;align-items:center;flex-shrink:0}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;
|
|
7116
|
+
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 <div class=\"i-tabs__tab-item\" role=\"presentation\">\n <button\n type=\"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 </button>\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 </div>\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",
|
|
7117
|
+
styles: [".i-tabs{border:1px solid var(--surface-border)}.i-tabs__header{border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs .i-tabs__tab,.i-tabs .i-tabs__tab-close{background:transparent}.i-tabs{display:flex;flex-direction:column;width:100%;box-sizing:border-box;border-radius:8px}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab-item{display:flex;align-items:center;flex-shrink:0}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;font-size:12px;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-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;cursor:pointer}.i-tabs .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1;border-radius:inherit;border-top-left-radius:0;border-top-right-radius:0}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}@media(max-width:768px){.i-tabs .i-tabs__panels .i-tabs__panel{padding-left:0;padding-right:0}}:host,.i-tabs,.i-tabs__panels{min-width:0;max-width:100%}.i-tabs .i-tabs__tab{flex-shrink:0}@media(pointer:coarse){.i-tabs .i-tabs__tab{min-height:44px}}@media(pointer:coarse){.i-tabs .i-tabs__tab-close{width:32px;height:32px;margin-left:4px;flex-shrink:0}}\n"]
|
|
7019
7118
|
}]
|
|
7020
7119
|
}],
|
|
7021
7120
|
propDecorators: {
|
|
@@ -7101,8 +7200,8 @@ var IToggle = class IToggle {
|
|
|
7101
7200
|
multi: true
|
|
7102
7201
|
}],
|
|
7103
7202
|
ngImport: i0,
|
|
7104
|
-
template: "<div\n class=\"i-toggle-wrapper\"\n [class.i-toggle--disabled]=\"disabled\"\n [class.i-toggle--readonly]=\"readonly\"\n [class.i-toggle--small]=\"size === 'small'\"\n [class.i-toggle--medium]=\"size === 'medium'\"\n [class.i-toggle--large]=\"size === 'large'\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\n (keydown.space)=\"handleKeydown($event)\"\n (keydown.enter)=\"handleKeydown($event)\"\n>\n <div
|
|
7105
|
-
styles: [".i-toggle-wrapper .i-toggle{background-color:var(--surface-border);border:1px solid var(--surface-border)}.i-toggle-wrapper .i-toggle:focus{box-shadow:0 2px 10px #0003}.i-toggle-wrapper .i-toggle:hover:not(.i-toggle--checked){background-color:color-mix(in srgb,var(--surface-border) 80%,var(--color-primary) 20%)}.i-toggle-wrapper .i-toggle.i-toggle--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.i-toggle-wrapper .i-toggle.i-toggle--checked:hover{background-color:color-mix(in srgb,var(--color-primary) 80%,transparent);border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-toggle-wrapper .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper .i-toggle .i-toggle-thumb{background-color:var(--color-contrast-inverse)}.i-toggle-wrapper .i-toggle-label{color:var(--color-text-primary)}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked{background-color:var(--color-disabled-background);border-color:var(--color-disabled-border)}.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper.i-toggle--disabled .i-toggle .i-toggle-thumb{background-color:var(--color-text-disabled)}.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{color:var(--color-text-disabled)}.i-toggle-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:
|
|
7203
|
+
template: "<div\n class=\"i-toggle-wrapper\"\n [class.i-toggle--disabled]=\"disabled\"\n [class.i-toggle--readonly]=\"readonly\"\n [class.i-toggle--small]=\"size === 'small'\"\n [class.i-toggle--medium]=\"size === 'medium'\"\n [class.i-toggle--large]=\"size === 'large'\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\n (keydown.space)=\"handleKeydown($event)\"\n (keydown.enter)=\"handleKeydown($event)\"\n>\n <div class=\"i-toggle\" [class.i-toggle--checked]=\"checked\" aria-hidden=\"true\">\n <span class=\"i-toggle-thumb\"></span>\n </div>\n @if (label) {\n <label [id]=\"(id || componentId) + '-label'\" class=\"i-toggle-label\">\n {{ label }}\n </label>\n }\n</div>\n",
|
|
7204
|
+
styles: [".i-toggle-wrapper .i-toggle{background-color:var(--surface-border);border:1px solid var(--surface-border)}.i-toggle-wrapper .i-toggle:focus{box-shadow:0 2px 10px #0003}.i-toggle-wrapper .i-toggle:hover:not(.i-toggle--checked){background-color:color-mix(in srgb,var(--surface-border) 80%,var(--color-primary) 20%)}.i-toggle-wrapper .i-toggle.i-toggle--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.i-toggle-wrapper .i-toggle.i-toggle--checked:hover{background-color:color-mix(in srgb,var(--color-primary) 80%,transparent);border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-toggle-wrapper .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper .i-toggle .i-toggle-thumb{background-color:var(--color-contrast-inverse)}.i-toggle-wrapper .i-toggle-label{color:var(--color-text-primary)}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked{background-color:var(--color-disabled-background);border-color:var(--color-disabled-border)}.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper.i-toggle--disabled .i-toggle .i-toggle-thumb{background-color:var(--color-text-disabled)}.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{color:var(--color-text-disabled)}.i-toggle-wrapper .i-toggle:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 30%,transparent)}.i-toggle-wrapper:focus-visible{outline-color:currentColor}.i-toggle-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:12px}.i-toggle-wrapper.i-toggle--disabled{opacity:.6;cursor:not-allowed}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{cursor:not-allowed;pointer-events:none}.i-toggle-wrapper.i-toggle--readonly .i-toggle,.i-toggle-wrapper.i-toggle--readonly .i-toggle-label{cursor:default}.i-toggle-wrapper.i-toggle--small{font-size:10.8px;gap:6px}.i-toggle-wrapper.i-toggle--small .i-toggle{width:28px;height:16px;border-radius:8px}.i-toggle-wrapper.i-toggle--small .i-toggle .i-toggle-thumb{width:10px;height:10px}.i-toggle-wrapper.i-toggle--small .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(13px)}.i-toggle-wrapper.i-toggle--medium{font-size:12px;gap:8px}.i-toggle-wrapper.i-toggle--medium .i-toggle{width:36px;height:20px;border-radius:10px}.i-toggle-wrapper.i-toggle--medium .i-toggle .i-toggle-thumb{width:14px;height:14px}.i-toggle-wrapper.i-toggle--medium .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(17px)}.i-toggle-wrapper.i-toggle--large{font-size:14.4px;gap:10px}.i-toggle-wrapper.i-toggle--large .i-toggle{width:44px;height:24px;border-radius:12px}.i-toggle-wrapper.i-toggle--large .i-toggle .i-toggle-thumb{width:18px;height:18px}.i-toggle-wrapper.i-toggle--large .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(21px)}.i-toggle-wrapper .i-toggle{position:relative;display:inline-flex;align-items:center;padding:0 2px;transition:background-color .2s ease,border-color .2s ease;cursor:pointer;box-sizing:border-box;flex-shrink:0}.i-toggle-wrapper .i-toggle:focus{outline:none}.i-toggle-wrapper .i-toggle .i-toggle-thumb{border-radius:50%;transition:transform .2s ease,background-color .2s ease;flex-shrink:0}.i-toggle-wrapper .i-toggle-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}.i-toggle-wrapper{cursor:pointer;border-radius:4px}.i-toggle-wrapper:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}.i-toggle-wrapper.i-toggle--disabled{cursor:not-allowed}@media(pointer:coarse){.i-toggle-wrapper:not(.i-toggle--readonly){min-height:44px;min-width:44px;justify-content:center}}@media(pointer:coarse){.i-toggle-wrapper .i-toggle{flex-shrink:0}}\n"],
|
|
7106
7205
|
changeDetection: i0.ChangeDetectionStrategy.Eager
|
|
7107
7206
|
});
|
|
7108
7207
|
};
|
|
@@ -7123,8 +7222,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7123
7222
|
useExisting: forwardRef(() => IToggle),
|
|
7124
7223
|
multi: true
|
|
7125
7224
|
}],
|
|
7126
|
-
template: "<div\n class=\"i-toggle-wrapper\"\n [class.i-toggle--disabled]=\"disabled\"\n [class.i-toggle--readonly]=\"readonly\"\n [class.i-toggle--small]=\"size === 'small'\"\n [class.i-toggle--medium]=\"size === 'medium'\"\n [class.i-toggle--large]=\"size === 'large'\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\n (keydown.space)=\"handleKeydown($event)\"\n (keydown.enter)=\"handleKeydown($event)\"\n>\n <div
|
|
7127
|
-
styles: [".i-toggle-wrapper .i-toggle{background-color:var(--surface-border);border:1px solid var(--surface-border)}.i-toggle-wrapper .i-toggle:focus{box-shadow:0 2px 10px #0003}.i-toggle-wrapper .i-toggle:hover:not(.i-toggle--checked){background-color:color-mix(in srgb,var(--surface-border) 80%,var(--color-primary) 20%)}.i-toggle-wrapper .i-toggle.i-toggle--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.i-toggle-wrapper .i-toggle.i-toggle--checked:hover{background-color:color-mix(in srgb,var(--color-primary) 80%,transparent);border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-toggle-wrapper .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper .i-toggle .i-toggle-thumb{background-color:var(--color-contrast-inverse)}.i-toggle-wrapper .i-toggle-label{color:var(--color-text-primary)}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked{background-color:var(--color-disabled-background);border-color:var(--color-disabled-border)}.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper.i-toggle--disabled .i-toggle .i-toggle-thumb{background-color:var(--color-text-disabled)}.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{color:var(--color-text-disabled)}.i-toggle-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:
|
|
7225
|
+
template: "<div\n class=\"i-toggle-wrapper\"\n [class.i-toggle--disabled]=\"disabled\"\n [class.i-toggle--readonly]=\"readonly\"\n [class.i-toggle--small]=\"size === 'small'\"\n [class.i-toggle--medium]=\"size === 'medium'\"\n [class.i-toggle--large]=\"size === 'large'\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\n (keydown.space)=\"handleKeydown($event)\"\n (keydown.enter)=\"handleKeydown($event)\"\n>\n <div class=\"i-toggle\" [class.i-toggle--checked]=\"checked\" aria-hidden=\"true\">\n <span class=\"i-toggle-thumb\"></span>\n </div>\n @if (label) {\n <label [id]=\"(id || componentId) + '-label'\" class=\"i-toggle-label\">\n {{ label }}\n </label>\n }\n</div>\n",
|
|
7226
|
+
styles: [".i-toggle-wrapper .i-toggle{background-color:var(--surface-border);border:1px solid var(--surface-border)}.i-toggle-wrapper .i-toggle:focus{box-shadow:0 2px 10px #0003}.i-toggle-wrapper .i-toggle:hover:not(.i-toggle--checked){background-color:color-mix(in srgb,var(--surface-border) 80%,var(--color-primary) 20%)}.i-toggle-wrapper .i-toggle.i-toggle--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.i-toggle-wrapper .i-toggle.i-toggle--checked:hover{background-color:color-mix(in srgb,var(--color-primary) 80%,transparent);border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-toggle-wrapper .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper .i-toggle .i-toggle-thumb{background-color:var(--color-contrast-inverse)}.i-toggle-wrapper .i-toggle-label{color:var(--color-text-primary)}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked{background-color:var(--color-disabled-background);border-color:var(--color-disabled-border)}.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper.i-toggle--disabled .i-toggle .i-toggle-thumb{background-color:var(--color-text-disabled)}.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{color:var(--color-text-disabled)}.i-toggle-wrapper .i-toggle:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 30%,transparent)}.i-toggle-wrapper:focus-visible{outline-color:currentColor}.i-toggle-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:12px}.i-toggle-wrapper.i-toggle--disabled{opacity:.6;cursor:not-allowed}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{cursor:not-allowed;pointer-events:none}.i-toggle-wrapper.i-toggle--readonly .i-toggle,.i-toggle-wrapper.i-toggle--readonly .i-toggle-label{cursor:default}.i-toggle-wrapper.i-toggle--small{font-size:10.8px;gap:6px}.i-toggle-wrapper.i-toggle--small .i-toggle{width:28px;height:16px;border-radius:8px}.i-toggle-wrapper.i-toggle--small .i-toggle .i-toggle-thumb{width:10px;height:10px}.i-toggle-wrapper.i-toggle--small .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(13px)}.i-toggle-wrapper.i-toggle--medium{font-size:12px;gap:8px}.i-toggle-wrapper.i-toggle--medium .i-toggle{width:36px;height:20px;border-radius:10px}.i-toggle-wrapper.i-toggle--medium .i-toggle .i-toggle-thumb{width:14px;height:14px}.i-toggle-wrapper.i-toggle--medium .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(17px)}.i-toggle-wrapper.i-toggle--large{font-size:14.4px;gap:10px}.i-toggle-wrapper.i-toggle--large .i-toggle{width:44px;height:24px;border-radius:12px}.i-toggle-wrapper.i-toggle--large .i-toggle .i-toggle-thumb{width:18px;height:18px}.i-toggle-wrapper.i-toggle--large .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(21px)}.i-toggle-wrapper .i-toggle{position:relative;display:inline-flex;align-items:center;padding:0 2px;transition:background-color .2s ease,border-color .2s ease;cursor:pointer;box-sizing:border-box;flex-shrink:0}.i-toggle-wrapper .i-toggle:focus{outline:none}.i-toggle-wrapper .i-toggle .i-toggle-thumb{border-radius:50%;transition:transform .2s ease,background-color .2s ease;flex-shrink:0}.i-toggle-wrapper .i-toggle-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}.i-toggle-wrapper{cursor:pointer;border-radius:4px}.i-toggle-wrapper:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}.i-toggle-wrapper.i-toggle--disabled{cursor:not-allowed}@media(pointer:coarse){.i-toggle-wrapper:not(.i-toggle--readonly){min-height:44px;min-width:44px;justify-content:center}}@media(pointer:coarse){.i-toggle-wrapper .i-toggle{flex-shrink:0}}\n"]
|
|
7128
7227
|
}]
|
|
7129
7228
|
}],
|
|
7130
7229
|
propDecorators: {
|
|
@@ -7475,8 +7574,8 @@ var ITreeView = class ITreeView {
|
|
|
7475
7574
|
},
|
|
7476
7575
|
usesOnChanges: true,
|
|
7477
7576
|
ngImport: i0,
|
|
7478
|
-
template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [ngModel]=\"filterValue\"\n (ngModelChange)=\"filterValue = $event; applyFilter()\"\n label=\"Search tree\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n }\n @if (selectAll && selectionMode ===
|
|
7479
|
-
styles: [".i-tree-view-wrapper{background-color:var(--color-component-background-secondary);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:
|
|
7577
|
+
template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [ngModel]=\"filterValue\"\n (ngModelChange)=\"filterValue = $event; applyFilter()\"\n label=\"Search tree\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n }\n @if (selectAll && selectionMode === 'checkbox') {\n <div class=\"i-tree-view-select-all-container\">\n <div class=\"select-box\">\n <i-checkbox\n [(ngModel)]=\"selectAllChecked\"\n [id]=\"componentId + '-select-all'\"\n [label]=\"'Select All'\"\n (ngModelChange)=\"onSelectAllChange()\"\n />\n </div>\n </div>\n }\n\n <div class=\"i-tree-view-container\">\n @if (loading) {\n <div class=\"i-tree-view-loading\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n <span>Loading...</span>\n </div>\n } @else if (filteredValue.length === 0) {\n <div class=\"i-tree-view-empty\">\n <span>{{ emptyMessage }}</span>\n </div>\n } @else {\n <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n @for (node of filteredValue; track node.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n <div\n class=\"i-tree-view-node\"\n [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n [class.i-tree-view-node--expanded]=\"node.expanded\"\n [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n [class.i-tree-view-node--temporary-highlight]=\"isTemporarilyHighlighted(node)\"\n [class]=\"node.styleClass\"\n [style.padding-left.rem]=\"level * 1\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n [attr.aria-selected]=\"isSelected(node)\"\n [attr.aria-level]=\"level + 1\"\n tabindex=\"0\"\n (click)=\"onNodeClick($event, node)\"\n (keydown.enter)=\"onNodeClick($event, node)\"\n (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n >\n <div class=\"i-tree-view-node-content\">\n @if (hasChildren(node)) {\n <button\n type=\"button\"\n class=\"i-tree-view-toggler\"\n (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <i [class]=\"getToggleIcon(node)\"></i>\n </button>\n } @else {\n <span class=\"i-tree-view-toggler-spacer\"></span>\n }\n @if (selectionMode === 'checkbox') {\n <div class=\"i-tree-view-checkbox-container\">\n <i-checkbox\n [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n [indeterminate]=\"isPartiallySelected(node)\"\n (onChange)=\"onCheckboxChange($event, node)\"\n [id]=\"getCheckboxId(node)\"\n size=\"small\"\n tabindex=\"-1\"\n >\n </i-checkbox>\n </div>\n }\n\n <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n </div>\n </div>\n\n @if (hasChildren(node) && node.expanded) {\n <ul class=\"i-tree-view-children\" role=\"group\">\n @for (child of node.children; track child.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n</ng-template>\n",
|
|
7578
|
+
styles: [".i-tree-view-wrapper{background-color:var(--color-component-background-secondary);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-toggler{background:transparent}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:12px}.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:12px;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;box-sizing:border-box;padding:2px 8px;border-radius:4px;transition:all .15s ease;min-height:28px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;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:12px;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:12px;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(pointer:coarse){.i-tree-view-node .i-tree-view-node-content{min-height:44px;padding-block:0}}@media(pointer:coarse){.i-tree-view-node .i-tree-view-toggler{width:44px;height:44px;flex-shrink:0}}@media(pointer:coarse){.i-tree-view-node .i-tree-view-toggler-spacer{width:44px}}\n"],
|
|
7480
7579
|
dependencies: [
|
|
7481
7580
|
{
|
|
7482
7581
|
kind: "ngmodule",
|
|
@@ -7572,8 +7671,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7572
7671
|
IInputText
|
|
7573
7672
|
],
|
|
7574
7673
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
7575
|
-
template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [ngModel]=\"filterValue\"\n (ngModelChange)=\"filterValue = $event; applyFilter()\"\n label=\"Search tree\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n }\n @if (selectAll && selectionMode ===
|
|
7576
|
-
styles: [".i-tree-view-wrapper{background-color:var(--color-component-background-secondary);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:
|
|
7674
|
+
template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [ngModel]=\"filterValue\"\n (ngModelChange)=\"filterValue = $event; applyFilter()\"\n label=\"Search tree\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n }\n @if (selectAll && selectionMode === 'checkbox') {\n <div class=\"i-tree-view-select-all-container\">\n <div class=\"select-box\">\n <i-checkbox\n [(ngModel)]=\"selectAllChecked\"\n [id]=\"componentId + '-select-all'\"\n [label]=\"'Select All'\"\n (ngModelChange)=\"onSelectAllChange()\"\n />\n </div>\n </div>\n }\n\n <div class=\"i-tree-view-container\">\n @if (loading) {\n <div class=\"i-tree-view-loading\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n <span>Loading...</span>\n </div>\n } @else if (filteredValue.length === 0) {\n <div class=\"i-tree-view-empty\">\n <span>{{ emptyMessage }}</span>\n </div>\n } @else {\n <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n @for (node of filteredValue; track node.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n <div\n class=\"i-tree-view-node\"\n [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n [class.i-tree-view-node--expanded]=\"node.expanded\"\n [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n [class.i-tree-view-node--temporary-highlight]=\"isTemporarilyHighlighted(node)\"\n [class]=\"node.styleClass\"\n [style.padding-left.rem]=\"level * 1\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n [attr.aria-selected]=\"isSelected(node)\"\n [attr.aria-level]=\"level + 1\"\n tabindex=\"0\"\n (click)=\"onNodeClick($event, node)\"\n (keydown.enter)=\"onNodeClick($event, node)\"\n (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n >\n <div class=\"i-tree-view-node-content\">\n @if (hasChildren(node)) {\n <button\n type=\"button\"\n class=\"i-tree-view-toggler\"\n (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <i [class]=\"getToggleIcon(node)\"></i>\n </button>\n } @else {\n <span class=\"i-tree-view-toggler-spacer\"></span>\n }\n @if (selectionMode === 'checkbox') {\n <div class=\"i-tree-view-checkbox-container\">\n <i-checkbox\n [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n [indeterminate]=\"isPartiallySelected(node)\"\n (onChange)=\"onCheckboxChange($event, node)\"\n [id]=\"getCheckboxId(node)\"\n size=\"small\"\n tabindex=\"-1\"\n >\n </i-checkbox>\n </div>\n }\n\n <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n </div>\n </div>\n\n @if (hasChildren(node) && node.expanded) {\n <ul class=\"i-tree-view-children\" role=\"group\">\n @for (child of node.children; track child.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n</ng-template>\n",
|
|
7675
|
+
styles: [".i-tree-view-wrapper{background-color:var(--color-component-background-secondary);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-toggler{background:transparent}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:12px}.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:12px;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;box-sizing:border-box;padding:2px 8px;border-radius:4px;transition:all .15s ease;min-height:28px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;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:12px;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:12px;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(pointer:coarse){.i-tree-view-node .i-tree-view-node-content{min-height:44px;padding-block:0}}@media(pointer:coarse){.i-tree-view-node .i-tree-view-toggler{width:44px;height:44px;flex-shrink:0}}@media(pointer:coarse){.i-tree-view-node .i-tree-view-toggler-spacer{width:44px}}\n"]
|
|
7577
7676
|
}]
|
|
7578
7677
|
}],
|
|
7579
7678
|
ctorParameters: () => [{ type: i0.ChangeDetectorRef }],
|
|
@@ -7765,8 +7864,8 @@ var IWhisper = class IWhisper {
|
|
|
7765
7864
|
preventDuplicates: "preventDuplicates"
|
|
7766
7865
|
},
|
|
7767
7866
|
ngImport: i0,
|
|
7768
|
-
template: "@if (messages && messages.length > 0) {\n <div
|
|
7769
|
-
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;min-height:56px;display:flex;align-items:center;animation:whisperSlideIn .3s ease-out;margin-bottom:4px}.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{
|
|
7867
|
+
template: "@if (messages && messages.length > 0) {\n <div [ngClass]=\"getContainerClass()\" [ngStyle]=\"style\" [attr.id]=\"componentId\">\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",
|
|
7868
|
+
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 .i-whisper-message .i-whisper-message-close{background:none}.i-whisper .i-whisper-message .i-whisper-message-close:hover{background-color:color-mix(in srgb,#000000 10%,transparent)}.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;min-height:56px;display:flex;align-items:center;animation:whisperSlideIn .3s ease-out;margin-bottom:4px}.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{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 i{font-size:18px}.i-whisper .i-whisper-message.i-whisper-message-exit{animation:whisperSlideOut .3s ease-in forwards}@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}}@media(max-width:768px){.i-whisper{min-width:0;box-sizing:border-box;overflow-wrap:anywhere}}@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}}\n"],
|
|
7770
7869
|
dependencies: [
|
|
7771
7870
|
{
|
|
7772
7871
|
kind: "directive",
|
|
@@ -7822,8 +7921,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7822
7921
|
],
|
|
7823
7922
|
encapsulation: ViewEncapsulation.None,
|
|
7824
7923
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
7825
|
-
template: "@if (messages && messages.length > 0) {\n <div
|
|
7826
|
-
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;min-height:56px;display:flex;align-items:center;animation:whisperSlideIn .3s ease-out;margin-bottom:4px}.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{
|
|
7924
|
+
template: "@if (messages && messages.length > 0) {\n <div [ngClass]=\"getContainerClass()\" [ngStyle]=\"style\" [attr.id]=\"componentId\">\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",
|
|
7925
|
+
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 .i-whisper-message .i-whisper-message-close{background:none}.i-whisper .i-whisper-message .i-whisper-message-close:hover{background-color:color-mix(in srgb,#000000 10%,transparent)}.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;min-height:56px;display:flex;align-items:center;animation:whisperSlideIn .3s ease-out;margin-bottom:4px}.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{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 i{font-size:18px}.i-whisper .i-whisper-message.i-whisper-message-exit{animation:whisperSlideOut .3s ease-in forwards}@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}}@media(max-width:768px){.i-whisper{min-width:0;box-sizing:border-box;overflow-wrap:anywhere}}@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}}\n"]
|
|
7827
7926
|
}]
|
|
7828
7927
|
}],
|
|
7829
7928
|
ctorParameters: () => [{ type: WhisperService }, { type: i0.ChangeDetectorRef }],
|
|
@@ -7874,6 +7973,7 @@ var ITable = class ITable {
|
|
|
7874
7973
|
striped = false;
|
|
7875
7974
|
hoverable = true;
|
|
7876
7975
|
bordered = false;
|
|
7976
|
+
showBorder = false;
|
|
7877
7977
|
rowBorders = true;
|
|
7878
7978
|
detailRowBorders = true;
|
|
7879
7979
|
size = "medium";
|
|
@@ -8222,6 +8322,7 @@ var ITable = class ITable {
|
|
|
8222
8322
|
"i-table--striped": this.striped,
|
|
8223
8323
|
"i-table--hoverable": this.hoverable,
|
|
8224
8324
|
"i-table--bordered": this.bordered,
|
|
8325
|
+
"i-table--show-border": this.showBorder,
|
|
8225
8326
|
"i-table--no-row-borders": !this.rowBorders,
|
|
8226
8327
|
"i-table--no-detail-row-borders": !this.detailRowBorders,
|
|
8227
8328
|
"i-table--small": this.size === "small",
|
|
@@ -8385,6 +8486,13 @@ var ITable = class ITable {
|
|
|
8385
8486
|
isRequired: false,
|
|
8386
8487
|
transformFunction: null
|
|
8387
8488
|
},
|
|
8489
|
+
showBorder: {
|
|
8490
|
+
classPropertyName: "showBorder",
|
|
8491
|
+
publicName: "showBorder",
|
|
8492
|
+
isSignal: false,
|
|
8493
|
+
isRequired: false,
|
|
8494
|
+
transformFunction: null
|
|
8495
|
+
},
|
|
8388
8496
|
rowBorders: {
|
|
8389
8497
|
classPropertyName: "rowBorders",
|
|
8390
8498
|
publicName: "rowBorders",
|
|
@@ -8513,8 +8621,8 @@ var ITable = class ITable {
|
|
|
8513
8621
|
descendants: true
|
|
8514
8622
|
}],
|
|
8515
8623
|
ngImport: i0,
|
|
8516
|
-
template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n <!-- Table Header: global filter + download -->\n @if (globalFilter || downloadable) {\n <div class=\"i-table-header\">\n <div class=\"i-table-header-start\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"i-table-header-end\">\n @if (globalFilter) {\n <div class=\"i-table-global-filter\">\n <i-input-text\n [useFloatLabel]=\"false\"\n label=\"Search table\"\n placeholder=\"Search…\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n ></i-input-text>\n </div>\n }\n @if (downloadable) {\n <div class=\"i-table-download\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n icon=\"pi pi-download\"\n label=\"Download\"\n (clicked)=\"handleDownload()\"\n ></i-button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Loading Overlay -->\n @if (loading) {\n <div class=\"i-table-loading-overlay\">\n <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n </div>\n }\n\n <!-- ================================================================\n PATH A — Detail-expandable table\n Uses a standard scrollable container so that nested <i-table>\n components can expand inline below their parent rows.\n ================================================================ -->\n @if (hasDetails()) {\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <!-- Parent row -->\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"xtra-small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n [ariaExpanded]=\"isRowExpanded(row)\"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getCellIcon(row, column)\"\n [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n <td class=\"i-table-detail-count-cell\">\n ({{ getDetailRowCount(row) }})\n </td>\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n\n <!-- Detail expansion row -->\n @if (isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"totalColspan()\"\n class=\"i-table-expanded-cell\"\n >\n <div class=\"i-table-expanded-content\">\n <i-table\n [class.i-table-compact-details]=\"!detailRowBorders\"\n [grid]=\"getDetailGrid(row)\"\n [rowBorders]=\"detailRowBorders\"\n [sortable]=\"sortable\"\n [filterable]=\"filterable\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"selection\"\n [striped]=\"striped\"\n [hoverable]=\"hoverable\"\n [bordered]=\"bordered\"\n [size]=\"size\"\n [dataKey]=\"dataKey\"\n [resizableColumns]=\"resizableColumns\"\n (onSort)=\"onSort.emit($event)\"\n (onFilter)=\"onFilter.emit($event)\"\n (onSelectionChange)=\"onSelectionChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n ></i-table>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n } @else if (virtualScroll) {\n <!-- ================================================================\n PATH B — CDK Virtual Scroll (div-based rows)\n Use only for large row counts (≥ ~500 rows). Uses flex <div> rows\n so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n [style.height]=\"effectiveHeight()\"\n >\n <!-- Sticky header — flex rows that mirror the virtual body rows -->\n <div class=\"i-table-virtual-header\">\n @if (filterable) {\n <div class=\"i-table-virtual-row i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n >\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n />\n </div>\n } @else {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n ></div>\n }\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n }\n </div>\n }\n <div class=\"i-table-virtual-row i-table-header-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell i-table-header-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\">\n {{ grid().actionsHeader ?? 'Actions' }}\n </div>\n }\n </div>\n </div>\n\n <!-- Virtual Scroll Viewport — *cdkVirtualFor on <div>, not <tr> -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n @if (processedData().length === 0) {\n <div class=\"i-table-virtual-row i-table-empty-row\">\n <div\n class=\"i-table-virtual-cell\"\n style=\"flex: 1; text-align: center; padding: 40px 16px\"\n >\n <i-no-content />\n </div>\n </div>\n }\n <div\n *cdkVirtualFor=\"\n let row of processedData();\n let rowIndex = index;\n trackBy: trackByRow\n \"\n class=\"i-table-virtual-row\"\n [style.height.px]=\"virtualScrollItemSize\"\n [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [ngClass]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n } @else {\n <!-- ================================================================\n PATH C — Regular scrollable table\n Default for small/medium datasets and nested detail tables.\n Uses a plain overflow container with a @for loop — no CDK needed.\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n</div>\n",
|
|
8517
|
-
styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background);border:1px solid var(--surface-border)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr>td{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row>td{border-bottom:none}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}:host(.i-table-compact-details)>.i-table-wrapper>.i-table-container>table>tbody>tr:not(.i-table-empty-row)>td{padding-block:4px}.i-table-wrapper{position:relative;display:block;border-radius:8px;overflow:visible}.i-table-wrapper>.i-table-header{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}.i-table-wrapper>.i-table-container,.i-table-wrapper>.i-table-loading-overlay{border-radius:inherit}.i-table-wrapper>.i-table-header~.i-table-container{border-top-left-radius:0;border-top-right-radius:0}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:0;margin:2px 0 24px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:0;max-width:100%;overflow-x:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}:host{display:block;min-width:0}.i-table-wrapper .i-table-header{flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{min-width:0;flex-wrap:wrap;gap:.75rem}.i-table-wrapper .i-table-header .i-table-header-end{min-width:0;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:min(250px,100%)}\n"],
|
|
8624
|
+
template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n <!-- Table Header: global filter + download -->\n @if (globalFilter || downloadable) {\n <div class=\"i-table-header\">\n <div class=\"i-table-header-start\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"i-table-header-end\">\n @if (globalFilter) {\n <div class=\"i-table-global-filter\">\n <i-input-text\n [useFloatLabel]=\"false\"\n label=\"Search table\"\n placeholder=\"Search…\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n ></i-input-text>\n </div>\n }\n @if (downloadable) {\n <div class=\"i-table-download\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n icon=\"pi pi-download\"\n label=\"Download\"\n (clicked)=\"handleDownload()\"\n ></i-button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Loading Overlay -->\n @if (loading) {\n <div class=\"i-table-loading-overlay\">\n <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n </div>\n }\n\n <!-- ================================================================\n PATH A — Detail-expandable table\n Uses a standard scrollable container so that nested <i-table>\n components can expand inline below their parent rows.\n ================================================================ -->\n @if (hasDetails()) {\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === 'multiple') {\n <th class=\"i-table-selection-header\"></th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (column of gridColumns(); 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 }\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === 'multiple') {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (column of gridColumns(); 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 }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <!-- Parent row -->\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === 'multiple') {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"xtra-small\"\n [icon]=\"isRowExpanded(row) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n [ariaExpanded]=\"isRowExpanded(row)\"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getCellIcon(row, column)\"\n [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n [style.font-size]=\"column.iconSize || '12px'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </td>\n }\n <td class=\"i-table-detail-count-cell\">({{ getDetailRowCount(row) }})</td>\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n\n <!-- Detail expansion row -->\n @if (isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td [attr.colspan]=\"totalColspan()\" class=\"i-table-expanded-cell\">\n <div class=\"i-table-expanded-content\">\n <i-table\n [class.i-table-compact-details]=\"!detailRowBorders\"\n [grid]=\"getDetailGrid(row)\"\n [rowBorders]=\"detailRowBorders\"\n [sortable]=\"sortable\"\n [filterable]=\"filterable\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"selection\"\n [striped]=\"striped\"\n [hoverable]=\"hoverable\"\n [bordered]=\"bordered\"\n [size]=\"size\"\n [dataKey]=\"dataKey\"\n [resizableColumns]=\"resizableColumns\"\n (onSort)=\"onSort.emit($event)\"\n (onFilter)=\"onFilter.emit($event)\"\n (onSelectionChange)=\"onSelectionChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n ></i-table>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n } @else if (virtualScroll) {\n <!-- ================================================================\n PATH B — CDK Virtual Scroll (div-based rows)\n Use only for large row counts (≥ ~500 rows). Uses flex <div> rows\n so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n [style.height]=\"effectiveHeight()\"\n >\n <!-- Sticky header — flex rows that mirror the virtual body rows -->\n <div class=\"i-table-virtual-header\">\n @if (filterable) {\n <div class=\"i-table-virtual-row i-table-filter-row\">\n @if (selectionMode === 'multiple') {\n <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n @if (column.filterable !== false) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"getColumnWidth(column) !== 'auto' ? getColumnWidth(column) : null\"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n >\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n />\n </div>\n } @else {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"getColumnWidth(column) !== 'auto' ? getColumnWidth(column) : null\"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n ></div>\n }\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n }\n </div>\n }\n <div class=\"i-table-virtual-row i-table-header-row\">\n @if (selectionMode === 'multiple') {\n <div class=\"i-table-virtual-cell i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell i-table-header-cell\"\n [style.width]=\"getColumnWidth(column) !== 'auto' ? getColumnWidth(column) : null\"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n }\n </div>\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\">\n {{ grid().actionsHeader ?? 'Actions' }}\n </div>\n }\n </div>\n </div>\n\n <!-- Virtual Scroll Viewport — *cdkVirtualFor on <div>, not <tr> -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n @if (processedData().length === 0) {\n <div class=\"i-table-virtual-row i-table-empty-row\">\n <div\n class=\"i-table-virtual-cell\"\n style=\"flex: 1; text-align: center; padding: 40px 16px\"\n >\n <i-no-content />\n </div>\n </div>\n }\n <div\n *cdkVirtualFor=\"let row of processedData(); let rowIndex = index; trackBy: trackByRow\"\n class=\"i-table-virtual-row\"\n [style.height.px]=\"virtualScrollItemSize\"\n [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === 'multiple') {\n <div class=\"i-table-virtual-cell i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"getColumnWidth(column) !== 'auto' ? getColumnWidth(column) : null\"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [ngClass]=\"\n getCellSeverity(row, column) ? 'i-table-cell-' + getCellSeverity(row, column) : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '12px'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n } @else {\n <!-- ================================================================\n PATH C — Regular scrollable table\n Default for small/medium datasets and nested detail tables.\n Uses a plain overflow container with a @for loop — no CDK needed.\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === 'multiple') {\n <th class=\"i-table-selection-header\"></th>\n }\n @for (column of gridColumns(); 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 }\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === 'multiple') {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n @for (column of gridColumns(); 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 }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === 'multiple') {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '12px'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </td>\n }\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n</div>\n",
|
|
8625
|
+
styles: ["@charset \"UTF-8\";.i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper.i-table--show-border{border:1px solid var(--surface-border)}.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:color-mix(in srgb,var(--surface-card) 70%,transparent)}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr>td{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row>td{border-bottom:none}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}:host(.i-table-compact-details)>.i-table-wrapper>.i-table-container>table>tbody>tr:not(.i-table-empty-row)>td{padding-block:4px}.i-table-wrapper{position:relative;display:block;overflow:visible}.i-table-wrapper.i-table--show-border{border-radius:8px}.i-table-wrapper>.i-table-header{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}.i-table-wrapper>.i-table-container,.i-table-wrapper>.i-table-loading-overlay{border-radius:inherit}.i-table-wrapper>.i-table-header~.i-table-container{border-top-left-radius:0;border-top-right-radius:0}.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:12px}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:9.6px;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:12px;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:9.6px;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:12px;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:0;margin:2px 0 24px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:12px;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:12.6px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:10.8px;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:10.2px}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:10.8px;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:9.6px;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:13.2px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:10.8px;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:11.4px;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:9.36px;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}@media(max-width:768px){.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:0;max-width:100%;overflow-x:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}:host{display:block;min-width:0}.i-table-wrapper .i-table-header{flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{min-width:0;flex-wrap:wrap;gap:9px}.i-table-wrapper .i-table-header .i-table-header-end{min-width:0;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:min(250px,100%)}@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"],
|
|
8518
8626
|
dependencies: [
|
|
8519
8627
|
{
|
|
8520
8628
|
kind: "component",
|
|
@@ -8535,6 +8643,7 @@ var ITable = class ITable {
|
|
|
8535
8643
|
"striped",
|
|
8536
8644
|
"hoverable",
|
|
8537
8645
|
"bordered",
|
|
8646
|
+
"showBorder",
|
|
8538
8647
|
"rowBorders",
|
|
8539
8648
|
"detailRowBorders",
|
|
8540
8649
|
"size",
|
|
@@ -8745,8 +8854,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
8745
8854
|
TooltipDirective,
|
|
8746
8855
|
forwardRef(() => ITable)
|
|
8747
8856
|
],
|
|
8748
|
-
template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n <!-- Table Header: global filter + download -->\n @if (globalFilter || downloadable) {\n <div class=\"i-table-header\">\n <div class=\"i-table-header-start\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"i-table-header-end\">\n @if (globalFilter) {\n <div class=\"i-table-global-filter\">\n <i-input-text\n [useFloatLabel]=\"false\"\n label=\"Search table\"\n placeholder=\"Search…\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n ></i-input-text>\n </div>\n }\n @if (downloadable) {\n <div class=\"i-table-download\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n icon=\"pi pi-download\"\n label=\"Download\"\n (clicked)=\"handleDownload()\"\n ></i-button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Loading Overlay -->\n @if (loading) {\n <div class=\"i-table-loading-overlay\">\n <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n </div>\n }\n\n <!-- ================================================================\n PATH A — Detail-expandable table\n Uses a standard scrollable container so that nested <i-table>\n components can expand inline below their parent rows.\n ================================================================ -->\n @if (hasDetails()) {\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <!-- Parent row -->\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"xtra-small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n [ariaExpanded]=\"isRowExpanded(row)\"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getCellIcon(row, column)\"\n [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n <td class=\"i-table-detail-count-cell\">\n ({{ getDetailRowCount(row) }})\n </td>\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n\n <!-- Detail expansion row -->\n @if (isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"totalColspan()\"\n class=\"i-table-expanded-cell\"\n >\n <div class=\"i-table-expanded-content\">\n <i-table\n [class.i-table-compact-details]=\"!detailRowBorders\"\n [grid]=\"getDetailGrid(row)\"\n [rowBorders]=\"detailRowBorders\"\n [sortable]=\"sortable\"\n [filterable]=\"filterable\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"selection\"\n [striped]=\"striped\"\n [hoverable]=\"hoverable\"\n [bordered]=\"bordered\"\n [size]=\"size\"\n [dataKey]=\"dataKey\"\n [resizableColumns]=\"resizableColumns\"\n (onSort)=\"onSort.emit($event)\"\n (onFilter)=\"onFilter.emit($event)\"\n (onSelectionChange)=\"onSelectionChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n ></i-table>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n } @else if (virtualScroll) {\n <!-- ================================================================\n PATH B — CDK Virtual Scroll (div-based rows)\n Use only for large row counts (≥ ~500 rows). Uses flex <div> rows\n so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n [style.height]=\"effectiveHeight()\"\n >\n <!-- Sticky header — flex rows that mirror the virtual body rows -->\n <div class=\"i-table-virtual-header\">\n @if (filterable) {\n <div class=\"i-table-virtual-row i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n >\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n />\n </div>\n } @else {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n ></div>\n }\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n }\n </div>\n }\n <div class=\"i-table-virtual-row i-table-header-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell i-table-header-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\">\n {{ grid().actionsHeader ?? 'Actions' }}\n </div>\n }\n </div>\n </div>\n\n <!-- Virtual Scroll Viewport — *cdkVirtualFor on <div>, not <tr> -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n @if (processedData().length === 0) {\n <div class=\"i-table-virtual-row i-table-empty-row\">\n <div\n class=\"i-table-virtual-cell\"\n style=\"flex: 1; text-align: center; padding: 40px 16px\"\n >\n <i-no-content />\n </div>\n </div>\n }\n <div\n *cdkVirtualFor=\"\n let row of processedData();\n let rowIndex = index;\n trackBy: trackByRow\n \"\n class=\"i-table-virtual-row\"\n [style.height.px]=\"virtualScrollItemSize\"\n [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [ngClass]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n } @else {\n <!-- ================================================================\n PATH C — Regular scrollable table\n Default for small/medium datasets and nested detail tables.\n Uses a plain overflow container with a @for loop — no CDK needed.\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n</div>\n",
|
|
8749
|
-
styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background);border:1px solid var(--surface-border)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr>td{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row>td{border-bottom:none}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}:host(.i-table-compact-details)>.i-table-wrapper>.i-table-container>table>tbody>tr:not(.i-table-empty-row)>td{padding-block:4px}.i-table-wrapper{position:relative;display:block;border-radius:8px;overflow:visible}.i-table-wrapper>.i-table-header{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}.i-table-wrapper>.i-table-container,.i-table-wrapper>.i-table-loading-overlay{border-radius:inherit}.i-table-wrapper>.i-table-header~.i-table-container{border-top-left-radius:0;border-top-right-radius:0}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:0;margin:2px 0 24px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:0;max-width:100%;overflow-x:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}:host{display:block;min-width:0}.i-table-wrapper .i-table-header{flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{min-width:0;flex-wrap:wrap;gap:.75rem}.i-table-wrapper .i-table-header .i-table-header-end{min-width:0;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:min(250px,100%)}\n"]
|
|
8857
|
+
template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n <!-- Table Header: global filter + download -->\n @if (globalFilter || downloadable) {\n <div class=\"i-table-header\">\n <div class=\"i-table-header-start\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"i-table-header-end\">\n @if (globalFilter) {\n <div class=\"i-table-global-filter\">\n <i-input-text\n [useFloatLabel]=\"false\"\n label=\"Search table\"\n placeholder=\"Search…\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n ></i-input-text>\n </div>\n }\n @if (downloadable) {\n <div class=\"i-table-download\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n icon=\"pi pi-download\"\n label=\"Download\"\n (clicked)=\"handleDownload()\"\n ></i-button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Loading Overlay -->\n @if (loading) {\n <div class=\"i-table-loading-overlay\">\n <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n </div>\n }\n\n <!-- ================================================================\n PATH A — Detail-expandable table\n Uses a standard scrollable container so that nested <i-table>\n components can expand inline below their parent rows.\n ================================================================ -->\n @if (hasDetails()) {\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === 'multiple') {\n <th class=\"i-table-selection-header\"></th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (column of gridColumns(); 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 }\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === 'multiple') {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (column of gridColumns(); 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 }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <!-- Parent row -->\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === 'multiple') {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"xtra-small\"\n [icon]=\"isRowExpanded(row) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n [ariaExpanded]=\"isRowExpanded(row)\"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getCellIcon(row, column)\"\n [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n [style.font-size]=\"column.iconSize || '12px'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </td>\n }\n <td class=\"i-table-detail-count-cell\">({{ getDetailRowCount(row) }})</td>\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n\n <!-- Detail expansion row -->\n @if (isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td [attr.colspan]=\"totalColspan()\" class=\"i-table-expanded-cell\">\n <div class=\"i-table-expanded-content\">\n <i-table\n [class.i-table-compact-details]=\"!detailRowBorders\"\n [grid]=\"getDetailGrid(row)\"\n [rowBorders]=\"detailRowBorders\"\n [sortable]=\"sortable\"\n [filterable]=\"filterable\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"selection\"\n [striped]=\"striped\"\n [hoverable]=\"hoverable\"\n [bordered]=\"bordered\"\n [size]=\"size\"\n [dataKey]=\"dataKey\"\n [resizableColumns]=\"resizableColumns\"\n (onSort)=\"onSort.emit($event)\"\n (onFilter)=\"onFilter.emit($event)\"\n (onSelectionChange)=\"onSelectionChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n ></i-table>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n } @else if (virtualScroll) {\n <!-- ================================================================\n PATH B — CDK Virtual Scroll (div-based rows)\n Use only for large row counts (≥ ~500 rows). Uses flex <div> rows\n so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n [style.height]=\"effectiveHeight()\"\n >\n <!-- Sticky header — flex rows that mirror the virtual body rows -->\n <div class=\"i-table-virtual-header\">\n @if (filterable) {\n <div class=\"i-table-virtual-row i-table-filter-row\">\n @if (selectionMode === 'multiple') {\n <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n @if (column.filterable !== false) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"getColumnWidth(column) !== 'auto' ? getColumnWidth(column) : null\"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n >\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n />\n </div>\n } @else {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"getColumnWidth(column) !== 'auto' ? getColumnWidth(column) : null\"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n ></div>\n }\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n }\n </div>\n }\n <div class=\"i-table-virtual-row i-table-header-row\">\n @if (selectionMode === 'multiple') {\n <div class=\"i-table-virtual-cell i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell i-table-header-cell\"\n [style.width]=\"getColumnWidth(column) !== 'auto' ? getColumnWidth(column) : null\"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n }\n </div>\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\">\n {{ grid().actionsHeader ?? 'Actions' }}\n </div>\n }\n </div>\n </div>\n\n <!-- Virtual Scroll Viewport — *cdkVirtualFor on <div>, not <tr> -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n @if (processedData().length === 0) {\n <div class=\"i-table-virtual-row i-table-empty-row\">\n <div\n class=\"i-table-virtual-cell\"\n style=\"flex: 1; text-align: center; padding: 40px 16px\"\n >\n <i-no-content />\n </div>\n </div>\n }\n <div\n *cdkVirtualFor=\"let row of processedData(); let rowIndex = index; trackBy: trackByRow\"\n class=\"i-table-virtual-row\"\n [style.height.px]=\"virtualScrollItemSize\"\n [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === 'multiple') {\n <div class=\"i-table-virtual-cell i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"getColumnWidth(column) !== 'auto' ? getColumnWidth(column) : null\"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [ngClass]=\"\n getCellSeverity(row, column) ? 'i-table-cell-' + getCellSeverity(row, column) : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '12px'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n } @else {\n <!-- ================================================================\n PATH C — Regular scrollable table\n Default for small/medium datasets and nested detail tables.\n Uses a plain overflow container with a @for loop — no CDK needed.\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === 'multiple') {\n <th class=\"i-table-selection-header\"></th>\n }\n @for (column of gridColumns(); 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 }\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === 'multiple') {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n @for (column of gridColumns(); 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 }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === 'multiple') {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '12px'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </td>\n }\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n</div>\n",
|
|
8858
|
+
styles: ["@charset \"UTF-8\";.i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper.i-table--show-border{border:1px solid var(--surface-border)}.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:color-mix(in srgb,var(--surface-card) 70%,transparent)}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr>td{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row>td{border-bottom:none}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}:host(.i-table-compact-details)>.i-table-wrapper>.i-table-container>table>tbody>tr:not(.i-table-empty-row)>td{padding-block:4px}.i-table-wrapper{position:relative;display:block;overflow:visible}.i-table-wrapper.i-table--show-border{border-radius:8px}.i-table-wrapper>.i-table-header{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}.i-table-wrapper>.i-table-container,.i-table-wrapper>.i-table-loading-overlay{border-radius:inherit}.i-table-wrapper>.i-table-header~.i-table-container{border-top-left-radius:0;border-top-right-radius:0}.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:12px}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:9.6px;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:12px;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:9.6px;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:12px;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:0;margin:2px 0 24px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:12px;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:12.6px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:10.8px;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:10.2px}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:10.8px;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:9.6px;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:13.2px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:10.8px;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:11.4px;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:9.36px;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}@media(max-width:768px){.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:0;max-width:100%;overflow-x:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}:host{display:block;min-width:0}.i-table-wrapper .i-table-header{flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{min-width:0;flex-wrap:wrap;gap:9px}.i-table-wrapper .i-table-header .i-table-header-end{min-width:0;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:min(250px,100%)}@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"]
|
|
8750
8859
|
}]
|
|
8751
8860
|
}],
|
|
8752
8861
|
ctorParameters: () => [{ type: i0.ElementRef }],
|
|
@@ -8778,6 +8887,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
8778
8887
|
striped: [{ type: Input }],
|
|
8779
8888
|
hoverable: [{ type: Input }],
|
|
8780
8889
|
bordered: [{ type: Input }],
|
|
8890
|
+
showBorder: [{ type: Input }],
|
|
8781
8891
|
rowBorders: [{ type: Input }],
|
|
8782
8892
|
detailRowBorders: [{ type: Input }],
|
|
8783
8893
|
size: [{ type: Input }],
|
|
@@ -8961,7 +9071,7 @@ const CHART_COLOR_PALETTE = {
|
|
|
8961
9071
|
};
|
|
8962
9072
|
var IChart = class IChart {
|
|
8963
9073
|
charts = [];
|
|
8964
|
-
height = "
|
|
9074
|
+
height = "240px";
|
|
8965
9075
|
responsive = true;
|
|
8966
9076
|
canvasElements;
|
|
8967
9077
|
chartDisplays = [];
|
|
@@ -9067,7 +9177,7 @@ var IChart = class IChart {
|
|
|
9067
9177
|
}[chartType] || "bar";
|
|
9068
9178
|
}
|
|
9069
9179
|
getChartHeight(chartType) {
|
|
9070
|
-
if (chartType === "bar-large") return "
|
|
9180
|
+
if (chartType === "bar-large") return "480px";
|
|
9071
9181
|
return this.height;
|
|
9072
9182
|
}
|
|
9073
9183
|
getChartOptions(chartType, textColor, textColorSecondary, surfaceBorder) {
|
|
@@ -9256,8 +9366,8 @@ var IChart = class IChart {
|
|
|
9256
9366
|
}],
|
|
9257
9367
|
usesOnChanges: true,
|
|
9258
9368
|
ngImport: i0,
|
|
9259
|
-
template: "<div class=\"i-charts-container\">\n @for (
|
|
9260
|
-
styles: ["
|
|
9369
|
+
template: "<div class=\"i-charts-container\">\n @for (chartDisplay of chartDisplays; track chartDisplay.id; let chartIndex = $index) {\n <div class=\"i-chart-panel\">\n <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n <canvas #chartCanvas></canvas>\n </div>\n\n @if (getLegendItems(chartIndex).length) {\n <div class=\"i-chart-legend\" role=\"list\" aria-label=\"Chart data series\">\n @for (legendItem of getLegendItems(chartIndex); track $index) {\n <button\n class=\"i-chart-legend-item\"\n type=\"button\"\n role=\"listitem\"\n [class.i-chart-legend-item-hidden]=\"legendItem.hidden\"\n [attr.aria-pressed]=\"!legendItem.hidden\"\n (click)=\"toggleLegendItem(chartIndex, legendItem)\"\n >\n <span\n class=\"i-chart-legend-marker\"\n [style.background-color]=\"legendItem.fillStyleText\"\n [style.border-color]=\"legendItem.strokeStyleText\"\n ></span>\n <span class=\"i-chart-legend-label\">{{ legendItem.text }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n</div>\n",
|
|
9370
|
+
styles: [".i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:48px}@media(max-width:768px){.i-charts-container{flex-direction:column}}@media(max-width:768px){.i-charts-container{gap:18px}}.i-chart-panel{flex:1 1 45%;min-width:300px;box-sizing:border-box}@media(max-width:768px){.i-chart-panel{width:100%}}@media(max-width:768px){.i-chart-panel{min-width:0;flex-basis:auto;max-width:100%}}.i-chart-item{width:100%;box-sizing:border-box}.i-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px 12px;margin-top:12px;padding:9px 12px;border-width:1px;border-style:solid;border-radius:var(--border-radius, 6px)}.i-chart-legend-item{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:3px 6px;border:0;border-radius:var(--border-radius, 6px);font:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{outline:none}.i-chart-legend-item-hidden{opacity:.55}.i-chart-legend-item-hidden .i-chart-legend-label{text-decoration:line-through}.i-chart-legend-marker{width:10.5px;height:10.5px;flex:0 0 10.5px;border-width:1px;border-style:solid;border-radius:3px}.i-chart-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-chart-legend{border-color:var(--surface-border);background:var(--surface-card)}.i-chart-legend-item{background:transparent;color:var(--chart-text-color)}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{background:var(--surface-hover)}\n"],
|
|
9261
9371
|
changeDetection: i0.ChangeDetectionStrategy.Eager
|
|
9262
9372
|
});
|
|
9263
9373
|
};
|
|
@@ -9273,8 +9383,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9273
9383
|
standalone: true,
|
|
9274
9384
|
imports: [],
|
|
9275
9385
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
9276
|
-
template: "<div class=\"i-charts-container\">\n @for (
|
|
9277
|
-
styles: ["
|
|
9386
|
+
template: "<div class=\"i-charts-container\">\n @for (chartDisplay of chartDisplays; track chartDisplay.id; let chartIndex = $index) {\n <div class=\"i-chart-panel\">\n <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n <canvas #chartCanvas></canvas>\n </div>\n\n @if (getLegendItems(chartIndex).length) {\n <div class=\"i-chart-legend\" role=\"list\" aria-label=\"Chart data series\">\n @for (legendItem of getLegendItems(chartIndex); track $index) {\n <button\n class=\"i-chart-legend-item\"\n type=\"button\"\n role=\"listitem\"\n [class.i-chart-legend-item-hidden]=\"legendItem.hidden\"\n [attr.aria-pressed]=\"!legendItem.hidden\"\n (click)=\"toggleLegendItem(chartIndex, legendItem)\"\n >\n <span\n class=\"i-chart-legend-marker\"\n [style.background-color]=\"legendItem.fillStyleText\"\n [style.border-color]=\"legendItem.strokeStyleText\"\n ></span>\n <span class=\"i-chart-legend-label\">{{ legendItem.text }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n</div>\n",
|
|
9387
|
+
styles: [".i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:48px}@media(max-width:768px){.i-charts-container{flex-direction:column}}@media(max-width:768px){.i-charts-container{gap:18px}}.i-chart-panel{flex:1 1 45%;min-width:300px;box-sizing:border-box}@media(max-width:768px){.i-chart-panel{width:100%}}@media(max-width:768px){.i-chart-panel{min-width:0;flex-basis:auto;max-width:100%}}.i-chart-item{width:100%;box-sizing:border-box}.i-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px 12px;margin-top:12px;padding:9px 12px;border-width:1px;border-style:solid;border-radius:var(--border-radius, 6px)}.i-chart-legend-item{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:3px 6px;border:0;border-radius:var(--border-radius, 6px);font:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{outline:none}.i-chart-legend-item-hidden{opacity:.55}.i-chart-legend-item-hidden .i-chart-legend-label{text-decoration:line-through}.i-chart-legend-marker{width:10.5px;height:10.5px;flex:0 0 10.5px;border-width:1px;border-style:solid;border-radius:3px}.i-chart-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-chart-legend{border-color:var(--surface-border);background:var(--surface-card)}.i-chart-legend-item{background:transparent;color:var(--chart-text-color)}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{background:var(--surface-hover)}\n"]
|
|
9278
9388
|
}]
|
|
9279
9389
|
}],
|
|
9280
9390
|
propDecorators: {
|
|
@@ -9656,7 +9766,7 @@ var IFieldPicker = class IFieldPicker {
|
|
|
9656
9766
|
}],
|
|
9657
9767
|
ngImport: i0,
|
|
9658
9768
|
template: "<div class=\"i-field-picker\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n <i-input-text\n [label]=\"searchLabel\"\n icon=\"pi pi-search\"\n [fluid]=\"true\"\n [disabled]=\"disabled\"\n [ngModel]=\"search\"\n (ngModelChange)=\"search = $event ?? ''\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n <div class=\"i-field-picker__catalog\">\n @for (group of groups; track group.name; let groupIndex = $index) {\n <section [attr.aria-labelledby]=\"componentId + '-group-' + groupIndex\">\n <header class=\"i-field-picker__group-header\">\n <h3 [id]=\"componentId + '-group-' + groupIndex\">{{ group.name }}</h3>\n <span>{{ group.options.length }}</span>\n </header>\n @for (option of group.options; track option.key) {\n <div class=\"i-field-picker__option\">\n <i-checkbox\n [label]=\"option.label\"\n [checked]=\"value.includes(option.key)\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled || !!option.disabled\"\n (onChange)=\"select(option, $event)\"\n />\n @if (option.description) {\n <small>{{ option.description }}</small>\n }\n </div>\n }\n </section>\n } @empty {\n <i-no-content [message]=\"emptyMessage\" />\n }\n </div>\n</div>\n",
|
|
9659
|
-
styles: [".i-field-picker{color:var(--color-text-primary)}.i-field-picker__catalog{border-color:var(--surface-border);background:var(--surface-section)}.i-field-picker__group-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-field-picker__group-header span{color:var(--color-text-secondary)}.i-field-picker__option:hover{background:var(--surface-hover)}.i-field-picker small{color:var(--color-text-secondary)}:host{display:block}.i-field-picker__catalog{max-height:
|
|
9769
|
+
styles: [".i-field-picker{color:var(--color-text-primary)}.i-field-picker__catalog{border-color:var(--surface-border);background:var(--surface-section)}.i-field-picker__group-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-field-picker__group-header span{color:var(--color-text-secondary)}.i-field-picker__option:hover{background:var(--surface-hover)}.i-field-picker small{color:var(--color-text-secondary)}.i-field-picker__catalog{border-color:var(--surface-border)}:host{display:block}.i-field-picker__catalog{max-height:384px;overflow:auto;margin-top:12px;padding:6px;border-width:1px;border-style:solid;border-radius:6px}.i-field-picker section+section{margin-top:9px}.i-field-picker__group-header{position:sticky;top:-6px;z-index:1;display:flex;align-items:center;justify-content:space-between;margin:0 -6px 3px;padding:9px 12px}.i-field-picker__group-header span{font-size:9px;font-weight:600}.i-field-picker__option{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:33px;padding:6px;border-radius:4.5px}\n"],
|
|
9660
9770
|
dependencies: [
|
|
9661
9771
|
{
|
|
9662
9772
|
kind: "ngmodule",
|
|
@@ -9751,7 +9861,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9751
9861
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
9752
9862
|
host: { "(focusout)": "markTouched()" },
|
|
9753
9863
|
template: "<div class=\"i-field-picker\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n <i-input-text\n [label]=\"searchLabel\"\n icon=\"pi pi-search\"\n [fluid]=\"true\"\n [disabled]=\"disabled\"\n [ngModel]=\"search\"\n (ngModelChange)=\"search = $event ?? ''\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n <div class=\"i-field-picker__catalog\">\n @for (group of groups; track group.name; let groupIndex = $index) {\n <section [attr.aria-labelledby]=\"componentId + '-group-' + groupIndex\">\n <header class=\"i-field-picker__group-header\">\n <h3 [id]=\"componentId + '-group-' + groupIndex\">{{ group.name }}</h3>\n <span>{{ group.options.length }}</span>\n </header>\n @for (option of group.options; track option.key) {\n <div class=\"i-field-picker__option\">\n <i-checkbox\n [label]=\"option.label\"\n [checked]=\"value.includes(option.key)\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled || !!option.disabled\"\n (onChange)=\"select(option, $event)\"\n />\n @if (option.description) {\n <small>{{ option.description }}</small>\n }\n </div>\n }\n </section>\n } @empty {\n <i-no-content [message]=\"emptyMessage\" />\n }\n </div>\n</div>\n",
|
|
9754
|
-
styles: [".i-field-picker{color:var(--color-text-primary)}.i-field-picker__catalog{border-color:var(--surface-border);background:var(--surface-section)}.i-field-picker__group-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-field-picker__group-header span{color:var(--color-text-secondary)}.i-field-picker__option:hover{background:var(--surface-hover)}.i-field-picker small{color:var(--color-text-secondary)}:host{display:block}.i-field-picker__catalog{max-height:
|
|
9864
|
+
styles: [".i-field-picker{color:var(--color-text-primary)}.i-field-picker__catalog{border-color:var(--surface-border);background:var(--surface-section)}.i-field-picker__group-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-field-picker__group-header span{color:var(--color-text-secondary)}.i-field-picker__option:hover{background:var(--surface-hover)}.i-field-picker small{color:var(--color-text-secondary)}.i-field-picker__catalog{border-color:var(--surface-border)}:host{display:block}.i-field-picker__catalog{max-height:384px;overflow:auto;margin-top:12px;padding:6px;border-width:1px;border-style:solid;border-radius:6px}.i-field-picker section+section{margin-top:9px}.i-field-picker__group-header{position:sticky;top:-6px;z-index:1;display:flex;align-items:center;justify-content:space-between;margin:0 -6px 3px;padding:9px 12px}.i-field-picker__group-header span{font-size:9px;font-weight:600}.i-field-picker__option{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:33px;padding:6px;border-radius:4.5px}\n"]
|
|
9755
9865
|
}]
|
|
9756
9866
|
}],
|
|
9757
9867
|
propDecorators: {
|
|
@@ -9836,8 +9946,8 @@ var IOrderedList = class IOrderedList {
|
|
|
9836
9946
|
onRemove: "onRemove"
|
|
9837
9947
|
},
|
|
9838
9948
|
ngImport: i0,
|
|
9839
|
-
template: "<ol
|
|
9840
|
-
styles: [".i-ordered-list{color:var(--color-text-primary)}.i-ordered-list__item{border-color:var(--surface-border);background:var(--surface-card)}:host{display:block;container-type:inline-size}.i-ordered-list{display:grid;gap
|
|
9949
|
+
template: "<ol\n class=\"i-ordered-list\"\n [attr.aria-label]=\"ariaLabel\"\n cdkDropList\n [cdkDropListDisabled]=\"readonly || disabled\"\n (cdkDropListDropped)=\"reorder($event.previousIndex, $event.currentIndex)\"\n>\n @for (item of items; track itemKey(item); let index = $index) {\n <li\n class=\"i-ordered-list__item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n cdkDragPreviewContainer=\"parent\"\n [cdkDragDisabled]=\"readonly || disabled\"\n >\n <button\n type=\"button\"\n class=\"i-ordered-list__drag-handle\"\n cdkDragHandle\n [disabled]=\"readonly || disabled\"\n [attr.aria-label]=\"'Reorder ' + itemLabel(item) + '. Use up and down arrow keys.'\"\n title=\"Drag to reorder\"\n (keydown.arrowup)=\"move(index, -1); $event.preventDefault()\"\n (keydown.arrowdown)=\"move(index, 1); $event.preventDefault()\"\n >\n <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n </button>\n <div class=\"i-ordered-list__content\">\n <strong>{{ itemLabel(item) }}</strong>\n @if (itemTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n index: index,\n readonly: readonly || disabled,\n }\"\n />\n }\n </div>\n <div\n class=\"i-ordered-list__actions\"\n role=\"group\"\n [attr.aria-label]=\"'Actions for ' + itemLabel(item)\"\n >\n <i-button\n icon=\"pi pi-arrow-up\"\n size=\"small\"\n [text]=\"true\"\n [ariaLabel]=\"'Move ' + itemLabel(item) + ' up'\"\n title=\"Move up\"\n [disabled]=\"readonly || disabled || index === 0\"\n (clicked)=\"move(index, -1)\"\n />\n <i-button\n icon=\"pi pi-arrow-down\"\n size=\"small\"\n [text]=\"true\"\n [ariaLabel]=\"'Move ' + itemLabel(item) + ' down'\"\n title=\"Move down\"\n [disabled]=\"readonly || disabled || index === items.length - 1\"\n (clicked)=\"move(index, 1)\"\n />\n @if (removable) {\n <i-button\n icon=\"pi pi-times\"\n size=\"small\"\n severity=\"danger\"\n [text]=\"true\"\n [ariaLabel]=\"'Remove ' + itemLabel(item)\"\n title=\"Remove\"\n [disabled]=\"readonly || disabled\"\n (clicked)=\"remove(index)\"\n />\n }\n </div>\n </li>\n }\n</ol>\n@if (!items.length) {\n <i-no-content [message]=\"emptyMessage\" />\n}\n<span class=\"i-ordered-list__announcement\" role=\"status\" aria-live=\"polite\">{{\n announcement\n}}</span>\n",
|
|
9950
|
+
styles: [".i-ordered-list{color:var(--color-text-primary)}.i-ordered-list__item{border-color:var(--surface-border);background:var(--surface-card)}.i-ordered-list__item{border-color:var(--surface-border)}.i-ordered-list__drag-handle{color:inherit;background:transparent}.i-ordered-list__drag-handle:focus-visible{outline-color:currentColor}.i-ordered-list__item.cdk-drag-preview{box-shadow:0 8px 24px color-mix(in srgb,#000000 15%,transparent)}:host{display:block;container-type:inline-size}.i-ordered-list{display:grid;gap:9px;list-style:none;padding:0;margin:0}.i-ordered-list__item{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border-width:1px;border-style:solid;border-radius:6px}.i-ordered-list__drag-handle{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:3px;cursor:grab;touch-action:none}.i-ordered-list__drag-handle:active{cursor:grabbing}.i-ordered-list__drag-handle:disabled{cursor:default;opacity:.4}.i-ordered-list__drag-handle:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}.i-ordered-list__content{min-width:0;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:6px;padding-top:3px}.i-ordered-list__actions{display:flex;align-items:center;gap:3px}.i-ordered-list__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.i-ordered-list__item.cdk-drag-preview{box-sizing:border-box;list-style:none}.i-ordered-list__item.cdk-drag-placeholder{opacity:.25}@container (max-width: 408px){.i-ordered-list__actions{flex-direction:column}}\n"],
|
|
9841
9951
|
dependencies: [
|
|
9842
9952
|
{
|
|
9843
9953
|
kind: "directive",
|
|
@@ -9959,8 +10069,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9959
10069
|
NoContentComponent
|
|
9960
10070
|
],
|
|
9961
10071
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
9962
|
-
template: "<ol
|
|
9963
|
-
styles: [".i-ordered-list{color:var(--color-text-primary)}.i-ordered-list__item{border-color:var(--surface-border);background:var(--surface-card)}:host{display:block;container-type:inline-size}.i-ordered-list{display:grid;gap
|
|
10072
|
+
template: "<ol\n class=\"i-ordered-list\"\n [attr.aria-label]=\"ariaLabel\"\n cdkDropList\n [cdkDropListDisabled]=\"readonly || disabled\"\n (cdkDropListDropped)=\"reorder($event.previousIndex, $event.currentIndex)\"\n>\n @for (item of items; track itemKey(item); let index = $index) {\n <li\n class=\"i-ordered-list__item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n cdkDragPreviewContainer=\"parent\"\n [cdkDragDisabled]=\"readonly || disabled\"\n >\n <button\n type=\"button\"\n class=\"i-ordered-list__drag-handle\"\n cdkDragHandle\n [disabled]=\"readonly || disabled\"\n [attr.aria-label]=\"'Reorder ' + itemLabel(item) + '. Use up and down arrow keys.'\"\n title=\"Drag to reorder\"\n (keydown.arrowup)=\"move(index, -1); $event.preventDefault()\"\n (keydown.arrowdown)=\"move(index, 1); $event.preventDefault()\"\n >\n <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n </button>\n <div class=\"i-ordered-list__content\">\n <strong>{{ itemLabel(item) }}</strong>\n @if (itemTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n index: index,\n readonly: readonly || disabled,\n }\"\n />\n }\n </div>\n <div\n class=\"i-ordered-list__actions\"\n role=\"group\"\n [attr.aria-label]=\"'Actions for ' + itemLabel(item)\"\n >\n <i-button\n icon=\"pi pi-arrow-up\"\n size=\"small\"\n [text]=\"true\"\n [ariaLabel]=\"'Move ' + itemLabel(item) + ' up'\"\n title=\"Move up\"\n [disabled]=\"readonly || disabled || index === 0\"\n (clicked)=\"move(index, -1)\"\n />\n <i-button\n icon=\"pi pi-arrow-down\"\n size=\"small\"\n [text]=\"true\"\n [ariaLabel]=\"'Move ' + itemLabel(item) + ' down'\"\n title=\"Move down\"\n [disabled]=\"readonly || disabled || index === items.length - 1\"\n (clicked)=\"move(index, 1)\"\n />\n @if (removable) {\n <i-button\n icon=\"pi pi-times\"\n size=\"small\"\n severity=\"danger\"\n [text]=\"true\"\n [ariaLabel]=\"'Remove ' + itemLabel(item)\"\n title=\"Remove\"\n [disabled]=\"readonly || disabled\"\n (clicked)=\"remove(index)\"\n />\n }\n </div>\n </li>\n }\n</ol>\n@if (!items.length) {\n <i-no-content [message]=\"emptyMessage\" />\n}\n<span class=\"i-ordered-list__announcement\" role=\"status\" aria-live=\"polite\">{{\n announcement\n}}</span>\n",
|
|
10073
|
+
styles: [".i-ordered-list{color:var(--color-text-primary)}.i-ordered-list__item{border-color:var(--surface-border);background:var(--surface-card)}.i-ordered-list__item{border-color:var(--surface-border)}.i-ordered-list__drag-handle{color:inherit;background:transparent}.i-ordered-list__drag-handle:focus-visible{outline-color:currentColor}.i-ordered-list__item.cdk-drag-preview{box-shadow:0 8px 24px color-mix(in srgb,#000000 15%,transparent)}:host{display:block;container-type:inline-size}.i-ordered-list{display:grid;gap:9px;list-style:none;padding:0;margin:0}.i-ordered-list__item{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border-width:1px;border-style:solid;border-radius:6px}.i-ordered-list__drag-handle{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:3px;cursor:grab;touch-action:none}.i-ordered-list__drag-handle:active{cursor:grabbing}.i-ordered-list__drag-handle:disabled{cursor:default;opacity:.4}.i-ordered-list__drag-handle:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}.i-ordered-list__content{min-width:0;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:6px;padding-top:3px}.i-ordered-list__actions{display:flex;align-items:center;gap:3px}.i-ordered-list__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.i-ordered-list__item.cdk-drag-preview{box-sizing:border-box;list-style:none}.i-ordered-list__item.cdk-drag-placeholder{opacity:.25}@container (max-width: 408px){.i-ordered-list__actions{flex-direction:column}}\n"]
|
|
9964
10074
|
}]
|
|
9965
10075
|
}],
|
|
9966
10076
|
propDecorators: {
|
|
@@ -10081,8 +10191,8 @@ var IRuleEditor = class IRuleEditor {
|
|
|
10081
10191
|
},
|
|
10082
10192
|
outputs: { rulesChange: "rulesChange" },
|
|
10083
10193
|
ngImport: i0,
|
|
10084
|
-
template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n <div class=\"i-rule-editor__toolbar\">\n <i-button
|
|
10085
|
-
styles: [".i-rule-editor{color:var(--color-text-primary)}.i-rule-editor__row{border-color:var(--surface-border);background:var(--surface-card)}:host{display:block;container-type:inline-size}.i-rule-editor__toolbar{display:flex;justify-content:flex-end;margin-bottom
|
|
10194
|
+
template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n <div class=\"i-rule-editor__toolbar\">\n <i-button icon=\"pi pi-plus\" size=\"small\" [disabled]=\"!canAdd\" (clicked)=\"add()\">{{\n addLabel\n }}</i-button>\n </div>\n <div\n class=\"i-rule-editor__rules\"\n cdkDropList\n [cdkDropListDisabled]=\"readonly || disabled\"\n (cdkDropListDropped)=\"reorder($event.previousIndex, $event.currentIndex)\"\n >\n @for (rule of rules; track $index; let index = $index) {\n <div\n class=\"i-rule-editor__row\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n cdkDragPreviewContainer=\"parent\"\n [cdkDragDisabled]=\"readonly || disabled\"\n role=\"group\"\n [attr.aria-label]=\"'Rule ' + (index + 1)\"\n >\n <button\n type=\"button\"\n class=\"i-rule-editor__drag-handle\"\n cdkDragHandle\n [disabled]=\"readonly || disabled\"\n [attr.aria-label]=\"'Reorder rule ' + (index + 1) + '. Use up and down arrow keys.'\"\n title=\"Drag to reorder\"\n (keydown.arrowup)=\"reorder(index, index - 1); $event.preventDefault()\"\n (keydown.arrowdown)=\"reorder(index, index + 1); $event.preventDefault()\"\n >\n <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n </button>\n <div\n class=\"i-rule-editor__fields\"\n [class.i-rule-editor__fields--valueless]=\"operator(rule)?.requiresValue === false\"\n >\n <i-select\n label=\"Field\"\n [options]=\"fields\"\n optionLabel=\"label\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"field(rule)\"\n (ngModelChange)=\"changeField(index, $event)\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n <i-select\n [label]=\"operatorLabel\"\n [options]=\"operatorsFor(field(rule))\"\n optionLabel=\"label\"\n [filter]=\"false\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"operator(rule)\"\n (ngModelChange)=\"changeOperator(index, $event)\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n @if (operator(rule)?.requiresValue !== false) {\n @if (field(rule)?.type === 'boolean') {\n <i-select\n label=\"Value\"\n [options]=\"booleanOptions\"\n optionLabel=\"label\"\n [filter]=\"false\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"booleanValue(rule)\"\n (ngModelChange)=\"update(index, { value: $event?.key ?? '' })\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n } @else {\n <i-input-text\n label=\"Value\"\n [type]=\"field(rule)?.type ?? 'text'\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"rule.value\"\n (ngModelChange)=\"update(index, { value: $event == null ? '' : '' + $event })\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n }\n }\n </div>\n <i-button\n icon=\"pi pi-trash\"\n size=\"small\"\n severity=\"danger\"\n [text]=\"true\"\n [ariaLabel]=\"'Remove rule ' + (index + 1)\"\n title=\"Remove\"\n [disabled]=\"readonly || disabled\"\n (clicked)=\"remove(index)\"\n />\n </div>\n } @empty {\n <i-no-content [message]=\"emptyMessage\" />\n }\n </div>\n <span class=\"i-rule-editor__announcement\" role=\"status\" aria-live=\"polite\">{{\n announcement\n }}</span>\n</div>\n",
|
|
10195
|
+
styles: [".i-rule-editor{color:var(--color-text-primary)}.i-rule-editor__row{border-color:var(--surface-border);background:var(--surface-card)}.i-rule-editor__row{border-color:var(--surface-border)}.i-rule-editor__drag-handle{color:inherit;background:transparent}.i-rule-editor__drag-handle:focus-visible{outline-color:currentColor}.i-rule-editor__row.cdk-drag-preview{box-shadow:0 8px 24px color-mix(in srgb,#000000 15%,transparent)}:host{display:block;container-type:inline-size}.i-rule-editor__toolbar{display:flex;justify-content:flex-end;margin-bottom:9px}.i-rule-editor__rules{display:grid;gap:9px}.i-rule-editor__row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:9px;padding:12px;border-width:1px;border-style:solid;border-radius:6px}.i-rule-editor__drag-handle{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:3px;cursor:grab;touch-action:none}.i-rule-editor__drag-handle:active{cursor:grabbing}.i-rule-editor__drag-handle:disabled{cursor:default;opacity:.4}.i-rule-editor__drag-handle:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}.i-rule-editor__fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:9px;min-width:0}.i-rule-editor__fields--valueless{grid-template-columns:repeat(2,minmax(0,1fr))}.i-rule-editor__fields>i-select,.i-rule-editor__fields>i-input-text{min-width:0}.i-rule-editor__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.i-rule-editor__row.cdk-drag-preview{box-sizing:border-box}.i-rule-editor__row.cdk-drag-placeholder{opacity:.25}@container (max-width: 576px){.i-rule-editor__fields{grid-template-columns:repeat(2,minmax(0,1fr))}}@container (max-width: 408px){.i-rule-editor__fields{grid-template-columns:minmax(0,1fr)}}@container (max-width: 576px){.i-rule-editor__fields>:nth-child(3){grid-column:1/-1}}\n"],
|
|
10086
10196
|
dependencies: [
|
|
10087
10197
|
{
|
|
10088
10198
|
kind: "ngmodule",
|
|
@@ -10262,8 +10372,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
10262
10372
|
NoContentComponent
|
|
10263
10373
|
],
|
|
10264
10374
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
10265
|
-
template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n <div class=\"i-rule-editor__toolbar\">\n <i-button
|
|
10266
|
-
styles: [".i-rule-editor{color:var(--color-text-primary)}.i-rule-editor__row{border-color:var(--surface-border);background:var(--surface-card)}:host{display:block;container-type:inline-size}.i-rule-editor__toolbar{display:flex;justify-content:flex-end;margin-bottom
|
|
10375
|
+
template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n <div class=\"i-rule-editor__toolbar\">\n <i-button icon=\"pi pi-plus\" size=\"small\" [disabled]=\"!canAdd\" (clicked)=\"add()\">{{\n addLabel\n }}</i-button>\n </div>\n <div\n class=\"i-rule-editor__rules\"\n cdkDropList\n [cdkDropListDisabled]=\"readonly || disabled\"\n (cdkDropListDropped)=\"reorder($event.previousIndex, $event.currentIndex)\"\n >\n @for (rule of rules; track $index; let index = $index) {\n <div\n class=\"i-rule-editor__row\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n cdkDragPreviewContainer=\"parent\"\n [cdkDragDisabled]=\"readonly || disabled\"\n role=\"group\"\n [attr.aria-label]=\"'Rule ' + (index + 1)\"\n >\n <button\n type=\"button\"\n class=\"i-rule-editor__drag-handle\"\n cdkDragHandle\n [disabled]=\"readonly || disabled\"\n [attr.aria-label]=\"'Reorder rule ' + (index + 1) + '. Use up and down arrow keys.'\"\n title=\"Drag to reorder\"\n (keydown.arrowup)=\"reorder(index, index - 1); $event.preventDefault()\"\n (keydown.arrowdown)=\"reorder(index, index + 1); $event.preventDefault()\"\n >\n <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n </button>\n <div\n class=\"i-rule-editor__fields\"\n [class.i-rule-editor__fields--valueless]=\"operator(rule)?.requiresValue === false\"\n >\n <i-select\n label=\"Field\"\n [options]=\"fields\"\n optionLabel=\"label\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"field(rule)\"\n (ngModelChange)=\"changeField(index, $event)\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n <i-select\n [label]=\"operatorLabel\"\n [options]=\"operatorsFor(field(rule))\"\n optionLabel=\"label\"\n [filter]=\"false\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"operator(rule)\"\n (ngModelChange)=\"changeOperator(index, $event)\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n @if (operator(rule)?.requiresValue !== false) {\n @if (field(rule)?.type === 'boolean') {\n <i-select\n label=\"Value\"\n [options]=\"booleanOptions\"\n optionLabel=\"label\"\n [filter]=\"false\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"booleanValue(rule)\"\n (ngModelChange)=\"update(index, { value: $event?.key ?? '' })\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n } @else {\n <i-input-text\n label=\"Value\"\n [type]=\"field(rule)?.type ?? 'text'\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"rule.value\"\n (ngModelChange)=\"update(index, { value: $event == null ? '' : '' + $event })\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n }\n }\n </div>\n <i-button\n icon=\"pi pi-trash\"\n size=\"small\"\n severity=\"danger\"\n [text]=\"true\"\n [ariaLabel]=\"'Remove rule ' + (index + 1)\"\n title=\"Remove\"\n [disabled]=\"readonly || disabled\"\n (clicked)=\"remove(index)\"\n />\n </div>\n } @empty {\n <i-no-content [message]=\"emptyMessage\" />\n }\n </div>\n <span class=\"i-rule-editor__announcement\" role=\"status\" aria-live=\"polite\">{{\n announcement\n }}</span>\n</div>\n",
|
|
10376
|
+
styles: [".i-rule-editor{color:var(--color-text-primary)}.i-rule-editor__row{border-color:var(--surface-border);background:var(--surface-card)}.i-rule-editor__row{border-color:var(--surface-border)}.i-rule-editor__drag-handle{color:inherit;background:transparent}.i-rule-editor__drag-handle:focus-visible{outline-color:currentColor}.i-rule-editor__row.cdk-drag-preview{box-shadow:0 8px 24px color-mix(in srgb,#000000 15%,transparent)}:host{display:block;container-type:inline-size}.i-rule-editor__toolbar{display:flex;justify-content:flex-end;margin-bottom:9px}.i-rule-editor__rules{display:grid;gap:9px}.i-rule-editor__row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:9px;padding:12px;border-width:1px;border-style:solid;border-radius:6px}.i-rule-editor__drag-handle{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:3px;cursor:grab;touch-action:none}.i-rule-editor__drag-handle:active{cursor:grabbing}.i-rule-editor__drag-handle:disabled{cursor:default;opacity:.4}.i-rule-editor__drag-handle:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}.i-rule-editor__fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:9px;min-width:0}.i-rule-editor__fields--valueless{grid-template-columns:repeat(2,minmax(0,1fr))}.i-rule-editor__fields>i-select,.i-rule-editor__fields>i-input-text{min-width:0}.i-rule-editor__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.i-rule-editor__row.cdk-drag-preview{box-sizing:border-box}.i-rule-editor__row.cdk-drag-placeholder{opacity:.25}@container (max-width: 576px){.i-rule-editor__fields{grid-template-columns:repeat(2,minmax(0,1fr))}}@container (max-width: 408px){.i-rule-editor__fields{grid-template-columns:minmax(0,1fr)}}@container (max-width: 576px){.i-rule-editor__fields>:nth-child(3){grid-column:1/-1}}\n"]
|
|
10267
10377
|
}]
|
|
10268
10378
|
}],
|
|
10269
10379
|
propDecorators: {
|