invensys-ng 21.4.2 → 21.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/invensys-ng.mjs
CHANGED
|
@@ -404,11 +404,11 @@ class IButton {
|
|
|
404
404
|
this.buttonElement?.nativeElement?.focus();
|
|
405
405
|
}
|
|
406
406
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
407
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IButton, isStandalone: true, selector: "i-button", inputs: { severity: "severity", size: "size", type: "type", ariaLabel: "ariaLabel", ariaExpanded: "ariaExpanded", disabled: "disabled", outlined: "outlined", raised: "raised", text: "text", icon: "icon", fluid: "fluid", loading: "loading" }, outputs: { clicked: "clicked" }, host: { properties: { "class.i-button-fluid": "this.fluidClass" } }, viewQueries: [{ propertyName: "projected", first: true, predicate: ["projected"], descendants: true, read: ElementRef }, { propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"i-button-wrapper\">\n <button\n #buttonElement\n primary\n [attr.id]=\"componentId\"\n class=\"i-button\"\n [ngClass]=\"[\n 'i-button--' + severity,\n 'i-button--' + size,\n outlined && !text ? 'i-button--outlined' : '',\n text ? 'i-button--text' : '',\n fluid ? 'i-button--fluid' : '',\n raised && !text ? 'i-button--raised' : '',\n iconOnly ? 'icon-only' : '',\n iconOnly && !text ? 'icon-only-text' : '',\n loading ? 'i-button--loading' : '',\n ]\"\n [disabled]=\"disabled || loading\"\n [attr.type]=\"type\"\n [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\n aria-hidden=\"true\"\n [ngClass]=\"[icon, 'i-button__icon', iconOnly ? 'icon-only' : '']\"\n ></i>\n }\n <span class=\"projected-content\" #projected>\n <ng-content></ng-content>\n </span>\n </div>\n </button>\n</div>\n", styles: [".i-button--primary{background:var(--color-primary);color:var(--color-contrast-inverse)}.i-button--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-button--primary.i-button--outlined{background:transparent;color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)!important}.i-button--primary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent)}.i-button--primary.i-button--text{background:transparent;color:var(--color-primary);border-color:transparent}.i-button--primary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent);border-color:transparent}.i-button--secondary{background:var(--color-secondary);color:var(--color-contrast-inverse)}.i-button--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 80%,transparent)}.i-button--secondary.i-button--outlined{background:transparent;color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)!important}.i-button--secondary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent)}.i-button--secondary.i-button--text{background:transparent;color:var(--color-secondary);border-color:transparent}.i-button--secondary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent);border-color:transparent}.i-button--success{background:var(--color-success);color:var(--color-contrast-inverse)}.i-button--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 80%,transparent)}.i-button--success.i-button--outlined{background:transparent;color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)!important}.i-button--success.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent)}.i-button--success.i-button--text{background:transparent;color:var(--color-success);border-color:transparent}.i-button--success.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent);border-color:transparent}.i-button--info{background:var(--color-info);color:var(--color-contrast-inverse)}.i-button--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 80%,transparent)}.i-button--info.i-button--outlined{background:transparent;color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)!important}.i-button--info.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent)}.i-button--info.i-button--text{background:transparent;color:var(--color-info);border-color:transparent}.i-button--info.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent);border-color:transparent}.i-button--warning{background:var(--color-warning);color:#fff}.i-button--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 80%,transparent)}.i-button--warning.i-button--outlined{background:transparent;color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)!important}.i-button--warning.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent)}.i-button--warning.i-button--text{background:transparent;color:var(--color-warning);border-color:transparent}.i-button--warning.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent);border-color:transparent}.i-button--danger{background:var(--color-danger);color:#fff}.i-button--danger:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 80%,transparent)}.i-button--danger.i-button--outlined{background:transparent;color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)!important}.i-button--danger.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent)}.i-button--danger.i-button--text{background:transparent;color:var(--color-danger);border-color:transparent}.i-button--danger.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent);border-color:transparent}.i-button--contrast{background:var(--color-contrast);color:var(--color-contrast-inverse)}.i-button--contrast:hover:not(:disabled){background:color-mix(in srgb,var(--color-contrast) 80%,transparent)}.i-button--contrast.i-button--outlined{background:transparent;color:var(--color-text-secondary);border-color:color-mix(in srgb,var(--color-contrast) 40%,transparent)!important}.i-button--contrast.i-button--outlined:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:var(--color-text-primary)}.i-button--contrast.i-button--text{background:transparent;color:var(--color-text-secondary);border-color:transparent}.i-button--contrast.i-button--text:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:transparent}.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)}: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:1px solid transparent;border-radius:4px;outline:none;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s,border-color .2s}.i-button-wrapper .i-button.icon-only{padding:8px;border-radius:20px}.i-button-wrapper .i-button.icon-only.icon-only-text{border-radius:4px}.i-button-wrapper .i-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px}.i-button-wrapper .i-button .button-content.icon-only{gap:0}.i-button-wrapper .i-button .button-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--raised{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.i-button-wrapper .i-button--outlined{box-shadow:none;border:1px solid}.i-button-wrapper .i-button--text{box-shadow:none}.i-button-wrapper .i-button--fluid{width:100%}.i-button-wrapper .i-button:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:inherit;pointer-events:none;transform:translate(-50%,-50%) scale(.7);transition:opacity .2s,transform .2s}.i-button-wrapper .i-button:active:after{opacity:.12;transform:translate(-50%,-50%) scale(1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IProgressSpinner, selector: "i-progress-spinner", inputs: ["size", "strokeWidth", "ariaLabel", "severity", "colorMode"] }] });
|
|
407
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IButton, isStandalone: true, selector: "i-button", inputs: { severity: "severity", size: "size", type: "type", ariaLabel: "ariaLabel", ariaExpanded: "ariaExpanded", disabled: "disabled", outlined: "outlined", raised: "raised", text: "text", icon: "icon", fluid: "fluid", loading: "loading" }, outputs: { clicked: "clicked" }, host: { properties: { "class.i-button-fluid": "this.fluidClass" } }, viewQueries: [{ propertyName: "projected", first: true, predicate: ["projected"], descendants: true, read: ElementRef }, { propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"i-button-wrapper\">\n <button\n #buttonElement\n primary\n [attr.id]=\"componentId\"\n class=\"i-button\"\n [ngClass]=\"[\n 'i-button--' + severity,\n 'i-button--' + size,\n outlined && !text ? 'i-button--outlined' : '',\n text ? 'i-button--text' : '',\n fluid ? 'i-button--fluid' : '',\n raised && !text ? 'i-button--raised' : '',\n iconOnly ? 'icon-only' : '',\n iconOnly && !text ? 'icon-only-text' : '',\n loading ? 'i-button--loading' : '',\n ]\"\n [disabled]=\"disabled || loading\"\n [attr.type]=\"type\"\n [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\n aria-hidden=\"true\"\n [ngClass]=\"[icon, 'i-button__icon', iconOnly ? 'icon-only' : '']\"\n ></i>\n }\n <span class=\"projected-content\" #projected>\n <ng-content></ng-content>\n </span>\n </div>\n </button>\n</div>\n", styles: [".i-button--primary{background:var(--color-primary);color:var(--color-contrast-inverse)}.i-button--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-button--primary.i-button--outlined{background:transparent;color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)!important}.i-button--primary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent)}.i-button--primary.i-button--text{background:transparent;color:var(--color-primary);border-color:transparent}.i-button--primary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent);border-color:transparent}.i-button--secondary{background:var(--color-secondary);color:var(--color-contrast-inverse)}.i-button--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 80%,transparent)}.i-button--secondary.i-button--outlined{background:transparent;color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)!important}.i-button--secondary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent)}.i-button--secondary.i-button--text{background:transparent;color:var(--color-secondary);border-color:transparent}.i-button--secondary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent);border-color:transparent}.i-button--success{background:var(--color-success);color:var(--color-contrast-inverse)}.i-button--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 80%,transparent)}.i-button--success.i-button--outlined{background:transparent;color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)!important}.i-button--success.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent)}.i-button--success.i-button--text{background:transparent;color:var(--color-success);border-color:transparent}.i-button--success.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent);border-color:transparent}.i-button--info{background:var(--color-info);color:var(--color-contrast-inverse)}.i-button--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 80%,transparent)}.i-button--info.i-button--outlined{background:transparent;color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)!important}.i-button--info.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent)}.i-button--info.i-button--text{background:transparent;color:var(--color-info);border-color:transparent}.i-button--info.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent);border-color:transparent}.i-button--warning{background:var(--color-warning);color:#fff}.i-button--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 80%,transparent)}.i-button--warning.i-button--outlined{background:transparent;color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)!important}.i-button--warning.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent)}.i-button--warning.i-button--text{background:transparent;color:var(--color-warning);border-color:transparent}.i-button--warning.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent);border-color:transparent}.i-button--danger{background:var(--color-danger);color:#fff}.i-button--danger:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 80%,transparent)}.i-button--danger.i-button--outlined{background:transparent;color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)!important}.i-button--danger.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent)}.i-button--danger.i-button--text{background:transparent;color:var(--color-danger);border-color:transparent}.i-button--danger.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent);border-color:transparent}.i-button--contrast{background:var(--color-contrast);color:var(--color-contrast-inverse)}.i-button--contrast:hover:not(:disabled){background:color-mix(in srgb,var(--color-contrast) 80%,transparent)}.i-button--contrast.i-button--outlined{background:transparent;color:var(--color-text-secondary);border-color:color-mix(in srgb,var(--color-contrast) 40%,transparent)!important}.i-button--contrast.i-button--outlined:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:var(--color-text-primary)}.i-button--contrast.i-button--text{background:transparent;color:var(--color-text-secondary);border-color:transparent}.i-button--contrast.i-button--text:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:transparent}.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)}: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:1px solid transparent;border-radius:4px;outline:none;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s,border-color .2s}.i-button-wrapper .i-button.icon-only{padding:8px;border-radius:20px}.i-button-wrapper .i-button.icon-only.icon-only-text{border-radius:4px}.i-button-wrapper .i-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px}.i-button-wrapper .i-button .button-content.icon-only{gap:0}.i-button-wrapper .i-button .button-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--raised{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.i-button-wrapper .i-button--outlined{box-shadow:none;border:1px solid}.i-button-wrapper .i-button--text{box-shadow:none}.i-button-wrapper .i-button--fluid{width:100%}.i-button-wrapper .i-button:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:inherit;pointer-events:none;transform:translate(-50%,-50%) scale(.7);transition:opacity .2s,transform .2s}.i-button-wrapper .i-button:active:after{opacity:.12;transform:translate(-50%,-50%) scale(1)}@media(pointer:coarse){.i-button-wrapper .i-button{min-height:44px;min-width:44px;touch-action:manipulation}:host-context(.i-calendar-days) .i-button-wrapper .i-button{min-width:0;padding-inline:0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IProgressSpinner, selector: "i-progress-spinner", inputs: ["size", "strokeWidth", "ariaLabel", "severity", "colorMode"] }] });
|
|
408
408
|
}
|
|
409
409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IButton, decorators: [{
|
|
410
410
|
type: Component,
|
|
411
|
-
args: [{ selector: 'i-button', standalone: true, imports: [NgClass, IProgressSpinner], template: "<div class=\"i-button-wrapper\">\n <button\n #buttonElement\n primary\n [attr.id]=\"componentId\"\n class=\"i-button\"\n [ngClass]=\"[\n 'i-button--' + severity,\n 'i-button--' + size,\n outlined && !text ? 'i-button--outlined' : '',\n text ? 'i-button--text' : '',\n fluid ? 'i-button--fluid' : '',\n raised && !text ? 'i-button--raised' : '',\n iconOnly ? 'icon-only' : '',\n iconOnly && !text ? 'icon-only-text' : '',\n loading ? 'i-button--loading' : '',\n ]\"\n [disabled]=\"disabled || loading\"\n [attr.type]=\"type\"\n [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\n aria-hidden=\"true\"\n [ngClass]=\"[icon, 'i-button__icon', iconOnly ? 'icon-only' : '']\"\n ></i>\n }\n <span class=\"projected-content\" #projected>\n <ng-content></ng-content>\n </span>\n </div>\n </button>\n</div>\n", styles: [".i-button--primary{background:var(--color-primary);color:var(--color-contrast-inverse)}.i-button--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-button--primary.i-button--outlined{background:transparent;color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)!important}.i-button--primary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent)}.i-button--primary.i-button--text{background:transparent;color:var(--color-primary);border-color:transparent}.i-button--primary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent);border-color:transparent}.i-button--secondary{background:var(--color-secondary);color:var(--color-contrast-inverse)}.i-button--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 80%,transparent)}.i-button--secondary.i-button--outlined{background:transparent;color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)!important}.i-button--secondary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent)}.i-button--secondary.i-button--text{background:transparent;color:var(--color-secondary);border-color:transparent}.i-button--secondary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent);border-color:transparent}.i-button--success{background:var(--color-success);color:var(--color-contrast-inverse)}.i-button--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 80%,transparent)}.i-button--success.i-button--outlined{background:transparent;color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)!important}.i-button--success.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent)}.i-button--success.i-button--text{background:transparent;color:var(--color-success);border-color:transparent}.i-button--success.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent);border-color:transparent}.i-button--info{background:var(--color-info);color:var(--color-contrast-inverse)}.i-button--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 80%,transparent)}.i-button--info.i-button--outlined{background:transparent;color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)!important}.i-button--info.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent)}.i-button--info.i-button--text{background:transparent;color:var(--color-info);border-color:transparent}.i-button--info.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent);border-color:transparent}.i-button--warning{background:var(--color-warning);color:#fff}.i-button--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 80%,transparent)}.i-button--warning.i-button--outlined{background:transparent;color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)!important}.i-button--warning.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent)}.i-button--warning.i-button--text{background:transparent;color:var(--color-warning);border-color:transparent}.i-button--warning.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent);border-color:transparent}.i-button--danger{background:var(--color-danger);color:#fff}.i-button--danger:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 80%,transparent)}.i-button--danger.i-button--outlined{background:transparent;color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)!important}.i-button--danger.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent)}.i-button--danger.i-button--text{background:transparent;color:var(--color-danger);border-color:transparent}.i-button--danger.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent);border-color:transparent}.i-button--contrast{background:var(--color-contrast);color:var(--color-contrast-inverse)}.i-button--contrast:hover:not(:disabled){background:color-mix(in srgb,var(--color-contrast) 80%,transparent)}.i-button--contrast.i-button--outlined{background:transparent;color:var(--color-text-secondary);border-color:color-mix(in srgb,var(--color-contrast) 40%,transparent)!important}.i-button--contrast.i-button--outlined:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:var(--color-text-primary)}.i-button--contrast.i-button--text{background:transparent;color:var(--color-text-secondary);border-color:transparent}.i-button--contrast.i-button--text:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:transparent}.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)}: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:1px solid transparent;border-radius:4px;outline:none;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s,border-color .2s}.i-button-wrapper .i-button.icon-only{padding:8px;border-radius:20px}.i-button-wrapper .i-button.icon-only.icon-only-text{border-radius:4px}.i-button-wrapper .i-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px}.i-button-wrapper .i-button .button-content.icon-only{gap:0}.i-button-wrapper .i-button .button-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--raised{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.i-button-wrapper .i-button--outlined{box-shadow:none;border:1px solid}.i-button-wrapper .i-button--text{box-shadow:none}.i-button-wrapper .i-button--fluid{width:100%}.i-button-wrapper .i-button:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:inherit;pointer-events:none;transform:translate(-50%,-50%) scale(.7);transition:opacity .2s,transform .2s}.i-button-wrapper .i-button:active:after{opacity:.12;transform:translate(-50%,-50%) scale(1)}\n"] }]
|
|
411
|
+
args: [{ selector: 'i-button', standalone: true, imports: [NgClass, IProgressSpinner], template: "<div class=\"i-button-wrapper\">\n <button\n #buttonElement\n primary\n [attr.id]=\"componentId\"\n class=\"i-button\"\n [ngClass]=\"[\n 'i-button--' + severity,\n 'i-button--' + size,\n outlined && !text ? 'i-button--outlined' : '',\n text ? 'i-button--text' : '',\n fluid ? 'i-button--fluid' : '',\n raised && !text ? 'i-button--raised' : '',\n iconOnly ? 'icon-only' : '',\n iconOnly && !text ? 'icon-only-text' : '',\n loading ? 'i-button--loading' : '',\n ]\"\n [disabled]=\"disabled || loading\"\n [attr.type]=\"type\"\n [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\n aria-hidden=\"true\"\n [ngClass]=\"[icon, 'i-button__icon', iconOnly ? 'icon-only' : '']\"\n ></i>\n }\n <span class=\"projected-content\" #projected>\n <ng-content></ng-content>\n </span>\n </div>\n </button>\n</div>\n", styles: [".i-button--primary{background:var(--color-primary);color:var(--color-contrast-inverse)}.i-button--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-button--primary.i-button--outlined{background:transparent;color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)!important}.i-button--primary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent)}.i-button--primary.i-button--text{background:transparent;color:var(--color-primary);border-color:transparent}.i-button--primary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent);border-color:transparent}.i-button--secondary{background:var(--color-secondary);color:var(--color-contrast-inverse)}.i-button--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 80%,transparent)}.i-button--secondary.i-button--outlined{background:transparent;color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)!important}.i-button--secondary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent)}.i-button--secondary.i-button--text{background:transparent;color:var(--color-secondary);border-color:transparent}.i-button--secondary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent);border-color:transparent}.i-button--success{background:var(--color-success);color:var(--color-contrast-inverse)}.i-button--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 80%,transparent)}.i-button--success.i-button--outlined{background:transparent;color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)!important}.i-button--success.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent)}.i-button--success.i-button--text{background:transparent;color:var(--color-success);border-color:transparent}.i-button--success.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent);border-color:transparent}.i-button--info{background:var(--color-info);color:var(--color-contrast-inverse)}.i-button--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 80%,transparent)}.i-button--info.i-button--outlined{background:transparent;color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)!important}.i-button--info.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent)}.i-button--info.i-button--text{background:transparent;color:var(--color-info);border-color:transparent}.i-button--info.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent);border-color:transparent}.i-button--warning{background:var(--color-warning);color:#fff}.i-button--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 80%,transparent)}.i-button--warning.i-button--outlined{background:transparent;color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)!important}.i-button--warning.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent)}.i-button--warning.i-button--text{background:transparent;color:var(--color-warning);border-color:transparent}.i-button--warning.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent);border-color:transparent}.i-button--danger{background:var(--color-danger);color:#fff}.i-button--danger:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 80%,transparent)}.i-button--danger.i-button--outlined{background:transparent;color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)!important}.i-button--danger.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent)}.i-button--danger.i-button--text{background:transparent;color:var(--color-danger);border-color:transparent}.i-button--danger.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent);border-color:transparent}.i-button--contrast{background:var(--color-contrast);color:var(--color-contrast-inverse)}.i-button--contrast:hover:not(:disabled){background:color-mix(in srgb,var(--color-contrast) 80%,transparent)}.i-button--contrast.i-button--outlined{background:transparent;color:var(--color-text-secondary);border-color:color-mix(in srgb,var(--color-contrast) 40%,transparent)!important}.i-button--contrast.i-button--outlined:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:var(--color-text-primary)}.i-button--contrast.i-button--text{background:transparent;color:var(--color-text-secondary);border-color:transparent}.i-button--contrast.i-button--text:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:transparent}.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)}: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:1px solid transparent;border-radius:4px;outline:none;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s,border-color .2s}.i-button-wrapper .i-button.icon-only{padding:8px;border-radius:20px}.i-button-wrapper .i-button.icon-only.icon-only-text{border-radius:4px}.i-button-wrapper .i-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px}.i-button-wrapper .i-button .button-content.icon-only{gap:0}.i-button-wrapper .i-button .button-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--raised{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.i-button-wrapper .i-button--outlined{box-shadow:none;border:1px solid}.i-button-wrapper .i-button--text{box-shadow:none}.i-button-wrapper .i-button--fluid{width:100%}.i-button-wrapper .i-button:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:inherit;pointer-events:none;transform:translate(-50%,-50%) scale(.7);transition:opacity .2s,transform .2s}.i-button-wrapper .i-button:active:after{opacity:.12;transform:translate(-50%,-50%) scale(1)}@media(pointer:coarse){.i-button-wrapper .i-button{min-height:44px;min-width:44px;touch-action:manipulation}:host-context(.i-calendar-days) .i-button-wrapper .i-button{min-width:0;padding-inline:0}}\n"] }]
|
|
412
412
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { fluidClass: [{
|
|
413
413
|
type: HostBinding,
|
|
414
414
|
args: ['class.i-button-fluid']
|
|
@@ -990,11 +990,11 @@ class IInputText {
|
|
|
990
990
|
inputElement.value = this.value;
|
|
991
991
|
}
|
|
992
992
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IInputText, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
993
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IInputText, isStandalone: true, selector: "i-input-text", inputs: { label: "label", type: "type", id: "id", fluid: "fluid", forceFloated: "forceFloated", hideText: "hideText", useFloatLabel: "useFloatLabel", placeholder: "placeholder", externalInvalid: "externalInvalid", externalErrorMessage: "externalErrorMessage", backgroundStyle: "backgroundStyle", icon: "icon", readonly: "readonly", disabled: "disabled", errorMessages: "errorMessages" }, ngImport: i0, template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n #inputElement\n [id]=\"id || componentId\"\n [type]=\"type\"\n [attr.aria-label]=\"!useFloatLabel ? label : null\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n @if (type === \"number\" && !disabled && !readonly) {\n <div class=\"i-input-spinners\">\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-up\"\n (click)=\"incrementNumber(inputElement)\"\n [attr.aria-label]=\"'Increment ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-up\"></i>\n </button>\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-down\"\n (click)=\"decrementNumber(inputElement)\"\n [attr.aria-label]=\"'Decrement ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-down\"></i>\n </button>\n </div>\n }\n </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:1em}.i-input-wrapper.i-input--fluid{width:100%}.i-input-wrapper.i-input--no-float{margin-top:0;height:auto}.i-input-wrapper .i-input-container{display:flex;align-items:center;gap:8px}.i-input-wrapper .i-input{box-sizing:border-box;width:100%;border-radius:4px;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}.i-input-wrapper .i-input:focus{outline:none}.i-input-wrapper .i-input.has-icon{padding-left:34px}.i-input-wrapper .i-input.hide-text{color:transparent;text-shadow:none;cursor:pointer}.i-input-wrapper .i-input.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent}.i-input-wrapper .i-input-icon-wrapper{position:relative;width:100%;display:flex}.i-input-wrapper .i-input-icon{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:inherit;pointer-events:none;transform:translateY(-50%)}.i-input-wrapper .float-label{position:relative;display:flex;align-items:stretch}.i-input-wrapper .float-label .i-input-icon{left:10px}.i-input-wrapper .float-label .i-input{padding:14px 10px}.i-input-wrapper .float-label .i-input.has-icon{padding-left:34px}.i-input-wrapper .float-label .i-label{position:absolute;top:14px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none}.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:focus)+.i-label,.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:not(:placeholder-shown))+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-input-wrapper .float-label.has-icon .i-input-icon-wrapper:not(:has(.i-input:focus)):not(:has(.i-input:not(:placeholder-shown)))+.i-label:not(.floated){left:34px}.i-input-wrapper .normal-input{position:relative}.i-input-wrapper .normal-input .i-input-icon{left:12px}.i-input-wrapper .normal-input .i-input{padding:8px 12px}.i-input-wrapper .normal-input .i-input.has-icon{padding-left:38px}.i-input-wrapper .i-input[type=number]{padding-right:32px}.i-input-wrapper .i-input[type=number]::-webkit-outer-spin-button,.i-input-wrapper .i-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.i-input-wrapper .i-input[type=number]{appearance:textfield;-moz-appearance:textfield}.i-input-wrapper .i-input-spinners{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}.i-input-wrapper .i-input-spinner-button{display:flex;align-items:center;justify-content:center;width:24px;height:16px;border:none;border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease;padding:0;font-size:10px}.i-input-wrapper .i-input-spinner-button i{font-size:10px;line-height:1}.i-input-wrapper .i-input-spinner-button:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }] });
|
|
993
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IInputText, isStandalone: true, selector: "i-input-text", inputs: { label: "label", type: "type", id: "id", fluid: "fluid", forceFloated: "forceFloated", hideText: "hideText", useFloatLabel: "useFloatLabel", placeholder: "placeholder", externalInvalid: "externalInvalid", externalErrorMessage: "externalErrorMessage", backgroundStyle: "backgroundStyle", icon: "icon", readonly: "readonly", disabled: "disabled", errorMessages: "errorMessages" }, ngImport: i0, template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n #inputElement\n [id]=\"id || componentId\"\n [type]=\"type\"\n [attr.aria-label]=\"!useFloatLabel ? label : null\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n @if (type === \"number\" && !disabled && !readonly) {\n <div class=\"i-input-spinners\">\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-up\"\n (click)=\"incrementNumber(inputElement)\"\n [attr.aria-label]=\"'Increment ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-up\"></i>\n </button>\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-down\"\n (click)=\"decrementNumber(inputElement)\"\n [attr.aria-label]=\"'Decrement ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-down\"></i>\n </button>\n </div>\n }\n </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:1em}.i-input-wrapper.i-input--fluid{width:100%}.i-input-wrapper.i-input--no-float{margin-top:0;height:auto}.i-input-wrapper .i-input-container{display:flex;align-items:center;gap:8px}.i-input-wrapper .i-input{box-sizing:border-box;width:100%;border-radius:4px;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}.i-input-wrapper .i-input:focus{outline:none}.i-input-wrapper .i-input.has-icon{padding-left:34px}.i-input-wrapper .i-input.hide-text{color:transparent;text-shadow:none;cursor:pointer}.i-input-wrapper .i-input.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent}.i-input-wrapper .i-input-icon-wrapper{position:relative;width:100%;display:flex}.i-input-wrapper .i-input-icon{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:inherit;pointer-events:none;transform:translateY(-50%)}.i-input-wrapper .float-label{position:relative;display:flex;align-items:stretch}.i-input-wrapper .float-label .i-input-icon{left:10px}.i-input-wrapper .float-label .i-input{padding:14px 10px}.i-input-wrapper .float-label .i-input.has-icon{padding-left:34px}.i-input-wrapper .float-label .i-label{position:absolute;top:14px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none}.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:focus)+.i-label,.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:not(:placeholder-shown))+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-input-wrapper .float-label.has-icon .i-input-icon-wrapper:not(:has(.i-input:focus)):not(:has(.i-input:not(:placeholder-shown)))+.i-label:not(.floated){left:34px}.i-input-wrapper .normal-input{position:relative}.i-input-wrapper .normal-input .i-input-icon{left:12px}.i-input-wrapper .normal-input .i-input{padding:8px 12px}.i-input-wrapper .normal-input .i-input.has-icon{padding-left:38px}.i-input-wrapper .i-input[type=number]{padding-right:32px}.i-input-wrapper .i-input[type=number]::-webkit-outer-spin-button,.i-input-wrapper .i-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.i-input-wrapper .i-input[type=number]{appearance:textfield;-moz-appearance:textfield}.i-input-wrapper .i-input-spinners{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}.i-input-wrapper .i-input-spinner-button{display:flex;align-items:center;justify-content:center;width:24px;height:16px;border:none;border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease;padding:0;font-size:10px}.i-input-wrapper .i-input-spinner-button i{font-size:10px;line-height:1}.i-input-wrapper .i-input-spinner-button:focus{outline:none}@media(pointer:coarse){.i-input-wrapper .i-input{min-height:44px;font-size:16px}.i-input-wrapper .i-input-spinners{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }] });
|
|
994
994
|
}
|
|
995
995
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IInputText, decorators: [{
|
|
996
996
|
type: Component,
|
|
997
|
-
args: [{ selector: 'i-input-text', standalone: true, imports: [CommonModule, TooltipDirective], template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n #inputElement\n [id]=\"id || componentId\"\n [type]=\"type\"\n [attr.aria-label]=\"!useFloatLabel ? label : null\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n @if (type === \"number\" && !disabled && !readonly) {\n <div class=\"i-input-spinners\">\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-up\"\n (click)=\"incrementNumber(inputElement)\"\n [attr.aria-label]=\"'Increment ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-up\"></i>\n </button>\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-down\"\n (click)=\"decrementNumber(inputElement)\"\n [attr.aria-label]=\"'Decrement ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-down\"></i>\n </button>\n </div>\n }\n </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:1em}.i-input-wrapper.i-input--fluid{width:100%}.i-input-wrapper.i-input--no-float{margin-top:0;height:auto}.i-input-wrapper .i-input-container{display:flex;align-items:center;gap:8px}.i-input-wrapper .i-input{box-sizing:border-box;width:100%;border-radius:4px;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}.i-input-wrapper .i-input:focus{outline:none}.i-input-wrapper .i-input.has-icon{padding-left:34px}.i-input-wrapper .i-input.hide-text{color:transparent;text-shadow:none;cursor:pointer}.i-input-wrapper .i-input.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent}.i-input-wrapper .i-input-icon-wrapper{position:relative;width:100%;display:flex}.i-input-wrapper .i-input-icon{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:inherit;pointer-events:none;transform:translateY(-50%)}.i-input-wrapper .float-label{position:relative;display:flex;align-items:stretch}.i-input-wrapper .float-label .i-input-icon{left:10px}.i-input-wrapper .float-label .i-input{padding:14px 10px}.i-input-wrapper .float-label .i-input.has-icon{padding-left:34px}.i-input-wrapper .float-label .i-label{position:absolute;top:14px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none}.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:focus)+.i-label,.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:not(:placeholder-shown))+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-input-wrapper .float-label.has-icon .i-input-icon-wrapper:not(:has(.i-input:focus)):not(:has(.i-input:not(:placeholder-shown)))+.i-label:not(.floated){left:34px}.i-input-wrapper .normal-input{position:relative}.i-input-wrapper .normal-input .i-input-icon{left:12px}.i-input-wrapper .normal-input .i-input{padding:8px 12px}.i-input-wrapper .normal-input .i-input.has-icon{padding-left:38px}.i-input-wrapper .i-input[type=number]{padding-right:32px}.i-input-wrapper .i-input[type=number]::-webkit-outer-spin-button,.i-input-wrapper .i-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.i-input-wrapper .i-input[type=number]{appearance:textfield;-moz-appearance:textfield}.i-input-wrapper .i-input-spinners{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}.i-input-wrapper .i-input-spinner-button{display:flex;align-items:center;justify-content:center;width:24px;height:16px;border:none;border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease;padding:0;font-size:10px}.i-input-wrapper .i-input-spinner-button i{font-size:10px;line-height:1}.i-input-wrapper .i-input-spinner-button:focus{outline:none}\n"] }]
|
|
997
|
+
args: [{ selector: 'i-input-text', standalone: true, imports: [CommonModule, TooltipDirective], template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n #inputElement\n [id]=\"id || componentId\"\n [type]=\"type\"\n [attr.aria-label]=\"!useFloatLabel ? label : null\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n @if (type === \"number\" && !disabled && !readonly) {\n <div class=\"i-input-spinners\">\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-up\"\n (click)=\"incrementNumber(inputElement)\"\n [attr.aria-label]=\"'Increment ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-up\"></i>\n </button>\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-down\"\n (click)=\"decrementNumber(inputElement)\"\n [attr.aria-label]=\"'Decrement ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-down\"></i>\n </button>\n </div>\n }\n </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:1em}.i-input-wrapper.i-input--fluid{width:100%}.i-input-wrapper.i-input--no-float{margin-top:0;height:auto}.i-input-wrapper .i-input-container{display:flex;align-items:center;gap:8px}.i-input-wrapper .i-input{box-sizing:border-box;width:100%;border-radius:4px;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}.i-input-wrapper .i-input:focus{outline:none}.i-input-wrapper .i-input.has-icon{padding-left:34px}.i-input-wrapper .i-input.hide-text{color:transparent;text-shadow:none;cursor:pointer}.i-input-wrapper .i-input.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent}.i-input-wrapper .i-input-icon-wrapper{position:relative;width:100%;display:flex}.i-input-wrapper .i-input-icon{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:inherit;pointer-events:none;transform:translateY(-50%)}.i-input-wrapper .float-label{position:relative;display:flex;align-items:stretch}.i-input-wrapper .float-label .i-input-icon{left:10px}.i-input-wrapper .float-label .i-input{padding:14px 10px}.i-input-wrapper .float-label .i-input.has-icon{padding-left:34px}.i-input-wrapper .float-label .i-label{position:absolute;top:14px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none}.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:focus)+.i-label,.i-input-wrapper .float-label .i-input-icon-wrapper:has(.i-input:not(:placeholder-shown))+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-input-wrapper .float-label.has-icon .i-input-icon-wrapper:not(:has(.i-input:focus)):not(:has(.i-input:not(:placeholder-shown)))+.i-label:not(.floated){left:34px}.i-input-wrapper .normal-input{position:relative}.i-input-wrapper .normal-input .i-input-icon{left:12px}.i-input-wrapper .normal-input .i-input{padding:8px 12px}.i-input-wrapper .normal-input .i-input.has-icon{padding-left:38px}.i-input-wrapper .i-input[type=number]{padding-right:32px}.i-input-wrapper .i-input[type=number]::-webkit-outer-spin-button,.i-input-wrapper .i-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.i-input-wrapper .i-input[type=number]{appearance:textfield;-moz-appearance:textfield}.i-input-wrapper .i-input-spinners{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}.i-input-wrapper .i-input-spinner-button{display:flex;align-items:center;justify-content:center;width:24px;height:16px;border:none;border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease;padding:0;font-size:10px}.i-input-wrapper .i-input-spinner-button i{font-size:10px;line-height:1}.i-input-wrapper .i-input-spinner-button:focus{outline:none}@media(pointer:coarse){.i-input-wrapper .i-input{min-height:44px;font-size:16px}.i-input-wrapper .i-input-spinners{display:none}}\n"] }]
|
|
998
998
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
999
999
|
type: Optional
|
|
1000
1000
|
}, {
|
|
@@ -1544,7 +1544,7 @@ class ICalendar {
|
|
|
1544
1544
|
useExisting: forwardRef(() => ICalendar),
|
|
1545
1545
|
multi: true,
|
|
1546
1546
|
},
|
|
1547
|
-
], viewQueries: [{ propertyName: "calendarPanel", first: true, predicate: ["calendarPanel"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"i-calendar-container\" [attr.id]=\"componentId\">\n <!-- Input field using i-input-text component -->\n <div class=\"i-calendar-input-wrapper\" (click)=\"toggleCalendar()\">\n <i-input-text\n [id]=\"componentId\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"true\"\n [icon]=\"icon\"\n [useFloatLabel]=\"useFloatLabel\"\n [(ngModel)]=\"inputDisplayValue\"\n [forceFloated]=\"!!(inputDisplayValue && inputDisplayValue.length > 0)\"\n />\n </div>\n\n <!-- Calendar Panel -->\n @if (isOpen) {\n <div\n #calendarPanel\n class=\"i-calendar-panel\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- Header -->\n <div class=\"i-calendar-header\">\n <i-button\n [size]=\"'small'\"\n [severity]=\"'primary'\"\n [text]=\"true\"\n icon=\"pi pi-chevron-left\"\n (clicked)=\"navigatePrevious()\"\n aria-label=\"Previous\"\n >\n </i-button>\n\n <div class=\"i-calendar-header-title\">\n @if (currentView === \"date\") {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n (clicked)=\"showMonthView()\"\n >\n {{ getHeaderTitle() }}\n </i-button>\n } @else if (currentView === \"month\") {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n (clicked)=\"showYearView()\"\n >\n {{ getHeaderTitle() }}\n </i-button>\n } @else {\n <span class=\"i-calendar-title-text\">{{ getHeaderTitle() }}</span>\n }\n </div>\n\n <i-button\n [size]=\"'small'\"\n [severity]=\"'primary'\"\n [text]=\"true\"\n icon=\"pi pi-chevron-right\"\n (clicked)=\"navigateNext()\"\n aria-label=\"Next\"\n >\n </i-button>\n </div>\n\n <!-- Calendar Body -->\n <div class=\"i-calendar-body\">\n <!-- Date View -->\n @if (currentView === \"date\") {\n <div class=\"i-calendar-date-view\">\n <!-- Weekday headers -->\n <div class=\"i-calendar-weekdays\">\n @for (day of weekDays; track day) {\n <div class=\"i-calendar-weekday\">{{ day }}</div>\n }\n </div>\n\n <!-- Calendar days -->\n <div class=\"i-calendar-days\">\n @for (week of calendarDays; track week) {\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", styles: [".i-calendar-panel{background:var(--color-component-background);border:1px solid var(--surface-border);box-shadow:0 4px 12px #00000026}.i-calendar-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-calendar-title-text{color:var(--color-text-tertiary)}.i-calendar-selection.selected{border:1px solid var(--color-primary)}.i-calendar-selection.today{border:1px solid var(--color-text-tertiary)}.i-calendar-container{position:relative;width:100%}.i-calendar-container .i-calendar-input-wrapper{cursor:pointer}.i-calendar-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:300px;border-radius:8px;overflow:hidden;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.i-calendar-header{display:flex;align-items:center;justify-content:space-between;padding:12px;gap:8px}.i-calendar-header-title{flex:1;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em}.i-calendar-title-text{font-weight:600;font-size:1em}.i-calendar-body{padding:12px}.i-calendar-selection{border-radius:4px}.i-calendar-date-view{display:flex;flex-direction:column;gap:8px}.i-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}.i-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.i-calendar-month-view,.i-calendar-year-view{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
1547
|
+
], viewQueries: [{ propertyName: "calendarPanel", first: true, predicate: ["calendarPanel"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"i-calendar-container\" [attr.id]=\"componentId\">\n <!-- Input field using i-input-text component -->\n <div class=\"i-calendar-input-wrapper\" (click)=\"toggleCalendar()\">\n <i-input-text\n [id]=\"componentId\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"true\"\n [icon]=\"icon\"\n [useFloatLabel]=\"useFloatLabel\"\n [(ngModel)]=\"inputDisplayValue\"\n [forceFloated]=\"!!(inputDisplayValue && inputDisplayValue.length > 0)\"\n />\n </div>\n\n <!-- Calendar Panel -->\n @if (isOpen) {\n <div\n #calendarPanel\n class=\"i-calendar-panel\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- Header -->\n <div class=\"i-calendar-header\">\n <i-button\n [size]=\"'small'\"\n [severity]=\"'primary'\"\n [text]=\"true\"\n icon=\"pi pi-chevron-left\"\n (clicked)=\"navigatePrevious()\"\n aria-label=\"Previous\"\n >\n </i-button>\n\n <div class=\"i-calendar-header-title\">\n @if (currentView === \"date\") {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n (clicked)=\"showMonthView()\"\n >\n {{ getHeaderTitle() }}\n </i-button>\n } @else if (currentView === \"month\") {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n (clicked)=\"showYearView()\"\n >\n {{ getHeaderTitle() }}\n </i-button>\n } @else {\n <span class=\"i-calendar-title-text\">{{ getHeaderTitle() }}</span>\n }\n </div>\n\n <i-button\n [size]=\"'small'\"\n [severity]=\"'primary'\"\n [text]=\"true\"\n icon=\"pi pi-chevron-right\"\n (clicked)=\"navigateNext()\"\n aria-label=\"Next\"\n >\n </i-button>\n </div>\n\n <!-- Calendar Body -->\n <div class=\"i-calendar-body\">\n <!-- Date View -->\n @if (currentView === \"date\") {\n <div class=\"i-calendar-date-view\">\n <!-- Weekday headers -->\n <div class=\"i-calendar-weekdays\">\n @for (day of weekDays; track day) {\n <div class=\"i-calendar-weekday\">{{ day }}</div>\n }\n </div>\n\n <!-- Calendar days -->\n <div class=\"i-calendar-days\">\n @for (week of calendarDays; track week) {\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", styles: [".i-calendar-panel{background:var(--color-component-background);border:1px solid var(--surface-border);box-shadow:0 4px 12px #00000026}.i-calendar-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-calendar-title-text{color:var(--color-text-tertiary)}.i-calendar-selection.selected{border:1px solid var(--color-primary)}.i-calendar-selection.today{border:1px solid var(--color-text-tertiary)}.i-calendar-container{position:relative;width:100%}.i-calendar-container .i-calendar-input-wrapper{cursor:pointer}.i-calendar-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:300px;border-radius:8px;overflow:hidden;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.i-calendar-header{display:flex;align-items:center;justify-content:space-between;padding:12px;gap:8px}.i-calendar-header-title{flex:1;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em}.i-calendar-title-text{font-weight:600;font-size:1em}.i-calendar-body{padding:12px}.i-calendar-selection{border-radius:4px}.i-calendar-date-view{display:flex;flex-direction:column;gap:8px}.i-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}.i-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.i-calendar-month-view,.i-calendar-year-view{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}@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}.i-calendar-days{grid-template-columns:repeat(7,minmax(0,1fr))}.i-calendar-selection{min-width:0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
1548
1548
|
}
|
|
1549
1549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ICalendar, decorators: [{
|
|
1550
1550
|
type: Component,
|
|
@@ -1554,7 +1554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1554
1554
|
useExisting: forwardRef(() => ICalendar),
|
|
1555
1555
|
multi: true,
|
|
1556
1556
|
},
|
|
1557
|
-
], template: "<div class=\"i-calendar-container\" [attr.id]=\"componentId\">\n <!-- Input field using i-input-text component -->\n <div class=\"i-calendar-input-wrapper\" (click)=\"toggleCalendar()\">\n <i-input-text\n [id]=\"componentId\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"true\"\n [icon]=\"icon\"\n [useFloatLabel]=\"useFloatLabel\"\n [(ngModel)]=\"inputDisplayValue\"\n [forceFloated]=\"!!(inputDisplayValue && inputDisplayValue.length > 0)\"\n />\n </div>\n\n <!-- Calendar Panel -->\n @if (isOpen) {\n <div\n #calendarPanel\n class=\"i-calendar-panel\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- Header -->\n <div class=\"i-calendar-header\">\n <i-button\n [size]=\"'small'\"\n [severity]=\"'primary'\"\n [text]=\"true\"\n icon=\"pi pi-chevron-left\"\n (clicked)=\"navigatePrevious()\"\n aria-label=\"Previous\"\n >\n </i-button>\n\n <div class=\"i-calendar-header-title\">\n @if (currentView === \"date\") {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n (clicked)=\"showMonthView()\"\n >\n {{ getHeaderTitle() }}\n </i-button>\n } @else if (currentView === \"month\") {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n (clicked)=\"showYearView()\"\n >\n {{ getHeaderTitle() }}\n </i-button>\n } @else {\n <span class=\"i-calendar-title-text\">{{ getHeaderTitle() }}</span>\n }\n </div>\n\n <i-button\n [size]=\"'small'\"\n [severity]=\"'primary'\"\n [text]=\"true\"\n icon=\"pi pi-chevron-right\"\n (clicked)=\"navigateNext()\"\n aria-label=\"Next\"\n >\n </i-button>\n </div>\n\n <!-- Calendar Body -->\n <div class=\"i-calendar-body\">\n <!-- Date View -->\n @if (currentView === \"date\") {\n <div class=\"i-calendar-date-view\">\n <!-- Weekday headers -->\n <div class=\"i-calendar-weekdays\">\n @for (day of weekDays; track day) {\n <div class=\"i-calendar-weekday\">{{ day }}</div>\n }\n </div>\n\n <!-- Calendar days -->\n <div class=\"i-calendar-days\">\n @for (week of calendarDays; track week) {\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", styles: [".i-calendar-panel{background:var(--color-component-background);border:1px solid var(--surface-border);box-shadow:0 4px 12px #00000026}.i-calendar-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-calendar-title-text{color:var(--color-text-tertiary)}.i-calendar-selection.selected{border:1px solid var(--color-primary)}.i-calendar-selection.today{border:1px solid var(--color-text-tertiary)}.i-calendar-container{position:relative;width:100%}.i-calendar-container .i-calendar-input-wrapper{cursor:pointer}.i-calendar-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:300px;border-radius:8px;overflow:hidden;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.i-calendar-header{display:flex;align-items:center;justify-content:space-between;padding:12px;gap:8px}.i-calendar-header-title{flex:1;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em}.i-calendar-title-text{font-weight:600;font-size:1em}.i-calendar-body{padding:12px}.i-calendar-selection{border-radius:4px}.i-calendar-date-view{display:flex;flex-direction:column;gap:8px}.i-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}.i-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.i-calendar-month-view,.i-calendar-year-view{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}\n"] }]
|
|
1557
|
+
], template: "<div class=\"i-calendar-container\" [attr.id]=\"componentId\">\n <!-- Input field using i-input-text component -->\n <div class=\"i-calendar-input-wrapper\" (click)=\"toggleCalendar()\">\n <i-input-text\n [id]=\"componentId\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"true\"\n [icon]=\"icon\"\n [useFloatLabel]=\"useFloatLabel\"\n [(ngModel)]=\"inputDisplayValue\"\n [forceFloated]=\"!!(inputDisplayValue && inputDisplayValue.length > 0)\"\n />\n </div>\n\n <!-- Calendar Panel -->\n @if (isOpen) {\n <div\n #calendarPanel\n class=\"i-calendar-panel\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- Header -->\n <div class=\"i-calendar-header\">\n <i-button\n [size]=\"'small'\"\n [severity]=\"'primary'\"\n [text]=\"true\"\n icon=\"pi pi-chevron-left\"\n (clicked)=\"navigatePrevious()\"\n aria-label=\"Previous\"\n >\n </i-button>\n\n <div class=\"i-calendar-header-title\">\n @if (currentView === \"date\") {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n (clicked)=\"showMonthView()\"\n >\n {{ getHeaderTitle() }}\n </i-button>\n } @else if (currentView === \"month\") {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n (clicked)=\"showYearView()\"\n >\n {{ getHeaderTitle() }}\n </i-button>\n } @else {\n <span class=\"i-calendar-title-text\">{{ getHeaderTitle() }}</span>\n }\n </div>\n\n <i-button\n [size]=\"'small'\"\n [severity]=\"'primary'\"\n [text]=\"true\"\n icon=\"pi pi-chevron-right\"\n (clicked)=\"navigateNext()\"\n aria-label=\"Next\"\n >\n </i-button>\n </div>\n\n <!-- Calendar Body -->\n <div class=\"i-calendar-body\">\n <!-- Date View -->\n @if (currentView === \"date\") {\n <div class=\"i-calendar-date-view\">\n <!-- Weekday headers -->\n <div class=\"i-calendar-weekdays\">\n @for (day of weekDays; track day) {\n <div class=\"i-calendar-weekday\">{{ day }}</div>\n }\n </div>\n\n <!-- Calendar days -->\n <div class=\"i-calendar-days\">\n @for (week of calendarDays; track week) {\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", styles: [".i-calendar-panel{background:var(--color-component-background);border:1px solid var(--surface-border);box-shadow:0 4px 12px #00000026}.i-calendar-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-calendar-title-text{color:var(--color-text-tertiary)}.i-calendar-selection.selected{border:1px solid var(--color-primary)}.i-calendar-selection.today{border:1px solid var(--color-text-tertiary)}.i-calendar-container{position:relative;width:100%}.i-calendar-container .i-calendar-input-wrapper{cursor:pointer}.i-calendar-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:300px;border-radius:8px;overflow:hidden;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.i-calendar-header{display:flex;align-items:center;justify-content:space-between;padding:12px;gap:8px}.i-calendar-header-title{flex:1;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em}.i-calendar-title-text{font-weight:600;font-size:1em}.i-calendar-body{padding:12px}.i-calendar-selection{border-radius:4px}.i-calendar-date-view{display:flex;flex-direction:column;gap:8px}.i-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}.i-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.i-calendar-month-view,.i-calendar-year-view{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}@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}.i-calendar-days{grid-template-columns:repeat(7,minmax(0,1fr))}.i-calendar-selection{min-width:0}}\n"] }]
|
|
1558
1558
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { placeholder: [{
|
|
1559
1559
|
type: Input
|
|
1560
1560
|
}], readonlyInput: [{
|
|
@@ -1651,11 +1651,11 @@ class ICard {
|
|
|
1651
1651
|
this.closeCard.emit();
|
|
1652
1652
|
}
|
|
1653
1653
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ICard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1654
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ICard, isStandalone: true, selector: "i-card", inputs: { title: "title", closable: "closable", fullHeight: "fullHeight" }, outputs: { closeCard: "closeCard" }, host: { properties: { "class.i-card--full-height": "this.isFullHeight" } }, ngImport: i0, template: "<div class=\"i-card\" [attr.id]=\"componentId\">\n <!-- Header Section -->\n <div class=\"i-card-header\">\n <ng-content select=\"[slot=header]\">\n @if (title) {\n <span class=\"i-card-title\">{{ title }}</span>\n }\n </ng-content>\n @if (closable) {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n [icon]=\"'pi pi-times'\"\n [size]=\"'small'\"\n (click)=\"onCloseCard()\"\n />\n }\n </div>\n\n <!-- Content Section -->\n <div class=\"i-card-body\">\n <ng-content></ng-content>\n </div>\n\n <!-- Footer Section -->\n <div class=\"i-card-footer\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n</div>\n", styles: [".i-card{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-card .i-card-close,.i-card .i-card-subtitle{color:var(--color-text-secondary)}:host{display:block}:host.i-card--full-height{height:100%}:host.i-card--full-height .i-card{height:100%;display:flex;flex-direction:column}:host.i-card--full-height .i-card .i-card-body{flex:1;overflow:auto}: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:1.5em;font-weight:600}.i-card .i-card-body{padding:0 12px}.i-card .i-card-footer{padding:12px 0 0}.i-card .i-card-footer:empty{display:none}@media(max-width:768px){.i-card{border-radius:0}.i-card .i-card-body{padding-left:0;padding-right:0}}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
1654
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ICard, isStandalone: true, selector: "i-card", inputs: { title: "title", closable: "closable", fullHeight: "fullHeight" }, outputs: { closeCard: "closeCard" }, host: { properties: { "class.i-card--full-height": "this.isFullHeight" } }, ngImport: i0, template: "<div class=\"i-card\" [attr.id]=\"componentId\">\n <!-- Header Section -->\n <div class=\"i-card-header\">\n <ng-content select=\"[slot=header]\">\n @if (title) {\n <span class=\"i-card-title\">{{ title }}</span>\n }\n </ng-content>\n @if (closable) {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n [icon]=\"'pi pi-times'\"\n [size]=\"'small'\"\n (click)=\"onCloseCard()\"\n />\n }\n </div>\n\n <!-- Content Section -->\n <div class=\"i-card-body\">\n <ng-content></ng-content>\n </div>\n\n <!-- Footer Section -->\n <div class=\"i-card-footer\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n</div>\n", styles: [".i-card{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-card .i-card-close,.i-card .i-card-subtitle{color:var(--color-text-secondary)}:host{display:block}:host.i-card--full-height{height:100%}:host.i-card--full-height .i-card{height:100%;display:flex;flex-direction:column}:host.i-card--full-height .i-card .i-card-body{flex:1;overflow:auto}: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:1.5em;font-weight:600}.i-card .i-card-body{padding:0 12px}.i-card .i-card-footer{padding:12px 0 0}.i-card .i-card-footer:empty{display:none}@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"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
1655
1655
|
}
|
|
1656
1656
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ICard, decorators: [{
|
|
1657
1657
|
type: Component,
|
|
1658
|
-
args: [{ selector: 'i-card', imports: [IButton], template: "<div class=\"i-card\" [attr.id]=\"componentId\">\n <!-- Header Section -->\n <div class=\"i-card-header\">\n <ng-content select=\"[slot=header]\">\n @if (title) {\n <span class=\"i-card-title\">{{ title }}</span>\n }\n </ng-content>\n @if (closable) {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n [icon]=\"'pi pi-times'\"\n [size]=\"'small'\"\n (click)=\"onCloseCard()\"\n />\n }\n </div>\n\n <!-- Content Section -->\n <div class=\"i-card-body\">\n <ng-content></ng-content>\n </div>\n\n <!-- Footer Section -->\n <div class=\"i-card-footer\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n</div>\n", styles: [".i-card{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-card .i-card-close,.i-card .i-card-subtitle{color:var(--color-text-secondary)}:host{display:block}:host.i-card--full-height{height:100%}:host.i-card--full-height .i-card{height:100%;display:flex;flex-direction:column}:host.i-card--full-height .i-card .i-card-body{flex:1;overflow:auto}: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:1.5em;font-weight:600}.i-card .i-card-body{padding:0 12px}.i-card .i-card-footer{padding:12px 0 0}.i-card .i-card-footer:empty{display:none}@media(max-width:768px){.i-card{border-radius:0}.i-card .i-card-body{padding-left:0;padding-right:0}}\n"] }]
|
|
1658
|
+
args: [{ selector: 'i-card', imports: [IButton], template: "<div class=\"i-card\" [attr.id]=\"componentId\">\n <!-- Header Section -->\n <div class=\"i-card-header\">\n <ng-content select=\"[slot=header]\">\n @if (title) {\n <span class=\"i-card-title\">{{ title }}</span>\n }\n </ng-content>\n @if (closable) {\n <i-button\n [severity]=\"'contrast'\"\n [text]=\"true\"\n [icon]=\"'pi pi-times'\"\n [size]=\"'small'\"\n (click)=\"onCloseCard()\"\n />\n }\n </div>\n\n <!-- Content Section -->\n <div class=\"i-card-body\">\n <ng-content></ng-content>\n </div>\n\n <!-- Footer Section -->\n <div class=\"i-card-footer\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n</div>\n", styles: [".i-card{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-card .i-card-close,.i-card .i-card-subtitle{color:var(--color-text-secondary)}:host{display:block}:host.i-card--full-height{height:100%}:host.i-card--full-height .i-card{height:100%;display:flex;flex-direction:column}:host.i-card--full-height .i-card .i-card-body{flex:1;overflow:auto}: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:1.5em;font-weight:600}.i-card .i-card-body{padding:0 12px}.i-card .i-card-footer{padding:12px 0 0}.i-card .i-card-footer:empty{display:none}@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"] }]
|
|
1659
1659
|
}], propDecorators: { title: [{
|
|
1660
1660
|
type: Input
|
|
1661
1661
|
}], closable: [{
|
|
@@ -1873,7 +1873,7 @@ class ICheckbox {
|
|
|
1873
1873
|
useExisting: forwardRef(() => ICheckbox),
|
|
1874
1874
|
multi: true,
|
|
1875
1875
|
},
|
|
1876
|
-
], ngImport: i0, template: "<div\n class=\"i-checkbox-wrapper\"\n [class.i-checkbox--disabled]=\"disabled\"\n [class.i-checkbox--readonly]=\"readonly\"\n [class.i-checkbox--small]=\"size === 'small'\"\n [class.i-checkbox--medium]=\"size === 'medium'\"\n [class.i-checkbox--large]=\"size === 'large'\"\n>\n <div\n class=\"i-checkbox\"\n [class.i-checkbox--checked]=\"checked\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n (keydown.enter)=\"$event.preventDefault(); toggle()\"\n >\n @if (!checked && indeterminate) {\n <i class=\"pi pi-minus i-checkbox-icon\"></i>\n }\n @if (!indeterminate) {\n <i\n class=\"pi pi-check i-checkbox-icon\"\n [style.opacity]=\"checked ? '1' : '0'\"\n ></i>\n }\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-checkbox-label\"\n (click)=\"toggle()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-checkbox-wrapper.i-checkbox--disabled{opacity:.6;cursor:not-allowed}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{cursor:not-allowed;pointer-events:none}.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox,.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox-label{cursor:default}.i-checkbox-wrapper.i-checkbox--small{font-size:.9em;gap:6px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox{width:14px;height:14px;padding:0 0 0 1px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox .i-checkbox-icon{font-size:8px}.i-checkbox-wrapper.i-checkbox--medium{font-size:1em;gap:8px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox{width:16px;height:16px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox .i-checkbox-icon{font-size:10px}.i-checkbox-wrapper.i-checkbox--large{font-size:1.2em;gap:10px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox{width:20px;height:20px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox .i-checkbox-icon{font-size:12px}.i-checkbox-wrapper .i-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-checkbox-wrapper .i-checkbox:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-checkbox-wrapper .i-checkbox .i-checkbox-icon{font-size:10px;font-weight:700;transition:all .15s ease}.i-checkbox-wrapper .i-checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] });
|
|
1876
|
+
], ngImport: i0, template: "<div\n class=\"i-checkbox-wrapper\"\n [class.i-checkbox--disabled]=\"disabled\"\n [class.i-checkbox--readonly]=\"readonly\"\n [class.i-checkbox--small]=\"size === 'small'\"\n [class.i-checkbox--medium]=\"size === 'medium'\"\n [class.i-checkbox--large]=\"size === 'large'\"\n>\n <div\n class=\"i-checkbox\"\n [class.i-checkbox--checked]=\"checked\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n (keydown.enter)=\"$event.preventDefault(); toggle()\"\n >\n @if (!checked && indeterminate) {\n <i class=\"pi pi-minus i-checkbox-icon\"></i>\n }\n @if (!indeterminate) {\n <i\n class=\"pi pi-check i-checkbox-icon\"\n [style.opacity]=\"checked ? '1' : '0'\"\n ></i>\n }\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-checkbox-label\"\n (click)=\"toggle()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-checkbox-wrapper.i-checkbox--disabled{opacity:.6;cursor:not-allowed}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{cursor:not-allowed;pointer-events:none}.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox,.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox-label{cursor:default}.i-checkbox-wrapper.i-checkbox--small{font-size:.9em;gap:6px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox{width:14px;height:14px;padding:0 0 0 1px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox .i-checkbox-icon{font-size:8px}.i-checkbox-wrapper.i-checkbox--medium{font-size:1em;gap:8px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox{width:16px;height:16px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox .i-checkbox-icon{font-size:10px}.i-checkbox-wrapper.i-checkbox--large{font-size:1.2em;gap:10px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox{width:20px;height:20px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox .i-checkbox-icon{font-size:12px}.i-checkbox-wrapper .i-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-checkbox-wrapper .i-checkbox:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-checkbox-wrapper .i-checkbox .i-checkbox-icon{font-size:10px;font-weight:700;transition:all .15s ease}.i-checkbox-wrapper .i-checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}@media(pointer:coarse){.i-checkbox-wrapper{min-height:44px}.i-checkbox-wrapper .i-checkbox{position:relative;flex-shrink:0}.i-checkbox-wrapper .i-checkbox:after{content:\"\";position:absolute;inset:-14px}.i-checkbox-label{display:inline-flex;align-items:center;min-height:44px}}\n"] });
|
|
1877
1877
|
}
|
|
1878
1878
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ICheckbox, decorators: [{
|
|
1879
1879
|
type: Component,
|
|
@@ -1883,7 +1883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1883
1883
|
useExisting: forwardRef(() => ICheckbox),
|
|
1884
1884
|
multi: true,
|
|
1885
1885
|
},
|
|
1886
|
-
], template: "<div\n class=\"i-checkbox-wrapper\"\n [class.i-checkbox--disabled]=\"disabled\"\n [class.i-checkbox--readonly]=\"readonly\"\n [class.i-checkbox--small]=\"size === 'small'\"\n [class.i-checkbox--medium]=\"size === 'medium'\"\n [class.i-checkbox--large]=\"size === 'large'\"\n>\n <div\n class=\"i-checkbox\"\n [class.i-checkbox--checked]=\"checked\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n (keydown.enter)=\"$event.preventDefault(); toggle()\"\n >\n @if (!checked && indeterminate) {\n <i class=\"pi pi-minus i-checkbox-icon\"></i>\n }\n @if (!indeterminate) {\n <i\n class=\"pi pi-check i-checkbox-icon\"\n [style.opacity]=\"checked ? '1' : '0'\"\n ></i>\n }\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-checkbox-label\"\n (click)=\"toggle()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-checkbox-wrapper.i-checkbox--disabled{opacity:.6;cursor:not-allowed}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{cursor:not-allowed;pointer-events:none}.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox,.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox-label{cursor:default}.i-checkbox-wrapper.i-checkbox--small{font-size:.9em;gap:6px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox{width:14px;height:14px;padding:0 0 0 1px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox .i-checkbox-icon{font-size:8px}.i-checkbox-wrapper.i-checkbox--medium{font-size:1em;gap:8px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox{width:16px;height:16px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox .i-checkbox-icon{font-size:10px}.i-checkbox-wrapper.i-checkbox--large{font-size:1.2em;gap:10px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox{width:20px;height:20px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox .i-checkbox-icon{font-size:12px}.i-checkbox-wrapper .i-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-checkbox-wrapper .i-checkbox:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-checkbox-wrapper .i-checkbox .i-checkbox-icon{font-size:10px;font-weight:700;transition:all .15s ease}.i-checkbox-wrapper .i-checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] }]
|
|
1886
|
+
], template: "<div\n class=\"i-checkbox-wrapper\"\n [class.i-checkbox--disabled]=\"disabled\"\n [class.i-checkbox--readonly]=\"readonly\"\n [class.i-checkbox--small]=\"size === 'small'\"\n [class.i-checkbox--medium]=\"size === 'medium'\"\n [class.i-checkbox--large]=\"size === 'large'\"\n>\n <div\n class=\"i-checkbox\"\n [class.i-checkbox--checked]=\"checked\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n (keydown.enter)=\"$event.preventDefault(); toggle()\"\n >\n @if (!checked && indeterminate) {\n <i class=\"pi pi-minus i-checkbox-icon\"></i>\n }\n @if (!indeterminate) {\n <i\n class=\"pi pi-check i-checkbox-icon\"\n [style.opacity]=\"checked ? '1' : '0'\"\n ></i>\n }\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-checkbox-label\"\n (click)=\"toggle()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-checkbox-wrapper.i-checkbox--disabled{opacity:.6;cursor:not-allowed}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{cursor:not-allowed;pointer-events:none}.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox,.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox-label{cursor:default}.i-checkbox-wrapper.i-checkbox--small{font-size:.9em;gap:6px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox{width:14px;height:14px;padding:0 0 0 1px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox .i-checkbox-icon{font-size:8px}.i-checkbox-wrapper.i-checkbox--medium{font-size:1em;gap:8px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox{width:16px;height:16px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox .i-checkbox-icon{font-size:10px}.i-checkbox-wrapper.i-checkbox--large{font-size:1.2em;gap:10px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox{width:20px;height:20px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox .i-checkbox-icon{font-size:12px}.i-checkbox-wrapper .i-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-checkbox-wrapper .i-checkbox:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-checkbox-wrapper .i-checkbox .i-checkbox-icon{font-size:10px;font-weight:700;transition:all .15s ease}.i-checkbox-wrapper .i-checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}@media(pointer:coarse){.i-checkbox-wrapper{min-height:44px}.i-checkbox-wrapper .i-checkbox{position:relative;flex-shrink:0}.i-checkbox-wrapper .i-checkbox:after{content:\"\";position:absolute;inset:-14px}.i-checkbox-label{display:inline-flex;align-items:center;min-height:44px}}\n"] }]
|
|
1887
1887
|
}], propDecorators: { label: [{
|
|
1888
1888
|
type: Input
|
|
1889
1889
|
}], id: [{
|
|
@@ -1987,11 +1987,11 @@ class IChip {
|
|
|
1987
1987
|
}
|
|
1988
1988
|
}
|
|
1989
1989
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1990
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChip, isStandalone: true, selector: "i-chip", inputs: { label: "label", icon: "icon", image: "image", removable: "removable", removeIcon: "removeIcon", styleClass: "styleClass", disabled: "disabled" }, outputs: { onRemove: "onRemove" }, ngImport: i0, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n }\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 <
|
|
1990
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChip, isStandalone: true, selector: "i-chip", inputs: { label: "label", icon: "icon", image: "image", removable: "removable", removeIcon: "removeIcon", styleClass: "styleClass", disabled: "disabled" }, outputs: { onRemove: "onRemove" }, ngImport: i0, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n }\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 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", styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:1em;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;max-width:150px}.i-chip.i-chip-disabled{opacity:.6;cursor:not-allowed}.i-chip .i-chip-icon{flex-shrink:0}.i-chip .i-chip-image{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}.i-chip .i-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.i-chip .i-chip-remove-icon{border:0;background:transparent;color:inherit;padding:0;cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0;margin-left:4px}.i-chip .i-chip-remove-icon:hover{opacity:1}@media(pointer:coarse){.i-chip{min-height:44px;box-sizing:border-box;padding-block:0}.i-chip .i-chip-remove-icon{min-width:44px;min-height:44px;margin-right:-12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1991
1991
|
}
|
|
1992
1992
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChip, decorators: [{
|
|
1993
1993
|
type: Component,
|
|
1994
|
-
args: [{ selector: 'i-chip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n }\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 <
|
|
1994
|
+
args: [{ selector: 'i-chip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n }\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 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", styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:1em;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;max-width:150px}.i-chip.i-chip-disabled{opacity:.6;cursor:not-allowed}.i-chip .i-chip-icon{flex-shrink:0}.i-chip .i-chip-image{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}.i-chip .i-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.i-chip .i-chip-remove-icon{border:0;background:transparent;color:inherit;padding:0;cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0;margin-left:4px}.i-chip .i-chip-remove-icon:hover{opacity:1}@media(pointer:coarse){.i-chip{min-height:44px;box-sizing:border-box;padding-block:0}.i-chip .i-chip-remove-icon{min-width:44px;min-height:44px;margin-right:-12px}}\n"] }]
|
|
1995
1995
|
}], propDecorators: { label: [{
|
|
1996
1996
|
type: Input
|
|
1997
1997
|
}], icon: [{
|
|
@@ -2328,11 +2328,11 @@ class ConfirmationDialogComponent {
|
|
|
2328
2328
|
this.dialogRef?.close(false);
|
|
2329
2329
|
}
|
|
2330
2330
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2331
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: ConfirmationDialogComponent, isStandalone: true, selector: "i-confirmation-dialog", ngImport: i0, template: "<div class=\"confirmation-dialog\" [attr.id]=\"componentId\">\n <div class=\"confirmation-content\">\n <p class=\"confirmation-message\">{{ message() }}</p>\n </div>\n <i-dialog-actions\n [title]=\"header()\"\n [submitLabel]=\"acceptLabel\"\n [cancelLabel]=\"rejectLabel\"\n [severity]=\"severity()\"\n (cancelEvent)=\"onCancel()\"\n (submitEvent)=\"onConfirm()\"\n ></i-dialog-actions>\n</div>\n", styles: [".confirmation-dialog .confirmation-content{color:var(--color-text-primary)}.confirmation-dialog{min-width:300px}.confirmation-dialog .confirmation-content{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 8px}.confirmation-dialog .confirmation-content .confirmation-message{margin:0;font-size:1.1em;line-height:1.4}\n"], dependencies: [{ kind: "component", type: IDialogActions, selector: "i-dialog-actions", inputs: ["submitLabel", "cancelLabel", "severity", "showCancel", "showSubmit", "submitDisabled", "submitLoading", "submitOutlined"], outputs: ["cancelEvent", "submitEvent"] }] });
|
|
2331
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: ConfirmationDialogComponent, isStandalone: true, selector: "i-confirmation-dialog", ngImport: i0, template: "<div class=\"confirmation-dialog\" [attr.id]=\"componentId\">\n <div class=\"confirmation-content\">\n <p class=\"confirmation-message\">{{ message() }}</p>\n </div>\n <i-dialog-actions\n [title]=\"header()\"\n [submitLabel]=\"acceptLabel\"\n [cancelLabel]=\"rejectLabel\"\n [severity]=\"severity()\"\n (cancelEvent)=\"onCancel()\"\n (submitEvent)=\"onConfirm()\"\n ></i-dialog-actions>\n</div>\n", styles: [".confirmation-dialog .confirmation-content{color:var(--color-text-primary)}.confirmation-dialog{min-width:300px}.confirmation-dialog .confirmation-content{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 8px}.confirmation-dialog .confirmation-content .confirmation-message{margin:0;font-size:1.1em;line-height:1.4}@media(max-width:640px){:host,.confirmation-dialog{min-width:0;max-width:100%}}\n"], dependencies: [{ kind: "component", type: IDialogActions, selector: "i-dialog-actions", inputs: ["submitLabel", "cancelLabel", "severity", "showCancel", "showSubmit", "submitDisabled", "submitLoading", "submitOutlined"], outputs: ["cancelEvent", "submitEvent"] }] });
|
|
2332
2332
|
}
|
|
2333
2333
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
2334
2334
|
type: Component,
|
|
2335
|
-
args: [{ selector: 'i-confirmation-dialog', standalone: true, imports: [IDialogActions], template: "<div class=\"confirmation-dialog\" [attr.id]=\"componentId\">\n <div class=\"confirmation-content\">\n <p class=\"confirmation-message\">{{ message() }}</p>\n </div>\n <i-dialog-actions\n [title]=\"header()\"\n [submitLabel]=\"acceptLabel\"\n [cancelLabel]=\"rejectLabel\"\n [severity]=\"severity()\"\n (cancelEvent)=\"onCancel()\"\n (submitEvent)=\"onConfirm()\"\n ></i-dialog-actions>\n</div>\n", styles: [".confirmation-dialog .confirmation-content{color:var(--color-text-primary)}.confirmation-dialog{min-width:300px}.confirmation-dialog .confirmation-content{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 8px}.confirmation-dialog .confirmation-content .confirmation-message{margin:0;font-size:1.1em;line-height:1.4}\n"] }]
|
|
2335
|
+
args: [{ selector: 'i-confirmation-dialog', standalone: true, imports: [IDialogActions], template: "<div class=\"confirmation-dialog\" [attr.id]=\"componentId\">\n <div class=\"confirmation-content\">\n <p class=\"confirmation-message\">{{ message() }}</p>\n </div>\n <i-dialog-actions\n [title]=\"header()\"\n [submitLabel]=\"acceptLabel\"\n [cancelLabel]=\"rejectLabel\"\n [severity]=\"severity()\"\n (cancelEvent)=\"onCancel()\"\n (submitEvent)=\"onConfirm()\"\n ></i-dialog-actions>\n</div>\n", styles: [".confirmation-dialog .confirmation-content{color:var(--color-text-primary)}.confirmation-dialog{min-width:300px}.confirmation-dialog .confirmation-content{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 8px}.confirmation-dialog .confirmation-content .confirmation-message{margin:0;font-size:1.1em;line-height:1.4}@media(max-width:640px){:host,.confirmation-dialog{min-width:0;max-width:100%}}\n"] }]
|
|
2336
2336
|
}] });
|
|
2337
2337
|
|
|
2338
2338
|
var confirmationDialog_component = /*#__PURE__*/Object.freeze({
|
|
@@ -2555,11 +2555,11 @@ class IDialog extends AbstractDialog {
|
|
|
2555
2555
|
this.cdr.detectChanges();
|
|
2556
2556
|
}
|
|
2557
2557
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IDialog, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2558
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IDialog, isStandalone: true, selector: "i-dialog", host: { listeners: { "document:keydown.escape": "onEscapeKey()", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (visible) {\n <div\n class=\"i-dialog-overlay\"\n (click)=\"onOverlayClick($event)\"\n [attr.id]=\"componentId\"\n >\n <div\n #dialogElement\n class=\"i-dialog-container\"\n [style.width]=\"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}\n", styles: [".i-dialog-overlay{background:#0006}.i-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s cubic-bezier(.4,0,.2,1);will-change:opacity;transform:translateZ(0)}.i-dialog-overlay .i-dialog-container{display:flex;flex-direction:column;max-width:90vw;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)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ICard, selector: "i-card", inputs: ["title", "closable", "fullHeight"], outputs: ["closeCard"] }] });
|
|
2558
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IDialog, isStandalone: true, selector: "i-dialog", host: { listeners: { "document:keydown.escape": "onEscapeKey()", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (visible) {\n <div\n class=\"i-dialog-overlay\"\n (click)=\"onOverlayClick($event)\"\n [attr.id]=\"componentId\"\n >\n <div\n #dialogElement\n class=\"i-dialog-container\"\n [style.width]=\"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}\n", styles: [".i-dialog-overlay{background:#0006}.i-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s cubic-bezier(.4,0,.2,1);will-change:opacity;transform:translateZ(0)}.i-dialog-overlay .i-dialog-container{display:flex;flex-direction:column;max-width:90vw;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)}.i-dialog-container>i-card{min-height:0;overflow:auto;overscroll-behavior:contain}@media(max-width:640px){.i-dialog-overlay{padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.i-dialog-overlay .i-dialog-container{max-width:100%;max-height:calc(100dvh - 32px)}.i-dialog-content{overflow-wrap:anywhere}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ICard, selector: "i-card", inputs: ["title", "closable", "fullHeight"], outputs: ["closeCard"] }] });
|
|
2559
2559
|
}
|
|
2560
2560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IDialog, decorators: [{
|
|
2561
2561
|
type: Component,
|
|
2562
|
-
args: [{ selector: 'i-dialog', imports: [CommonModule, ICard], template: "@if (visible) {\n <div\n class=\"i-dialog-overlay\"\n (click)=\"onOverlayClick($event)\"\n [attr.id]=\"componentId\"\n >\n <div\n #dialogElement\n class=\"i-dialog-container\"\n [style.width]=\"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}\n", styles: [".i-dialog-overlay{background:#0006}.i-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s cubic-bezier(.4,0,.2,1);will-change:opacity;transform:translateZ(0)}.i-dialog-overlay .i-dialog-container{display:flex;flex-direction:column;max-width:90vw;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)}}\n"] }]
|
|
2562
|
+
args: [{ selector: 'i-dialog', imports: [CommonModule, ICard], template: "@if (visible) {\n <div\n class=\"i-dialog-overlay\"\n (click)=\"onOverlayClick($event)\"\n [attr.id]=\"componentId\"\n >\n <div\n #dialogElement\n class=\"i-dialog-container\"\n [style.width]=\"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}\n", styles: [".i-dialog-overlay{background:#0006}.i-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s cubic-bezier(.4,0,.2,1);will-change:opacity;transform:translateZ(0)}.i-dialog-overlay .i-dialog-container{display:flex;flex-direction:column;max-width:90vw;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)}.i-dialog-container>i-card{min-height:0;overflow:auto;overscroll-behavior:contain}@media(max-width:640px){.i-dialog-overlay{padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.i-dialog-overlay .i-dialog-container{max-width:100%;max-height:calc(100dvh - 32px)}.i-dialog-content{overflow-wrap:anywhere}}\n"] }]
|
|
2563
2563
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { dialogElement: [{
|
|
2564
2564
|
type: ViewChild,
|
|
2565
2565
|
args: ['dialogElement', { static: false }]
|
|
@@ -3038,11 +3038,11 @@ class EmptyStateComponent {
|
|
|
3038
3038
|
}, 200);
|
|
3039
3039
|
}
|
|
3040
3040
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3041
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: EmptyStateComponent, isStandalone: true, selector: "i-empty-state", inputs: { fixed: "fixed", colorScheme: "colorScheme" }, ngImport: i0, template: "<div class=\"flex justify-contents no-results-container\">\n <img\n [src]=\"\n 'assets/images/' +\n (colorScheme() === 'light' ? 'no-results-light' : 'no-results-dark') +\n '.png'\n \"\n alt=\"No Results\"\n class=\"no-results-image\"\n [class.loaded]=\"imageLoaded\"\n [class.fixed]=\"fixed\"\n [class.dynamic]=\"!fixed\"\n (load)=\"onImageLoad()\"\n />\n</div>\n", styles: [".i-empty-state__container{display:flex;align-items:center;justify-content:center;width:100%;height:80vh}.i-empty-state__image{height:auto;opacity:0;transition:opacity .8s ease-in-out}.i-empty-state__image--dynamic{max-width:40%}.i-empty-state__image--fixed{width:480px}.i-empty-state__image--loaded{opacity:.5}.no-results-container{display:flex;align-items:center;justify-content:center;width:100%;height:80vh}.no-results-image{height:auto;opacity:0;transition:opacity .8s ease-in-out}.no-results-image.dynamic{max-width:40%}.no-results-image.fixed{width:480px}.no-results-image.loaded{opacity:.5}\n"] });
|
|
3041
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: EmptyStateComponent, isStandalone: true, selector: "i-empty-state", inputs: { fixed: "fixed", colorScheme: "colorScheme" }, ngImport: i0, template: "<div class=\"flex justify-contents no-results-container\">\n <img\n [src]=\"\n 'assets/images/' +\n (colorScheme() === 'light' ? 'no-results-light' : 'no-results-dark') +\n '.png'\n \"\n alt=\"No Results\"\n class=\"no-results-image\"\n [class.loaded]=\"imageLoaded\"\n [class.fixed]=\"fixed\"\n [class.dynamic]=\"!fixed\"\n (load)=\"onImageLoad()\"\n />\n</div>\n", styles: [".i-empty-state__container{display:flex;align-items:center;justify-content:center;width:100%;height:80vh}.i-empty-state__image{height:auto;opacity:0;transition:opacity .8s ease-in-out}.i-empty-state__image--dynamic{max-width:40%}.i-empty-state__image--fixed{width:480px}.i-empty-state__image--loaded{opacity:.5}.no-results-container{display:flex;align-items:center;justify-content:center;width:100%;height:80vh}.no-results-image{height:auto;opacity:0;transition:opacity .8s ease-in-out}.no-results-image.dynamic{max-width:40%}.no-results-image.fixed{width:480px}.no-results-image.loaded{opacity:.5}.i-empty-state__image--fixed,.no-results-image.fixed{max-width:100%}\n"] });
|
|
3042
3042
|
}
|
|
3043
3043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
3044
3044
|
type: Component,
|
|
3045
|
-
args: [{ selector: 'i-empty-state', standalone: true, template: "<div class=\"flex justify-contents no-results-container\">\n <img\n [src]=\"\n 'assets/images/' +\n (colorScheme() === 'light' ? 'no-results-light' : 'no-results-dark') +\n '.png'\n \"\n alt=\"No Results\"\n class=\"no-results-image\"\n [class.loaded]=\"imageLoaded\"\n [class.fixed]=\"fixed\"\n [class.dynamic]=\"!fixed\"\n (load)=\"onImageLoad()\"\n />\n</div>\n", styles: [".i-empty-state__container{display:flex;align-items:center;justify-content:center;width:100%;height:80vh}.i-empty-state__image{height:auto;opacity:0;transition:opacity .8s ease-in-out}.i-empty-state__image--dynamic{max-width:40%}.i-empty-state__image--fixed{width:480px}.i-empty-state__image--loaded{opacity:.5}.no-results-container{display:flex;align-items:center;justify-content:center;width:100%;height:80vh}.no-results-image{height:auto;opacity:0;transition:opacity .8s ease-in-out}.no-results-image.dynamic{max-width:40%}.no-results-image.fixed{width:480px}.no-results-image.loaded{opacity:.5}\n"] }]
|
|
3045
|
+
args: [{ selector: 'i-empty-state', standalone: true, template: "<div class=\"flex justify-contents no-results-container\">\n <img\n [src]=\"\n 'assets/images/' +\n (colorScheme() === 'light' ? 'no-results-light' : 'no-results-dark') +\n '.png'\n \"\n alt=\"No Results\"\n class=\"no-results-image\"\n [class.loaded]=\"imageLoaded\"\n [class.fixed]=\"fixed\"\n [class.dynamic]=\"!fixed\"\n (load)=\"onImageLoad()\"\n />\n</div>\n", styles: [".i-empty-state__container{display:flex;align-items:center;justify-content:center;width:100%;height:80vh}.i-empty-state__image{height:auto;opacity:0;transition:opacity .8s ease-in-out}.i-empty-state__image--dynamic{max-width:40%}.i-empty-state__image--fixed{width:480px}.i-empty-state__image--loaded{opacity:.5}.no-results-container{display:flex;align-items:center;justify-content:center;width:100%;height:80vh}.no-results-image{height:auto;opacity:0;transition:opacity .8s ease-in-out}.no-results-image.dynamic{max-width:40%}.no-results-image.fixed{width:480px}.no-results-image.loaded{opacity:.5}.i-empty-state__image--fixed,.no-results-image.fixed{max-width:100%}\n"] }]
|
|
3046
3046
|
}], propDecorators: { fixed: [{
|
|
3047
3047
|
type: Input
|
|
3048
3048
|
}], colorScheme: [{
|
|
@@ -3253,11 +3253,11 @@ class IFileUpload {
|
|
|
3253
3253
|
this.validationError.emit(error);
|
|
3254
3254
|
}
|
|
3255
3255
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IFileUpload, isStandalone: true, selector: "i-file-upload", inputs: { files: "files", options: "options", disabled: "disabled", dropLabel: "dropLabel", description: "description", chooseLabel: "chooseLabel", ariaLabel: "ariaLabel", uploadIcon: "uploadIcon", fileIcon: "fileIcon" }, outputs: { filesChange: "filesChange", validationError: "validationError" }, ngImport: i0, template: "<div class=\"i-file-upload\" [class.i-file-upload--disabled]=\"disabled\">\n <div class=\"i-file-upload__drop-zone\" [class.i-file-upload__drop-zone--active]=\"dragging && !disabled\"\n (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n <i [class]=\"uploadIcon + ' i-file-upload__icon'\" aria-hidden=\"true\"></i>\n <strong>{{ dropLabel }}</strong>\n <span class=\"i-file-upload__description\">{{ description }}</span>\n <input #fileInput type=\"file\" hidden [multiple]=\"limits.multiple\" [accept]=\"accept\"\n [disabled]=\"disabled\" (change)=\"onSelect($event)\" [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"componentId + '-limits'\" />\n <i-button icon=\"pi pi-plus\" [outlined]=\"true\" [disabled]=\"disabled\" [ariaLabel]=\"ariaLabel\"\n (clicked)=\"fileInput.click()\">{{ chooseLabel }}</i-button>\n <small [id]=\"componentId + '-limits'\" class=\"i-file-upload__description\">{{ limitsLabel }}</small>\n @if (accept) {\n <small class=\"i-file-upload__description\">Accepted types: {{ accept }}</small>\n }\n </div>\n @if (error) {\n <i-message severity=\"danger\" role=\"alert\">{{ error.message }}</i-message>\n }\n <div class=\"i-file-upload__list\" aria-live=\"polite\" aria-relevant=\"additions removals text\">\n @if (files.length) {\n <strong>{{ files.length }} file{{ files.length === 1 ? '' : 's' }} selected</strong>\n @for (file of files; track $index) {\n <div class=\"i-file-upload__row\">\n <i [class]=\"fileIcon\" aria-hidden=\"true\"></i>\n <span class=\"i-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n <small class=\"i-file-upload__description\">{{ formatSize(file.size) }}</small>\n <i-button icon=\"pi pi-times\" [text]=\"true\" size=\"small\" [ariaLabel]=\"'Remove ' + file.name\"\n [disabled]=\"disabled\" (clicked)=\"remove($index)\" />\n </div>\n }\n }\n </div>\n</div>\n", styles: [".i-file-upload{color:var(--color-text-primary)}.i-file-upload__drop-zone{border-color:var(--surface-border);background:var(--surface-card)}.i-file-upload__drop-zone--active,.i-file-upload__drop-zone:focus-within{border-color:var(--color-primary);background:var(--surface-hover)}.i-file-upload__icon,.i-file-upload__row>i{color:var(--color-primary)}.i-file-upload__description{color:var(--color-text-secondary)}.i-file-upload__row{border-color:var(--surface-border)}.i-file-upload--disabled .i-file-upload__drop-zone{background:var(--color-disabled-background);border-color:var(--color-disabled-border)}:host{display:block}.i-file-upload{display:flex;flex-direction:column;gap:1rem}.i-file-upload__drop-zone{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem 1rem;text-align:center;border-width:2px;border-style:dashed;border-radius:8px;transition:border-color .2s,background .2s}.i-file-upload__icon{font-size:2rem}.i-file-upload--disabled .i-file-upload__drop-zone{opacity:.65}.i-file-upload__list{display:flex;flex-direction:column;gap:.5rem}.i-file-upload__row{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-bottom-width:1px;border-bottom-style:solid}.i-file-upload__row small{white-space:nowrap}.i-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: IMessage, selector: "i-message", inputs: ["severity", "size", "icon", "closable", "visible"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IFileUpload, isStandalone: true, selector: "i-file-upload", inputs: { files: "files", options: "options", disabled: "disabled", dropLabel: "dropLabel", description: "description", chooseLabel: "chooseLabel", ariaLabel: "ariaLabel", uploadIcon: "uploadIcon", fileIcon: "fileIcon" }, outputs: { filesChange: "filesChange", validationError: "validationError" }, ngImport: i0, template: "<div class=\"i-file-upload\" [class.i-file-upload--disabled]=\"disabled\">\n <div class=\"i-file-upload__drop-zone\" [class.i-file-upload__drop-zone--active]=\"dragging && !disabled\"\n (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n <i [class]=\"uploadIcon + ' i-file-upload__icon'\" aria-hidden=\"true\"></i>\n <strong>{{ dropLabel }}</strong>\n <span class=\"i-file-upload__description\">{{ description }}</span>\n <input #fileInput type=\"file\" hidden [multiple]=\"limits.multiple\" [accept]=\"accept\"\n [disabled]=\"disabled\" (change)=\"onSelect($event)\" [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"componentId + '-limits'\" />\n <i-button icon=\"pi pi-plus\" [outlined]=\"true\" [disabled]=\"disabled\" [ariaLabel]=\"ariaLabel\"\n (clicked)=\"fileInput.click()\">{{ chooseLabel }}</i-button>\n <small [id]=\"componentId + '-limits'\" class=\"i-file-upload__description\">{{ limitsLabel }}</small>\n @if (accept) {\n <small class=\"i-file-upload__description\">Accepted types: {{ accept }}</small>\n }\n </div>\n @if (error) {\n <i-message severity=\"danger\" role=\"alert\">{{ error.message }}</i-message>\n }\n <div class=\"i-file-upload__list\" aria-live=\"polite\" aria-relevant=\"additions removals text\">\n @if (files.length) {\n <strong>{{ files.length }} file{{ files.length === 1 ? '' : 's' }} selected</strong>\n @for (file of files; track $index) {\n <div class=\"i-file-upload__row\">\n <i [class]=\"fileIcon\" aria-hidden=\"true\"></i>\n <span class=\"i-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n <small class=\"i-file-upload__description\">{{ formatSize(file.size) }}</small>\n <i-button icon=\"pi pi-times\" [text]=\"true\" size=\"small\" [ariaLabel]=\"'Remove ' + file.name\"\n [disabled]=\"disabled\" (clicked)=\"remove($index)\" />\n </div>\n }\n }\n </div>\n</div>\n", styles: [".i-file-upload{color:var(--color-text-primary)}.i-file-upload__drop-zone{border-color:var(--surface-border);background:var(--surface-card)}.i-file-upload__drop-zone--active,.i-file-upload__drop-zone:focus-within{border-color:var(--color-primary);background:var(--surface-hover)}.i-file-upload__icon,.i-file-upload__row>i{color:var(--color-primary)}.i-file-upload__description{color:var(--color-text-secondary)}.i-file-upload__row{border-color:var(--surface-border)}.i-file-upload--disabled .i-file-upload__drop-zone{background:var(--color-disabled-background);border-color:var(--color-disabled-border)}:host{display:block}.i-file-upload{display:flex;flex-direction:column;gap:1rem}.i-file-upload__drop-zone{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem 1rem;text-align:center;border-width:2px;border-style:dashed;border-radius:8px;transition:border-color .2s,background .2s}.i-file-upload__icon{font-size:2rem}.i-file-upload--disabled .i-file-upload__drop-zone{opacity:.65}.i-file-upload__list{display:flex;flex-direction:column;gap:.5rem}.i-file-upload__row{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-bottom-width:1px;border-bottom-style:solid}.i-file-upload__row small{white-space:nowrap}.i-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:480px){.i-file-upload__row{flex-wrap:wrap}.i-file-upload__name{flex-basis:calc(100% - 4rem)}}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: IMessage, selector: "i-message", inputs: ["severity", "size", "icon", "closable", "visible"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3257
3257
|
}
|
|
3258
3258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IFileUpload, decorators: [{
|
|
3259
3259
|
type: Component,
|
|
3260
|
-
args: [{ selector: 'i-file-upload', standalone: true, imports: [IButton, IMessage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"i-file-upload\" [class.i-file-upload--disabled]=\"disabled\">\n <div class=\"i-file-upload__drop-zone\" [class.i-file-upload__drop-zone--active]=\"dragging && !disabled\"\n (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n <i [class]=\"uploadIcon + ' i-file-upload__icon'\" aria-hidden=\"true\"></i>\n <strong>{{ dropLabel }}</strong>\n <span class=\"i-file-upload__description\">{{ description }}</span>\n <input #fileInput type=\"file\" hidden [multiple]=\"limits.multiple\" [accept]=\"accept\"\n [disabled]=\"disabled\" (change)=\"onSelect($event)\" [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"componentId + '-limits'\" />\n <i-button icon=\"pi pi-plus\" [outlined]=\"true\" [disabled]=\"disabled\" [ariaLabel]=\"ariaLabel\"\n (clicked)=\"fileInput.click()\">{{ chooseLabel }}</i-button>\n <small [id]=\"componentId + '-limits'\" class=\"i-file-upload__description\">{{ limitsLabel }}</small>\n @if (accept) {\n <small class=\"i-file-upload__description\">Accepted types: {{ accept }}</small>\n }\n </div>\n @if (error) {\n <i-message severity=\"danger\" role=\"alert\">{{ error.message }}</i-message>\n }\n <div class=\"i-file-upload__list\" aria-live=\"polite\" aria-relevant=\"additions removals text\">\n @if (files.length) {\n <strong>{{ files.length }} file{{ files.length === 1 ? '' : 's' }} selected</strong>\n @for (file of files; track $index) {\n <div class=\"i-file-upload__row\">\n <i [class]=\"fileIcon\" aria-hidden=\"true\"></i>\n <span class=\"i-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n <small class=\"i-file-upload__description\">{{ formatSize(file.size) }}</small>\n <i-button icon=\"pi pi-times\" [text]=\"true\" size=\"small\" [ariaLabel]=\"'Remove ' + file.name\"\n [disabled]=\"disabled\" (clicked)=\"remove($index)\" />\n </div>\n }\n }\n </div>\n</div>\n", styles: [".i-file-upload{color:var(--color-text-primary)}.i-file-upload__drop-zone{border-color:var(--surface-border);background:var(--surface-card)}.i-file-upload__drop-zone--active,.i-file-upload__drop-zone:focus-within{border-color:var(--color-primary);background:var(--surface-hover)}.i-file-upload__icon,.i-file-upload__row>i{color:var(--color-primary)}.i-file-upload__description{color:var(--color-text-secondary)}.i-file-upload__row{border-color:var(--surface-border)}.i-file-upload--disabled .i-file-upload__drop-zone{background:var(--color-disabled-background);border-color:var(--color-disabled-border)}:host{display:block}.i-file-upload{display:flex;flex-direction:column;gap:1rem}.i-file-upload__drop-zone{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem 1rem;text-align:center;border-width:2px;border-style:dashed;border-radius:8px;transition:border-color .2s,background .2s}.i-file-upload__icon{font-size:2rem}.i-file-upload--disabled .i-file-upload__drop-zone{opacity:.65}.i-file-upload__list{display:flex;flex-direction:column;gap:.5rem}.i-file-upload__row{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-bottom-width:1px;border-bottom-style:solid}.i-file-upload__row small{white-space:nowrap}.i-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
3260
|
+
args: [{ selector: 'i-file-upload', standalone: true, imports: [IButton, IMessage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"i-file-upload\" [class.i-file-upload--disabled]=\"disabled\">\n <div class=\"i-file-upload__drop-zone\" [class.i-file-upload__drop-zone--active]=\"dragging && !disabled\"\n (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n <i [class]=\"uploadIcon + ' i-file-upload__icon'\" aria-hidden=\"true\"></i>\n <strong>{{ dropLabel }}</strong>\n <span class=\"i-file-upload__description\">{{ description }}</span>\n <input #fileInput type=\"file\" hidden [multiple]=\"limits.multiple\" [accept]=\"accept\"\n [disabled]=\"disabled\" (change)=\"onSelect($event)\" [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"componentId + '-limits'\" />\n <i-button icon=\"pi pi-plus\" [outlined]=\"true\" [disabled]=\"disabled\" [ariaLabel]=\"ariaLabel\"\n (clicked)=\"fileInput.click()\">{{ chooseLabel }}</i-button>\n <small [id]=\"componentId + '-limits'\" class=\"i-file-upload__description\">{{ limitsLabel }}</small>\n @if (accept) {\n <small class=\"i-file-upload__description\">Accepted types: {{ accept }}</small>\n }\n </div>\n @if (error) {\n <i-message severity=\"danger\" role=\"alert\">{{ error.message }}</i-message>\n }\n <div class=\"i-file-upload__list\" aria-live=\"polite\" aria-relevant=\"additions removals text\">\n @if (files.length) {\n <strong>{{ files.length }} file{{ files.length === 1 ? '' : 's' }} selected</strong>\n @for (file of files; track $index) {\n <div class=\"i-file-upload__row\">\n <i [class]=\"fileIcon\" aria-hidden=\"true\"></i>\n <span class=\"i-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n <small class=\"i-file-upload__description\">{{ formatSize(file.size) }}</small>\n <i-button icon=\"pi pi-times\" [text]=\"true\" size=\"small\" [ariaLabel]=\"'Remove ' + file.name\"\n [disabled]=\"disabled\" (clicked)=\"remove($index)\" />\n </div>\n }\n }\n </div>\n</div>\n", styles: [".i-file-upload{color:var(--color-text-primary)}.i-file-upload__drop-zone{border-color:var(--surface-border);background:var(--surface-card)}.i-file-upload__drop-zone--active,.i-file-upload__drop-zone:focus-within{border-color:var(--color-primary);background:var(--surface-hover)}.i-file-upload__icon,.i-file-upload__row>i{color:var(--color-primary)}.i-file-upload__description{color:var(--color-text-secondary)}.i-file-upload__row{border-color:var(--surface-border)}.i-file-upload--disabled .i-file-upload__drop-zone{background:var(--color-disabled-background);border-color:var(--color-disabled-border)}:host{display:block}.i-file-upload{display:flex;flex-direction:column;gap:1rem}.i-file-upload__drop-zone{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem 1rem;text-align:center;border-width:2px;border-style:dashed;border-radius:8px;transition:border-color .2s,background .2s}.i-file-upload__icon{font-size:2rem}.i-file-upload--disabled .i-file-upload__drop-zone{opacity:.65}.i-file-upload__list{display:flex;flex-direction:column;gap:.5rem}.i-file-upload__row{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-bottom-width:1px;border-bottom-style:solid}.i-file-upload__row small{white-space:nowrap}.i-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:480px){.i-file-upload__row{flex-wrap:wrap}.i-file-upload__name{flex-basis:calc(100% - 4rem)}}\n"] }]
|
|
3261
3261
|
}], propDecorators: { files: [{
|
|
3262
3262
|
type: Input
|
|
3263
3263
|
}], options: [{
|
|
@@ -3562,11 +3562,11 @@ class ITextarea {
|
|
|
3562
3562
|
return this.currentLength >= this.maxLength;
|
|
3563
3563
|
}
|
|
3564
3564
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITextarea, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3565
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITextarea, isStandalone: true, selector: "i-textarea", inputs: { label: "label", id: "id", fluid: "fluid", forceFloated: "forceFloated", useFloatLabel: "useFloatLabel", placeholder: "placeholder", rows: "rows", maxLength: "maxLength", resizable: "resizable", readonly: "readonly", disabled: "disabled", externalInvalid: "externalInvalid", externalErrorMessage: "externalErrorMessage", backgroundStyle: "backgroundStyle", errorMessages: "errorMessages", charCountWarnAt: "charCountWarnAt" }, ngImport: i0, template: "<div\n class=\"i-textarea-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-textarea--fluid]=\"fluid\"\n [class.i-textarea--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-textarea-container\"\n >\n <div class=\"i-textarea-icon-wrapper\">\n <textarea\n #textareaElement\n [id]=\"id || componentId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [rows]=\"rows\"\n [attr.maxlength]=\"maxLength || null\"\n [value]=\"value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-textarea\"\n [class.readonly]=\"readonly\"\n [class.no-resize]=\"!resizable\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n ></textarea>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-textarea-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <div class=\"i-textarea-footer\">\n @if (showErrors && getErrorMessage()) {\n <span class=\"i-error\">{{ getErrorMessage() }}</span>\n }\n @if (maxLength) {\n <span\n class=\"i-char-count\"\n [class.i-char-count--warn]=\"charCountWarning\"\n [class.i-char-count--over]=\"charCountOver\"\n >\n {{ currentLength }}/{{ maxLength }}\n </span>\n }\n </div>\n</div>\n", styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.i-textarea[disabled]+.i-textarea-label{color:var(--color-text-disabled)}.invalid .i-textarea{border-color:var(--color-danger)}.invalid .i-textarea-label,.invalid .i-error{color:var(--color-danger)}.i-char-count{color:var(--color-text-secondary)}.i-char-count.i-char-count--warn{color:var(--color-warning)}.i-char-count.i-char-count--over{color:var(--color-danger)}.i-textarea-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:1em}.i-textarea-wrapper.i-textarea--fluid{width:100%}.i-textarea-wrapper.i-textarea--no-float{margin-top:0;height:auto}.i-textarea-wrapper .i-textarea-container{display:flex;align-items:flex-start;gap:8px}.i-textarea-wrapper .i-textarea{box-sizing:border-box;width:100%;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease;font-family:inherit;font-size:inherit;line-height:1.5;resize:vertical}.i-textarea-wrapper .i-textarea:focus{outline:none}.i-textarea-wrapper .i-textarea.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent;resize:none}.i-textarea-wrapper .i-textarea.no-resize{resize:none}.i-textarea-wrapper .i-textarea-icon-wrapper{position:relative;width:100%;display:flex}.i-textarea-wrapper .float-label{position:relative;display:flex;align-items:flex-start}.i-textarea-wrapper .float-label .i-textarea{padding:20px 10px 8px}.i-textarea-wrapper .float-label .i-textarea-label{position:absolute;top:16px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none;font-size:1em}.i-textarea-wrapper .float-label .i-textarea:focus+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-textarea-wrapper .normal-input{position:relative}.i-textarea-wrapper .normal-input .i-textarea{padding:8px 12px}.i-textarea-wrapper .i-textarea-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:16px}.i-textarea-wrapper .i-char-count{font-size:.75em}.i-textarea-wrapper .i-error{font-size:.75em;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }] });
|
|
3565
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITextarea, isStandalone: true, selector: "i-textarea", inputs: { label: "label", id: "id", fluid: "fluid", forceFloated: "forceFloated", useFloatLabel: "useFloatLabel", placeholder: "placeholder", rows: "rows", maxLength: "maxLength", resizable: "resizable", readonly: "readonly", disabled: "disabled", externalInvalid: "externalInvalid", externalErrorMessage: "externalErrorMessage", backgroundStyle: "backgroundStyle", errorMessages: "errorMessages", charCountWarnAt: "charCountWarnAt" }, ngImport: i0, template: "<div\n class=\"i-textarea-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-textarea--fluid]=\"fluid\"\n [class.i-textarea--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-textarea-container\"\n >\n <div class=\"i-textarea-icon-wrapper\">\n <textarea\n #textareaElement\n [id]=\"id || componentId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [rows]=\"rows\"\n [attr.maxlength]=\"maxLength || null\"\n [value]=\"value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-textarea\"\n [class.readonly]=\"readonly\"\n [class.no-resize]=\"!resizable\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n ></textarea>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-textarea-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <div class=\"i-textarea-footer\">\n @if (showErrors && getErrorMessage()) {\n <span class=\"i-error\">{{ getErrorMessage() }}</span>\n }\n @if (maxLength) {\n <span\n class=\"i-char-count\"\n [class.i-char-count--warn]=\"charCountWarning\"\n [class.i-char-count--over]=\"charCountOver\"\n >\n {{ currentLength }}/{{ maxLength }}\n </span>\n }\n </div>\n</div>\n", styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.i-textarea[disabled]+.i-textarea-label{color:var(--color-text-disabled)}.invalid .i-textarea{border-color:var(--color-danger)}.invalid .i-textarea-label,.invalid .i-error{color:var(--color-danger)}.i-char-count{color:var(--color-text-secondary)}.i-char-count.i-char-count--warn{color:var(--color-warning)}.i-char-count.i-char-count--over{color:var(--color-danger)}.i-textarea-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:1em}.i-textarea-wrapper.i-textarea--fluid{width:100%}.i-textarea-wrapper.i-textarea--no-float{margin-top:0;height:auto}.i-textarea-wrapper .i-textarea-container{display:flex;align-items:flex-start;gap:8px}.i-textarea-wrapper .i-textarea{box-sizing:border-box;width:100%;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease;font-family:inherit;font-size:inherit;line-height:1.5;resize:vertical}.i-textarea-wrapper .i-textarea:focus{outline:none}.i-textarea-wrapper .i-textarea.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent;resize:none}.i-textarea-wrapper .i-textarea.no-resize{resize:none}.i-textarea-wrapper .i-textarea-icon-wrapper{position:relative;width:100%;display:flex}.i-textarea-wrapper .float-label{position:relative;display:flex;align-items:flex-start}.i-textarea-wrapper .float-label .i-textarea{padding:20px 10px 8px}.i-textarea-wrapper .float-label .i-textarea-label{position:absolute;top:16px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none;font-size:1em}.i-textarea-wrapper .float-label .i-textarea:focus+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-textarea-wrapper .normal-input{position:relative}.i-textarea-wrapper .normal-input .i-textarea{padding:8px 12px}.i-textarea-wrapper .i-textarea-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:16px}.i-textarea-wrapper .i-char-count{font-size:.75em}.i-textarea-wrapper .i-error{font-size:.75em;flex:1}@media(pointer:coarse){.i-textarea-wrapper .i-textarea{font-size:16px;min-height:88px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }] });
|
|
3566
3566
|
}
|
|
3567
3567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITextarea, decorators: [{
|
|
3568
3568
|
type: Component,
|
|
3569
|
-
args: [{ selector: 'i-textarea', standalone: true, imports: [CommonModule, TooltipDirective], template: "<div\n class=\"i-textarea-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-textarea--fluid]=\"fluid\"\n [class.i-textarea--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-textarea-container\"\n >\n <div class=\"i-textarea-icon-wrapper\">\n <textarea\n #textareaElement\n [id]=\"id || componentId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [rows]=\"rows\"\n [attr.maxlength]=\"maxLength || null\"\n [value]=\"value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-textarea\"\n [class.readonly]=\"readonly\"\n [class.no-resize]=\"!resizable\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n ></textarea>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-textarea-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <div class=\"i-textarea-footer\">\n @if (showErrors && getErrorMessage()) {\n <span class=\"i-error\">{{ getErrorMessage() }}</span>\n }\n @if (maxLength) {\n <span\n class=\"i-char-count\"\n [class.i-char-count--warn]=\"charCountWarning\"\n [class.i-char-count--over]=\"charCountOver\"\n >\n {{ currentLength }}/{{ maxLength }}\n </span>\n }\n </div>\n</div>\n", styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.i-textarea[disabled]+.i-textarea-label{color:var(--color-text-disabled)}.invalid .i-textarea{border-color:var(--color-danger)}.invalid .i-textarea-label,.invalid .i-error{color:var(--color-danger)}.i-char-count{color:var(--color-text-secondary)}.i-char-count.i-char-count--warn{color:var(--color-warning)}.i-char-count.i-char-count--over{color:var(--color-danger)}.i-textarea-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:1em}.i-textarea-wrapper.i-textarea--fluid{width:100%}.i-textarea-wrapper.i-textarea--no-float{margin-top:0;height:auto}.i-textarea-wrapper .i-textarea-container{display:flex;align-items:flex-start;gap:8px}.i-textarea-wrapper .i-textarea{box-sizing:border-box;width:100%;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease;font-family:inherit;font-size:inherit;line-height:1.5;resize:vertical}.i-textarea-wrapper .i-textarea:focus{outline:none}.i-textarea-wrapper .i-textarea.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent;resize:none}.i-textarea-wrapper .i-textarea.no-resize{resize:none}.i-textarea-wrapper .i-textarea-icon-wrapper{position:relative;width:100%;display:flex}.i-textarea-wrapper .float-label{position:relative;display:flex;align-items:flex-start}.i-textarea-wrapper .float-label .i-textarea{padding:20px 10px 8px}.i-textarea-wrapper .float-label .i-textarea-label{position:absolute;top:16px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none;font-size:1em}.i-textarea-wrapper .float-label .i-textarea:focus+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-textarea-wrapper .normal-input{position:relative}.i-textarea-wrapper .normal-input .i-textarea{padding:8px 12px}.i-textarea-wrapper .i-textarea-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:16px}.i-textarea-wrapper .i-char-count{font-size:.75em}.i-textarea-wrapper .i-error{font-size:.75em;flex:1}\n"] }]
|
|
3569
|
+
args: [{ selector: 'i-textarea', standalone: true, imports: [CommonModule, TooltipDirective], template: "<div\n class=\"i-textarea-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-textarea--fluid]=\"fluid\"\n [class.i-textarea--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-textarea-container\"\n >\n <div class=\"i-textarea-icon-wrapper\">\n <textarea\n #textareaElement\n [id]=\"id || componentId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [rows]=\"rows\"\n [attr.maxlength]=\"maxLength || null\"\n [value]=\"value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-textarea\"\n [class.readonly]=\"readonly\"\n [class.no-resize]=\"!resizable\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n ></textarea>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-textarea-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <div class=\"i-textarea-footer\">\n @if (showErrors && getErrorMessage()) {\n <span class=\"i-error\">{{ getErrorMessage() }}</span>\n }\n @if (maxLength) {\n <span\n class=\"i-char-count\"\n [class.i-char-count--warn]=\"charCountWarning\"\n [class.i-char-count--over]=\"charCountOver\"\n >\n {{ currentLength }}/{{ maxLength }}\n </span>\n }\n </div>\n</div>\n", styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.i-textarea[disabled]+.i-textarea-label{color:var(--color-text-disabled)}.invalid .i-textarea{border-color:var(--color-danger)}.invalid .i-textarea-label,.invalid .i-error{color:var(--color-danger)}.i-char-count{color:var(--color-text-secondary)}.i-char-count.i-char-count--warn{color:var(--color-warning)}.i-char-count.i-char-count--over{color:var(--color-danger)}.i-textarea-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:1.5em;font-size:1em}.i-textarea-wrapper.i-textarea--fluid{width:100%}.i-textarea-wrapper.i-textarea--no-float{margin-top:0;height:auto}.i-textarea-wrapper .i-textarea-container{display:flex;align-items:flex-start;gap:8px}.i-textarea-wrapper .i-textarea{box-sizing:border-box;width:100%;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease;font-family:inherit;font-size:inherit;line-height:1.5;resize:vertical}.i-textarea-wrapper .i-textarea:focus{outline:none}.i-textarea-wrapper .i-textarea.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent;resize:none}.i-textarea-wrapper .i-textarea.no-resize{resize:none}.i-textarea-wrapper .i-textarea-icon-wrapper{position:relative;width:100%;display:flex}.i-textarea-wrapper .float-label{position:relative;display:flex;align-items:flex-start}.i-textarea-wrapper .float-label .i-textarea{padding:20px 10px 8px}.i-textarea-wrapper .float-label .i-textarea-label{position:absolute;top:16px;left:12px;padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;pointer-events:none;font-size:1em}.i-textarea-wrapper .float-label .i-textarea:focus+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea-label.floated{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-textarea-wrapper .normal-input{position:relative}.i-textarea-wrapper .normal-input .i-textarea{padding:8px 12px}.i-textarea-wrapper .i-textarea-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:16px}.i-textarea-wrapper .i-char-count{font-size:.75em}.i-textarea-wrapper .i-error{font-size:.75em;flex:1}@media(pointer:coarse){.i-textarea-wrapper .i-textarea{font-size:16px;min-height:88px}}\n"] }]
|
|
3570
3570
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
3571
3571
|
type: Optional
|
|
3572
3572
|
}, {
|
|
@@ -3942,11 +3942,11 @@ class TopbarComponent {
|
|
|
3942
3942
|
return this.config.logoLight || this.config.logoDark || '';
|
|
3943
3943
|
}
|
|
3944
3944
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TopbarComponent, deps: [{ token: LayoutService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3945
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TopbarComponent, isStandalone: true, selector: "i-topbar", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"layout-topbar\">\n <a class=\"layout-topbar-logo\" routerLink=\"\">\n @if (logo) {\n <img [src]=\"logo\" [alt]=\"config.websiteName + ' logo'\" />\n }\n <span>{{ config.websiteName }}</span>\n </a>\n <i-button\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"'pi pi-bars'\"\n (clicked)=\"layoutService.toggleSidebar()\"\n ></i-button>\n <i-button\n class=\"layout-topbar-menu-button\"\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (clicked)=\"layoutService.showProfileSidebar()\"\n ></i-button>\n\n <div\n class=\"layout-topbar-menu\"\n [ngClass]=\"{\n 'layout-topbar-menu-mobile-active':\n layoutService.state().profileSidebarVisible,\n }\"\n >\n <ng-content />\n @if (config.showThemeToggle !== false) {\n <i-button\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"isDark ? 'pi pi-moon' : 'pi pi-sun'\"\n (clicked)=\"changeTheme()\"\n />\n }\n </div>\n</div>\n", styles: [".layout-topbar{position:relative;height:5rem;z-index:997;width:100%;padding:0 2rem;background-color:var(--surface-card);transition:left .2s;display:flex;align-items:center;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.layout-topbar .layout-topbar-logo{display:flex;align-items:center;color:var(--surface-900);font-size:18px;font-weight:500;margin-right:50px;border-radius:12px;text-decoration:none;font-family:Montserrat,sans-serif}.layout-topbar .layout-topbar-logo img{height:2.5rem;margin-right:.5rem}.layout-topbar .layout-topbar-logo:focus{outline:0 none;outline-offset:0;transition:box-shadow .2s;box-shadow:inset var(--focus-ring)}.layout-topbar .layout-menu-button{margin-left:2rem}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-button i{font-size:1.25rem}.layout-topbar .layout-topbar-menu{gap:.5rem;margin:0 0 0 auto;padding:0;list-style:none;display:flex}@media(max-width:991px){.layout-topbar{justify-content:space-between}.layout-topbar .layout-topbar-logo{width:auto;order:2}.layout-topbar .layout-menu-button{margin-left:0;order:1}.layout-topbar .layout-topbar-menu-button{display:inline-flex;margin-left:0;order:3}.layout-topbar .layout-topbar-menu{margin-left:0;position:absolute;flex-direction:column;background-color:var(--surface-overlay);box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014;border-radius:12px;padding:1rem;right:2rem;top:5rem;display:none;-webkit-animation:scalein .15s linear;animation:scalein .15s linear;z-index:1000}.layout-topbar .layout-topbar-menu.layout-topbar-menu-mobile-active{display:block}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
3945
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TopbarComponent, isStandalone: true, selector: "i-topbar", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"layout-topbar\">\n <a class=\"layout-topbar-logo\" routerLink=\"\">\n @if (logo) {\n <img [src]=\"logo\" [alt]=\"config.websiteName + ' logo'\" />\n }\n <span>{{ config.websiteName }}</span>\n </a>\n <i-button\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"'pi pi-bars'\"\n (clicked)=\"layoutService.toggleSidebar()\"\n ></i-button>\n <i-button\n class=\"layout-topbar-menu-button\"\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (clicked)=\"layoutService.showProfileSidebar()\"\n ></i-button>\n\n <div\n class=\"layout-topbar-menu\"\n [ngClass]=\"{\n 'layout-topbar-menu-mobile-active':\n layoutService.state().profileSidebarVisible,\n }\"\n >\n <ng-content />\n @if (config.showThemeToggle !== false) {\n <i-button\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"isDark ? 'pi pi-moon' : 'pi pi-sun'\"\n (clicked)=\"changeTheme()\"\n />\n }\n </div>\n</div>\n", styles: [".layout-topbar{position:relative;height:5rem;z-index:997;width:100%;padding:0 2rem;background-color:var(--surface-card);transition:left .2s;display:flex;align-items:center;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.layout-topbar .layout-topbar-logo{display:flex;align-items:center;color:var(--surface-900);font-size:18px;font-weight:500;margin-right:50px;border-radius:12px;text-decoration:none;font-family:Montserrat,sans-serif}.layout-topbar .layout-topbar-logo img{height:2.5rem;margin-right:.5rem}.layout-topbar .layout-topbar-logo:focus{outline:0 none;outline-offset:0;transition:box-shadow .2s;box-shadow:inset var(--focus-ring)}.layout-topbar .layout-menu-button{margin-left:2rem}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-button i{font-size:1.25rem}.layout-topbar .layout-topbar-menu{gap:.5rem;margin:0 0 0 auto;padding:0;list-style:none;display:flex}@media(max-width:991px){.layout-topbar{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;background-color:var(--surface-overlay);box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014;border-radius:12px;padding:1rem;right:2rem;top:5rem;display:none;-webkit-animation:scalein .15s linear;animation:scalein .15s linear;z-index:1000}.layout-topbar .layout-topbar-menu.layout-topbar-menu-mobile-active{display:block}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
3946
3946
|
}
|
|
3947
3947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
3948
3948
|
type: Component,
|
|
3949
|
-
args: [{ selector: 'i-topbar', imports: [RouterLink, NgClass, IButton], template: "<div class=\"layout-topbar\">\n <a class=\"layout-topbar-logo\" routerLink=\"\">\n @if (logo) {\n <img [src]=\"logo\" [alt]=\"config.websiteName + ' logo'\" />\n }\n <span>{{ config.websiteName }}</span>\n </a>\n <i-button\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"'pi pi-bars'\"\n (clicked)=\"layoutService.toggleSidebar()\"\n ></i-button>\n <i-button\n class=\"layout-topbar-menu-button\"\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (clicked)=\"layoutService.showProfileSidebar()\"\n ></i-button>\n\n <div\n class=\"layout-topbar-menu\"\n [ngClass]=\"{\n 'layout-topbar-menu-mobile-active':\n layoutService.state().profileSidebarVisible,\n }\"\n >\n <ng-content />\n @if (config.showThemeToggle !== false) {\n <i-button\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"isDark ? 'pi pi-moon' : 'pi pi-sun'\"\n (clicked)=\"changeTheme()\"\n />\n }\n </div>\n</div>\n", styles: [".layout-topbar{position:relative;height:5rem;z-index:997;width:100%;padding:0 2rem;background-color:var(--surface-card);transition:left .2s;display:flex;align-items:center;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.layout-topbar .layout-topbar-logo{display:flex;align-items:center;color:var(--surface-900);font-size:18px;font-weight:500;margin-right:50px;border-radius:12px;text-decoration:none;font-family:Montserrat,sans-serif}.layout-topbar .layout-topbar-logo img{height:2.5rem;margin-right:.5rem}.layout-topbar .layout-topbar-logo:focus{outline:0 none;outline-offset:0;transition:box-shadow .2s;box-shadow:inset var(--focus-ring)}.layout-topbar .layout-menu-button{margin-left:2rem}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-button i{font-size:1.25rem}.layout-topbar .layout-topbar-menu{gap:.5rem;margin:0 0 0 auto;padding:0;list-style:none;display:flex}@media(max-width:991px){.layout-topbar{justify-content:space-between}.layout-topbar .layout-topbar-logo{width:auto;order:2}.layout-topbar .layout-menu-button{margin-left:0;order:1}.layout-topbar .layout-topbar-menu-button{display:inline-flex;margin-left:0;order:3}.layout-topbar .layout-topbar-menu{margin-left:0;position:absolute;flex-direction:column;background-color:var(--surface-overlay);box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014;border-radius:12px;padding:1rem;right:2rem;top:5rem;display:none;-webkit-animation:scalein .15s linear;animation:scalein .15s linear;z-index:1000}.layout-topbar .layout-topbar-menu.layout-topbar-menu-mobile-active{display:block}}\n"] }]
|
|
3949
|
+
args: [{ selector: 'i-topbar', imports: [RouterLink, NgClass, IButton], template: "<div class=\"layout-topbar\">\n <a class=\"layout-topbar-logo\" routerLink=\"\">\n @if (logo) {\n <img [src]=\"logo\" [alt]=\"config.websiteName + ' logo'\" />\n }\n <span>{{ config.websiteName }}</span>\n </a>\n <i-button\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"'pi pi-bars'\"\n (clicked)=\"layoutService.toggleSidebar()\"\n ></i-button>\n <i-button\n class=\"layout-topbar-menu-button\"\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (clicked)=\"layoutService.showProfileSidebar()\"\n ></i-button>\n\n <div\n class=\"layout-topbar-menu\"\n [ngClass]=\"{\n 'layout-topbar-menu-mobile-active':\n layoutService.state().profileSidebarVisible,\n }\"\n >\n <ng-content />\n @if (config.showThemeToggle !== false) {\n <i-button\n [severity]=\"'contrast'\"\n size=\"medium\"\n [text]=\"true\"\n [icon]=\"isDark ? 'pi pi-moon' : 'pi pi-sun'\"\n (clicked)=\"changeTheme()\"\n />\n }\n </div>\n</div>\n", styles: [".layout-topbar{position:relative;height:5rem;z-index:997;width:100%;padding:0 2rem;background-color:var(--surface-card);transition:left .2s;display:flex;align-items:center;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.layout-topbar .layout-topbar-logo{display:flex;align-items:center;color:var(--surface-900);font-size:18px;font-weight:500;margin-right:50px;border-radius:12px;text-decoration:none;font-family:Montserrat,sans-serif}.layout-topbar .layout-topbar-logo img{height:2.5rem;margin-right:.5rem}.layout-topbar .layout-topbar-logo:focus{outline:0 none;outline-offset:0;transition:box-shadow .2s;box-shadow:inset var(--focus-ring)}.layout-topbar .layout-menu-button{margin-left:2rem}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-button i{font-size:1.25rem}.layout-topbar .layout-topbar-menu{gap:.5rem;margin:0 0 0 auto;padding:0;list-style:none;display:flex}@media(max-width:991px){.layout-topbar{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;background-color:var(--surface-overlay);box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014;border-radius:12px;padding:1rem;right:2rem;top:5rem;display:none;-webkit-animation:scalein .15s linear;animation:scalein .15s linear;z-index:1000}.layout-topbar .layout-topbar-menu.layout-topbar-menu-mobile-active{display:block}}\n"] }]
|
|
3950
3950
|
}], ctorParameters: () => [{ type: LayoutService }], propDecorators: { config: [{
|
|
3951
3951
|
type: Input
|
|
3952
3952
|
}] } });
|
|
@@ -4139,6 +4139,7 @@ class LayoutComponent {
|
|
|
4139
4139
|
Math = Math;
|
|
4140
4140
|
routerSubscription;
|
|
4141
4141
|
touchStartY = 0;
|
|
4142
|
+
touchStartX = 0;
|
|
4142
4143
|
touchCurrentY = 0;
|
|
4143
4144
|
isPulling = false;
|
|
4144
4145
|
pullDistance = signal(0, ...(ngDevMode ? [{ debugName: "pullDistance" }] : /* istanbul ignore next */ []));
|
|
@@ -4203,6 +4204,8 @@ class LayoutComponent {
|
|
|
4203
4204
|
this.isPullToRefreshInitialized = true;
|
|
4204
4205
|
}
|
|
4205
4206
|
handleTouchStart(event) {
|
|
4207
|
+
this.isPulling = false;
|
|
4208
|
+
this.pullDistance.set(0);
|
|
4206
4209
|
const state = this.layoutService.state();
|
|
4207
4210
|
if (!state.isMobileViewport || event.touches.length === 0) {
|
|
4208
4211
|
return;
|
|
@@ -4211,6 +4214,18 @@ class LayoutComponent {
|
|
|
4211
4214
|
if (!container || container.scrollTop > 0) {
|
|
4212
4215
|
return;
|
|
4213
4216
|
}
|
|
4217
|
+
// Let controls and nested scroll areas own their gestures.
|
|
4218
|
+
let target = event.target instanceof Element ? event.target : null;
|
|
4219
|
+
if (target?.closest('input, textarea, select, button, [role="slider"], [contenteditable="true"]'))
|
|
4220
|
+
return;
|
|
4221
|
+
while (target && target !== container) {
|
|
4222
|
+
const style = window.getComputedStyle(target);
|
|
4223
|
+
if ((target.scrollHeight > target.clientHeight && /auto|scroll/.test(style.overflowY)) ||
|
|
4224
|
+
(target.scrollWidth > target.clientWidth && /auto|scroll/.test(style.overflowX)))
|
|
4225
|
+
return;
|
|
4226
|
+
target = target.parentElement;
|
|
4227
|
+
}
|
|
4228
|
+
this.touchStartX = event.touches[0].clientX;
|
|
4214
4229
|
this.touchStartY = event.touches[0].clientY;
|
|
4215
4230
|
this.isPulling = true;
|
|
4216
4231
|
}
|
|
@@ -4225,6 +4240,11 @@ class LayoutComponent {
|
|
|
4225
4240
|
return;
|
|
4226
4241
|
}
|
|
4227
4242
|
this.touchCurrentY = event.touches[0].clientY;
|
|
4243
|
+
if (Math.abs(event.touches[0].clientX - this.touchStartX) > Math.abs(this.touchCurrentY - this.touchStartY)) {
|
|
4244
|
+
this.isPulling = false;
|
|
4245
|
+
this.pullDistance.set(0);
|
|
4246
|
+
return;
|
|
4247
|
+
}
|
|
4228
4248
|
const pullDistance = Math.max(0, Math.min(this.touchCurrentY - this.touchStartY, this.MAX_PULL_DISTANCE));
|
|
4229
4249
|
if (pullDistance > 0) {
|
|
4230
4250
|
event.preventDefault();
|
|
@@ -4298,11 +4318,11 @@ class LayoutComponent {
|
|
|
4298
4318
|
}
|
|
4299
4319
|
}
|
|
4300
4320
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: LayoutComponent, deps: [{ token: LayoutService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
4301
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: LayoutComponent, isStandalone: true, selector: "i-layout", inputs: { config: "config", menuModel: "menuModel" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<div class=\"layout\">\n <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n <i-topbar [config]=\"config\">\n <ng-content select=\"[topbarActions]\" />\n </i-topbar>\n <div class=\"layout-body\">\n <div\n class=\"layout-sidebar-container\"\n [ngClass]=\"{\n 'sidebar-open': layoutService.state().isSidebarOpen,\n 'sidebar-closed': !layoutService.state().isSidebarOpen,\n }\"\n >\n <i-sidebar [menuModel]=\"menuModel\" />\n </div>\n <div class=\"layout-main-container\" #mainContainer>\n @if (\n config.enablePullToRefresh && layoutService.state().isMobileViewport\n ) {\n <div\n class=\"pull-to-refresh-indicator\"\n [style.transform]=\"\n 'translateY(' +\n Math.max(-INDICATOR_OFFSET, pullDistance() - INDICATOR_OFFSET) +\n '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", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width:300px;height:100%;overflow-y:auto;transition:transform .3s ease,opacity .3s ease;opacity:1}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar{width: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)}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-open{transform:translate(0);opacity:1;pointer-events:auto}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-closed{transform:translate(-100%);opacity:0;pointer-events:none}.layout .layout-wrapper .layout-body .layout-main-container{flex:1 1 auto;min-width:0;overflow-y:auto;padding:2rem;transition:margin-left .3s ease;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))}.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:.5rem;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:1.5rem;color:var(--primary-color);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:.875rem;color:var(--text-color-secondary);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:5rem;height:calc(100vh - 5rem);z-index:999;background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{position:fixed;left:0;top:0;height:100vh;z-index:999;transition:transform .2s ease;background:var(--surface-overlay);overflow-y:auto}.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%;padding:
|
|
4321
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: LayoutComponent, isStandalone: true, selector: "i-layout", inputs: { config: "config", menuModel: "menuModel" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<div class=\"layout\">\n <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n <i-topbar [config]=\"config\">\n <ng-content select=\"[topbarActions]\" />\n </i-topbar>\n <div class=\"layout-body\">\n <div\n class=\"layout-sidebar-container\"\n [ngClass]=\"{\n 'sidebar-open': layoutService.state().isSidebarOpen,\n 'sidebar-closed': !layoutService.state().isSidebarOpen,\n }\"\n >\n <i-sidebar [menuModel]=\"menuModel\" />\n </div>\n <div class=\"layout-main-container\" #mainContainer>\n @if (\n config.enablePullToRefresh && layoutService.state().isMobileViewport\n ) {\n <div\n class=\"pull-to-refresh-indicator\"\n [style.transform]=\"\n 'translateY(' +\n Math.max(-INDICATOR_OFFSET, pullDistance() - INDICATOR_OFFSET) +\n '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", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width: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)}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-open{transform:translate(0);opacity:1;pointer-events:auto}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-closed{transform:translate(-100%);opacity:0;pointer-events:none}.layout .layout-wrapper .layout-body .layout-main-container{flex:1 1 auto;min-width:0;overflow-y:auto;padding:2rem;transition:margin-left .3s ease;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))}.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:.5rem;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:1.5rem;color:var(--primary-color);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:.875rem;color:var(--text-color-secondary);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:5rem;height:calc(100vh - 5rem);height:calc(100dvh - 5rem);z-index:999;background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@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;background:var(--surface-overlay);overflow-y:auto}.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%;padding:16px 12px;padding-bottom:max(16px,env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TopbarComponent, selector: "i-topbar", inputs: ["config"] }, { kind: "component", type: SidebarComponent, selector: "i-sidebar", inputs: ["menuModel"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
|
|
4302
4322
|
}
|
|
4303
4323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
4304
4324
|
type: Component,
|
|
4305
|
-
args: [{ selector: 'i-layout', imports: [NgClass, TopbarComponent, SidebarComponent, RouterOutlet], template: "<div class=\"layout\">\n <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n <i-topbar [config]=\"config\">\n <ng-content select=\"[topbarActions]\" />\n </i-topbar>\n <div class=\"layout-body\">\n <div\n class=\"layout-sidebar-container\"\n [ngClass]=\"{\n 'sidebar-open': layoutService.state().isSidebarOpen,\n 'sidebar-closed': !layoutService.state().isSidebarOpen,\n }\"\n >\n <i-sidebar [menuModel]=\"menuModel\" />\n </div>\n <div class=\"layout-main-container\" #mainContainer>\n @if (\n config.enablePullToRefresh && layoutService.state().isMobileViewport\n ) {\n <div\n class=\"pull-to-refresh-indicator\"\n [style.transform]=\"\n 'translateY(' +\n Math.max(-INDICATOR_OFFSET, pullDistance() - INDICATOR_OFFSET) +\n '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", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width:300px;height:100%;overflow-y:auto;transition:transform .3s ease,opacity .3s ease;opacity:1}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar{width: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)}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-open{transform:translate(0);opacity:1;pointer-events:auto}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-closed{transform:translate(-100%);opacity:0;pointer-events:none}.layout .layout-wrapper .layout-body .layout-main-container{flex:1 1 auto;min-width:0;overflow-y:auto;padding:2rem;transition:margin-left .3s ease;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))}.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:.5rem;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:1.5rem;color:var(--primary-color);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:.875rem;color:var(--text-color-secondary);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:5rem;height:calc(100vh - 5rem);z-index:999;background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{position:fixed;left:0;top:0;height:100vh;z-index:999;transition:transform .2s ease;background:var(--surface-overlay);overflow-y:auto}.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%;padding:
|
|
4325
|
+
args: [{ selector: 'i-layout', imports: [NgClass, TopbarComponent, SidebarComponent, RouterOutlet], template: "<div class=\"layout\">\n <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n <i-topbar [config]=\"config\">\n <ng-content select=\"[topbarActions]\" />\n </i-topbar>\n <div class=\"layout-body\">\n <div\n class=\"layout-sidebar-container\"\n [ngClass]=\"{\n 'sidebar-open': layoutService.state().isSidebarOpen,\n 'sidebar-closed': !layoutService.state().isSidebarOpen,\n }\"\n >\n <i-sidebar [menuModel]=\"menuModel\" />\n </div>\n <div class=\"layout-main-container\" #mainContainer>\n @if (\n config.enablePullToRefresh && layoutService.state().isMobileViewport\n ) {\n <div\n class=\"pull-to-refresh-indicator\"\n [style.transform]=\"\n 'translateY(' +\n Math.max(-INDICATOR_OFFSET, pullDistance() - INDICATOR_OFFSET) +\n '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", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width: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)}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-open{transform:translate(0);opacity:1;pointer-events:auto}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-closed{transform:translate(-100%);opacity:0;pointer-events:none}.layout .layout-wrapper .layout-body .layout-main-container{flex:1 1 auto;min-width:0;overflow-y:auto;padding:2rem;transition:margin-left .3s ease;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))}.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:.5rem;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:1.5rem;color:var(--primary-color);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:.875rem;color:var(--text-color-secondary);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:5rem;height:calc(100vh - 5rem);height:calc(100dvh - 5rem);z-index:999;background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@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;background:var(--surface-overlay);overflow-y:auto}.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%;padding:16px 12px;padding-bottom:max(16px,env(safe-area-inset-bottom))}}\n"] }]
|
|
4306
4326
|
}], ctorParameters: () => [{ type: LayoutService }, { type: i2.Router }], propDecorators: { config: [{
|
|
4307
4327
|
type: Input
|
|
4308
4328
|
}], menuModel: [{
|
|
@@ -4743,7 +4763,7 @@ class IListbox {
|
|
|
4743
4763
|
useExisting: forwardRef(() => IListbox),
|
|
4744
4764
|
multi: true,
|
|
4745
4765
|
},
|
|
4746
|
-
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"i-listbox-wrapper\"\n [class.i-listbox--fluid]=\"fluid\"\n [class.i-listbox--disabled]=\"disabled\"\n [class.i-listbox--invalid]=\"showErrors\"\n [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\u2026\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-listbox-options\">\n @for (option of filteredOptions(); track getOptionValue(option)) {\n <div\n class=\"i-listbox-option\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n (click)=\"toggleOption(option)\"\n >\n <!-- Checkbox only in multiple mode -->\n @if (multiple) {\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-listbox-checkbox\"\n ></i-checkbox>\n }\n\n <!-- Left icon -->\n @if (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\n class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n ></i>\n }\n </div>\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", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-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:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background: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:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);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;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.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{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);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}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
4766
|
+
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"i-listbox-wrapper\"\n [class.i-listbox--fluid]=\"fluid\"\n [class.i-listbox--disabled]=\"disabled\"\n [class.i-listbox--invalid]=\"showErrors\"\n [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\u2026\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-listbox-options\">\n @for (option of filteredOptions(); track getOptionValue(option)) {\n <div\n class=\"i-listbox-option\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n (click)=\"toggleOption(option)\"\n >\n <!-- Checkbox only in multiple mode -->\n @if (multiple) {\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-listbox-checkbox\"\n ></i-checkbox>\n }\n\n <!-- Left icon -->\n @if (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\n class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n ></i>\n }\n </div>\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", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-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:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background: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:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);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;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.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{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);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)}}@media(pointer:coarse){.i-listbox-wrapper .i-listbox-options .i-listbox-option{min-height:44px;box-sizing:border-box}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
4747
4767
|
}
|
|
4748
4768
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IListbox, decorators: [{
|
|
4749
4769
|
type: Component,
|
|
@@ -4753,7 +4773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
4753
4773
|
useExisting: forwardRef(() => IListbox),
|
|
4754
4774
|
multi: true,
|
|
4755
4775
|
},
|
|
4756
|
-
], 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\u2026\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-listbox-options\">\n @for (option of filteredOptions(); track getOptionValue(option)) {\n <div\n class=\"i-listbox-option\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n (click)=\"toggleOption(option)\"\n >\n <!-- Checkbox only in multiple mode -->\n @if (multiple) {\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-listbox-checkbox\"\n ></i-checkbox>\n }\n\n <!-- Left icon -->\n @if (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\n class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n ></i>\n }\n </div>\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", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-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:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background: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:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);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;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.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{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);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}}\n"] }]
|
|
4776
|
+
], 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\u2026\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-listbox-options\">\n @for (option of filteredOptions(); track getOptionValue(option)) {\n <div\n class=\"i-listbox-option\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n (click)=\"toggleOption(option)\"\n >\n <!-- Checkbox only in multiple mode -->\n @if (multiple) {\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-listbox-checkbox\"\n ></i-checkbox>\n }\n\n <!-- Left icon -->\n @if (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\n class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n ></i>\n }\n </div>\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", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-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:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background: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:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);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;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.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{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);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)}}@media(pointer:coarse){.i-listbox-wrapper .i-listbox-options .i-listbox-option{min-height:44px;box-sizing:border-box}}\n"] }]
|
|
4757
4777
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { title: [{
|
|
4758
4778
|
type: Input
|
|
4759
4779
|
}], label: [{
|
|
@@ -5065,7 +5085,7 @@ class IRadioButton {
|
|
|
5065
5085
|
useExisting: forwardRef(() => IRadioButton),
|
|
5066
5086
|
multi: true,
|
|
5067
5087
|
},
|
|
5068
|
-
], ngImport: i0, template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\n>\n <div\n class=\"i-radio-button\"\n [class.i-radio-button--checked]=\"checked\"\n (click)=\"select()\"\n [attr.id]=\"effectiveInputId\"\n role=\"radio\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n >\n <span class=\"i-radio-button-icon\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"effectiveInputId + '-label'\"\n class=\"i-radio-button-label\"\n (click)=\"select()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-radio-button-wrapper.i-radio-button--fluid{display:flex;width:100%}.i-radio-button-wrapper.i-radio-button--disabled{opacity:.6;cursor:not-allowed}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button,.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{cursor:not-allowed;pointer-events:none}.i-radio-button-wrapper .i-radio-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-radio-button-wrapper .i-radio-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-radio-button-wrapper .i-radio-button .i-radio-button-icon{width:10px;height:10px;border-radius:50%;transition:all .15s ease;transform:scale(0)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{transform:scale(1)}.i-radio-button-wrapper .i-radio-button-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] });
|
|
5088
|
+
], ngImport: i0, template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\n>\n <div\n class=\"i-radio-button\"\n [class.i-radio-button--checked]=\"checked\"\n (click)=\"select()\"\n [attr.id]=\"effectiveInputId\"\n role=\"radio\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n >\n <span class=\"i-radio-button-icon\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"effectiveInputId + '-label'\"\n class=\"i-radio-button-label\"\n (click)=\"select()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-radio-button-wrapper.i-radio-button--fluid{display:flex;width:100%}.i-radio-button-wrapper.i-radio-button--disabled{opacity:.6;cursor:not-allowed}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button,.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{cursor:not-allowed;pointer-events:none}.i-radio-button-wrapper .i-radio-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-radio-button-wrapper .i-radio-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-radio-button-wrapper .i-radio-button .i-radio-button-icon{width:10px;height:10px;border-radius:50%;transition:all .15s ease;transform:scale(0)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{transform:scale(1)}.i-radio-button-wrapper .i-radio-button-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}@media(pointer:coarse){.i-radio-button-wrapper{min-height:44px}.i-radio-button-wrapper .i-radio-button{position:relative;flex-shrink:0}.i-radio-button-wrapper .i-radio-button:after{content:\"\";position:absolute;inset:-13px}.i-radio-button-label{display:inline-flex;align-items:center;min-height:44px}}\n"] });
|
|
5069
5089
|
}
|
|
5070
5090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IRadioButton, decorators: [{
|
|
5071
5091
|
type: Component,
|
|
@@ -5075,7 +5095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
5075
5095
|
useExisting: forwardRef(() => IRadioButton),
|
|
5076
5096
|
multi: true,
|
|
5077
5097
|
},
|
|
5078
|
-
], template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\n>\n <div\n class=\"i-radio-button\"\n [class.i-radio-button--checked]=\"checked\"\n (click)=\"select()\"\n [attr.id]=\"effectiveInputId\"\n role=\"radio\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n >\n <span class=\"i-radio-button-icon\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"effectiveInputId + '-label'\"\n class=\"i-radio-button-label\"\n (click)=\"select()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-radio-button-wrapper.i-radio-button--fluid{display:flex;width:100%}.i-radio-button-wrapper.i-radio-button--disabled{opacity:.6;cursor:not-allowed}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button,.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{cursor:not-allowed;pointer-events:none}.i-radio-button-wrapper .i-radio-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-radio-button-wrapper .i-radio-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-radio-button-wrapper .i-radio-button .i-radio-button-icon{width:10px;height:10px;border-radius:50%;transition:all .15s ease;transform:scale(0)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{transform:scale(1)}.i-radio-button-wrapper .i-radio-button-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] }]
|
|
5098
|
+
], template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\n>\n <div\n class=\"i-radio-button\"\n [class.i-radio-button--checked]=\"checked\"\n (click)=\"select()\"\n [attr.id]=\"effectiveInputId\"\n role=\"radio\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n >\n <span class=\"i-radio-button-icon\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"effectiveInputId + '-label'\"\n class=\"i-radio-button-label\"\n (click)=\"select()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-radio-button-wrapper.i-radio-button--fluid{display:flex;width:100%}.i-radio-button-wrapper.i-radio-button--disabled{opacity:.6;cursor:not-allowed}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button,.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{cursor:not-allowed;pointer-events:none}.i-radio-button-wrapper .i-radio-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-radio-button-wrapper .i-radio-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-radio-button-wrapper .i-radio-button .i-radio-button-icon{width:10px;height:10px;border-radius:50%;transition:all .15s ease;transform:scale(0)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{transform:scale(1)}.i-radio-button-wrapper .i-radio-button-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}@media(pointer:coarse){.i-radio-button-wrapper{min-height:44px}.i-radio-button-wrapper .i-radio-button{position:relative;flex-shrink:0}.i-radio-button-wrapper .i-radio-button:after{content:\"\";position:absolute;inset:-13px}.i-radio-button-label{display:inline-flex;align-items:center;min-height:44px}}\n"] }]
|
|
5079
5099
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }], propDecorators: { label: [{
|
|
5080
5100
|
type: Input
|
|
5081
5101
|
}], value: [{
|
|
@@ -5213,6 +5233,21 @@ class IMultiSelect {
|
|
|
5213
5233
|
* @default true
|
|
5214
5234
|
*/
|
|
5215
5235
|
readonly = true;
|
|
5236
|
+
/** Use the platform multiple-option picker on small touch screens. */
|
|
5237
|
+
nativeOnMobile = true;
|
|
5238
|
+
onNativeChange(event) {
|
|
5239
|
+
if (this.disabled)
|
|
5240
|
+
return;
|
|
5241
|
+
const options = this.options() || [];
|
|
5242
|
+
this.value = Array.from(event.target.selectedOptions)
|
|
5243
|
+
.map(option => this.getOptionValue(options[Number(option.value)]));
|
|
5244
|
+
this.onChange.emit(this.value);
|
|
5245
|
+
this.onChangeCallback(this.value);
|
|
5246
|
+
this.onTouchedCallback();
|
|
5247
|
+
}
|
|
5248
|
+
touch() {
|
|
5249
|
+
this.onTouchedCallback();
|
|
5250
|
+
}
|
|
5216
5251
|
/**
|
|
5217
5252
|
* Event emitted when selection changes
|
|
5218
5253
|
*/
|
|
@@ -5327,6 +5362,8 @@ class IMultiSelect {
|
|
|
5327
5362
|
* @internal
|
|
5328
5363
|
*/
|
|
5329
5364
|
toggleDropdown() {
|
|
5365
|
+
if (this.disabled)
|
|
5366
|
+
return;
|
|
5330
5367
|
this.isOpen = !this.isOpen;
|
|
5331
5368
|
if (this.isOpen) {
|
|
5332
5369
|
this.filterValue.set('');
|
|
@@ -5344,6 +5381,8 @@ class IMultiSelect {
|
|
|
5344
5381
|
* @internal
|
|
5345
5382
|
*/
|
|
5346
5383
|
toggleOption(option) {
|
|
5384
|
+
if (this.disabled)
|
|
5385
|
+
return;
|
|
5347
5386
|
const currentValues = [...this.value];
|
|
5348
5387
|
const optionValue = this.getOptionValue(option);
|
|
5349
5388
|
const index = currentValues.findIndex((val) => JSON.stringify(val) === JSON.stringify(optionValue));
|
|
@@ -5371,6 +5410,8 @@ class IMultiSelect {
|
|
|
5371
5410
|
* @internal
|
|
5372
5411
|
*/
|
|
5373
5412
|
clearSelection() {
|
|
5413
|
+
if (this.disabled)
|
|
5414
|
+
return;
|
|
5374
5415
|
this.value = [];
|
|
5375
5416
|
this.onClear.emit();
|
|
5376
5417
|
this.onChangeCallback([]);
|
|
@@ -5494,6 +5535,8 @@ class IMultiSelect {
|
|
|
5494
5535
|
*/
|
|
5495
5536
|
setDisabledState(isDisabled) {
|
|
5496
5537
|
this.disabled = isDisabled;
|
|
5538
|
+
if (isDisabled)
|
|
5539
|
+
this.isOpen = false;
|
|
5497
5540
|
}
|
|
5498
5541
|
/**
|
|
5499
5542
|
* Gets the form control instance
|
|
@@ -5548,13 +5591,13 @@ class IMultiSelect {
|
|
|
5548
5591
|
}
|
|
5549
5592
|
}
|
|
5550
5593
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IMultiSelect, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
5551
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IMultiSelect, isStandalone: true, selector: "i-multi-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: false, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClear: "onClear" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
5594
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IMultiSelect, isStandalone: true, selector: "i-multi-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: false, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, nativeOnMobile: { classPropertyName: "nativeOnMobile", publicName: "nativeOnMobile", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClear: "onClear" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
5552
5595
|
{
|
|
5553
5596
|
provide: NG_VALUE_ACCESSOR,
|
|
5554
5597
|
useExisting: forwardRef(() => IMultiSelect),
|
|
5555
5598
|
multi: true,
|
|
5556
5599
|
},
|
|
5557
|
-
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"i-multi-select-wrapper\"\n [class.i-multi-select--fluid]=\"fluid\"\n #dropdown\n>\n <!-- Input container with click handler -->\n <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n <!-- Chips component with float label -->\n <i-chips\n [chips]=\"selectedChips()\"\n [boxed]=\"true\"\n [collapseOnOverflow]=\"true\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [allowCloseAll]=\"showClear && value && value.length > 0\"\n [useFloatLabel]=\"true\"\n [label]=\"label\"\n [showError]=\"showErrors\"\n (removeChip)=\"onChipRemove($event)\"\n (closedAll)=\"onChipsCloseAll()\"\n class=\"i-multi-select-chips\"\n ></i-chips>\n\n <!-- Icons overlay -->\n <div class=\"i-multi-select-icons-overlay\">\n <span class=\"i-multi-select-arrow-wrapper\">\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </span>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-multi-select-error\">\n {{ getErrorMessage() }}\n </div>\n }\n </div>\n\n @if (isOpen) {\n <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n @if (filter) {\n <div class=\"i-multi-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-multi-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-multi-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-multi-select-checkbox\"\n ></i-checkbox>\n <span class=\"i-multi-select-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-multi-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{display:flow-root;position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:calc(1.5em + 21px);transform:translateY(-50%);right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
5600
|
+
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"i-multi-select-wrapper\"\n [class.i-multi-select--fluid]=\"fluid\"\n [class.native-on-mobile]=\"nativeOnMobile\"\n #dropdown\n>\n <!-- Input container with click handler -->\n @if (nativeOnMobile) {\n <div class=\"i-native-field\">\n <label [for]=\"(id || componentId) + '-native'\">{{ label }}</label>\n <div class=\"i-native-row\">\n <select\n class=\"i-native-select\"\n [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-native-error' : null\"\n multiple size=\"1\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"touch()\"\n >\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">{{ getOptionLabel(option) }}</option>\n }\n </select>\n @if (showClear && value.length > 0) {\n <button class=\"i-native-clear\" type=\"button\" [disabled]=\"disabled\"\n aria-label=\"Clear selection\" (click)=\"clearSelection()\">\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n @if (showErrors) {\n <span class=\"i-native-error\" [id]=\"componentId + '-native-error'\" role=\"alert\">{{ getErrorMessage() }}</span>\n }\n </div>\n }\n <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n\n <!-- Chips component with float label -->\n <i-chips\n [chips]=\"selectedChips()\"\n [boxed]=\"true\"\n [collapseOnOverflow]=\"true\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [allowCloseAll]=\"showClear && value && value.length > 0\"\n [useFloatLabel]=\"true\"\n [label]=\"label\"\n [showError]=\"showErrors\"\n (removeChip)=\"onChipRemove($event)\"\n (closedAll)=\"onChipsCloseAll()\"\n class=\"i-multi-select-chips\"\n ></i-chips>\n\n <!-- Icons overlay -->\n <div class=\"i-multi-select-icons-overlay\">\n <span class=\"i-multi-select-arrow-wrapper\">\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </span>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-multi-select-error\">\n {{ getErrorMessage() }}\n </div>\n }\n </div>\n\n @if (isOpen) {\n <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n @if (filter) {\n <div class=\"i-multi-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-multi-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-multi-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-multi-select-checkbox\"\n ></i-checkbox>\n <span class=\"i-multi-select-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-multi-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-native-field{display:none}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-multi-select-input-container,.native-on-mobile .i-multi-select-dropdown{display:none}.native-on-mobile .i-native-field{display:flex;flex-direction:column;gap:6px}.i-native-field label{font-size:.875rem;color:var(--color-text-primary)}.i-native-row{display:flex;align-items:center;gap:4px;min-width:0}.i-native-select{flex:1;min-width:0;width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;font:inherit;font-size:16px;border:1px solid var(--surface-border);border-radius:6px;color:var(--color-text-primary);background:var(--color-component-background)}.i-native-select[aria-invalid=true]{border-color:var(--color-danger)}.i-native-select:disabled{opacity:.6}.i-native-clear{flex:0 0 44px;min-height:44px;border:0;border-radius:6px;background:transparent;color:var(--color-text-primary)}.i-native-error{color:var(--color-danger);font-size:.875rem}.i-native-select:focus-visible,.i-native-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}}.i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{display:flow-root;position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:calc(1.5em + 21px);transform:translateY(-50%);right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
5558
5601
|
}
|
|
5559
5602
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IMultiSelect, decorators: [{
|
|
5560
5603
|
type: Component,
|
|
@@ -5564,7 +5607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
5564
5607
|
useExisting: forwardRef(() => IMultiSelect),
|
|
5565
5608
|
multi: true,
|
|
5566
5609
|
},
|
|
5567
|
-
], template: "<div\n class=\"i-multi-select-wrapper\"\n [class.i-multi-select--fluid]=\"fluid\"\n #dropdown\n>\n <!-- Input container with click handler -->\n <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n <!-- Chips component with float label -->\n <i-chips\n [chips]=\"selectedChips()\"\n [boxed]=\"true\"\n [collapseOnOverflow]=\"true\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [allowCloseAll]=\"showClear && value && value.length > 0\"\n [useFloatLabel]=\"true\"\n [label]=\"label\"\n [showError]=\"showErrors\"\n (removeChip)=\"onChipRemove($event)\"\n (closedAll)=\"onChipsCloseAll()\"\n class=\"i-multi-select-chips\"\n ></i-chips>\n\n <!-- Icons overlay -->\n <div class=\"i-multi-select-icons-overlay\">\n <span class=\"i-multi-select-arrow-wrapper\">\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </span>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-multi-select-error\">\n {{ getErrorMessage() }}\n </div>\n }\n </div>\n\n @if (isOpen) {\n <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n @if (filter) {\n <div class=\"i-multi-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-multi-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-multi-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-multi-select-checkbox\"\n ></i-checkbox>\n <span class=\"i-multi-select-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-multi-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{display:flow-root;position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:calc(1.5em + 21px);transform:translateY(-50%);right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"] }]
|
|
5610
|
+
], template: "<div\n class=\"i-multi-select-wrapper\"\n [class.i-multi-select--fluid]=\"fluid\"\n [class.native-on-mobile]=\"nativeOnMobile\"\n #dropdown\n>\n <!-- Input container with click handler -->\n @if (nativeOnMobile) {\n <div class=\"i-native-field\">\n <label [for]=\"(id || componentId) + '-native'\">{{ label }}</label>\n <div class=\"i-native-row\">\n <select\n class=\"i-native-select\"\n [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-native-error' : null\"\n multiple size=\"1\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"touch()\"\n >\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">{{ getOptionLabel(option) }}</option>\n }\n </select>\n @if (showClear && value.length > 0) {\n <button class=\"i-native-clear\" type=\"button\" [disabled]=\"disabled\"\n aria-label=\"Clear selection\" (click)=\"clearSelection()\">\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n @if (showErrors) {\n <span class=\"i-native-error\" [id]=\"componentId + '-native-error'\" role=\"alert\">{{ getErrorMessage() }}</span>\n }\n </div>\n }\n <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n\n <!-- Chips component with float label -->\n <i-chips\n [chips]=\"selectedChips()\"\n [boxed]=\"true\"\n [collapseOnOverflow]=\"true\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [allowCloseAll]=\"showClear && value && value.length > 0\"\n [useFloatLabel]=\"true\"\n [label]=\"label\"\n [showError]=\"showErrors\"\n (removeChip)=\"onChipRemove($event)\"\n (closedAll)=\"onChipsCloseAll()\"\n class=\"i-multi-select-chips\"\n ></i-chips>\n\n <!-- Icons overlay -->\n <div class=\"i-multi-select-icons-overlay\">\n <span class=\"i-multi-select-arrow-wrapper\">\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </span>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-multi-select-error\">\n {{ getErrorMessage() }}\n </div>\n }\n </div>\n\n @if (isOpen) {\n <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n @if (filter) {\n <div class=\"i-multi-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-multi-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-multi-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-multi-select-checkbox\"\n ></i-checkbox>\n <span class=\"i-multi-select-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-multi-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-native-field{display:none}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-multi-select-input-container,.native-on-mobile .i-multi-select-dropdown{display:none}.native-on-mobile .i-native-field{display:flex;flex-direction:column;gap:6px}.i-native-field label{font-size:.875rem;color:var(--color-text-primary)}.i-native-row{display:flex;align-items:center;gap:4px;min-width:0}.i-native-select{flex:1;min-width:0;width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;font:inherit;font-size:16px;border:1px solid var(--surface-border);border-radius:6px;color:var(--color-text-primary);background:var(--color-component-background)}.i-native-select[aria-invalid=true]{border-color:var(--color-danger)}.i-native-select:disabled{opacity:.6}.i-native-clear{flex:0 0 44px;min-height:44px;border:0;border-radius:6px;background:transparent;color:var(--color-text-primary)}.i-native-error{color:var(--color-danger);font-size:.875rem}.i-native-select:focus-visible,.i-native-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}}.i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{display:flow-root;position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:calc(1.5em + 21px);transform:translateY(-50%);right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"] }]
|
|
5568
5611
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { label: [{
|
|
5569
5612
|
type: Input
|
|
5570
5613
|
}], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{
|
|
@@ -5592,6 +5635,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
5592
5635
|
type: Input
|
|
5593
5636
|
}], readonly: [{
|
|
5594
5637
|
type: Input
|
|
5638
|
+
}], nativeOnMobile: [{
|
|
5639
|
+
type: Input
|
|
5595
5640
|
}], onChange: [{
|
|
5596
5641
|
type: Output
|
|
5597
5642
|
}], onClear: [{
|
|
@@ -5913,7 +5958,7 @@ class IOverlayPanel {
|
|
|
5913
5958
|
}
|
|
5914
5959
|
}
|
|
5915
5960
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IOverlayPanel, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
5916
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IOverlayPanel, isStandalone: true, selector: "i-overlay-panel", inputs: { dismissable: "dismissable", appendTo: "appendTo", baseZIndex: "baseZIndex", autoZIndex: "autoZIndex" }, outputs: { onShow: "onShow", onHide: "onHide" }, viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, 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", 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:1rem;min-width:200px;max-width:600px;box-shadow:0 2px 12px #0000001a;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }], animations: [
|
|
5961
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IOverlayPanel, isStandalone: true, selector: "i-overlay-panel", inputs: { dismissable: "dismissable", appendTo: "appendTo", baseZIndex: "baseZIndex", autoZIndex: "autoZIndex" }, outputs: { onShow: "onShow", onHide: "onHide" }, viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, 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", 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:1rem;min-width:200px;max-width:600px;box-shadow:0 2px 12px #0000001a;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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }], animations: [
|
|
5917
5962
|
trigger('animation', [
|
|
5918
5963
|
state('void', style({
|
|
5919
5964
|
transform: 'scaleY(0.8)',
|
|
@@ -5951,7 +5996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
5951
5996
|
transition('void => open', animate('150ms ease-out')),
|
|
5952
5997
|
transition('open => closed', animate('150ms ease-in')),
|
|
5953
5998
|
]),
|
|
5954
|
-
], 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", 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:1rem;min-width:200px;max-width:600px;box-shadow:0 2px 12px #0000001a;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}\n"] }]
|
|
5999
|
+
], 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", 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:1rem;min-width:200px;max-width:600px;box-shadow:0 2px 12px #0000001a;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"] }]
|
|
5955
6000
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { dismissable: [{
|
|
5956
6001
|
type: Input
|
|
5957
6002
|
}], appendTo: [{
|
|
@@ -6043,11 +6088,11 @@ class IPanel {
|
|
|
6043
6088
|
this.onToggle.emit(this.collapsed);
|
|
6044
6089
|
}
|
|
6045
6090
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6046
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IPanel, isStandalone: true, selector: "i-panel", inputs: { header: "header", collapsed: "collapsed", toggleable: "toggleable" }, outputs: { collapsedChange: "collapsedChange", onToggle: "onToggle" }, ngImport: i0, template: "<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\n class=\"i-panel-content-wrapper\"\n [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n >\n <div class=\"i-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</fieldset>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:transparent}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:inherit}.i-panel.i-panel--toggleable .i-panel-header:hover{color:var(--color-primary)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel{border-radius:8px;overflow:visible;position:relative;margin: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;background:transparent;-webkit-user-select:none;user-select:none;transition:color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:transparent;cursor:pointer;padding:4px 12px;font-family:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block;flex-shrink:0}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:1em;line-height:1;display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:visible;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0;overflow:hidden}.i-panel .i-panel-content{padding:16px}\n"] });
|
|
6091
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IPanel, isStandalone: true, selector: "i-panel", inputs: { header: "header", collapsed: "collapsed", toggleable: "toggleable" }, outputs: { collapsedChange: "collapsedChange", onToggle: "onToggle" }, ngImport: i0, template: "<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\n class=\"i-panel-content-wrapper\"\n [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n >\n <div class=\"i-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</fieldset>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:transparent}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:inherit}.i-panel.i-panel--toggleable .i-panel-header:hover{color:var(--color-primary)}.i-panel .i-panel-content{color:var(--color-text-primary)}@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;background:transparent;-webkit-user-select:none;user-select:none;transition:color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:transparent;cursor:pointer;padding:4px 12px;font-family:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block;flex-shrink:0}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:1em;line-height:1;display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:visible;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0;overflow:hidden}.i-panel .i-panel-content{padding:16px}\n"] });
|
|
6047
6092
|
}
|
|
6048
6093
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IPanel, decorators: [{
|
|
6049
6094
|
type: Component,
|
|
6050
|
-
args: [{ selector: 'i-panel', 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\n class=\"i-panel-content-wrapper\"\n [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n >\n <div class=\"i-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</fieldset>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:transparent}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:inherit}.i-panel.i-panel--toggleable .i-panel-header:hover{color:var(--color-primary)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel{border-radius:8px;overflow:visible;position:relative;margin: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;background:transparent;-webkit-user-select:none;user-select:none;transition:color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:transparent;cursor:pointer;padding:4px 12px;font-family:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block;flex-shrink:0}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:1em;line-height:1;display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:visible;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0;overflow:hidden}.i-panel .i-panel-content{padding:16px}\n"] }]
|
|
6095
|
+
args: [{ selector: 'i-panel', 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\n class=\"i-panel-content-wrapper\"\n [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n >\n <div class=\"i-panel-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</fieldset>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:transparent}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:inherit}.i-panel.i-panel--toggleable .i-panel-header:hover{color:var(--color-primary)}.i-panel .i-panel-content{color:var(--color-text-primary)}@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;background:transparent;-webkit-user-select:none;user-select:none;transition:color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:transparent;cursor:pointer;padding:4px 12px;font-family:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block;flex-shrink:0}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:1em;line-height:1;display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:visible;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0;overflow:hidden}.i-panel .i-panel-content{padding:16px}\n"] }]
|
|
6051
6096
|
}], propDecorators: { header: [{
|
|
6052
6097
|
type: Input
|
|
6053
6098
|
}], collapsed: [{
|
|
@@ -6169,6 +6214,21 @@ class ISelect {
|
|
|
6169
6214
|
* @default true
|
|
6170
6215
|
*/
|
|
6171
6216
|
readonly = true;
|
|
6217
|
+
disabled = false;
|
|
6218
|
+
/** Use the platform option picker on small touch screens. */
|
|
6219
|
+
nativeOnMobile = true;
|
|
6220
|
+
get nativeSelectedIndex() {
|
|
6221
|
+
return String((this.options() || []).findIndex(option => this.isOptionSelected(option)));
|
|
6222
|
+
}
|
|
6223
|
+
onNativeChange(event) {
|
|
6224
|
+
const index = Number(event.target.value);
|
|
6225
|
+
const option = (this.options() || [])[index];
|
|
6226
|
+
if (option !== undefined)
|
|
6227
|
+
this.selectOption(option);
|
|
6228
|
+
}
|
|
6229
|
+
touch() {
|
|
6230
|
+
this.onTouchedCallback();
|
|
6231
|
+
}
|
|
6172
6232
|
/**
|
|
6173
6233
|
* Event emitted when selection changes
|
|
6174
6234
|
*/
|
|
@@ -6286,6 +6346,8 @@ class ISelect {
|
|
|
6286
6346
|
* @internal
|
|
6287
6347
|
*/
|
|
6288
6348
|
toggleDropdown() {
|
|
6349
|
+
if (this.disabled)
|
|
6350
|
+
return;
|
|
6289
6351
|
this.isOpen = !this.isOpen;
|
|
6290
6352
|
if (this.isOpen) {
|
|
6291
6353
|
this.filterValue.set('');
|
|
@@ -6303,6 +6365,8 @@ class ISelect {
|
|
|
6303
6365
|
* @internal
|
|
6304
6366
|
*/
|
|
6305
6367
|
selectOption(option) {
|
|
6368
|
+
if (this.disabled)
|
|
6369
|
+
return;
|
|
6306
6370
|
const newValue = this.getOptionValue(option);
|
|
6307
6371
|
this.value = newValue;
|
|
6308
6372
|
this.onChange.emit(newValue);
|
|
@@ -6316,6 +6380,8 @@ class ISelect {
|
|
|
6316
6380
|
* @internal
|
|
6317
6381
|
*/
|
|
6318
6382
|
clearSelection() {
|
|
6383
|
+
if (this.disabled)
|
|
6384
|
+
return;
|
|
6319
6385
|
this.value = null;
|
|
6320
6386
|
this.onClear.emit();
|
|
6321
6387
|
this.onChangeCallback(null);
|
|
@@ -6413,7 +6479,9 @@ class ISelect {
|
|
|
6413
6479
|
* @internal
|
|
6414
6480
|
*/
|
|
6415
6481
|
setDisabledState(isDisabled) {
|
|
6416
|
-
|
|
6482
|
+
this.disabled = isDisabled;
|
|
6483
|
+
if (isDisabled)
|
|
6484
|
+
this.isOpen = false;
|
|
6417
6485
|
}
|
|
6418
6486
|
/**
|
|
6419
6487
|
* Gets the form control instance
|
|
@@ -6462,13 +6530,13 @@ class ISelect {
|
|
|
6462
6530
|
}
|
|
6463
6531
|
}
|
|
6464
6532
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ISelect, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
6465
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ISelect, isStandalone: true, selector: "i-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, useFloatLabel: { classPropertyName: "useFloatLabel", publicName: "useFloatLabel", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClear: "onClear" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
6533
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ISelect, isStandalone: true, selector: "i-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, useFloatLabel: { classPropertyName: "useFloatLabel", publicName: "useFloatLabel", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, nativeOnMobile: { classPropertyName: "nativeOnMobile", publicName: "nativeOnMobile", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClear: "onClear" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
6466
6534
|
{
|
|
6467
6535
|
provide: NG_VALUE_ACCESSOR,
|
|
6468
6536
|
useExisting: forwardRef(() => ISelect),
|
|
6469
6537
|
multi: true,
|
|
6470
6538
|
},
|
|
6471
|
-
], viewQueries: [{ propertyName: "inputTextRef", first: true, predicate: ["inputText"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"i-select-wrapper\" [class.i-select--fluid]=\"fluid\" #dropdown>\n <!-- Reuse the input-text component for consistent styling and form integration -->\n <div class=\"i-select-input-container\" (click)=\"toggleDropdown()\">\n <i-input-text\n #inputText\n [label]=\"label\"\n [useFloatLabel]=\"useFloatLabel\"\n [id]=\"id\"\n [fluid]=\"fluid\"\n [errorMessages]=\"errorMessages\"\n [(ngModel)]=\"inputValue\"\n [type]=\"'text'\"\n [externalInvalid]=\"showErrors\"\n [externalErrorMessage]=\"showErrors ? getErrorMessage() || '' : ''\"\n [readonly]=\"readonly\"\n >\n <!-- Icons overlay on the input -->\n <div class=\"i-select-icons\">\n @if (showClear && value !== null && value !== undefined) {\n <i\n class=\"pi pi-times i-select-clear\"\n (click)=\"clearSelection(); $event.stopPropagation()\"\n ></i>\n }\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </div>\n </i-input-text>\n </div>\n\n <!-- Dropdown overlay -->\n @if (isOpen) {\n <div class=\"i-select-dropdown\">\n @if (filter) {\n <div class=\"i-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n >\n {{ getOptionLabel(option) }}\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-select-trigger{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--surface-ground)}.i-select-trigger:focus,.i-select-trigger.open{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-trigger.disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-select-dropdown .i-select-filter .i-select-search{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-select-dropdown .i-select-filter .i-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-dropdown .i-select-options{background:transparent}.i-select-dropdown .i-select-options .i-select-option{color:var(--color-text-primary)}.i-select-dropdown .i-select-options .i-select-option:hover{background-color:var(--surface-hover)}.i-select-dropdown .i-select-options .i-select-option.selected{background-color:var(--surface-hover);color:var(--color-primary)}.i-select-dropdown .i-select-options .i-select-no-options{color:var(--color-text-secondary)}.invalid .i-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-select-wrapper{position:relative;display:block}.i-select-wrapper.i-select--fluid{width:100%}.i-select-wrapper .i-select-input-container{position:relative;cursor:pointer}.i-select-wrapper .i-select-input-container .i-input-text .i-input.readonly{cursor:pointer}.i-select-wrapper .i-select-input-container .i-select-icons{position:absolute;top:50%;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none;transform:translateY(-50%)}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear{font-size:12px;opacity:.6;cursor:pointer;pointer-events:auto;transition:opacity .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear:hover{opacity:1}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow{font-size:12px;opacity:.6;transition:transform .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow.flipped{transform:rotate(180deg)}.i-select-wrapper .i-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-select-wrapper .i-select-dropdown .i-select-filter{padding:8px}.i-select-wrapper .i-select-dropdown .i-select-filter .i-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-select-wrapper .i-select-dropdown .i-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-corner{background:transparent}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option{padding:12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option.selected{font-weight:500}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
6539
|
+
], viewQueries: [{ propertyName: "inputTextRef", first: true, predicate: ["inputText"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"i-select-wrapper\" [class.i-select--fluid]=\"fluid\" [class.native-on-mobile]=\"nativeOnMobile\" #dropdown>\n <!-- Reuse the input-text component for consistent styling and form integration -->\n @if (nativeOnMobile) {\n <div class=\"i-native-field\">\n <label [for]=\"(id || componentId) + '-native'\">{{ label }}</label>\n <div class=\"i-native-row\">\n <select\n class=\"i-native-select\"\n [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-native-error' : null\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"touch()\"\n >\n <option value=\"-1\" disabled [selected]=\"nativeSelectedIndex === '-1'\">{{ placeholder }}</option>\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">{{ getOptionLabel(option) }}</option>\n }\n </select>\n @if (showClear && value != null) {\n <button class=\"i-native-clear\" type=\"button\" [disabled]=\"disabled\"\n aria-label=\"Clear selection\" (click)=\"clearSelection()\">\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n @if (showErrors) {\n <span class=\"i-native-error\" [id]=\"componentId + '-native-error'\" role=\"alert\">{{ getErrorMessage() }}</span>\n }\n </div>\n }\n <div class=\"i-select-input-container\" (click)=\"toggleDropdown()\">\n\n <i-input-text\n #inputText\n [label]=\"label\"\n [useFloatLabel]=\"useFloatLabel\"\n [id]=\"id\"\n [fluid]=\"fluid\"\n [errorMessages]=\"errorMessages\"\n [(ngModel)]=\"inputValue\"\n [type]=\"'text'\"\n [externalInvalid]=\"showErrors\"\n [externalErrorMessage]=\"showErrors ? getErrorMessage() || '' : ''\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n >\n <!-- Icons overlay on the input -->\n <div class=\"i-select-icons\">\n @if (showClear && value !== null && value !== undefined) {\n <button type=\"button\" [disabled]=\"disabled\" aria-label=\"Clear selection\"\n class=\"pi pi-times i-select-clear\"\n (click)=\"clearSelection(); $event.stopPropagation()\"\n ></button>\n }\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </div>\n </i-input-text>\n </div>\n\n <!-- Dropdown overlay -->\n @if (isOpen) {\n <div class=\"i-select-dropdown\">\n @if (filter) {\n <div class=\"i-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n >\n {{ getOptionLabel(option) }}\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-native-field{display:none}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-select-input-container,.native-on-mobile .i-select-dropdown{display:none}.native-on-mobile .i-native-field{display:flex;flex-direction:column;gap:6px}.i-native-field label{font-size:.875rem;color:var(--color-text-primary)}.i-native-row{display:flex;align-items:center;gap:4px;min-width:0}.i-native-select{flex:1;min-width:0;width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;font:inherit;font-size:16px;border:1px solid var(--surface-border);border-radius:6px;color:var(--color-text-primary);background:var(--color-component-background)}.i-native-select[aria-invalid=true]{border-color:var(--color-danger)}.i-native-select:disabled{opacity:.6}.i-native-clear{flex:0 0 44px;min-height:44px;border:0;border-radius:6px;background:transparent;color:var(--color-text-primary)}.i-native-error{color:var(--color-danger);font-size:.875rem}.i-native-select:focus-visible,.i-native-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}}.i-select-trigger{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--surface-ground)}.i-select-trigger:focus,.i-select-trigger.open{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-trigger.disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-select-dropdown .i-select-filter .i-select-search{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-select-dropdown .i-select-filter .i-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-dropdown .i-select-options{background:transparent}.i-select-dropdown .i-select-options .i-select-option{color:var(--color-text-primary)}.i-select-dropdown .i-select-options .i-select-option:hover{background-color:var(--surface-hover)}.i-select-dropdown .i-select-options .i-select-option.selected{background-color:var(--surface-hover);color:var(--color-primary)}.i-select-dropdown .i-select-options .i-select-no-options{color:var(--color-text-secondary)}.invalid .i-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-select-wrapper{position:relative;display:block}.i-select-wrapper.i-select--fluid{width:100%}.i-select-wrapper .i-select-input-container{position:relative;cursor:pointer}.i-select-wrapper .i-select-input-container .i-input-text .i-input.readonly{cursor:pointer}.i-select-wrapper .i-select-input-container .i-select-icons{position:absolute;top:50%;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none;transform:translateY(-50%)}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear{border:0;padding:4px;background:transparent;color:inherit;font-size:12px;opacity:.6;cursor:pointer;pointer-events:auto;transition:opacity .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear:hover{opacity:1}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow{font-size:12px;opacity:.6;transition:transform .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow.flipped{transform:rotate(180deg)}.i-select-wrapper .i-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-select-wrapper .i-select-dropdown .i-select-filter{padding:8px}.i-select-wrapper .i-select-dropdown .i-select-filter .i-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-select-wrapper .i-select-dropdown .i-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-corner{background:transparent}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option{padding:12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option.selected{font-weight:500}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
6472
6540
|
}
|
|
6473
6541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ISelect, decorators: [{
|
|
6474
6542
|
type: Component,
|
|
@@ -6478,7 +6546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
6478
6546
|
useExisting: forwardRef(() => ISelect),
|
|
6479
6547
|
multi: true,
|
|
6480
6548
|
},
|
|
6481
|
-
], template: "<div class=\"i-select-wrapper\" [class.i-select--fluid]=\"fluid\" #dropdown>\n <!-- Reuse the input-text component for consistent styling and form integration -->\n <div class=\"i-select-input-container\" (click)=\"toggleDropdown()\">\n <i-input-text\n #inputText\n [label]=\"label\"\n [useFloatLabel]=\"useFloatLabel\"\n [id]=\"id\"\n [fluid]=\"fluid\"\n [errorMessages]=\"errorMessages\"\n [(ngModel)]=\"inputValue\"\n [type]=\"'text'\"\n [externalInvalid]=\"showErrors\"\n [externalErrorMessage]=\"showErrors ? getErrorMessage() || '' : ''\"\n [readonly]=\"readonly\"\n >\n <!-- Icons overlay on the input -->\n <div class=\"i-select-icons\">\n @if (showClear && value !== null && value !== undefined) {\n <i\n class=\"pi pi-times i-select-clear\"\n (click)=\"clearSelection(); $event.stopPropagation()\"\n ></i>\n }\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </div>\n </i-input-text>\n </div>\n\n <!-- Dropdown overlay -->\n @if (isOpen) {\n <div class=\"i-select-dropdown\">\n @if (filter) {\n <div class=\"i-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n >\n {{ getOptionLabel(option) }}\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-select-trigger{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--surface-ground)}.i-select-trigger:focus,.i-select-trigger.open{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-trigger.disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-select-dropdown .i-select-filter .i-select-search{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-select-dropdown .i-select-filter .i-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-dropdown .i-select-options{background:transparent}.i-select-dropdown .i-select-options .i-select-option{color:var(--color-text-primary)}.i-select-dropdown .i-select-options .i-select-option:hover{background-color:var(--surface-hover)}.i-select-dropdown .i-select-options .i-select-option.selected{background-color:var(--surface-hover);color:var(--color-primary)}.i-select-dropdown .i-select-options .i-select-no-options{color:var(--color-text-secondary)}.invalid .i-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-select-wrapper{position:relative;display:block}.i-select-wrapper.i-select--fluid{width:100%}.i-select-wrapper .i-select-input-container{position:relative;cursor:pointer}.i-select-wrapper .i-select-input-container .i-input-text .i-input.readonly{cursor:pointer}.i-select-wrapper .i-select-input-container .i-select-icons{position:absolute;top:50%;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none;transform:translateY(-50%)}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear{font-size:12px;opacity:.6;cursor:pointer;pointer-events:auto;transition:opacity .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear:hover{opacity:1}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow{font-size:12px;opacity:.6;transition:transform .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow.flipped{transform:rotate(180deg)}.i-select-wrapper .i-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-select-wrapper .i-select-dropdown .i-select-filter{padding:8px}.i-select-wrapper .i-select-dropdown .i-select-filter .i-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-select-wrapper .i-select-dropdown .i-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-corner{background:transparent}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option{padding:12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option.selected{font-weight:500}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"] }]
|
|
6549
|
+
], template: "<div class=\"i-select-wrapper\" [class.i-select--fluid]=\"fluid\" [class.native-on-mobile]=\"nativeOnMobile\" #dropdown>\n <!-- Reuse the input-text component for consistent styling and form integration -->\n @if (nativeOnMobile) {\n <div class=\"i-native-field\">\n <label [for]=\"(id || componentId) + '-native'\">{{ label }}</label>\n <div class=\"i-native-row\">\n <select\n class=\"i-native-select\"\n [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-native-error' : null\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"touch()\"\n >\n <option value=\"-1\" disabled [selected]=\"nativeSelectedIndex === '-1'\">{{ placeholder }}</option>\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">{{ getOptionLabel(option) }}</option>\n }\n </select>\n @if (showClear && value != null) {\n <button class=\"i-native-clear\" type=\"button\" [disabled]=\"disabled\"\n aria-label=\"Clear selection\" (click)=\"clearSelection()\">\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n @if (showErrors) {\n <span class=\"i-native-error\" [id]=\"componentId + '-native-error'\" role=\"alert\">{{ getErrorMessage() }}</span>\n }\n </div>\n }\n <div class=\"i-select-input-container\" (click)=\"toggleDropdown()\">\n\n <i-input-text\n #inputText\n [label]=\"label\"\n [useFloatLabel]=\"useFloatLabel\"\n [id]=\"id\"\n [fluid]=\"fluid\"\n [errorMessages]=\"errorMessages\"\n [(ngModel)]=\"inputValue\"\n [type]=\"'text'\"\n [externalInvalid]=\"showErrors\"\n [externalErrorMessage]=\"showErrors ? getErrorMessage() || '' : ''\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n >\n <!-- Icons overlay on the input -->\n <div class=\"i-select-icons\">\n @if (showClear && value !== null && value !== undefined) {\n <button type=\"button\" [disabled]=\"disabled\" aria-label=\"Clear selection\"\n class=\"pi pi-times i-select-clear\"\n (click)=\"clearSelection(); $event.stopPropagation()\"\n ></button>\n }\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </div>\n </i-input-text>\n </div>\n\n <!-- Dropdown overlay -->\n @if (isOpen) {\n <div class=\"i-select-dropdown\">\n @if (filter) {\n <div class=\"i-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n >\n {{ getOptionLabel(option) }}\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-native-field{display:none}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-select-input-container,.native-on-mobile .i-select-dropdown{display:none}.native-on-mobile .i-native-field{display:flex;flex-direction:column;gap:6px}.i-native-field label{font-size:.875rem;color:var(--color-text-primary)}.i-native-row{display:flex;align-items:center;gap:4px;min-width:0}.i-native-select{flex:1;min-width:0;width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;font:inherit;font-size:16px;border:1px solid var(--surface-border);border-radius:6px;color:var(--color-text-primary);background:var(--color-component-background)}.i-native-select[aria-invalid=true]{border-color:var(--color-danger)}.i-native-select:disabled{opacity:.6}.i-native-clear{flex:0 0 44px;min-height:44px;border:0;border-radius:6px;background:transparent;color:var(--color-text-primary)}.i-native-error{color:var(--color-danger);font-size:.875rem}.i-native-select:focus-visible,.i-native-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}}.i-select-trigger{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--surface-ground)}.i-select-trigger:focus,.i-select-trigger.open{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-trigger.disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-select-dropdown .i-select-filter .i-select-search{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-select-dropdown .i-select-filter .i-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-dropdown .i-select-options{background:transparent}.i-select-dropdown .i-select-options .i-select-option{color:var(--color-text-primary)}.i-select-dropdown .i-select-options .i-select-option:hover{background-color:var(--surface-hover)}.i-select-dropdown .i-select-options .i-select-option.selected{background-color:var(--surface-hover);color:var(--color-primary)}.i-select-dropdown .i-select-options .i-select-no-options{color:var(--color-text-secondary)}.invalid .i-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-select-wrapper{position:relative;display:block}.i-select-wrapper.i-select--fluid{width:100%}.i-select-wrapper .i-select-input-container{position:relative;cursor:pointer}.i-select-wrapper .i-select-input-container .i-input-text .i-input.readonly{cursor:pointer}.i-select-wrapper .i-select-input-container .i-select-icons{position:absolute;top:50%;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none;transform:translateY(-50%)}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear{border:0;padding:4px;background:transparent;color:inherit;font-size:12px;opacity:.6;cursor:pointer;pointer-events:auto;transition:opacity .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear:hover{opacity:1}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow{font-size:12px;opacity:.6;transition:transform .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow.flipped{transform:rotate(180deg)}.i-select-wrapper .i-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-select-wrapper .i-select-dropdown .i-select-filter{padding:8px}.i-select-wrapper .i-select-dropdown .i-select-filter .i-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-select-wrapper .i-select-dropdown .i-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-corner{background:transparent}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option{padding:12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option.selected{font-weight:500}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"] }]
|
|
6482
6550
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { label: [{
|
|
6483
6551
|
type: Input
|
|
6484
6552
|
}], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{
|
|
@@ -6502,6 +6570,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
6502
6570
|
type: Input
|
|
6503
6571
|
}], readonly: [{
|
|
6504
6572
|
type: Input
|
|
6573
|
+
}], disabled: [{
|
|
6574
|
+
type: Input
|
|
6575
|
+
}], nativeOnMobile: [{
|
|
6576
|
+
type: Input
|
|
6505
6577
|
}], onChange: [{
|
|
6506
6578
|
type: Output
|
|
6507
6579
|
}], onClear: [{
|
|
@@ -6948,11 +7020,11 @@ class ITabs {
|
|
|
6948
7020
|
tabElement?.focus();
|
|
6949
7021
|
}
|
|
6950
7022
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6951
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITabs, isStandalone: true, selector: "i-tabs", inputs: { activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange", onClose: "onClose" }, queries: [{ propertyName: "tabPanels", predicate: ITabPanel }], ngImport: i0, template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <button\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header,\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"i-tabs__panels\">\n @for (tab of tabs; track $index) {\n <div\n [attr.id]=\"componentId + '-panel-' + $index\"\n class=\"i-tabs__panel\"\n [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n [attr.hidden]=\"activeIndex !== $index || null\"\n >\n @if (activeIndex === $index) {\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}@media(max-width:768px){.i-tabs .i-tabs__panels .i-tabs__panel{padding-left:0;padding-right:0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
7023
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITabs, isStandalone: true, selector: "i-tabs", inputs: { activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange", onClose: "onClose" }, queries: [{ propertyName: "tabPanels", predicate: ITabPanel }], ngImport: i0, template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <button\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header,\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"i-tabs__panels\">\n @for (tab of tabs; track $index) {\n <div\n [attr.id]=\"componentId + '-panel-' + $index\"\n class=\"i-tabs__panel\"\n [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n [attr.hidden]=\"activeIndex !== $index || null\"\n >\n @if (activeIndex === $index) {\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}@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}.i-tabs .i-tabs__tab .i-tabs__tab-close{width:44px;height:44px;margin:-10px -8px -10px 4px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
6952
7024
|
}
|
|
6953
7025
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITabs, decorators: [{
|
|
6954
7026
|
type: Component,
|
|
6955
|
-
args: [{ selector: 'i-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <button\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header,\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"i-tabs__panels\">\n @for (tab of tabs; track $index) {\n <div\n [attr.id]=\"componentId + '-panel-' + $index\"\n class=\"i-tabs__panel\"\n [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n [attr.hidden]=\"activeIndex !== $index || null\"\n >\n @if (activeIndex === $index) {\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}@media(max-width:768px){.i-tabs .i-tabs__panels .i-tabs__panel{padding-left:0;padding-right:0}}\n"] }]
|
|
7027
|
+
args: [{ selector: 'i-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <button\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header,\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"i-tabs__panels\">\n @for (tab of tabs; track $index) {\n <div\n [attr.id]=\"componentId + '-panel-' + $index\"\n class=\"i-tabs__panel\"\n [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n [attr.hidden]=\"activeIndex !== $index || null\"\n >\n @if (activeIndex === $index) {\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}@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}.i-tabs .i-tabs__tab .i-tabs__tab-close{width:44px;height:44px;margin:-10px -8px -10px 4px}}\n"] }]
|
|
6956
7028
|
}], propDecorators: { activeIndex: [{
|
|
6957
7029
|
type: Input
|
|
6958
7030
|
}], activeIndexChange: [{
|
|
@@ -7122,7 +7194,7 @@ class IToggle {
|
|
|
7122
7194
|
useExisting: forwardRef(() => IToggle),
|
|
7123
7195
|
multi: true,
|
|
7124
7196
|
},
|
|
7125
|
-
], ngImport: i0, 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>\n <div\n class=\"i-toggle\"\n [class.i-toggle--checked]=\"checked\"\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 tabindex=\"0\"\n (keydown.space)=\"handleKeydown($event)\"\n (keydown.enter)=\"handleKeydown($event)\"\n >\n <span class=\"i-toggle-thumb\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-toggle-label\"\n (click)=\"toggle()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", 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:1em}.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:.9em;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:1em;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:1.2em;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;box-shadow:0 0 0 2px #3b82f64d}.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}\n"] });
|
|
7197
|
+
], ngImport: i0, 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>\n <div\n class=\"i-toggle\"\n [class.i-toggle--checked]=\"checked\"\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 tabindex=\"0\"\n (keydown.space)=\"handleKeydown($event)\"\n (keydown.enter)=\"handleKeydown($event)\"\n >\n <span class=\"i-toggle-thumb\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-toggle-label\"\n (click)=\"toggle()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", 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:1em}.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:.9em;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:1em;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:1.2em;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;box-shadow:0 0 0 2px #3b82f64d}.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}@media(pointer:coarse){.i-toggle-wrapper{min-height:44px}.i-toggle-wrapper .i-toggle{position:relative;flex-shrink:0}.i-toggle-wrapper .i-toggle:after{content:\"\";position:absolute;inset:-14px 0}.i-toggle-label{display:inline-flex;align-items:center;min-height:44px}}\n"] });
|
|
7126
7198
|
}
|
|
7127
7199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IToggle, decorators: [{
|
|
7128
7200
|
type: Component,
|
|
@@ -7132,7 +7204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
7132
7204
|
useExisting: forwardRef(() => IToggle),
|
|
7133
7205
|
multi: true,
|
|
7134
7206
|
},
|
|
7135
|
-
], 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>\n <div\n class=\"i-toggle\"\n [class.i-toggle--checked]=\"checked\"\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 tabindex=\"0\"\n (keydown.space)=\"handleKeydown($event)\"\n (keydown.enter)=\"handleKeydown($event)\"\n >\n <span class=\"i-toggle-thumb\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-toggle-label\"\n (click)=\"toggle()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", 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:1em}.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:.9em;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:1em;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:1.2em;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;box-shadow:0 0 0 2px #3b82f64d}.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}\n"] }]
|
|
7207
|
+
], 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>\n <div\n class=\"i-toggle\"\n [class.i-toggle--checked]=\"checked\"\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 tabindex=\"0\"\n (keydown.space)=\"handleKeydown($event)\"\n (keydown.enter)=\"handleKeydown($event)\"\n >\n <span class=\"i-toggle-thumb\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-toggle-label\"\n (click)=\"toggle()\"\n >\n {{ label }}\n </label>\n }\n</div>\n", 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:1em}.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:.9em;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:1em;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:1.2em;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;box-shadow:0 0 0 2px #3b82f64d}.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}@media(pointer:coarse){.i-toggle-wrapper{min-height:44px}.i-toggle-wrapper .i-toggle{position:relative;flex-shrink:0}.i-toggle-wrapper .i-toggle:after{content:\"\";position:absolute;inset:-14px 0}.i-toggle-label{display:inline-flex;align-items:center;min-height:44px}}\n"] }]
|
|
7136
7208
|
}], propDecorators: { label: [{
|
|
7137
7209
|
type: Input
|
|
7138
7210
|
}], id: [{
|
|
@@ -7649,11 +7721,11 @@ class ITreeView {
|
|
|
7649
7721
|
allNodes.length > 0 && allNodes.every(node => selectedNodes.includes(node));
|
|
7650
7722
|
}
|
|
7651
7723
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITreeView, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7652
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITreeView, isStandalone: true, selector: "i-tree-view", inputs: { value: "value", selectionMode: "selectionMode", selection: "selection", scrollHeight: "scrollHeight", loading: "loading", emptyMessage: "emptyMessage", togglerTemplate: "togglerTemplate", filter: "filter", filterBy: "filterBy", filterMode: "filterMode", filterPlaceholder: "filterPlaceholder", filteredNodes: "filteredNodes", validateDrop: "validateDrop", propagateSelectionUp: "propagateSelectionUp", propagateSelectionDown: "propagateSelectionDown", selectAll: "selectAll" }, outputs: { onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [ngModel]=\"filterValue\"\n (ngModelChange)=\"filterValue = $event; applyFilter()\"\n label=\"Search tree\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n }\n @if (selectAll && selectionMode === \"checkbox\") {\n <div class=\"i-tree-view-select-all-container\">\n <div class=\"select-box\">\n <i-checkbox\n [(ngModel)]=\"selectAllChecked\"\n [id]=\"componentId + '-select-all'\"\n [label]=\"'Select All'\"\n (ngModelChange)=\"onSelectAllChange()\"\n />\n </div>\n </div>\n }\n\n <div class=\"i-tree-view-container\">\n @if (loading) {\n <div class=\"i-tree-view-loading\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n <span>Loading...</span>\n </div>\n } @else if (filteredValue.length === 0) {\n <div class=\"i-tree-view-empty\">\n <span>{{ emptyMessage }}</span>\n </div>\n } @else {\n <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n @for (node of filteredValue; track node.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n <div\n class=\"i-tree-view-node\"\n [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n [class.i-tree-view-node--expanded]=\"node.expanded\"\n [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n [class.i-tree-view-node--temporary-highlight]=\"\n isTemporarilyHighlighted(node)\n \"\n [class]=\"node.styleClass\"\n [style.padding-left.rem]=\"level * 1\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n [attr.aria-selected]=\"isSelected(node)\"\n [attr.aria-level]=\"level + 1\"\n tabindex=\"0\"\n (click)=\"onNodeClick($event, node)\"\n (keydown.enter)=\"onNodeClick($event, node)\"\n (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n >\n <div class=\"i-tree-view-node-content\">\n @if (hasChildren(node)) {\n <button\n type=\"button\"\n class=\"i-tree-view-toggler\"\n (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <i [class]=\"getToggleIcon(node)\"></i>\n </button>\n } @else {\n <span class=\"i-tree-view-toggler-spacer\"></span>\n }\n @if (selectionMode === \"checkbox\") {\n <div class=\"i-tree-view-checkbox-container\">\n <i-checkbox\n [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n [indeterminate]=\"isPartiallySelected(node)\"\n (onChange)=\"onCheckboxChange($event, node)\"\n [id]=\"getCheckboxId(node)\"\n size=\"small\"\n tabindex=\"-1\"\n >\n </i-checkbox>\n </div>\n }\n\n <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n </div>\n </div>\n\n @if (hasChildren(node) && node.expanded) {\n <ul class=\"i-tree-view-children\" role=\"group\">\n @for (child of node.children; track child.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--color-component-background-secondary);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:1em}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{font-size:16px}.i-tree-view-wrapper .i-tree-view-empty{display:flex;align-items:center;justify-content:center;padding:20px;font-size:1em;font-style:italic}.i-tree-view-root,.i-tree-view-children{list-style:none;margin:0;padding:0}.i-tree-view-children{padding-left:0}.i-tree-view-node{position:relative;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.i-tree-view-node:focus{outline:none}.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{animation:highlight-fade .7s ease-out}.i-tree-view-node .i-tree-view-node-content{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:all .15s ease;min-height:32px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;border-radius:2px;transition:all .15s ease}.i-tree-view-node .i-tree-view-toggler:focus{outline:none}.i-tree-view-node .i-tree-view-toggler i{font-size:12px;transition:transform .15s ease}.i-tree-view-node .i-tree-view-toggler-spacer{width:20px;height:20px;flex-shrink:0}.i-tree-view-node .i-tree-view-checkbox-container{display:flex;align-items:center;flex-shrink:0}.i-tree-view-node .i-tree-view-node-icon{font-size:1em;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:1em;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
7724
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITreeView, isStandalone: true, selector: "i-tree-view", inputs: { value: "value", selectionMode: "selectionMode", selection: "selection", scrollHeight: "scrollHeight", loading: "loading", emptyMessage: "emptyMessage", togglerTemplate: "togglerTemplate", filter: "filter", filterBy: "filterBy", filterMode: "filterMode", filterPlaceholder: "filterPlaceholder", filteredNodes: "filteredNodes", validateDrop: "validateDrop", propagateSelectionUp: "propagateSelectionUp", propagateSelectionDown: "propagateSelectionDown", selectAll: "selectAll" }, outputs: { onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [ngModel]=\"filterValue\"\n (ngModelChange)=\"filterValue = $event; applyFilter()\"\n label=\"Search tree\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n }\n @if (selectAll && selectionMode === \"checkbox\") {\n <div class=\"i-tree-view-select-all-container\">\n <div class=\"select-box\">\n <i-checkbox\n [(ngModel)]=\"selectAllChecked\"\n [id]=\"componentId + '-select-all'\"\n [label]=\"'Select All'\"\n (ngModelChange)=\"onSelectAllChange()\"\n />\n </div>\n </div>\n }\n\n <div class=\"i-tree-view-container\">\n @if (loading) {\n <div class=\"i-tree-view-loading\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n <span>Loading...</span>\n </div>\n } @else if (filteredValue.length === 0) {\n <div class=\"i-tree-view-empty\">\n <span>{{ emptyMessage }}</span>\n </div>\n } @else {\n <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n @for (node of filteredValue; track node.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n <div\n class=\"i-tree-view-node\"\n [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n [class.i-tree-view-node--expanded]=\"node.expanded\"\n [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n [class.i-tree-view-node--temporary-highlight]=\"\n isTemporarilyHighlighted(node)\n \"\n [class]=\"node.styleClass\"\n [style.padding-left.rem]=\"level * 1\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n [attr.aria-selected]=\"isSelected(node)\"\n [attr.aria-level]=\"level + 1\"\n tabindex=\"0\"\n (click)=\"onNodeClick($event, node)\"\n (keydown.enter)=\"onNodeClick($event, node)\"\n (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n >\n <div class=\"i-tree-view-node-content\">\n @if (hasChildren(node)) {\n <button\n type=\"button\"\n class=\"i-tree-view-toggler\"\n (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <i [class]=\"getToggleIcon(node)\"></i>\n </button>\n } @else {\n <span class=\"i-tree-view-toggler-spacer\"></span>\n }\n @if (selectionMode === \"checkbox\") {\n <div class=\"i-tree-view-checkbox-container\">\n <i-checkbox\n [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n [indeterminate]=\"isPartiallySelected(node)\"\n (onChange)=\"onCheckboxChange($event, node)\"\n [id]=\"getCheckboxId(node)\"\n size=\"small\"\n tabindex=\"-1\"\n >\n </i-checkbox>\n </div>\n }\n\n <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n </div>\n </div>\n\n @if (hasChildren(node) && node.expanded) {\n <ul class=\"i-tree-view-children\" role=\"group\">\n @for (child of node.children; track child.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--color-component-background-secondary);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:1em}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{font-size:16px}.i-tree-view-wrapper .i-tree-view-empty{display:flex;align-items:center;justify-content:center;padding:20px;font-size:1em;font-style:italic}.i-tree-view-root,.i-tree-view-children{list-style:none;margin:0;padding:0}.i-tree-view-children{padding-left:0}.i-tree-view-node{position:relative;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.i-tree-view-node:focus{outline:none}.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{animation:highlight-fade .7s ease-out}.i-tree-view-node .i-tree-view-node-content{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:all .15s ease;min-height:32px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;border-radius:2px;transition:all .15s ease}.i-tree-view-node .i-tree-view-toggler:focus{outline:none}.i-tree-view-node .i-tree-view-toggler i{font-size:12px;transition:transform .15s ease}.i-tree-view-node .i-tree-view-toggler-spacer{width:20px;height:20px;flex-shrink:0}.i-tree-view-node .i-tree-view-checkbox-container{display:flex;align-items:center;flex-shrink:0}.i-tree-view-node .i-tree-view-node-icon{font-size:1em;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:1em;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(pointer:coarse){.i-tree-view-node .i-tree-view-node-content{min-height:44px}.i-tree-view-node .i-tree-view-toggler{width:44px;height:44px;flex-shrink:0}.i-tree-view-node .i-tree-view-toggler-spacer{width:44px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
7653
7725
|
}
|
|
7654
7726
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITreeView, decorators: [{
|
|
7655
7727
|
type: Component,
|
|
7656
|
-
args: [{ selector: 'i-tree-view', standalone: true, imports: [CommonModule, FormsModule, ICheckbox, IInputText], template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [ngModel]=\"filterValue\"\n (ngModelChange)=\"filterValue = $event; applyFilter()\"\n label=\"Search tree\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n }\n @if (selectAll && selectionMode === \"checkbox\") {\n <div class=\"i-tree-view-select-all-container\">\n <div class=\"select-box\">\n <i-checkbox\n [(ngModel)]=\"selectAllChecked\"\n [id]=\"componentId + '-select-all'\"\n [label]=\"'Select All'\"\n (ngModelChange)=\"onSelectAllChange()\"\n />\n </div>\n </div>\n }\n\n <div class=\"i-tree-view-container\">\n @if (loading) {\n <div class=\"i-tree-view-loading\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n <span>Loading...</span>\n </div>\n } @else if (filteredValue.length === 0) {\n <div class=\"i-tree-view-empty\">\n <span>{{ emptyMessage }}</span>\n </div>\n } @else {\n <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n @for (node of filteredValue; track node.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n <div\n class=\"i-tree-view-node\"\n [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n [class.i-tree-view-node--expanded]=\"node.expanded\"\n [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n [class.i-tree-view-node--temporary-highlight]=\"\n isTemporarilyHighlighted(node)\n \"\n [class]=\"node.styleClass\"\n [style.padding-left.rem]=\"level * 1\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n [attr.aria-selected]=\"isSelected(node)\"\n [attr.aria-level]=\"level + 1\"\n tabindex=\"0\"\n (click)=\"onNodeClick($event, node)\"\n (keydown.enter)=\"onNodeClick($event, node)\"\n (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n >\n <div class=\"i-tree-view-node-content\">\n @if (hasChildren(node)) {\n <button\n type=\"button\"\n class=\"i-tree-view-toggler\"\n (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <i [class]=\"getToggleIcon(node)\"></i>\n </button>\n } @else {\n <span class=\"i-tree-view-toggler-spacer\"></span>\n }\n @if (selectionMode === \"checkbox\") {\n <div class=\"i-tree-view-checkbox-container\">\n <i-checkbox\n [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n [indeterminate]=\"isPartiallySelected(node)\"\n (onChange)=\"onCheckboxChange($event, node)\"\n [id]=\"getCheckboxId(node)\"\n size=\"small\"\n tabindex=\"-1\"\n >\n </i-checkbox>\n </div>\n }\n\n <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n </div>\n </div>\n\n @if (hasChildren(node) && node.expanded) {\n <ul class=\"i-tree-view-children\" role=\"group\">\n @for (child of node.children; track child.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--color-component-background-secondary);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:1em}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{font-size:16px}.i-tree-view-wrapper .i-tree-view-empty{display:flex;align-items:center;justify-content:center;padding:20px;font-size:1em;font-style:italic}.i-tree-view-root,.i-tree-view-children{list-style:none;margin:0;padding:0}.i-tree-view-children{padding-left:0}.i-tree-view-node{position:relative;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.i-tree-view-node:focus{outline:none}.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{animation:highlight-fade .7s ease-out}.i-tree-view-node .i-tree-view-node-content{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:all .15s ease;min-height:32px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;border-radius:2px;transition:all .15s ease}.i-tree-view-node .i-tree-view-toggler:focus{outline:none}.i-tree-view-node .i-tree-view-toggler i{font-size:12px;transition:transform .15s ease}.i-tree-view-node .i-tree-view-toggler-spacer{width:20px;height:20px;flex-shrink:0}.i-tree-view-node .i-tree-view-checkbox-container{display:flex;align-items:center;flex-shrink:0}.i-tree-view-node .i-tree-view-node-icon{font-size:1em;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:1em;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
7728
|
+
args: [{ selector: 'i-tree-view', standalone: true, imports: [CommonModule, FormsModule, ICheckbox, IInputText], template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n @if (filter) {\n <div class=\"i-tree-view-filter-container\">\n <i-input-text\n [ngModel]=\"filterValue\"\n (ngModelChange)=\"filterValue = $event; applyFilter()\"\n label=\"Search tree\"\n [placeholder]=\"filterPlaceholder\"\n [icon]=\"'pi pi-search'\"\n [useFloatLabel]=\"false\"\n [fluid]=\"true\"\n class=\"i-tree-view-filter\"\n >\n </i-input-text>\n </div>\n }\n @if (selectAll && selectionMode === \"checkbox\") {\n <div class=\"i-tree-view-select-all-container\">\n <div class=\"select-box\">\n <i-checkbox\n [(ngModel)]=\"selectAllChecked\"\n [id]=\"componentId + '-select-all'\"\n [label]=\"'Select All'\"\n (ngModelChange)=\"onSelectAllChange()\"\n />\n </div>\n </div>\n }\n\n <div class=\"i-tree-view-container\">\n @if (loading) {\n <div class=\"i-tree-view-loading\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n <span>Loading...</span>\n </div>\n } @else if (filteredValue.length === 0) {\n <div class=\"i-tree-view-empty\">\n <span>{{ emptyMessage }}</span>\n </div>\n } @else {\n <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n @for (node of filteredValue; track node.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n <div\n class=\"i-tree-view-node\"\n [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n [class.i-tree-view-node--expanded]=\"node.expanded\"\n [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n [class.i-tree-view-node--temporary-highlight]=\"\n isTemporarilyHighlighted(node)\n \"\n [class]=\"node.styleClass\"\n [style.padding-left.rem]=\"level * 1\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n [attr.aria-selected]=\"isSelected(node)\"\n [attr.aria-level]=\"level + 1\"\n tabindex=\"0\"\n (click)=\"onNodeClick($event, node)\"\n (keydown.enter)=\"onNodeClick($event, node)\"\n (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n >\n <div class=\"i-tree-view-node-content\">\n @if (hasChildren(node)) {\n <button\n type=\"button\"\n class=\"i-tree-view-toggler\"\n (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <i [class]=\"getToggleIcon(node)\"></i>\n </button>\n } @else {\n <span class=\"i-tree-view-toggler-spacer\"></span>\n }\n @if (selectionMode === \"checkbox\") {\n <div class=\"i-tree-view-checkbox-container\">\n <i-checkbox\n [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n [indeterminate]=\"isPartiallySelected(node)\"\n (onChange)=\"onCheckboxChange($event, node)\"\n [id]=\"getCheckboxId(node)\"\n size=\"small\"\n tabindex=\"-1\"\n >\n </i-checkbox>\n </div>\n }\n\n <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n </div>\n </div>\n\n @if (hasChildren(node) && node.expanded) {\n <ul class=\"i-tree-view-children\" role=\"group\">\n @for (child of node.children; track child.key || $index) {\n <li>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n ></ng-container>\n </li>\n }\n </ul>\n }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--color-component-background-secondary);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:1em}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{font-size:16px}.i-tree-view-wrapper .i-tree-view-empty{display:flex;align-items:center;justify-content:center;padding:20px;font-size:1em;font-style:italic}.i-tree-view-root,.i-tree-view-children{list-style:none;margin:0;padding:0}.i-tree-view-children{padding-left:0}.i-tree-view-node{position:relative;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.i-tree-view-node:focus{outline:none}.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{animation:highlight-fade .7s ease-out}.i-tree-view-node .i-tree-view-node-content{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:all .15s ease;min-height:32px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;border-radius:2px;transition:all .15s ease}.i-tree-view-node .i-tree-view-toggler:focus{outline:none}.i-tree-view-node .i-tree-view-toggler i{font-size:12px;transition:transform .15s ease}.i-tree-view-node .i-tree-view-toggler-spacer{width:20px;height:20px;flex-shrink:0}.i-tree-view-node .i-tree-view-checkbox-container{display:flex;align-items:center;flex-shrink:0}.i-tree-view-node .i-tree-view-node-icon{font-size:1em;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:1em;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(pointer:coarse){.i-tree-view-node .i-tree-view-node-content{min-height:44px}.i-tree-view-node .i-tree-view-toggler{width:44px;height:44px;flex-shrink:0}.i-tree-view-node .i-tree-view-toggler-spacer{width:44px}}\n"] }]
|
|
7657
7729
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
7658
7730
|
type: Input
|
|
7659
7731
|
}], selectionMode: [{
|
|
@@ -8156,11 +8228,11 @@ class IWhisper {
|
|
|
8156
8228
|
return message.id;
|
|
8157
8229
|
}
|
|
8158
8230
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IWhisper, deps: [{ token: WhisperService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8159
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IWhisper, isStandalone: true, selector: "i-whisper", inputs: { key: "key", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", style: "style", position: "position", preventOpenDuplicates: "preventOpenDuplicates", preventDuplicates: "preventDuplicates" }, ngImport: i0, template: "@if (messages && messages.length > 0) {\n <div\n [ngClass]=\"getContainerClass()\"\n [ngStyle]=\"style\"\n [attr.id]=\"componentId\"\n >\n @for (message of messages; track trackByMessage($index, message)) {\n <div\n [ngClass]=\"getMessageClass(message)\"\n [attr.data-whisper-key]=\"message.key\"\n [attr.aria-live]=\"'polite'\"\n [attr.aria-atomic]=\"'true'\"\n role=\"alert\"\n >\n <div class=\"i-whisper-message-content\">\n <div class=\"i-whisper-message-icon\">\n <i [ngClass]=\"['pi', getMessageIcon(message.severity)]\"> </i>\n </div>\n <div class=\"i-whisper-message-text\">\n @if (message.summary) {\n <div class=\"i-whisper-message-summary\">\n {{ message.summary }}\n </div>\n }\n @if (message.detail) {\n <div class=\"i-whisper-message-detail\">\n {{ message.detail }}\n </div>\n }\n </div>\n @if (message.closable === true) {\n <i-button\n [severity]=\"message.severity\"\n size=\"small\"\n [text]=\"true\"\n icon=\"pi pi-times\"\n (click)=\"onClose(message)\"\n [attr.aria-label]=\"'Close'\"\n />\n }\n </div>\n </div>\n }\n </div>\n}\n", styles: [".i-whisper-message{background:var(--surface-section);color:var(--color-text-primary);border-left:4px solid transparent}.i-whisper-message .i-whisper-message-close{color:var(--color-text-secondary)}.i-whisper-message .i-whisper-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-whisper-message.i-whisper-message-success{border-left-color:var(--color-success)}.i-whisper-message.i-whisper-message-success .i-whisper-message-icon{color:var(--color-success)}.i-whisper-message.i-whisper-message-info{border-left-color:var(--color-info)}.i-whisper-message.i-whisper-message-info .i-whisper-message-icon{color:var(--color-info)}.i-whisper-message.i-whisper-message-warning{border-left-color:var(--color-warning)}.i-whisper-message.i-whisper-message-warning .i-whisper-message-icon{color:var(--color-warning)}.i-whisper-message.i-whisper-message-danger{border-left-color:var(--color-danger)}.i-whisper-message.i-whisper-message-danger .i-whisper-message-icon{color:var(--color-danger)}.i-whisper-message.i-whisper-message-primary{border-left-color:var(--color-primary)}.i-whisper-message.i-whisper-message-primary .i-whisper-message-icon{color:var(--color-primary)}.i-whisper-message.i-whisper-message-secondary{border-left-color:var(--color-secondary)}.i-whisper-message.i-whisper-message-secondary .i-whisper-message-icon{color:var(--color-secondary)}.i-whisper-message.i-whisper-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-tertiary .i-whisper-message-icon{color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-contrast{border-left-color:var(--color-contrast)}.i-whisper-message.i-whisper-message-contrast .i-whisper-message-icon{color:var(--color-contrast)}.i-whisper{position:fixed;z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:8px;max-width:400px;min-width:300px}.i-whisper.i-whisper-top-left{top:20px;left:20px}.i-whisper.i-whisper-top-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-top-center{top:20px;left:50%;transform:translate(-50%)}.i-whisper.i-whisper-top-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-top-right{top:20px;right:20px}.i-whisper.i-whisper-top-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper.i-whisper-bottom-left{bottom:20px;left:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-bottom-center{bottom:20px;left:50%;transform:translate(-50%);flex-direction:column-reverse}.i-whisper.i-whisper-bottom-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-bottom-right{bottom:20px;right:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper .i-whisper-message{pointer-events:auto;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;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{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;margin-left:8px;transition:background-color .2s}.i-whisper .i-whisper-message .i-whisper-message-close:hover{background-color:#0000001a}.i-whisper .i-whisper-message .i-whisper-message-close i{font-size:18px}.i-whisper .i-whisper-message.i-whisper-message-exit{animation:whisperSlideOut .3s ease-in forwards}@keyframes whisperSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes whisperSlideOut{0%{opacity:1;transform:translate(0);max-height:200px;margin-bottom:4px}to{opacity:0;transform:translate(100%);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}}@media(max-width:768px){.i-whisper{max-width:calc(100vw - 40px);min-width:280px}.i-whisper.i-whisper-top-center,.i-whisper.i-whisper-bottom-center{left:20px;right:20px;transform:none;max-width:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8231
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IWhisper, isStandalone: true, selector: "i-whisper", inputs: { key: "key", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", style: "style", position: "position", preventOpenDuplicates: "preventOpenDuplicates", preventDuplicates: "preventDuplicates" }, ngImport: i0, template: "@if (messages && messages.length > 0) {\n <div\n [ngClass]=\"getContainerClass()\"\n [ngStyle]=\"style\"\n [attr.id]=\"componentId\"\n >\n @for (message of messages; track trackByMessage($index, message)) {\n <div\n [ngClass]=\"getMessageClass(message)\"\n [attr.data-whisper-key]=\"message.key\"\n [attr.aria-live]=\"'polite'\"\n [attr.aria-atomic]=\"'true'\"\n role=\"alert\"\n >\n <div class=\"i-whisper-message-content\">\n <div class=\"i-whisper-message-icon\">\n <i [ngClass]=\"['pi', getMessageIcon(message.severity)]\"> </i>\n </div>\n <div class=\"i-whisper-message-text\">\n @if (message.summary) {\n <div class=\"i-whisper-message-summary\">\n {{ message.summary }}\n </div>\n }\n @if (message.detail) {\n <div class=\"i-whisper-message-detail\">\n {{ message.detail }}\n </div>\n }\n </div>\n @if (message.closable === true) {\n <i-button\n [severity]=\"message.severity\"\n size=\"small\"\n [text]=\"true\"\n icon=\"pi pi-times\"\n (click)=\"onClose(message)\"\n [attr.aria-label]=\"'Close'\"\n />\n }\n </div>\n </div>\n }\n </div>\n}\n", styles: [".i-whisper-message{background:var(--surface-section);color:var(--color-text-primary);border-left:4px solid transparent}.i-whisper-message .i-whisper-message-close{color:var(--color-text-secondary)}.i-whisper-message .i-whisper-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-whisper-message.i-whisper-message-success{border-left-color:var(--color-success)}.i-whisper-message.i-whisper-message-success .i-whisper-message-icon{color:var(--color-success)}.i-whisper-message.i-whisper-message-info{border-left-color:var(--color-info)}.i-whisper-message.i-whisper-message-info .i-whisper-message-icon{color:var(--color-info)}.i-whisper-message.i-whisper-message-warning{border-left-color:var(--color-warning)}.i-whisper-message.i-whisper-message-warning .i-whisper-message-icon{color:var(--color-warning)}.i-whisper-message.i-whisper-message-danger{border-left-color:var(--color-danger)}.i-whisper-message.i-whisper-message-danger .i-whisper-message-icon{color:var(--color-danger)}.i-whisper-message.i-whisper-message-primary{border-left-color:var(--color-primary)}.i-whisper-message.i-whisper-message-primary .i-whisper-message-icon{color:var(--color-primary)}.i-whisper-message.i-whisper-message-secondary{border-left-color:var(--color-secondary)}.i-whisper-message.i-whisper-message-secondary .i-whisper-message-icon{color:var(--color-secondary)}.i-whisper-message.i-whisper-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-tertiary .i-whisper-message-icon{color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-contrast{border-left-color:var(--color-contrast)}.i-whisper-message.i-whisper-message-contrast .i-whisper-message-icon{color:var(--color-contrast)}.i-whisper{position:fixed;z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:8px;max-width:400px;min-width:300px}.i-whisper.i-whisper-top-left{top:20px;left:20px}.i-whisper.i-whisper-top-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-top-center{top:20px;left:50%;transform:translate(-50%)}.i-whisper.i-whisper-top-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-top-right{top:20px;right:20px}.i-whisper.i-whisper-top-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper.i-whisper-bottom-left{bottom:20px;left:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-bottom-center{bottom:20px;left:50%;transform:translate(-50%);flex-direction:column-reverse}.i-whisper.i-whisper-bottom-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-bottom-right{bottom:20px;right:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper .i-whisper-message{pointer-events:auto;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;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{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;margin-left:8px;transition:background-color .2s}.i-whisper .i-whisper-message .i-whisper-message-close:hover{background-color:#0000001a}.i-whisper .i-whisper-message .i-whisper-message-close i{font-size:18px}.i-whisper .i-whisper-message.i-whisper-message-exit{animation:whisperSlideOut .3s ease-in forwards}@keyframes whisperSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes whisperSlideOut{0%{opacity:1;transform:translate(0);max-height:200px;margin-bottom:4px}to{opacity:0;transform:translate(100%);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}}@media(max-width:768px){.i-whisper{max-width:calc(100vw - 40px);min-width:280px}.i-whisper.i-whisper-top-center,.i-whisper.i-whisper-bottom-center{left:20px;right:20px;transform:none;max-width:none}}@media(max-width:768px){.i-whisper{min-width:0;box-sizing:border-box;overflow-wrap:anywhere}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8160
8232
|
}
|
|
8161
8233
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IWhisper, decorators: [{
|
|
8162
8234
|
type: Component,
|
|
8163
|
-
args: [{ selector: 'i-whisper', standalone: true, imports: [NgClass, NgStyle, IButton], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (messages && messages.length > 0) {\n <div\n [ngClass]=\"getContainerClass()\"\n [ngStyle]=\"style\"\n [attr.id]=\"componentId\"\n >\n @for (message of messages; track trackByMessage($index, message)) {\n <div\n [ngClass]=\"getMessageClass(message)\"\n [attr.data-whisper-key]=\"message.key\"\n [attr.aria-live]=\"'polite'\"\n [attr.aria-atomic]=\"'true'\"\n role=\"alert\"\n >\n <div class=\"i-whisper-message-content\">\n <div class=\"i-whisper-message-icon\">\n <i [ngClass]=\"['pi', getMessageIcon(message.severity)]\"> </i>\n </div>\n <div class=\"i-whisper-message-text\">\n @if (message.summary) {\n <div class=\"i-whisper-message-summary\">\n {{ message.summary }}\n </div>\n }\n @if (message.detail) {\n <div class=\"i-whisper-message-detail\">\n {{ message.detail }}\n </div>\n }\n </div>\n @if (message.closable === true) {\n <i-button\n [severity]=\"message.severity\"\n size=\"small\"\n [text]=\"true\"\n icon=\"pi pi-times\"\n (click)=\"onClose(message)\"\n [attr.aria-label]=\"'Close'\"\n />\n }\n </div>\n </div>\n }\n </div>\n}\n", styles: [".i-whisper-message{background:var(--surface-section);color:var(--color-text-primary);border-left:4px solid transparent}.i-whisper-message .i-whisper-message-close{color:var(--color-text-secondary)}.i-whisper-message .i-whisper-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-whisper-message.i-whisper-message-success{border-left-color:var(--color-success)}.i-whisper-message.i-whisper-message-success .i-whisper-message-icon{color:var(--color-success)}.i-whisper-message.i-whisper-message-info{border-left-color:var(--color-info)}.i-whisper-message.i-whisper-message-info .i-whisper-message-icon{color:var(--color-info)}.i-whisper-message.i-whisper-message-warning{border-left-color:var(--color-warning)}.i-whisper-message.i-whisper-message-warning .i-whisper-message-icon{color:var(--color-warning)}.i-whisper-message.i-whisper-message-danger{border-left-color:var(--color-danger)}.i-whisper-message.i-whisper-message-danger .i-whisper-message-icon{color:var(--color-danger)}.i-whisper-message.i-whisper-message-primary{border-left-color:var(--color-primary)}.i-whisper-message.i-whisper-message-primary .i-whisper-message-icon{color:var(--color-primary)}.i-whisper-message.i-whisper-message-secondary{border-left-color:var(--color-secondary)}.i-whisper-message.i-whisper-message-secondary .i-whisper-message-icon{color:var(--color-secondary)}.i-whisper-message.i-whisper-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-tertiary .i-whisper-message-icon{color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-contrast{border-left-color:var(--color-contrast)}.i-whisper-message.i-whisper-message-contrast .i-whisper-message-icon{color:var(--color-contrast)}.i-whisper{position:fixed;z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:8px;max-width:400px;min-width:300px}.i-whisper.i-whisper-top-left{top:20px;left:20px}.i-whisper.i-whisper-top-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-top-center{top:20px;left:50%;transform:translate(-50%)}.i-whisper.i-whisper-top-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-top-right{top:20px;right:20px}.i-whisper.i-whisper-top-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper.i-whisper-bottom-left{bottom:20px;left:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-bottom-center{bottom:20px;left:50%;transform:translate(-50%);flex-direction:column-reverse}.i-whisper.i-whisper-bottom-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-bottom-right{bottom:20px;right:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper .i-whisper-message{pointer-events:auto;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;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{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;margin-left:8px;transition:background-color .2s}.i-whisper .i-whisper-message .i-whisper-message-close:hover{background-color:#0000001a}.i-whisper .i-whisper-message .i-whisper-message-close i{font-size:18px}.i-whisper .i-whisper-message.i-whisper-message-exit{animation:whisperSlideOut .3s ease-in forwards}@keyframes whisperSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes whisperSlideOut{0%{opacity:1;transform:translate(0);max-height:200px;margin-bottom:4px}to{opacity:0;transform:translate(100%);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}}@media(max-width:768px){.i-whisper{max-width:calc(100vw - 40px);min-width:280px}.i-whisper.i-whisper-top-center,.i-whisper.i-whisper-bottom-center{left:20px;right:20px;transform:none;max-width:none}}\n"] }]
|
|
8235
|
+
args: [{ selector: 'i-whisper', standalone: true, imports: [NgClass, NgStyle, IButton], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (messages && messages.length > 0) {\n <div\n [ngClass]=\"getContainerClass()\"\n [ngStyle]=\"style\"\n [attr.id]=\"componentId\"\n >\n @for (message of messages; track trackByMessage($index, message)) {\n <div\n [ngClass]=\"getMessageClass(message)\"\n [attr.data-whisper-key]=\"message.key\"\n [attr.aria-live]=\"'polite'\"\n [attr.aria-atomic]=\"'true'\"\n role=\"alert\"\n >\n <div class=\"i-whisper-message-content\">\n <div class=\"i-whisper-message-icon\">\n <i [ngClass]=\"['pi', getMessageIcon(message.severity)]\"> </i>\n </div>\n <div class=\"i-whisper-message-text\">\n @if (message.summary) {\n <div class=\"i-whisper-message-summary\">\n {{ message.summary }}\n </div>\n }\n @if (message.detail) {\n <div class=\"i-whisper-message-detail\">\n {{ message.detail }}\n </div>\n }\n </div>\n @if (message.closable === true) {\n <i-button\n [severity]=\"message.severity\"\n size=\"small\"\n [text]=\"true\"\n icon=\"pi pi-times\"\n (click)=\"onClose(message)\"\n [attr.aria-label]=\"'Close'\"\n />\n }\n </div>\n </div>\n }\n </div>\n}\n", styles: [".i-whisper-message{background:var(--surface-section);color:var(--color-text-primary);border-left:4px solid transparent}.i-whisper-message .i-whisper-message-close{color:var(--color-text-secondary)}.i-whisper-message .i-whisper-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-whisper-message.i-whisper-message-success{border-left-color:var(--color-success)}.i-whisper-message.i-whisper-message-success .i-whisper-message-icon{color:var(--color-success)}.i-whisper-message.i-whisper-message-info{border-left-color:var(--color-info)}.i-whisper-message.i-whisper-message-info .i-whisper-message-icon{color:var(--color-info)}.i-whisper-message.i-whisper-message-warning{border-left-color:var(--color-warning)}.i-whisper-message.i-whisper-message-warning .i-whisper-message-icon{color:var(--color-warning)}.i-whisper-message.i-whisper-message-danger{border-left-color:var(--color-danger)}.i-whisper-message.i-whisper-message-danger .i-whisper-message-icon{color:var(--color-danger)}.i-whisper-message.i-whisper-message-primary{border-left-color:var(--color-primary)}.i-whisper-message.i-whisper-message-primary .i-whisper-message-icon{color:var(--color-primary)}.i-whisper-message.i-whisper-message-secondary{border-left-color:var(--color-secondary)}.i-whisper-message.i-whisper-message-secondary .i-whisper-message-icon{color:var(--color-secondary)}.i-whisper-message.i-whisper-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-tertiary .i-whisper-message-icon{color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-contrast{border-left-color:var(--color-contrast)}.i-whisper-message.i-whisper-message-contrast .i-whisper-message-icon{color:var(--color-contrast)}.i-whisper{position:fixed;z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:8px;max-width:400px;min-width:300px}.i-whisper.i-whisper-top-left{top:20px;left:20px}.i-whisper.i-whisper-top-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-top-center{top:20px;left:50%;transform:translate(-50%)}.i-whisper.i-whisper-top-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-top-right{top:20px;right:20px}.i-whisper.i-whisper-top-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper.i-whisper-bottom-left{bottom:20px;left:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-bottom-center{bottom:20px;left:50%;transform:translate(-50%);flex-direction:column-reverse}.i-whisper.i-whisper-bottom-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-bottom-right{bottom:20px;right:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper .i-whisper-message{pointer-events:auto;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;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{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;margin-left:8px;transition:background-color .2s}.i-whisper .i-whisper-message .i-whisper-message-close:hover{background-color:#0000001a}.i-whisper .i-whisper-message .i-whisper-message-close i{font-size:18px}.i-whisper .i-whisper-message.i-whisper-message-exit{animation:whisperSlideOut .3s ease-in forwards}@keyframes whisperSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes whisperSlideOut{0%{opacity:1;transform:translate(0);max-height:200px;margin-bottom:4px}to{opacity:0;transform:translate(100%);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}}@media(max-width:768px){.i-whisper{max-width:calc(100vw - 40px);min-width:280px}.i-whisper.i-whisper-top-center,.i-whisper.i-whisper-bottom-center{left:20px;right:20px;transform:none;max-width:none}}@media(max-width:768px){.i-whisper{min-width:0;box-sizing:border-box;overflow-wrap:anywhere}}\n"] }]
|
|
8164
8236
|
}], ctorParameters: () => [{ type: WhisperService }, { type: i0.ChangeDetectorRef }], propDecorators: { key: [{
|
|
8165
8237
|
type: Input
|
|
8166
8238
|
}], autoZIndex: [{
|
|
@@ -9174,7 +9246,7 @@ class ITable {
|
|
|
9174
9246
|
return this.virtualScrollViewport?.measureScrollOffset() ?? 0;
|
|
9175
9247
|
}
|
|
9176
9248
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9177
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITable, isStandalone: true, selector: "i-table", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: false, isRequired: false, transformFunction: null }, filterDelay: { classPropertyName: "filterDelay", publicName: "filterDelay", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, rowBorders: { classPropertyName: "rowBorders", publicName: "rowBorders", isSignal: false, isRequired: false, transformFunction: null }, detailRowBorders: { classPropertyName: "detailRowBorders", publicName: "detailRowBorders", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMinBufferPx: { classPropertyName: "virtualScrollMinBufferPx", publicName: "virtualScrollMinBufferPx", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMaxBufferPx: { classPropertyName: "virtualScrollMaxBufferPx", publicName: "virtualScrollMaxBufferPx", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: false, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: false, isRequired: false, transformFunction: null }, downloadMode: { classPropertyName: "downloadMode", publicName: "downloadMode", isSignal: false, isRequired: false, transformFunction: null }, downloadFormat: { classPropertyName: "downloadFormat", publicName: "downloadFormat", isSignal: false, isRequired: false, transformFunction: null }, downloadFilename: { classPropertyName: "downloadFilename", publicName: "downloadFilename", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onFilter: "onFilter", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n <!-- Table Header: global filter + download -->\n @if (globalFilter || downloadable) {\n <div class=\"i-table-header\">\n <div class=\"i-table-header-start\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"i-table-header-end\">\n @if (globalFilter) {\n <div class=\"i-table-global-filter\">\n <i-input-text\n [useFloatLabel]=\"false\"\n label=\"Search table\"\n placeholder=\"Search\u2026\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n ></i-input-text>\n </div>\n }\n @if (downloadable) {\n <div class=\"i-table-download\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n icon=\"pi pi-download\"\n label=\"Download\"\n (clicked)=\"handleDownload()\"\n ></i-button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Loading Overlay -->\n @if (loading) {\n <div class=\"i-table-loading-overlay\">\n <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n </div>\n }\n\n <!-- ================================================================\n PATH A \u2014 Detail-expandable table\n Uses a standard scrollable container so that nested <i-table>\n components can expand inline below their parent rows.\n ================================================================ -->\n @if (hasDetails()) {\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <!-- Parent row -->\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"xtra-small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n [ariaExpanded]=\"isRowExpanded(row)\"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getCellIcon(row, column)\"\n [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n <td class=\"i-table-detail-count-cell\">\n ({{ getDetailRowCount(row) }})\n </td>\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n\n <!-- Detail expansion row -->\n @if (isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"totalColspan()\"\n class=\"i-table-expanded-cell\"\n >\n <div class=\"i-table-expanded-content\">\n <i-table\n [grid]=\"getDetailGrid(row)\"\n [rowBorders]=\"detailRowBorders\"\n [sortable]=\"sortable\"\n [filterable]=\"filterable\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"selection\"\n [striped]=\"striped\"\n [hoverable]=\"hoverable\"\n [bordered]=\"bordered\"\n [size]=\"size\"\n [dataKey]=\"dataKey\"\n [resizableColumns]=\"resizableColumns\"\n (onSort)=\"onSort.emit($event)\"\n (onFilter)=\"onFilter.emit($event)\"\n (onSelectionChange)=\"onSelectionChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n ></i-table>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n } @else if (virtualScroll) {\n <!-- ================================================================\n PATH B \u2014 CDK Virtual Scroll (div-based rows)\n Use only for large row counts (\u2265 ~500 rows). Uses flex <div> rows\n so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n [style.height]=\"effectiveHeight()\"\n >\n <!-- Sticky header \u2014 flex rows that mirror the virtual body rows -->\n <div class=\"i-table-virtual-header\">\n @if (filterable) {\n <div class=\"i-table-virtual-row i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n >\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n />\n </div>\n } @else {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n ></div>\n }\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n }\n </div>\n }\n <div class=\"i-table-virtual-row i-table-header-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell i-table-header-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\">\n {{ grid().actionsHeader ?? 'Actions' }}\n </div>\n }\n </div>\n </div>\n\n <!-- Virtual Scroll Viewport \u2014 *cdkVirtualFor on <div>, not <tr> -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n @if (processedData().length === 0) {\n <div class=\"i-table-virtual-row i-table-empty-row\">\n <div\n class=\"i-table-virtual-cell\"\n style=\"flex: 1; text-align: center; padding: 40px 16px\"\n >\n <i-no-content />\n </div>\n </div>\n }\n <div\n *cdkVirtualFor=\"\n let row of processedData();\n let rowIndex = index;\n trackBy: trackByRow\n \"\n class=\"i-table-virtual-row\"\n [style.height.px]=\"virtualScrollItemSize\"\n [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [ngClass]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n } @else {\n <!-- ================================================================\n PATH C \u2014 Regular scrollable table\n Default for small/medium datasets and nested detail tables.\n Uses a plain overflow container with a @for loop \u2014 no CDK needed.\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr>td{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row>td{border-bottom:none}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:0;margin:2px 0 24px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}:host{display:block;min-width:0}.i-table-wrapper .i-table-header{flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{min-width:0;flex-wrap:wrap;gap:.75rem}.i-table-wrapper .i-table-header .i-table-header-end{min-width:0;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:min(250px,100%)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ITable), selector: "i-table", inputs: ["grid", "emptyMessage", "sortable", "sortField", "sortOrder", "filterable", "globalFilter", "filterDelay", "selectionMode", "selection", "dataKey", "striped", "hoverable", "bordered", "rowBorders", "detailRowBorders", "size", "loading", "scrollable", "height", "virtualScroll", "virtualScrollItemSize", "virtualScrollMinBufferPx", "virtualScrollMaxBufferPx", "resizableColumns", "downloadable", "downloadMode", "downloadFormat", "downloadFilename"], outputs: ["onSort", "onFilter", "selectionChange", "onSelectionChange", "onRowSelect", "onRowUnselect", "onRowExpand", "onRowCollapse", "onDownload"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => CdkVirtualScrollViewport), selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i0.forwardRef(() => CdkVirtualForOf), selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: i0.forwardRef(() => CdkFixedSizeVirtualScroll), selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i0.forwardRef(() => IInputText), selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: i0.forwardRef(() => IButton), selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: i0.forwardRef(() => ICheckbox), selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => IChip), selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: i0.forwardRef(() => NoContentComponent), selector: "i-no-content", inputs: ["icon", "message"] }, { kind: "directive", type: i0.forwardRef(() => TooltipDirective), selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9249
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITable, isStandalone: true, selector: "i-table", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: false, isRequired: false, transformFunction: null }, filterDelay: { classPropertyName: "filterDelay", publicName: "filterDelay", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, rowBorders: { classPropertyName: "rowBorders", publicName: "rowBorders", isSignal: false, isRequired: false, transformFunction: null }, detailRowBorders: { classPropertyName: "detailRowBorders", publicName: "detailRowBorders", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMinBufferPx: { classPropertyName: "virtualScrollMinBufferPx", publicName: "virtualScrollMinBufferPx", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMaxBufferPx: { classPropertyName: "virtualScrollMaxBufferPx", publicName: "virtualScrollMaxBufferPx", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: false, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: false, isRequired: false, transformFunction: null }, downloadMode: { classPropertyName: "downloadMode", publicName: "downloadMode", isSignal: false, isRequired: false, transformFunction: null }, downloadFormat: { classPropertyName: "downloadFormat", publicName: "downloadFormat", isSignal: false, isRequired: false, transformFunction: null }, downloadFilename: { classPropertyName: "downloadFilename", publicName: "downloadFilename", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onFilter: "onFilter", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n <!-- Table Header: global filter + download -->\n @if (globalFilter || downloadable) {\n <div class=\"i-table-header\">\n <div class=\"i-table-header-start\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"i-table-header-end\">\n @if (globalFilter) {\n <div class=\"i-table-global-filter\">\n <i-input-text\n [useFloatLabel]=\"false\"\n label=\"Search table\"\n placeholder=\"Search\u2026\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n ></i-input-text>\n </div>\n }\n @if (downloadable) {\n <div class=\"i-table-download\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n icon=\"pi pi-download\"\n label=\"Download\"\n (clicked)=\"handleDownload()\"\n ></i-button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Loading Overlay -->\n @if (loading) {\n <div class=\"i-table-loading-overlay\">\n <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n </div>\n }\n\n <!-- ================================================================\n PATH A \u2014 Detail-expandable table\n Uses a standard scrollable container so that nested <i-table>\n components can expand inline below their parent rows.\n ================================================================ -->\n @if (hasDetails()) {\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <!-- Parent row -->\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"xtra-small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n [ariaExpanded]=\"isRowExpanded(row)\"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getCellIcon(row, column)\"\n [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n <td class=\"i-table-detail-count-cell\">\n ({{ getDetailRowCount(row) }})\n </td>\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n\n <!-- Detail expansion row -->\n @if (isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"totalColspan()\"\n class=\"i-table-expanded-cell\"\n >\n <div class=\"i-table-expanded-content\">\n <i-table\n [grid]=\"getDetailGrid(row)\"\n [rowBorders]=\"detailRowBorders\"\n [sortable]=\"sortable\"\n [filterable]=\"filterable\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"selection\"\n [striped]=\"striped\"\n [hoverable]=\"hoverable\"\n [bordered]=\"bordered\"\n [size]=\"size\"\n [dataKey]=\"dataKey\"\n [resizableColumns]=\"resizableColumns\"\n (onSort)=\"onSort.emit($event)\"\n (onFilter)=\"onFilter.emit($event)\"\n (onSelectionChange)=\"onSelectionChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n ></i-table>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n } @else if (virtualScroll) {\n <!-- ================================================================\n PATH B \u2014 CDK Virtual Scroll (div-based rows)\n Use only for large row counts (\u2265 ~500 rows). Uses flex <div> rows\n so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n [style.height]=\"effectiveHeight()\"\n >\n <!-- Sticky header \u2014 flex rows that mirror the virtual body rows -->\n <div class=\"i-table-virtual-header\">\n @if (filterable) {\n <div class=\"i-table-virtual-row i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n >\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n />\n </div>\n } @else {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n ></div>\n }\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n }\n </div>\n }\n <div class=\"i-table-virtual-row i-table-header-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell i-table-header-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\">\n {{ grid().actionsHeader ?? 'Actions' }}\n </div>\n }\n </div>\n </div>\n\n <!-- Virtual Scroll Viewport \u2014 *cdkVirtualFor on <div>, not <tr> -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n @if (processedData().length === 0) {\n <div class=\"i-table-virtual-row i-table-empty-row\">\n <div\n class=\"i-table-virtual-cell\"\n style=\"flex: 1; text-align: center; padding: 40px 16px\"\n >\n <i-no-content />\n </div>\n </div>\n }\n <div\n *cdkVirtualFor=\"\n let row of processedData();\n let rowIndex = index;\n trackBy: trackByRow\n \"\n class=\"i-table-virtual-row\"\n [style.height.px]=\"virtualScrollItemSize\"\n [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [ngClass]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n } @else {\n <!-- ================================================================\n PATH C \u2014 Regular scrollable table\n Default for small/medium datasets and nested detail tables.\n Uses a plain overflow container with a @for loop \u2014 no CDK needed.\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr>td{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row>td{border-bottom:none}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:0;margin:2px 0 24px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width: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"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ITable), selector: "i-table", inputs: ["grid", "emptyMessage", "sortable", "sortField", "sortOrder", "filterable", "globalFilter", "filterDelay", "selectionMode", "selection", "dataKey", "striped", "hoverable", "bordered", "rowBorders", "detailRowBorders", "size", "loading", "scrollable", "height", "virtualScroll", "virtualScrollItemSize", "virtualScrollMinBufferPx", "virtualScrollMaxBufferPx", "resizableColumns", "downloadable", "downloadMode", "downloadFormat", "downloadFilename"], outputs: ["onSort", "onFilter", "selectionChange", "onSelectionChange", "onRowSelect", "onRowUnselect", "onRowExpand", "onRowCollapse", "onDownload"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => CdkVirtualScrollViewport), selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i0.forwardRef(() => CdkVirtualForOf), selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: i0.forwardRef(() => CdkFixedSizeVirtualScroll), selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i0.forwardRef(() => IInputText), selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: i0.forwardRef(() => IButton), selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: i0.forwardRef(() => ICheckbox), selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => IChip), selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: i0.forwardRef(() => NoContentComponent), selector: "i-no-content", inputs: ["icon", "message"] }, { kind: "directive", type: i0.forwardRef(() => TooltipDirective), selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9178
9250
|
}
|
|
9179
9251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITable, decorators: [{
|
|
9180
9252
|
type: Component,
|
|
@@ -9191,7 +9263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
9191
9263
|
NoContentComponent,
|
|
9192
9264
|
TooltipDirective,
|
|
9193
9265
|
forwardRef(() => ITable),
|
|
9194
|
-
], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n <!-- Table Header: global filter + download -->\n @if (globalFilter || downloadable) {\n <div class=\"i-table-header\">\n <div class=\"i-table-header-start\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"i-table-header-end\">\n @if (globalFilter) {\n <div class=\"i-table-global-filter\">\n <i-input-text\n [useFloatLabel]=\"false\"\n label=\"Search table\"\n placeholder=\"Search\u2026\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n ></i-input-text>\n </div>\n }\n @if (downloadable) {\n <div class=\"i-table-download\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n icon=\"pi pi-download\"\n label=\"Download\"\n (clicked)=\"handleDownload()\"\n ></i-button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Loading Overlay -->\n @if (loading) {\n <div class=\"i-table-loading-overlay\">\n <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n </div>\n }\n\n <!-- ================================================================\n PATH A \u2014 Detail-expandable table\n Uses a standard scrollable container so that nested <i-table>\n components can expand inline below their parent rows.\n ================================================================ -->\n @if (hasDetails()) {\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <!-- Parent row -->\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"xtra-small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n [ariaExpanded]=\"isRowExpanded(row)\"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getCellIcon(row, column)\"\n [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n <td class=\"i-table-detail-count-cell\">\n ({{ getDetailRowCount(row) }})\n </td>\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n\n <!-- Detail expansion row -->\n @if (isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"totalColspan()\"\n class=\"i-table-expanded-cell\"\n >\n <div class=\"i-table-expanded-content\">\n <i-table\n [grid]=\"getDetailGrid(row)\"\n [rowBorders]=\"detailRowBorders\"\n [sortable]=\"sortable\"\n [filterable]=\"filterable\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"selection\"\n [striped]=\"striped\"\n [hoverable]=\"hoverable\"\n [bordered]=\"bordered\"\n [size]=\"size\"\n [dataKey]=\"dataKey\"\n [resizableColumns]=\"resizableColumns\"\n (onSort)=\"onSort.emit($event)\"\n (onFilter)=\"onFilter.emit($event)\"\n (onSelectionChange)=\"onSelectionChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n ></i-table>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n } @else if (virtualScroll) {\n <!-- ================================================================\n PATH B \u2014 CDK Virtual Scroll (div-based rows)\n Use only for large row counts (\u2265 ~500 rows). Uses flex <div> rows\n so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n [style.height]=\"effectiveHeight()\"\n >\n <!-- Sticky header \u2014 flex rows that mirror the virtual body rows -->\n <div class=\"i-table-virtual-header\">\n @if (filterable) {\n <div class=\"i-table-virtual-row i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n >\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n />\n </div>\n } @else {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n ></div>\n }\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n }\n </div>\n }\n <div class=\"i-table-virtual-row i-table-header-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell i-table-header-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\">\n {{ grid().actionsHeader ?? 'Actions' }}\n </div>\n }\n </div>\n </div>\n\n <!-- Virtual Scroll Viewport \u2014 *cdkVirtualFor on <div>, not <tr> -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n @if (processedData().length === 0) {\n <div class=\"i-table-virtual-row i-table-empty-row\">\n <div\n class=\"i-table-virtual-cell\"\n style=\"flex: 1; text-align: center; padding: 40px 16px\"\n >\n <i-no-content />\n </div>\n </div>\n }\n <div\n *cdkVirtualFor=\"\n let row of processedData();\n let rowIndex = index;\n trackBy: trackByRow\n \"\n class=\"i-table-virtual-row\"\n [style.height.px]=\"virtualScrollItemSize\"\n [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [ngClass]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n } @else {\n <!-- ================================================================\n PATH C \u2014 Regular scrollable table\n Default for small/medium datasets and nested detail tables.\n Uses a plain overflow container with a @for loop \u2014 no CDK needed.\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr>td{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row>td{border-bottom:none}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:0;margin:2px 0 24px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}:host{display:block;min-width:0}.i-table-wrapper .i-table-header{flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{min-width:0;flex-wrap:wrap;gap:.75rem}.i-table-wrapper .i-table-header .i-table-header-end{min-width:0;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:min(250px,100%)}\n"] }]
|
|
9266
|
+
], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n <!-- Table Header: global filter + download -->\n @if (globalFilter || downloadable) {\n <div class=\"i-table-header\">\n <div class=\"i-table-header-start\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"i-table-header-end\">\n @if (globalFilter) {\n <div class=\"i-table-global-filter\">\n <i-input-text\n [useFloatLabel]=\"false\"\n label=\"Search table\"\n placeholder=\"Search\u2026\"\n [ngModel]=\"globalFilterValue()\"\n (ngModelChange)=\"onGlobalFilterInput($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n ></i-input-text>\n </div>\n }\n @if (downloadable) {\n <div class=\"i-table-download\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"small\"\n icon=\"pi pi-download\"\n label=\"Download\"\n (clicked)=\"handleDownload()\"\n ></i-button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Loading Overlay -->\n @if (loading) {\n <div class=\"i-table-loading-overlay\">\n <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n </div>\n }\n\n <!-- ================================================================\n PATH A \u2014 Detail-expandable table\n Uses a standard scrollable container so that nested <i-table>\n components can expand inline below their parent rows.\n ================================================================ -->\n @if (hasDetails()) {\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n <th class=\"i-table-expand-header\"></th>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n <th class=\"i-table-detail-count-header\"></th>\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <!-- Parent row -->\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n <td class=\"i-table-expand-cell\">\n <i-button\n severity=\"secondary\"\n [text]=\"true\"\n size=\"xtra-small\"\n [icon]=\"\n isRowExpanded(row)\n ? 'pi pi-chevron-down'\n : 'pi pi-chevron-right'\n \"\n [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n [ariaExpanded]=\"isRowExpanded(row)\"\n (clicked)=\"toggleRowExpansion(row, $event)\"\n ></i-button>\n </td>\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getCellIcon(row, column)\"\n [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n <td class=\"i-table-detail-count-cell\">\n ({{ getDetailRowCount(row) }})\n </td>\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n\n <!-- Detail expansion row -->\n @if (isRowExpanded(row)) {\n <tr class=\"i-table-expanded-row\">\n <td\n [attr.colspan]=\"totalColspan()\"\n class=\"i-table-expanded-cell\"\n >\n <div class=\"i-table-expanded-content\">\n <i-table\n [grid]=\"getDetailGrid(row)\"\n [rowBorders]=\"detailRowBorders\"\n [sortable]=\"sortable\"\n [filterable]=\"filterable\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"selection\"\n [striped]=\"striped\"\n [hoverable]=\"hoverable\"\n [bordered]=\"bordered\"\n [size]=\"size\"\n [dataKey]=\"dataKey\"\n [resizableColumns]=\"resizableColumns\"\n (onSort)=\"onSort.emit($event)\"\n (onFilter)=\"onFilter.emit($event)\"\n (onSelectionChange)=\"onSelectionChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n ></i-table>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n } @else if (virtualScroll) {\n <!-- ================================================================\n PATH B \u2014 CDK Virtual Scroll (div-based rows)\n Use only for large row counts (\u2265 ~500 rows). Uses flex <div> rows\n so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n [style.height]=\"effectiveHeight()\"\n >\n <!-- Sticky header \u2014 flex rows that mirror the virtual body rows -->\n <div class=\"i-table-virtual-header\">\n @if (filterable) {\n <div class=\"i-table-virtual-row i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n >\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n />\n </div>\n } @else {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n ></div>\n }\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n }\n </div>\n }\n <div class=\"i-table-virtual-row i-table-header-row\">\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell i-table-header-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-header\">\n {{ grid().actionsHeader ?? 'Actions' }}\n </div>\n }\n </div>\n </div>\n\n <!-- Virtual Scroll Viewport \u2014 *cdkVirtualFor on <div>, not <tr> -->\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [minBufferPx]=\"virtualScrollMinBufferPx\"\n [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n class=\"i-table-virtual-viewport\"\n >\n @if (processedData().length === 0) {\n <div class=\"i-table-virtual-row i-table-empty-row\">\n <div\n class=\"i-table-virtual-cell\"\n style=\"flex: 1; text-align: center; padding: 40px 16px\"\n >\n <i-no-content />\n </div>\n </div>\n }\n <div\n *cdkVirtualFor=\"\n let row of processedData();\n let rowIndex = index;\n trackBy: trackByRow\n \"\n class=\"i-table-virtual-row\"\n [style.height.px]=\"virtualScrollItemSize\"\n [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <div class=\"i-table-virtual-cell i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </div>\n }\n @for (column of gridColumns(); track trackByColumn($index, column)) {\n <div\n class=\"i-table-virtual-cell\"\n [style.width]=\"\n getColumnWidth(column) !== 'auto'\n ? getColumnWidth(column)\n : null\n \"\n [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n [style.text-align]=\"column.align || 'left'\"\n [ngClass]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n {{ formatCellValue(getCellValue(row, column.field), column) }}\n </span>\n }\n </div>\n }\n @if (gridActions().length > 0) {\n <div class=\"i-table-virtual-cell i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n } @else {\n <!-- ================================================================\n PATH C \u2014 Regular scrollable table\n Default for small/medium datasets and nested detail tables.\n Uses a plain overflow container with a @for loop \u2014 no CDK needed.\n ================================================================ -->\n <div\n class=\"i-table-container i-table-container--scrollable\"\n [style.max-height]=\"effectiveHeight()\"\n >\n <table class=\"i-table\">\n <thead>\n <!-- Column Filter Row -->\n @if (filterable) {\n <tr class=\"i-table-filter-row\">\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\"></th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n @if (column.filterable !== false) {\n <th [style.width]=\"getColumnWidth(column)\">\n <input\n type=\"text\"\n class=\"i-table-column-filter\"\n placeholder=\"Filter...\"\n [ngModel]=\"columnFilters()[column.field] || ''\"\n (ngModelChange)=\"\n onColumnFilterInput(column.field, $event)\n \"\n />\n </th>\n } @else {\n <th [style.width]=\"getColumnWidth(column)\"></th>\n }\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\"></th>\n }\n </tr>\n }\n\n <!-- Column Headers -->\n <tr>\n @if (selectionMode === \"multiple\") {\n <th class=\"i-table-selection-header\">\n <i-checkbox\n [checked]=\"areAllRowsSelected()\"\n [indeterminate]=\"areSomeRowsSelected()\"\n (onChange)=\"toggleAllSelection()\"\n ></i-checkbox>\n </th>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <th\n [style.width]=\"getColumnWidth(column)\"\n [style.text-align]=\"column.align || 'left'\"\n [class.i-table-sortable-column]=\"sortable && column.sortable\"\n [class.i-table-sorted]=\"sortField === column.field\"\n (click)=\"onSortColumn(column)\"\n >\n <div class=\"i-table-header-content\">\n <span class=\"i-table-header-text\">{{ column.header }}</span>\n @if (sortable && column.sortable) {\n <i\n [class]=\"getSortIcon(column)\"\n class=\"i-table-sort-icon\"\n ></i>\n }\n </div>\n @if (resizableColumns) {\n <span\n class=\"i-table-column-resizer\"\n (mousedown)=\"onColumnResizeStart($event, column)\"\n ></span>\n }\n </th>\n }\n @if (gridActions().length > 0) {\n <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (processedData().length === 0) {\n <tr class=\"i-table-empty-row\">\n <td [attr.colspan]=\"totalColspan()\">\n <i-no-content />\n </td>\n </tr>\n }\n @for (row of processedData(); track trackByRow($index, row)) {\n <tr\n [class.i-table-row-odd]=\"$odd\"\n [class.i-table-row-selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowSelection(row)\"\n >\n @if (selectionMode === \"multiple\") {\n <td class=\"i-table-selection-cell\">\n <i-checkbox\n [checked]=\"isRowSelected(row)\"\n (onChange)=\"toggleRowSelection(row)\"\n (click)=\"$event.stopPropagation()\"\n ></i-checkbox>\n </td>\n }\n @for (\n column of gridColumns();\n track trackByColumn($index, column)\n ) {\n <td\n [style.text-align]=\"column.align || 'left'\"\n [style.width]=\"getColumnWidth(column)\"\n [class]=\"\n getCellSeverity(row, column)\n ? 'i-table-cell-' + getCellSeverity(row, column)\n : ''\n \"\n >\n @if (isIconColumn(column)) {\n <i\n [class]=\"getIconClasses(row, column)\"\n [style.font-size]=\"column.iconSize || '1rem'\"\n ></i>\n } @else if (isListColumn(column)) {\n <div class=\"i-table-list-cell\">\n @for (item of getCellListItems(row, column); track item) {\n <i-chip [label]=\"item\"></i-chip>\n }\n </div>\n } @else {\n <span\n [class.i-severity-text]=\"getCellSeverity(row, column)\"\n >\n {{\n formatCellValue(getCellValue(row, column.field), column)\n }}\n </span>\n }\n </td>\n }\n @if (gridActions().length > 0) {\n <td class=\"i-table-actions-cell\">\n <div class=\"i-table-actions\">\n @for (action of gridActions(); track action.id) {\n <i-button\n [severity]=\"action.severity || 'secondary'\"\n [text]=\"true\"\n size=\"small\"\n [icon]=\"action.icon || ''\"\n [disabled]=\"isActionDisabled(action, row)\"\n [loading]=\"isActionLoading(action, row)\"\n [iTooltip]=\"getActionTooltip(action, row)\"\n [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n (clicked)=\"triggerAction(action, row, $event)\"\n >\n @if (action.label) {\n {{ action.label }}\n }\n </i-button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr>td{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row>td{border-bottom:none}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:0;margin:2px 0 24px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width: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"] }]
|
|
9195
9267
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], emptyMessage: [{
|
|
9196
9268
|
type: Input
|
|
9197
9269
|
}], sortable: [{
|
|
@@ -9927,11 +9999,11 @@ class IChart {
|
|
|
9927
9999
|
return this.chartInstances.length;
|
|
9928
10000
|
}
|
|
9929
10001
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9930
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChart, isStandalone: true, selector: "i-chart", inputs: { charts: "charts", height: "height", responsive: "responsive" }, viewQueries: [{ propertyName: "canvasElements", predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"i-charts-container\">\n @for (\n chartDisplay of chartDisplays;\n track chartDisplay.id;\n let chartIndex = $index\n ) {\n <div class=\"i-chart-panel\">\n <div\n class=\"i-chart-item\"\n [style.height]=\"getChartHeightStyle(chartDisplay)\"\n >\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", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-panel{flex:1 1 45%;min-width:300px;box-sizing:border-box}.i-chart-item{width:100%;box-sizing:border-box}.i-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem;margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--surface-border);border-radius:var(--border-radius, .5rem);background:var(--surface-card, var(--surface-ground, transparent))}.i-chart-legend-item{display:inline-flex;align-items:center;gap:.5rem;min-width:0;padding:.25rem .5rem;border:0;border-radius:var(--border-radius, .5rem);background:transparent;color:var(--chart-text-color);font:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{background:var(--surface-hover, rgba(148, 163, 184, .12));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:.875rem;height:.875rem;flex:0 0 .875rem;border:1px solid;border-radius:.25rem}.i-chart-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-panel{width:100%}}\n"] });
|
|
10002
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChart, isStandalone: true, selector: "i-chart", inputs: { charts: "charts", height: "height", responsive: "responsive" }, viewQueries: [{ propertyName: "canvasElements", predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"i-charts-container\">\n @for (\n chartDisplay of chartDisplays;\n track chartDisplay.id;\n let chartIndex = $index\n ) {\n <div class=\"i-chart-panel\">\n <div\n class=\"i-chart-item\"\n [style.height]=\"getChartHeightStyle(chartDisplay)\"\n >\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", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-panel{flex:1 1 45%;min-width:300px;box-sizing:border-box}.i-chart-item{width:100%;box-sizing:border-box}.i-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem;margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--surface-border);border-radius:var(--border-radius, .5rem);background:var(--surface-card, var(--surface-ground, transparent))}.i-chart-legend-item{display:inline-flex;align-items:center;gap:.5rem;min-width:0;padding:.25rem .5rem;border:0;border-radius:var(--border-radius, .5rem);background:transparent;color:var(--chart-text-color);font:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{background:var(--surface-hover, rgba(148, 163, 184, .12));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:.875rem;height:.875rem;flex:0 0 .875rem;border:1px solid;border-radius:.25rem}.i-chart-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-panel{width:100%}}@media(max-width:768px){.i-charts-container{gap:1.5rem}.i-chart-panel{min-width:0;flex-basis:auto;max-width:100%}}\n"] });
|
|
9931
10003
|
}
|
|
9932
10004
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChart, decorators: [{
|
|
9933
10005
|
type: Component,
|
|
9934
|
-
args: [{ selector: 'i-chart', standalone: true, imports: [], template: "<div class=\"i-charts-container\">\n @for (\n chartDisplay of chartDisplays;\n track chartDisplay.id;\n let chartIndex = $index\n ) {\n <div class=\"i-chart-panel\">\n <div\n class=\"i-chart-item\"\n [style.height]=\"getChartHeightStyle(chartDisplay)\"\n >\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", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-panel{flex:1 1 45%;min-width:300px;box-sizing:border-box}.i-chart-item{width:100%;box-sizing:border-box}.i-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem;margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--surface-border);border-radius:var(--border-radius, .5rem);background:var(--surface-card, var(--surface-ground, transparent))}.i-chart-legend-item{display:inline-flex;align-items:center;gap:.5rem;min-width:0;padding:.25rem .5rem;border:0;border-radius:var(--border-radius, .5rem);background:transparent;color:var(--chart-text-color);font:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{background:var(--surface-hover, rgba(148, 163, 184, .12));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:.875rem;height:.875rem;flex:0 0 .875rem;border:1px solid;border-radius:.25rem}.i-chart-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-panel{width:100%}}\n"] }]
|
|
10006
|
+
args: [{ selector: 'i-chart', standalone: true, imports: [], template: "<div class=\"i-charts-container\">\n @for (\n chartDisplay of chartDisplays;\n track chartDisplay.id;\n let chartIndex = $index\n ) {\n <div class=\"i-chart-panel\">\n <div\n class=\"i-chart-item\"\n [style.height]=\"getChartHeightStyle(chartDisplay)\"\n >\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", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-panel{flex:1 1 45%;min-width:300px;box-sizing:border-box}.i-chart-item{width:100%;box-sizing:border-box}.i-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem;margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--surface-border);border-radius:var(--border-radius, .5rem);background:var(--surface-card, var(--surface-ground, transparent))}.i-chart-legend-item{display:inline-flex;align-items:center;gap:.5rem;min-width:0;padding:.25rem .5rem;border:0;border-radius:var(--border-radius, .5rem);background:transparent;color:var(--chart-text-color);font:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{background:var(--surface-hover, rgba(148, 163, 184, .12));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:.875rem;height:.875rem;flex:0 0 .875rem;border:1px solid;border-radius:.25rem}.i-chart-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-panel{width:100%}}@media(max-width:768px){.i-charts-container{gap:1.5rem}.i-chart-panel{min-width:0;flex-basis:auto;max-width:100%}}\n"] }]
|
|
9935
10007
|
}], propDecorators: { charts: [{
|
|
9936
10008
|
type: Input
|
|
9937
10009
|
}], height: [{
|
|
@@ -10658,7 +10730,7 @@ class IRuleEditor {
|
|
|
10658
10730
|
this.rulesChange.emit(this.rules.filter((_, i) => i !== index));
|
|
10659
10731
|
}
|
|
10660
10732
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IRuleEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10661
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IRuleEditor, isStandalone: true, selector: "i-rule-editor", inputs: { fields: "fields", operators: "operators", rules: "rules", ariaLabel: "ariaLabel", operatorLabel: "operatorLabel", addLabel: "addLabel", emptyMessage: "emptyMessage", readonly: "readonly", disabled: "disabled" }, outputs: { rulesChange: "rulesChange" }, ngImport: i0, template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n <div class=\"i-rule-editor__toolbar\">\n <i-button\n icon=\"pi pi-plus\"\n size=\"small\"\n [disabled]=\"!canAdd\"\n (clicked)=\"add()\"\n >{{ addLabel }}</i-button\n >\n </div>\n <div class=\"i-rule-editor__rules\">\n @for (rule of rules; track $index; let index = $index) {\n <div\n class=\"i-rule-editor__row\"\n role=\"group\"\n [attr.aria-label]=\"'Rule ' + (index + 1)\"\n >\n <span class=\"i-rule-editor__number\" aria-hidden=\"true\">{{\n index + 1\n }}</span>\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)=\"\n update(index, { value: $event == null ? '' : '' + $event })\n \"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n }\n }\n <i-button\n icon=\"pi pi-trash\"\n size=\"small\"\n severity=\"danger\"\n [text]=\"true\"\n [disabled]=\"readonly || disabled\"\n (clicked)=\"remove(index)\"\n >Remove</i-button\n >\n </div>\n } @empty {\n <i-no-content [message]=\"emptyMessage\" />\n }\n </div>\n</div>\n", 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__number{color:var(--color-primary);background:var(--surface-section)}:host{display:block}.i-rule-editor__toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.i-rule-editor__rules{display:grid;gap:.75rem}.i-rule-editor__row{display:grid;grid-template-columns:auto minmax(9rem,1fr) minmax(9rem,1fr) minmax(9rem,1fr) auto;align-items:end;gap:.75rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-rule-editor__number{display:grid;place-items:center;width:1.75rem;height:1.75rem;margin-bottom:.25rem;border-radius:50%;font-size:.8125rem;font-weight:700}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{min-width:0}.i-rule-editor__row>i-button{grid-column:-1}@media(max-width:48rem){.i-rule-editor__row{grid-template-columns:auto repeat(2,minmax(0,1fr))}.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:3;justify-self:end}}@media(max-width:34rem){.i-rule-editor__row{grid-template-columns:auto minmax(0,1fr)}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:2;justify-self:end}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: ISelect, selector: "i-select", inputs: ["label", "options", "optionLabel", "placeholder", "useFloatLabel", "id", "fluid", "showClear", "filter", "filterBy", "errorMessages", "readonly"], outputs: ["onChange", "onClear"] }, { kind: "component", type: NoContentComponent, selector: "i-no-content", inputs: ["icon", "message"] }] });
|
|
10733
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IRuleEditor, isStandalone: true, selector: "i-rule-editor", inputs: { fields: "fields", operators: "operators", rules: "rules", ariaLabel: "ariaLabel", operatorLabel: "operatorLabel", addLabel: "addLabel", emptyMessage: "emptyMessage", readonly: "readonly", disabled: "disabled" }, outputs: { rulesChange: "rulesChange" }, ngImport: i0, template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n <div class=\"i-rule-editor__toolbar\">\n <i-button\n icon=\"pi pi-plus\"\n size=\"small\"\n [disabled]=\"!canAdd\"\n (clicked)=\"add()\"\n >{{ addLabel }}</i-button\n >\n </div>\n <div class=\"i-rule-editor__rules\">\n @for (rule of rules; track $index; let index = $index) {\n <div\n class=\"i-rule-editor__row\"\n role=\"group\"\n [attr.aria-label]=\"'Rule ' + (index + 1)\"\n >\n <span class=\"i-rule-editor__number\" aria-hidden=\"true\">{{\n index + 1\n }}</span>\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)=\"\n update(index, { value: $event == null ? '' : '' + $event })\n \"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n }\n }\n <i-button\n icon=\"pi pi-trash\"\n size=\"small\"\n severity=\"danger\"\n [text]=\"true\"\n [disabled]=\"readonly || disabled\"\n (clicked)=\"remove(index)\"\n >Remove</i-button\n >\n </div>\n } @empty {\n <i-no-content [message]=\"emptyMessage\" />\n }\n </div>\n</div>\n", 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__number{color:var(--color-primary);background:var(--surface-section)}:host{display:block}.i-rule-editor__toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.i-rule-editor__rules{display:grid;gap:.75rem}.i-rule-editor__row{display:grid;grid-template-columns:auto minmax(9rem,1fr) minmax(9rem,1fr) minmax(9rem,1fr) auto;align-items:end;gap:.75rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-rule-editor__number{display:grid;place-items:center;width:1.75rem;height:1.75rem;margin-bottom:.25rem;border-radius:50%;font-size:.8125rem;font-weight:700}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{min-width:0}.i-rule-editor__row>i-button{grid-column:-1}@media(max-width:48rem){.i-rule-editor__row{grid-template-columns:auto repeat(2,minmax(0,1fr))}.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:3;justify-self:end}}@media(max-width:34rem){.i-rule-editor__row{grid-template-columns:auto minmax(0,1fr)}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:2;justify-self:end}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: ISelect, selector: "i-select", inputs: ["label", "options", "optionLabel", "placeholder", "useFloatLabel", "id", "fluid", "showClear", "filter", "filterBy", "errorMessages", "readonly", "disabled", "nativeOnMobile"], outputs: ["onChange", "onClear"] }, { kind: "component", type: NoContentComponent, selector: "i-no-content", inputs: ["icon", "message"] }] });
|
|
10662
10734
|
}
|
|
10663
10735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IRuleEditor, decorators: [{
|
|
10664
10736
|
type: Component,
|