integra-ng 21.0.14 → 21.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/integra-ng.mjs +64 -9
- package/fesm2022/integra-ng.mjs.map +1 -1
- package/package.json +1 -1
- package/types/integra-ng.d.ts +35 -7
package/fesm2022/integra-ng.mjs
CHANGED
|
@@ -2093,6 +2093,7 @@ class IDialogActions {
|
|
|
2093
2093
|
severity = 'primary';
|
|
2094
2094
|
showCancel = true;
|
|
2095
2095
|
showSubmit = true;
|
|
2096
|
+
submitDisabled = false;
|
|
2096
2097
|
cancelEvent = new EventEmitter();
|
|
2097
2098
|
submitEvent = new EventEmitter();
|
|
2098
2099
|
onCancel() {
|
|
@@ -2102,11 +2103,11 @@ class IDialogActions {
|
|
|
2102
2103
|
this.submitEvent.emit();
|
|
2103
2104
|
}
|
|
2104
2105
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2105
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IDialogActions, isStandalone: true, selector: "i-dialog-actions", inputs: { submitLabel: "submitLabel", cancelLabel: "cancelLabel", severity: "severity", showCancel: "showCancel", showSubmit: "showSubmit" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"dialog-actions\">\n @if (showCancel) {\n <i-button [text]=\"true\" severity=\"secondary\" (click)=\"onCancel()\">{{\n cancelLabel\n }}</i-button>\n } @if (showSubmit) {\n <i-button [outlined]=\"true\" [severity]=\"severity\" (click)=\"onSubmit()\">{{\n submitLabel\n }}</i-button>\n }\n</div>\n", styles: [".dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
2106
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IDialogActions, isStandalone: true, selector: "i-dialog-actions", inputs: { submitLabel: "submitLabel", cancelLabel: "cancelLabel", severity: "severity", showCancel: "showCancel", showSubmit: "showSubmit", submitDisabled: "submitDisabled" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"dialog-actions\">\n @if (showCancel) {\n <i-button [text]=\"true\" severity=\"secondary\" (click)=\"onCancel()\">{{\n cancelLabel\n }}</i-button>\n } @if (showSubmit) {\n <i-button [outlined]=\"true\" [severity]=\"severity\" [disabled]=\"submitDisabled\" (click)=\"onSubmit()\">{{\n submitLabel\n }}</i-button>\n }\n</div>\n", styles: [".dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
2106
2107
|
}
|
|
2107
2108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialogActions, decorators: [{
|
|
2108
2109
|
type: Component,
|
|
2109
|
-
args: [{ selector: 'i-dialog-actions', imports: [IButton], template: "<div class=\"dialog-actions\">\n @if (showCancel) {\n <i-button [text]=\"true\" severity=\"secondary\" (click)=\"onCancel()\">{{\n cancelLabel\n }}</i-button>\n } @if (showSubmit) {\n <i-button [outlined]=\"true\" [severity]=\"severity\" (click)=\"onSubmit()\">{{\n submitLabel\n }}</i-button>\n }\n</div>\n", styles: [".dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}\n"] }]
|
|
2110
|
+
args: [{ selector: 'i-dialog-actions', imports: [IButton], template: "<div class=\"dialog-actions\">\n @if (showCancel) {\n <i-button [text]=\"true\" severity=\"secondary\" (click)=\"onCancel()\">{{\n cancelLabel\n }}</i-button>\n } @if (showSubmit) {\n <i-button [outlined]=\"true\" [severity]=\"severity\" [disabled]=\"submitDisabled\" (click)=\"onSubmit()\">{{\n submitLabel\n }}</i-button>\n }\n</div>\n", styles: [".dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}\n"] }]
|
|
2110
2111
|
}], propDecorators: { submitLabel: [{
|
|
2111
2112
|
type: Input
|
|
2112
2113
|
}], cancelLabel: [{
|
|
@@ -2117,6 +2118,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2117
2118
|
type: Input
|
|
2118
2119
|
}], showSubmit: [{
|
|
2119
2120
|
type: Input
|
|
2121
|
+
}], submitDisabled: [{
|
|
2122
|
+
type: Input
|
|
2120
2123
|
}], cancelEvent: [{
|
|
2121
2124
|
type: Output
|
|
2122
2125
|
}], submitEvent: [{
|
|
@@ -2221,7 +2224,7 @@ class ConfirmationDialogComponent {
|
|
|
2221
2224
|
this.dialogRef?.close(false);
|
|
2222
2225
|
}
|
|
2223
2226
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2224
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: ConfirmationDialogComponent, isStandalone: true, selector: "i-confirmation-dialog", ngImport: i0, template: "<div class=\"confirmation-dialog\" [attr.id]=\"componentId\">\n <div class=\"confirmation-content\">\n <p class=\"confirmation-message\">{{ message() }}</p>\n </div>\n <i-dialog-actions\n [title]=\"header()\"\n [submitLabel]=\"acceptLabel\"\n [cancelLabel]=\"rejectLabel\"\n [severity]=\"severity()\"\n (cancelEvent)=\"onCancel()\"\n (submitEvent)=\"onConfirm()\"\n ></i-dialog-actions>\n</div>\n", styles: [".confirmation-dialog .confirmation-content{color:var(--color-text-primary)}.confirmation-dialog{min-width:300px}.confirmation-dialog .confirmation-content{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 8px}.confirmation-dialog .confirmation-content .confirmation-message{margin:0;font-size:1.1em;line-height:1.4}\n"], dependencies: [{ kind: "component", type: IDialogActions, selector: "i-dialog-actions", inputs: ["submitLabel", "cancelLabel", "severity", "showCancel", "showSubmit"], outputs: ["cancelEvent", "submitEvent"] }] });
|
|
2227
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: ConfirmationDialogComponent, isStandalone: true, selector: "i-confirmation-dialog", ngImport: i0, template: "<div class=\"confirmation-dialog\" [attr.id]=\"componentId\">\n <div class=\"confirmation-content\">\n <p class=\"confirmation-message\">{{ message() }}</p>\n </div>\n <i-dialog-actions\n [title]=\"header()\"\n [submitLabel]=\"acceptLabel\"\n [cancelLabel]=\"rejectLabel\"\n [severity]=\"severity()\"\n (cancelEvent)=\"onCancel()\"\n (submitEvent)=\"onConfirm()\"\n ></i-dialog-actions>\n</div>\n", styles: [".confirmation-dialog .confirmation-content{color:var(--color-text-primary)}.confirmation-dialog{min-width:300px}.confirmation-dialog .confirmation-content{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 8px}.confirmation-dialog .confirmation-content .confirmation-message{margin:0;font-size:1.1em;line-height:1.4}\n"], dependencies: [{ kind: "component", type: IDialogActions, selector: "i-dialog-actions", inputs: ["submitLabel", "cancelLabel", "severity", "showCancel", "showSubmit", "submitDisabled"], outputs: ["cancelEvent", "submitEvent"] }] });
|
|
2225
2228
|
}
|
|
2226
2229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
2227
2230
|
type: Component,
|
|
@@ -2326,6 +2329,16 @@ class IDialog extends AbstractDialog {
|
|
|
2326
2329
|
* @internal
|
|
2327
2330
|
*/
|
|
2328
2331
|
componentId = UniqueComponentId('i-dialog-');
|
|
2332
|
+
/**
|
|
2333
|
+
* Current applied width from breakpoints
|
|
2334
|
+
* @internal
|
|
2335
|
+
*/
|
|
2336
|
+
currentWidth = '';
|
|
2337
|
+
/**
|
|
2338
|
+
* Current applied height from breakpoints
|
|
2339
|
+
* @internal
|
|
2340
|
+
*/
|
|
2341
|
+
currentHeight = '';
|
|
2329
2342
|
constructor(cdr) {
|
|
2330
2343
|
super();
|
|
2331
2344
|
this.cdr = cdr;
|
|
@@ -2334,6 +2347,7 @@ class IDialog extends AbstractDialog {
|
|
|
2334
2347
|
if (this.visible) {
|
|
2335
2348
|
this.show();
|
|
2336
2349
|
}
|
|
2350
|
+
this.applyBreakpoints();
|
|
2337
2351
|
}
|
|
2338
2352
|
ngOnDestroy() {
|
|
2339
2353
|
this.hide();
|
|
@@ -2382,18 +2396,59 @@ class IDialog extends AbstractDialog {
|
|
|
2382
2396
|
this.hide();
|
|
2383
2397
|
}
|
|
2384
2398
|
}
|
|
2399
|
+
/**
|
|
2400
|
+
* Handles window resize to apply responsive breakpoints
|
|
2401
|
+
* @internal
|
|
2402
|
+
*/
|
|
2403
|
+
onWindowResize() {
|
|
2404
|
+
this.applyBreakpoints();
|
|
2405
|
+
}
|
|
2406
|
+
/**
|
|
2407
|
+
* Applies responsive breakpoints based on current window width
|
|
2408
|
+
* @internal
|
|
2409
|
+
*/
|
|
2410
|
+
applyBreakpoints() {
|
|
2411
|
+
if (!this.breakpoints) {
|
|
2412
|
+
this.currentWidth = this.width;
|
|
2413
|
+
this.currentHeight = this.height || '';
|
|
2414
|
+
return;
|
|
2415
|
+
}
|
|
2416
|
+
const windowWidth = window.innerWidth;
|
|
2417
|
+
const sortedBreakpoints = Object.keys(this.breakpoints)
|
|
2418
|
+
.map((key) => ({
|
|
2419
|
+
breakpoint: parseInt(key),
|
|
2420
|
+
value: this.breakpoints[key],
|
|
2421
|
+
}))
|
|
2422
|
+
.sort((a, b) => b.breakpoint - a.breakpoint);
|
|
2423
|
+
// Find the first matching breakpoint
|
|
2424
|
+
const match = sortedBreakpoints.find((bp) => windowWidth <= bp.breakpoint);
|
|
2425
|
+
if (match) {
|
|
2426
|
+
// Object format with width and/or height
|
|
2427
|
+
this.currentWidth = match.value.width || this.width;
|
|
2428
|
+
this.currentHeight = match.value.height || this.height || '';
|
|
2429
|
+
}
|
|
2430
|
+
else {
|
|
2431
|
+
// No breakpoint matched, use default values
|
|
2432
|
+
this.currentWidth = this.width;
|
|
2433
|
+
this.currentHeight = this.height || '';
|
|
2434
|
+
}
|
|
2435
|
+
this.cdr.detectChanges();
|
|
2436
|
+
}
|
|
2385
2437
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialog, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2386
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IDialog, isStandalone: true, selector: "i-dialog", host: { listeners: { "document:keydown.escape": "onEscapeKey()" } }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (visible) {\n<div\n
|
|
2438
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IDialog, isStandalone: true, selector: "i-dialog", host: { listeners: { "document:keydown.escape": "onEscapeKey()", "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 (click)=\"$event.stopPropagation()\"\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}}.i-dialog-overlay .i-dialog-container .i-dialog-content{overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInDown{0%{opacity:0;transform:translate3d(0,-30px,0) scale3d(.95,.95,1)}to{opacity:1;transform:translateZ(0) scaleZ(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ICard, selector: "i-card", inputs: ["title", "closable", "fullHeight"], outputs: ["closeCard"] }] });
|
|
2387
2439
|
}
|
|
2388
2440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialog, decorators: [{
|
|
2389
2441
|
type: Component,
|
|
2390
|
-
args: [{ selector: 'i-dialog', imports: [CommonModule, ICard], template: "@if (visible) {\n<div\n
|
|
2442
|
+
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 (click)=\"$event.stopPropagation()\"\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}}.i-dialog-overlay .i-dialog-container .i-dialog-content{overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInDown{0%{opacity:0;transform:translate3d(0,-30px,0) scale3d(.95,.95,1)}to{opacity:1;transform:translateZ(0) scaleZ(1)}}\n"] }]
|
|
2391
2443
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { dialogElement: [{
|
|
2392
2444
|
type: ViewChild,
|
|
2393
2445
|
args: ['dialogElement', { static: false }]
|
|
2394
2446
|
}], onEscapeKey: [{
|
|
2395
2447
|
type: HostListener,
|
|
2396
2448
|
args: ['document:keydown.escape']
|
|
2449
|
+
}], onWindowResize: [{
|
|
2450
|
+
type: HostListener,
|
|
2451
|
+
args: ['window:resize']
|
|
2397
2452
|
}] } });
|
|
2398
2453
|
|
|
2399
2454
|
/**
|
|
@@ -2683,8 +2738,8 @@ class ConfirmationDialogService {
|
|
|
2683
2738
|
width: '400px',
|
|
2684
2739
|
contentStyle: { overflow: 'auto' },
|
|
2685
2740
|
breakpoints: {
|
|
2686
|
-
'960px': '
|
|
2687
|
-
'640px': '
|
|
2741
|
+
'960px': { width: '720px' },
|
|
2742
|
+
'640px': { width: '576px' },
|
|
2688
2743
|
},
|
|
2689
2744
|
data: {
|
|
2690
2745
|
message: config.message,
|
|
@@ -5839,11 +5894,11 @@ class ITabs {
|
|
|
5839
5894
|
tabElement?.focus();
|
|
5840
5895
|
}
|
|
5841
5896
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5842
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITabs, isStandalone: true, selector: "i-tabs", inputs: { activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange", onClose: "onClose" }, queries: [{ propertyName: "tabPanels", predicate: ITabPanel }], ngImport: i0, template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <button\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"i-tabs__panels\">\n @for (tab of tabs; track $index) {\n <div\n [attr.id]=\"componentId + '-panel-' + $index\"\n class=\"i-tabs__panel\"\n [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n [attr.hidden]=\"activeIndex !== $index || null\"\n >\n @if (activeIndex === $index) {\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:#9e9e9e;opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:
|
|
5897
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITabs, isStandalone: true, selector: "i-tabs", inputs: { activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange", onClose: "onClose" }, queries: [{ propertyName: "tabPanels", predicate: ITabPanel }], ngImport: i0, template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <button\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"i-tabs__panels\">\n @for (tab of tabs; track $index) {\n <div\n [attr.id]=\"componentId + '-panel-' + $index\"\n class=\"i-tabs__panel\"\n [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n [attr.hidden]=\"activeIndex !== $index || null\"\n >\n @if (activeIndex === $index) {\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:#9e9e9e;opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
5843
5898
|
}
|
|
5844
5899
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITabs, decorators: [{
|
|
5845
5900
|
type: Component,
|
|
5846
|
-
args: [{ selector: 'i-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <button\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"i-tabs__panels\">\n @for (tab of tabs; track $index) {\n <div\n [attr.id]=\"componentId + '-panel-' + $index\"\n class=\"i-tabs__panel\"\n [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n [attr.hidden]=\"activeIndex !== $index || null\"\n >\n @if (activeIndex === $index) {\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:#9e9e9e;opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:
|
|
5901
|
+
args: [{ selector: 'i-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <button\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"i-tabs__panels\">\n @for (tab of tabs; track $index) {\n <div\n [attr.id]=\"componentId + '-panel-' + $index\"\n class=\"i-tabs__panel\"\n [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n [attr.hidden]=\"activeIndex !== $index || null\"\n >\n @if (activeIndex === $index) {\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:#9e9e9e;opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}\n"] }]
|
|
5847
5902
|
}], propDecorators: { activeIndex: [{
|
|
5848
5903
|
type: Input
|
|
5849
5904
|
}], activeIndexChange: [{
|