@porscheinformatik/clr-addons 21.3.2 → 21.4.0
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/porscheinformatik-clr-addons-charts.mjs +58 -38
- package/fesm2022/porscheinformatik-clr-addons-charts.mjs.map +1 -1
- package/fesm2022/porscheinformatik-clr-addons.mjs +203 -132
- package/fesm2022/porscheinformatik-clr-addons.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/clr-addons-phs.css +32 -28
- package/styles/clr-addons-phs.css.map +1 -1
- package/styles/clr-addons-phs.min.css +1 -1
- package/styles/clr-addons-phs.min.css.map +1 -1
|
@@ -43,11 +43,11 @@ class ClrBackButton {
|
|
|
43
43
|
this.location.back();
|
|
44
44
|
}
|
|
45
45
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrBackButton, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
46
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrBackButton, isStandalone: false, selector: "clr-back-button", ngImport: i0, template: "<button type=\"button\" class=\"btn btn-icon btn-link back-button\" (click)=\"back()\">\n <cds-icon shape=\"arrow\" direction=\"left\" size=\"36\"></cds-icon>\n</button>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
|
|
46
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrBackButton, isStandalone: false, selector: "clr-back-button", ngImport: i0, template: "<button type=\"button\" class=\"btn btn-icon btn-link back-button\" (click)=\"back()\" data-testid=\"back-button\">\n <cds-icon shape=\"arrow\" direction=\"left\" size=\"36\"></cds-icon>\n</button>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
|
|
47
47
|
}
|
|
48
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrBackButton, decorators: [{
|
|
49
49
|
type: Component,
|
|
50
|
-
args: [{ selector: 'clr-back-button', standalone: false, template: "<button type=\"button\" class=\"btn btn-icon btn-link back-button\" (click)=\"back()\">\n <cds-icon shape=\"arrow\" direction=\"left\" size=\"36\"></cds-icon>\n</button>\n" }]
|
|
50
|
+
args: [{ selector: 'clr-back-button', standalone: false, template: "<button type=\"button\" class=\"btn btn-icon btn-link back-button\" (click)=\"back()\" data-testid=\"back-button\">\n <cds-icon shape=\"arrow\" direction=\"left\" size=\"36\"></cds-icon>\n</button>\n" }]
|
|
51
51
|
}], ctorParameters: () => [{ type: i1.Location }] });
|
|
52
52
|
|
|
53
53
|
/*
|
|
@@ -119,11 +119,11 @@ class ClrBreadcrumb {
|
|
|
119
119
|
this.destroyed.complete();
|
|
120
120
|
}
|
|
121
121
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrBreadcrumb, deps: [{ token: ClrBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
122
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrBreadcrumb, isStandalone: false, selector: "clr-breadcrumb", ngImport: i0, template: "@if (breadcrumbElements.length) {\n<nav aria-label=\"breadcrumb\">\n <ol class=\"breadcrumb\">\n @for (breadcrumbItem of breadcrumbElements; track breadcrumbItem) { @if (breadcrumbItem.url) {\n <li class=\"breadcrumb-item\">\n <a [routerLink]=\"breadcrumbItem.url\"
|
|
122
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrBreadcrumb, isStandalone: false, selector: "clr-breadcrumb", ngImport: i0, template: "@if (breadcrumbElements.length) {\n<nav aria-label=\"breadcrumb\" data-testid=\"breadcrumb-nav\">\n <ol class=\"breadcrumb\">\n @for (breadcrumbItem of breadcrumbElements; track breadcrumbItem) { @if (breadcrumbItem.url) {\n <li class=\"breadcrumb-item\">\n <a [routerLink]=\"breadcrumbItem.url\" [attr.data-testid]=\"'breadcrumb-item-' + (breadcrumbItem.label)\">\n {{breadcrumbItem.label}}\n </a>\n </li>\n } @if (!breadcrumbItem.url) {\n <li class=\"breadcrumb-item active\" [attr.data-testid]=\"'breadcrumb-active-item-' + (breadcrumbItem.label)\">\n {{breadcrumbItem.label}}\n </li>\n } }\n </ol>\n</nav>\n}\n", dependencies: [{ kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
123
123
|
}
|
|
124
124
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrBreadcrumb, decorators: [{
|
|
125
125
|
type: Component,
|
|
126
|
-
args: [{ selector: 'clr-breadcrumb', standalone: false, template: "@if (breadcrumbElements.length) {\n<nav aria-label=\"breadcrumb\">\n <ol class=\"breadcrumb\">\n @for (breadcrumbItem of breadcrumbElements; track breadcrumbItem) { @if (breadcrumbItem.url) {\n <li class=\"breadcrumb-item\">\n <a [routerLink]=\"breadcrumbItem.url\"
|
|
126
|
+
args: [{ selector: 'clr-breadcrumb', standalone: false, template: "@if (breadcrumbElements.length) {\n<nav aria-label=\"breadcrumb\" data-testid=\"breadcrumb-nav\">\n <ol class=\"breadcrumb\">\n @for (breadcrumbItem of breadcrumbElements; track breadcrumbItem) { @if (breadcrumbItem.url) {\n <li class=\"breadcrumb-item\">\n <a [routerLink]=\"breadcrumbItem.url\" [attr.data-testid]=\"'breadcrumb-item-' + (breadcrumbItem.label)\">\n {{breadcrumbItem.label}}\n </a>\n </li>\n } @if (!breadcrumbItem.url) {\n <li class=\"breadcrumb-item active\" [attr.data-testid]=\"'breadcrumb-active-item-' + (breadcrumbItem.label)\">\n {{breadcrumbItem.label}}\n </li>\n } }\n </ol>\n</nav>\n}\n" }]
|
|
127
127
|
}], ctorParameters: () => [{ type: ClrBreadcrumbService }] });
|
|
128
128
|
|
|
129
129
|
/*
|
|
@@ -191,7 +191,7 @@ class ClrCollapseExpandSection {
|
|
|
191
191
|
this.isCollapsed = !this.isCollapsed;
|
|
192
192
|
}
|
|
193
193
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrCollapseExpandSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
194
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrCollapseExpandSection, isStandalone: false, selector: "clr-collapse-expand-section", inputs: { isCollapsed: ["clrIsCollapsed", "isCollapsed"], disableHeaderStyles: ["clrDisableHeaderStyles", "disableHeaderStyles"], disableSubtitle: ["clrDisableSubtitle", "disableSubtitle"] }, outputs: { collapsed: "clrCollapsed", expanded: "clrExpanded" }, ngImport: i0, template: "<div class=\"ces\">\n <ng-template #titleContent>\n <ng-content select=\"[clr-ces-title]\"></ng-content>\n </ng-template>\n <div class=\"ces-title\" [class.disabled-header-styles]=\"disableHeaderStyles\">\n @if (!disableHeaderStyles) {\n <h2>\n <span\n class=\"ces-title-trigger\"\n (click)=\"onCollapseExpand()\"\n (keydown.enter)=\"onCollapseExpand()\"\n (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n </span>\n <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n </h2>\n } @else {\n <span\n class=\"ces-title-trigger\"\n (click)=\"onCollapseExpand()\"\n (keydown.enter)=\"onCollapseExpand()\"\n (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n </span>\n <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n }\n <ng-template #caretBtn>\n <button
|
|
194
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrCollapseExpandSection, isStandalone: false, selector: "clr-collapse-expand-section", inputs: { isCollapsed: ["clrIsCollapsed", "isCollapsed"], disableHeaderStyles: ["clrDisableHeaderStyles", "disableHeaderStyles"], disableSubtitle: ["clrDisableSubtitle", "disableSubtitle"] }, outputs: { collapsed: "clrCollapsed", expanded: "clrExpanded" }, ngImport: i0, template: "<div class=\"ces\" data-testid=\"collapse-expand-section\">\n <ng-template #titleContent>\n <ng-content select=\"[clr-ces-title]\"></ng-content>\n </ng-template>\n <div class=\"ces-title\" [class.disabled-header-styles]=\"disableHeaderStyles\">\n @if (!disableHeaderStyles) {\n <h2>\n <span\n class=\"ces-title-trigger\"\n data-testid=\"collapse-expand-section-title-trigger\"\n (click)=\"onCollapseExpand()\"\n (keydown.enter)=\"onCollapseExpand()\"\n (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n </span>\n <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n </h2>\n } @else {\n <span\n class=\"ces-title-trigger\"\n data-testid=\"collapse-expand-section-title-trigger-unstyled\"\n (click)=\"onCollapseExpand()\"\n (keydown.enter)=\"onCollapseExpand()\"\n (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n </span>\n <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n }\n <ng-template #caretBtn>\n <button\n type=\"button\"\n (click)=\"onCollapseExpand()\"\n class=\"btn btn-icon btn-link ces-caret-btn\"\n data-testid=\"collapse-expand-section-caret-button\"\n >\n <cds-icon\n shape=\"angle\"\n size=\"28\"\n class=\"ces-caret-icon\"\n [@rotateIcon]=\"isCollapsed\"\n [@.disabled]=\"disableAnimation\"\n ></cds-icon>\n </button>\n </ng-template>\n </div>\n <ng-template #subtitleContent>\n <ng-content select=\"[clr-ces-subtitle]\"></ng-content>\n </ng-template>\n @if (!disableSubtitle) {\n <div class=\"ces-subtitle\" data-testid=\"collapse-expand-section-subtitle\">\n @if (!disableHeaderStyles) {\n <h4>\n <ng-container *ngTemplateOutlet=\"subtitleContent\"></ng-container>\n </h4>\n } @else {\n <ng-container *ngTemplateOutlet=\"subtitleContent\"></ng-container>\n }\n </div>\n } @if (!isCollapsed) {\n <div\n data-testid=\"collapse-expand-section-content\"\n [@collapseExpandAnimation]=\"isCollapsed\"\n [@.disabled]=\"disableAnimation\"\n >\n <ng-content select=\"[clr-ces-content]\"></ng-content>\n </div>\n }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }], animations: [
|
|
195
195
|
trigger('collapseExpandAnimation', [
|
|
196
196
|
transition(':enter', [
|
|
197
197
|
style({ opacity: 0, height: 0, overflow: 'hidden' }),
|
|
@@ -229,7 +229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
229
229
|
transition('true => false', animate('300ms ease-out')),
|
|
230
230
|
transition('false => true', animate('300ms ease-in')),
|
|
231
231
|
]),
|
|
232
|
-
], standalone: false, template: "<div class=\"ces\">\n <ng-template #titleContent>\n <ng-content select=\"[clr-ces-title]\"></ng-content>\n </ng-template>\n <div class=\"ces-title\" [class.disabled-header-styles]=\"disableHeaderStyles\">\n @if (!disableHeaderStyles) {\n <h2>\n <span\n class=\"ces-title-trigger\"\n (click)=\"onCollapseExpand()\"\n (keydown.enter)=\"onCollapseExpand()\"\n (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n </span>\n <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n </h2>\n } @else {\n <span\n class=\"ces-title-trigger\"\n (click)=\"onCollapseExpand()\"\n (keydown.enter)=\"onCollapseExpand()\"\n (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n </span>\n <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n }\n <ng-template #caretBtn>\n <button
|
|
232
|
+
], standalone: false, template: "<div class=\"ces\" data-testid=\"collapse-expand-section\">\n <ng-template #titleContent>\n <ng-content select=\"[clr-ces-title]\"></ng-content>\n </ng-template>\n <div class=\"ces-title\" [class.disabled-header-styles]=\"disableHeaderStyles\">\n @if (!disableHeaderStyles) {\n <h2>\n <span\n class=\"ces-title-trigger\"\n data-testid=\"collapse-expand-section-title-trigger\"\n (click)=\"onCollapseExpand()\"\n (keydown.enter)=\"onCollapseExpand()\"\n (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n </span>\n <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n </h2>\n } @else {\n <span\n class=\"ces-title-trigger\"\n data-testid=\"collapse-expand-section-title-trigger-unstyled\"\n (click)=\"onCollapseExpand()\"\n (keydown.enter)=\"onCollapseExpand()\"\n (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n </span>\n <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n }\n <ng-template #caretBtn>\n <button\n type=\"button\"\n (click)=\"onCollapseExpand()\"\n class=\"btn btn-icon btn-link ces-caret-btn\"\n data-testid=\"collapse-expand-section-caret-button\"\n >\n <cds-icon\n shape=\"angle\"\n size=\"28\"\n class=\"ces-caret-icon\"\n [@rotateIcon]=\"isCollapsed\"\n [@.disabled]=\"disableAnimation\"\n ></cds-icon>\n </button>\n </ng-template>\n </div>\n <ng-template #subtitleContent>\n <ng-content select=\"[clr-ces-subtitle]\"></ng-content>\n </ng-template>\n @if (!disableSubtitle) {\n <div class=\"ces-subtitle\" data-testid=\"collapse-expand-section-subtitle\">\n @if (!disableHeaderStyles) {\n <h4>\n <ng-container *ngTemplateOutlet=\"subtitleContent\"></ng-container>\n </h4>\n } @else {\n <ng-container *ngTemplateOutlet=\"subtitleContent\"></ng-container>\n }\n </div>\n } @if (!isCollapsed) {\n <div\n data-testid=\"collapse-expand-section-content\"\n [@collapseExpandAnimation]=\"isCollapsed\"\n [@.disabled]=\"disableAnimation\"\n >\n <ng-content select=\"[clr-ces-content]\"></ng-content>\n </div>\n }\n</div>\n" }]
|
|
233
233
|
}], propDecorators: { isCollapsed: [{
|
|
234
234
|
type: Input,
|
|
235
235
|
args: ['clrIsCollapsed']
|
|
@@ -314,7 +314,7 @@ class ClrContentPanel {
|
|
|
314
314
|
window.dispatchEvent(new Event('resize'));
|
|
315
315
|
}
|
|
316
316
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrContentPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
317
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrContentPanel, isStandalone: false, selector: "clr-content-panel", outputs: { opened: "clrOpened", closed: "clrClosed" }, host: { properties: { "class.content-panel": "true" } }, ngImport: i0, template: "@if (_open) {\n<div [@slideIn] class=\"content-panel-content-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n <h3 class=\"content-panel-title\">\n <button
|
|
317
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrContentPanel, isStandalone: false, selector: "clr-content-panel", outputs: { opened: "clrOpened", closed: "clrClosed" }, host: { properties: { "class.content-panel": "true" } }, ngImport: i0, template: "@if (_open) {\n<div data-testid=\"content-panel\" [@slideIn] class=\"content-panel-content-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n <h3 class=\"content-panel-title\" data-testid=\"content-panel-title\">\n <button\n type=\"button\"\n class=\"close content-panel-close-btn\"\n (click)=\"close()\"\n data-testid=\"content-panel-close-button\"\n >\n <cds-icon class=\"content-panel-close-icon\" shape=\"times\" size=\"24\"></cds-icon>\n </button>\n <ng-content select=\"[clr-content-panel-title]\"></ng-content>\n </h3>\n <ng-content select=\"[clr-content-panel-content]\"></ng-content>\n</div>\n<div\n data-testid=\"content-panel-backdrop\"\n [@fade]\n class=\"content-panel-backdrop\"\n (click)=\"close()\"\n (@fade.done)=\"resizeWindow()\"\n></div>\n}\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }], animations: [
|
|
318
318
|
trigger('slideIn', [
|
|
319
319
|
transition(':enter', [style({ opacity: 0, width: 0 }), animate('0.2s', style({ opacity: 1, width: '*' }))]),
|
|
320
320
|
transition(':leave', [style({ opacity: 1, width: '*' }), animate('0.2s', style({ opacity: 0, width: 0 }))]),
|
|
@@ -338,7 +338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
338
338
|
]),
|
|
339
339
|
], host: {
|
|
340
340
|
'[class.content-panel]': 'true',
|
|
341
|
-
}, standalone: false, template: "@if (_open) {\n<div [@slideIn] class=\"content-panel-content-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n <h3 class=\"content-panel-title\">\n <button
|
|
341
|
+
}, standalone: false, template: "@if (_open) {\n<div data-testid=\"content-panel\" [@slideIn] class=\"content-panel-content-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n <h3 class=\"content-panel-title\" data-testid=\"content-panel-title\">\n <button\n type=\"button\"\n class=\"close content-panel-close-btn\"\n (click)=\"close()\"\n data-testid=\"content-panel-close-button\"\n >\n <cds-icon class=\"content-panel-close-icon\" shape=\"times\" size=\"24\"></cds-icon>\n </button>\n <ng-content select=\"[clr-content-panel-title]\"></ng-content>\n </h3>\n <ng-content select=\"[clr-content-panel-content]\"></ng-content>\n</div>\n<div\n data-testid=\"content-panel-backdrop\"\n [@fade]\n class=\"content-panel-backdrop\"\n (click)=\"close()\"\n (@fade.done)=\"resizeWindow()\"\n></div>\n}\n" }]
|
|
342
342
|
}], propDecorators: { opened: [{
|
|
343
343
|
type: Output,
|
|
344
344
|
args: ['clrOpened']
|
|
@@ -355,7 +355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
355
355
|
class ClrContentPanelContainer {
|
|
356
356
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrContentPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
357
357
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrContentPanelContainer, isStandalone: false, selector: "clr-content-panel-container", host: { properties: { "class.content-container": "true", "class.content-panel-container": "true" } }, ngImport: i0, template: `
|
|
358
|
-
<div class="content-panel-outer-wrapper">
|
|
358
|
+
<div class="content-panel-outer-wrapper" data-testid="content-panel-container">
|
|
359
359
|
<ng-content select="clr-content-panel-container-content"></ng-content>
|
|
360
360
|
<ng-content select="clr-content-panel-container-footer"></ng-content>
|
|
361
361
|
</div>
|
|
@@ -367,7 +367,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
367
367
|
args: [{
|
|
368
368
|
selector: 'clr-content-panel-container',
|
|
369
369
|
template: `
|
|
370
|
-
<div class="content-panel-outer-wrapper">
|
|
370
|
+
<div class="content-panel-outer-wrapper" data-testid="content-panel-container">
|
|
371
371
|
<ng-content select="clr-content-panel-container-content"></ng-content>
|
|
372
372
|
<ng-content select="clr-content-panel-container-footer"></ng-content>
|
|
373
373
|
</div>
|
|
@@ -679,11 +679,11 @@ class ClrDotPager {
|
|
|
679
679
|
return Array(this._pages);
|
|
680
680
|
}
|
|
681
681
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrDotPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
682
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrDotPager, isStandalone: false, selector: "clr-dot-pager", inputs: { pages: ["clrPages", "pages"], currentPage: ["clrCurrentPage", "currentPage"] }, outputs: { currentPageChange: "clrCurrentPageChange" }, host: { properties: { "class.dot-pager": "true" } }, ngImport: i0, template: "@if (pages > 0) {\n<clr-radio-container clrInline>\n @for (a of pageArray(); track a; let page = $index) {\n <clr-radio-wrapper>\n <input
|
|
682
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrDotPager, isStandalone: false, selector: "clr-dot-pager", inputs: { pages: ["clrPages", "pages"], currentPage: ["clrCurrentPage", "currentPage"] }, outputs: { currentPageChange: "clrCurrentPageChange" }, host: { properties: { "class.dot-pager": "true" } }, ngImport: i0, template: "@if (pages > 0) {\n<clr-radio-container clrInline>\n @for (a of pageArray(); track a; let page = $index) {\n <clr-radio-wrapper>\n <input\n clrRadio\n type=\"radio\"\n [value]=\"page+1\"\n [(ngModel)]=\"currentPage\"\n name=\"{{uniqueName}}\"\n [attr.data-testid]=\"'dot-pager-dot-' + (page + 1)\"\n />\n <label> </label>\n </clr-radio-wrapper>\n }\n</clr-radio-container>\n}\n", dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i2$2.ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: i2$2.ClrRadioContainer, selector: "clr-radio-container", inputs: ["clrInline"] }, { kind: "component", type: i2$2.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { kind: "directive", type: i3.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: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
683
683
|
}
|
|
684
684
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrDotPager, decorators: [{
|
|
685
685
|
type: Component,
|
|
686
|
-
args: [{ selector: 'clr-dot-pager', host: { '[class.dot-pager]': 'true' }, standalone: false, template: "@if (pages > 0) {\n<clr-radio-container clrInline>\n @for (a of pageArray(); track a; let page = $index) {\n <clr-radio-wrapper>\n <input
|
|
686
|
+
args: [{ selector: 'clr-dot-pager', host: { '[class.dot-pager]': 'true' }, standalone: false, template: "@if (pages > 0) {\n<clr-radio-container clrInline>\n @for (a of pageArray(); track a; let page = $index) {\n <clr-radio-wrapper>\n <input\n clrRadio\n type=\"radio\"\n [value]=\"page+1\"\n [(ngModel)]=\"currentPage\"\n name=\"{{uniqueName}}\"\n [attr.data-testid]=\"'dot-pager-dot-' + (page + 1)\"\n />\n <label> </label>\n </clr-radio-wrapper>\n }\n</clr-radio-container>\n}\n" }]
|
|
687
687
|
}], propDecorators: { currentPageChange: [{
|
|
688
688
|
type: Output,
|
|
689
689
|
args: ['clrCurrentPageChange']
|
|
@@ -1000,13 +1000,13 @@ class ClrFlowBar {
|
|
|
1000
1000
|
return this._steps.slice(index + 1, this._steps.length).find(step => step.enabled);
|
|
1001
1001
|
}
|
|
1002
1002
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrFlowBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1003
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrFlowBar, isStandalone: false, selector: "clr-flow-bar", inputs: { _steps: ["clrSteps", "_steps"], _activeStep: ["clrActiveStep", "_activeStep"] }, outputs: { _activeStepChange: "clrActiveStepChange" }, host: { properties: { "class.flow-bar": "true" } }, ngImport: i0, template: "<div class=\"flow-bar-wrapper\">\n @for (step of _steps; track step; let index = $index; let last = $last) {\n <div class=\"flow-bar-step\" [class.active]=\"step === _activeStep\">\n <button\n class=\"btn btn-link flow-bar-btn\"\n [disabled]=\"!step.enabled\"\n [class.active]=\"step === _activeStep\"\n (click)=\"changeActiveStep(step)\"\n >\n {{index + 1}}. {{(step.title | async)}}\n </button>\n @if (!last) {\n <cds-icon shape=\"angle\" direction=\"right\"></cds-icon>\n }\n </div>\n }\n</div>\n<clr-dropdown class=\"flow-bar-dropdown clr-flex-fill\">\n <button type=\"button\" class=\"btn btn-outline-primary\" clrDropdownTrigger>\n {{_steps.indexOf(_activeStep) + 1}}. {{_activeStep?.title | async}}\n <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n </button>\n <clr-dropdown-menu>\n @for (step of _steps; track step; let index = $index; let last = $last) {\n <button
|
|
1003
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrFlowBar, isStandalone: false, selector: "clr-flow-bar", inputs: { _steps: ["clrSteps", "_steps"], _activeStep: ["clrActiveStep", "_activeStep"] }, outputs: { _activeStepChange: "clrActiveStepChange" }, host: { properties: { "class.flow-bar": "true" } }, ngImport: i0, template: "<div class=\"flow-bar-wrapper\">\n @for (step of _steps; track step; let index = $index; let last = $last) {\n <div class=\"flow-bar-step\" [class.active]=\"step === _activeStep\">\n <button\n class=\"btn btn-link flow-bar-btn\"\n [disabled]=\"!step.enabled\"\n [class.active]=\"step === _activeStep\"\n (click)=\"changeActiveStep(step)\"\n [attr.data-testid]=\"'flow-bar-step-' + (step.title | async)\"\n >\n {{index + 1}}. {{(step.title | async)}}\n </button>\n @if (!last) {\n <cds-icon shape=\"angle\" direction=\"right\"></cds-icon>\n }\n </div>\n }\n</div>\n<clr-dropdown class=\"flow-bar-dropdown clr-flex-fill\" data-testid=\"flow-bar-dropdown\">\n <button type=\"button\" class=\"btn btn-outline-primary\" clrDropdownTrigger data-testid=\"flow-bar-dropdown-trigger\">\n {{_steps.indexOf(_activeStep) + 1}}. {{_activeStep?.title | async}}\n <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n </button>\n <clr-dropdown-menu>\n @for (step of _steps; track step; let index = $index; let last = $last) {\n <button\n clrDropdownItem\n type=\"button\"\n class=\"btn\"\n [disabled]=\"!step.enabled\"\n (click)=\"changeActiveStep(step)\"\n [attr.data-testid]=\"'flow-bar-dropdown-step-' + (step.title | async)\"\n >\n {{index + 1}}. {{step.title | async}}\n </button>\n }\n </clr-dropdown-menu>\n</clr-dropdown>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
1004
1004
|
}
|
|
1005
1005
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrFlowBar, decorators: [{
|
|
1006
1006
|
type: Component,
|
|
1007
1007
|
args: [{ selector: 'clr-flow-bar', host: {
|
|
1008
1008
|
'[class.flow-bar]': 'true',
|
|
1009
|
-
}, standalone: false, template: "<div class=\"flow-bar-wrapper\">\n @for (step of _steps; track step; let index = $index; let last = $last) {\n <div class=\"flow-bar-step\" [class.active]=\"step === _activeStep\">\n <button\n class=\"btn btn-link flow-bar-btn\"\n [disabled]=\"!step.enabled\"\n [class.active]=\"step === _activeStep\"\n (click)=\"changeActiveStep(step)\"\n >\n {{index + 1}}. {{(step.title | async)}}\n </button>\n @if (!last) {\n <cds-icon shape=\"angle\" direction=\"right\"></cds-icon>\n }\n </div>\n }\n</div>\n<clr-dropdown class=\"flow-bar-dropdown clr-flex-fill\">\n <button type=\"button\" class=\"btn btn-outline-primary\" clrDropdownTrigger>\n {{_steps.indexOf(_activeStep) + 1}}. {{_activeStep?.title | async}}\n <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n </button>\n <clr-dropdown-menu>\n @for (step of _steps; track step; let index = $index; let last = $last) {\n <button
|
|
1009
|
+
}, standalone: false, template: "<div class=\"flow-bar-wrapper\">\n @for (step of _steps; track step; let index = $index; let last = $last) {\n <div class=\"flow-bar-step\" [class.active]=\"step === _activeStep\">\n <button\n class=\"btn btn-link flow-bar-btn\"\n [disabled]=\"!step.enabled\"\n [class.active]=\"step === _activeStep\"\n (click)=\"changeActiveStep(step)\"\n [attr.data-testid]=\"'flow-bar-step-' + (step.title | async)\"\n >\n {{index + 1}}. {{(step.title | async)}}\n </button>\n @if (!last) {\n <cds-icon shape=\"angle\" direction=\"right\"></cds-icon>\n }\n </div>\n }\n</div>\n<clr-dropdown class=\"flow-bar-dropdown clr-flex-fill\" data-testid=\"flow-bar-dropdown\">\n <button type=\"button\" class=\"btn btn-outline-primary\" clrDropdownTrigger data-testid=\"flow-bar-dropdown-trigger\">\n {{_steps.indexOf(_activeStep) + 1}}. {{_activeStep?.title | async}}\n <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n </button>\n <clr-dropdown-menu>\n @for (step of _steps; track step; let index = $index; let last = $last) {\n <button\n clrDropdownItem\n type=\"button\"\n class=\"btn\"\n [disabled]=\"!step.enabled\"\n (click)=\"changeActiveStep(step)\"\n [attr.data-testid]=\"'flow-bar-dropdown-step-' + (step.title | async)\"\n >\n {{index + 1}}. {{step.title | async}}\n </button>\n }\n </clr-dropdown-menu>\n</clr-dropdown>\n" }]
|
|
1010
1010
|
}], propDecorators: { _steps: [{
|
|
1011
1011
|
type: Input,
|
|
1012
1012
|
args: ['clrSteps']
|
|
@@ -1119,11 +1119,11 @@ class ClrGenericQuickList {
|
|
|
1119
1119
|
clearTimeout(this.timeout);
|
|
1120
1120
|
}
|
|
1121
1121
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrGenericQuickList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1122
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrGenericQuickList, isStandalone: false, selector: "clr-generic-quick-list", inputs: { allItems: ["clrAllItems", "allItems"], addLabel: ["clrAddLabel", "addLabel"], addPossible: ["clrAddPossible", "addPossible"], blankItem: ["clrBlankItem", "blankItem"], controlClasses: ["clrControlClasses", "controlClasses"], required: ["clrMandatory", "required"], readonly: "readonly", compactMode: "compactMode" }, outputs: { added: "clrAdded", removed: "clrRemoved" }, host: { properties: { "class.generic-quick-list": "true", "class.clr-form-control": "true", "class.readonly-list": "this.readonly" } }, queries: [{ propertyName: "itemTemplate", predicate: TemplateRef }], viewQueries: [{ propertyName: "itemRows", predicate: ["row"], descendants: true }], ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <ng-content select=\".header-container\"></ng-content>\n\n @for (item of allItems; track item; let i = $index) {\n <div class=\"controls-wrapper\">\n @if (itemTemplate) {\n <div class=\"controls-container\" #row>\n <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n </div>\n } @if (!(readonly || readonly === '')) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link btn-trash\"\n [ngClass]=\"{'btn-trash-ext': !(compactMode && i === allItems.length - 1)}\"\n [disabled]=\"required && allItems.length === 1\"\n (click)=\"removeItem(item)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n } @if (!(readonly || readonly === '') && compactMode && i === allItems.length - 1) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n }\n </div>\n } @if (!(readonly || readonly === '') && allItems.length === 0 && compactMode) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n } @if (!(readonly || readonly === '') && !compactMode) {\n <button
|
|
1122
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrGenericQuickList, isStandalone: false, selector: "clr-generic-quick-list", inputs: { allItems: ["clrAllItems", "allItems"], addLabel: ["clrAddLabel", "addLabel"], addPossible: ["clrAddPossible", "addPossible"], blankItem: ["clrBlankItem", "blankItem"], controlClasses: ["clrControlClasses", "controlClasses"], required: ["clrMandatory", "required"], readonly: "readonly", compactMode: "compactMode" }, outputs: { added: "clrAdded", removed: "clrRemoved" }, host: { properties: { "class.generic-quick-list": "true", "class.clr-form-control": "true", "class.readonly-list": "this.readonly" } }, queries: [{ propertyName: "itemTemplate", predicate: TemplateRef }], viewQueries: [{ propertyName: "itemRows", predicate: ["row"], descendants: true }], ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <ng-content select=\".header-container\"></ng-content>\n\n @for (item of allItems; track item; let i = $index) {\n <div class=\"controls-wrapper\" [attr.data-testid]=\"'generic-quick-list-item-' + (item.id || i)\">\n @if (itemTemplate) {\n <div class=\"controls-container\" #row [attr.data-testid]=\"'generic-quick-list-item-content-' + (item.id || i)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n </div>\n } @if (!(readonly || readonly === '')) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link btn-trash\"\n [ngClass]=\"{'btn-trash-ext': !(compactMode && i === allItems.length - 1)}\"\n [disabled]=\"required && allItems.length === 1\"\n (click)=\"removeItem(item)\"\n [attr.data-testid]=\"'generic-quick-list-remove-button-' + (item.id || i)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n } @if (!(readonly || readonly === '') && compactMode && i === allItems.length - 1) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n data-testid=\"generic-quick-list-add-compact-button\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n }\n </div>\n } @if (!(readonly || readonly === '') && allItems.length === 0 && compactMode) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n data-testid=\"generic-quick-list-add-compact-button-empty\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n } @if (!(readonly || readonly === '') && !compactMode) {\n <button\n type=\"button\"\n class=\"btn btn-link btn-sm btn-add\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n data-testid=\"generic-quick-list-add-button\"\n >\n {{addLabel}}\n </button>\n }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
|
|
1123
1123
|
}
|
|
1124
1124
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrGenericQuickList, decorators: [{
|
|
1125
1125
|
type: Component,
|
|
1126
|
-
args: [{ selector: 'clr-generic-quick-list', host: { '[class.generic-quick-list]': 'true', '[class.clr-form-control]': 'true' }, standalone: false, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <ng-content select=\".header-container\"></ng-content>\n\n @for (item of allItems; track item; let i = $index) {\n <div class=\"controls-wrapper\">\n @if (itemTemplate) {\n <div class=\"controls-container\" #row>\n <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n </div>\n } @if (!(readonly || readonly === '')) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link btn-trash\"\n [ngClass]=\"{'btn-trash-ext': !(compactMode && i === allItems.length - 1)}\"\n [disabled]=\"required && allItems.length === 1\"\n (click)=\"removeItem(item)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n } @if (!(readonly || readonly === '') && compactMode && i === allItems.length - 1) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n }\n </div>\n } @if (!(readonly || readonly === '') && allItems.length === 0 && compactMode) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n } @if (!(readonly || readonly === '') && !compactMode) {\n <button
|
|
1126
|
+
args: [{ selector: 'clr-generic-quick-list', host: { '[class.generic-quick-list]': 'true', '[class.clr-form-control]': 'true' }, standalone: false, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <ng-content select=\".header-container\"></ng-content>\n\n @for (item of allItems; track item; let i = $index) {\n <div class=\"controls-wrapper\" [attr.data-testid]=\"'generic-quick-list-item-' + (item.id || i)\">\n @if (itemTemplate) {\n <div class=\"controls-container\" #row [attr.data-testid]=\"'generic-quick-list-item-content-' + (item.id || i)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n </div>\n } @if (!(readonly || readonly === '')) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link btn-trash\"\n [ngClass]=\"{'btn-trash-ext': !(compactMode && i === allItems.length - 1)}\"\n [disabled]=\"required && allItems.length === 1\"\n (click)=\"removeItem(item)\"\n [attr.data-testid]=\"'generic-quick-list-remove-button-' + (item.id || i)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n } @if (!(readonly || readonly === '') && compactMode && i === allItems.length - 1) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n data-testid=\"generic-quick-list-add-compact-button\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n }\n </div>\n } @if (!(readonly || readonly === '') && allItems.length === 0 && compactMode) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n data-testid=\"generic-quick-list-add-compact-button-empty\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n } @if (!(readonly || readonly === '') && !compactMode) {\n <button\n type=\"button\"\n class=\"btn btn-link btn-sm btn-add\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n data-testid=\"generic-quick-list-add-button\"\n >\n {{addLabel}}\n </button>\n }\n</div>\n" }]
|
|
1127
1127
|
}], propDecorators: { allItems: [{
|
|
1128
1128
|
type: Input,
|
|
1129
1129
|
args: ['clrAllItems']
|
|
@@ -1207,11 +1207,11 @@ class ClrIconAvatar {
|
|
|
1207
1207
|
return this.shape ?? 'user';
|
|
1208
1208
|
}
|
|
1209
1209
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrIconAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1210
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrIconAvatar, isStandalone: false, selector: "clr-icon-avatar", inputs: { shape: ["clrShape", "shape"], size: ["clrSize", "size"] }, host: { properties: { "class.clr-avatar": "this.avatar" } }, viewQueries: [{ propertyName: "avatarElement", first: true, predicate: ["avatar"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"avatar-circle\">\n <div #avatar class=\"avatar-icon\">\n <cds-icon [shape]=\"getShape()\"></cds-icon>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: i1$2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
|
|
1210
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrIconAvatar, isStandalone: false, selector: "clr-icon-avatar", inputs: { shape: ["clrShape", "shape"], size: ["clrSize", "size"] }, host: { properties: { "class.clr-avatar": "this.avatar" } }, viewQueries: [{ propertyName: "avatarElement", first: true, predicate: ["avatar"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"avatar-circle\">\n <div #avatar class=\"avatar-icon\">\n <cds-icon [shape]=\"getShape()\" data-testid=\"icon-avatar-icon\"></cds-icon>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: i1$2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
|
|
1211
1211
|
}
|
|
1212
1212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrIconAvatar, decorators: [{
|
|
1213
1213
|
type: Component,
|
|
1214
|
-
args: [{ selector: 'clr-icon-avatar', standalone: false, template: "<div class=\"avatar-circle\">\n <div #avatar class=\"avatar-icon\">\n <cds-icon [shape]=\"getShape()\"></cds-icon>\n </div>\n</div>\n" }]
|
|
1214
|
+
args: [{ selector: 'clr-icon-avatar', standalone: false, template: "<div class=\"avatar-circle\">\n <div #avatar class=\"avatar-icon\">\n <cds-icon [shape]=\"getShape()\" data-testid=\"icon-avatar-icon\"></cds-icon>\n </div>\n</div>\n" }]
|
|
1215
1215
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { avatar: [{
|
|
1216
1216
|
type: HostBinding,
|
|
1217
1217
|
args: ['class.clr-avatar']
|
|
@@ -1282,11 +1282,11 @@ class ClrLetterAvatar {
|
|
|
1282
1282
|
}
|
|
1283
1283
|
}
|
|
1284
1284
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrLetterAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1285
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrLetterAvatar, isStandalone: false, selector: "clr-letter-avatar", inputs: { name: ["clrName", "name"], size: ["clrSize", "size"] }, host: { properties: { "class.clr-avatar": "this.avatar" } }, viewQueries: [{ propertyName: "avatarElement", first: true, predicate: ["avatar"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"avatar-circle\">\n <div #avatar class=\"avatar-initials\">{{getInitials()}}</div>\n</div>\n" }); }
|
|
1285
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrLetterAvatar, isStandalone: false, selector: "clr-letter-avatar", inputs: { name: ["clrName", "name"], size: ["clrSize", "size"] }, host: { properties: { "class.clr-avatar": "this.avatar" } }, viewQueries: [{ propertyName: "avatarElement", first: true, predicate: ["avatar"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"avatar-circle\">\n <div #avatar class=\"avatar-initials\" data-testid=\"letter-avatar-initials\">{{getInitials()}}</div>\n</div>\n" }); }
|
|
1286
1286
|
}
|
|
1287
1287
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrLetterAvatar, decorators: [{
|
|
1288
1288
|
type: Component,
|
|
1289
|
-
args: [{ selector: 'clr-letter-avatar', standalone: false, template: "<div class=\"avatar-circle\">\n <div #avatar class=\"avatar-initials\">{{getInitials()}}</div>\n</div>\n" }]
|
|
1289
|
+
args: [{ selector: 'clr-letter-avatar', standalone: false, template: "<div class=\"avatar-circle\">\n <div #avatar class=\"avatar-initials\" data-testid=\"letter-avatar-initials\">{{getInitials()}}</div>\n</div>\n" }]
|
|
1290
1290
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { avatar: [{
|
|
1291
1291
|
type: HostBinding,
|
|
1292
1292
|
args: ['class.clr-avatar']
|
|
@@ -1488,11 +1488,11 @@ class ClrMainNavGroup {
|
|
|
1488
1488
|
setTimeout(() => this.items.toArray()[this.currentFocusedId].focus());
|
|
1489
1489
|
}
|
|
1490
1490
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrMainNavGroup, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1491
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrMainNavGroup, isStandalone: false, selector: "clr-main-nav-group", inputs: { title: ["clrTitle", "title"], icon: ["clrIcon", "icon"] }, host: { properties: { "class.main-nav-group": "true" } }, queries: [{ propertyName: "items", predicate: ClrMainNavGroupItem }], ngImport: i0, template: "<section\n class=\"nav-link collapsible\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onClick($event)\"\n (keydown.space)=\"onClick($event)\"\n [class.active]=\"isActive()\"\n tabindex=\"0\"\n>\n <input
|
|
1491
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrMainNavGroup, isStandalone: false, selector: "clr-main-nav-group", inputs: { title: ["clrTitle", "title"], icon: ["clrIcon", "icon"] }, host: { properties: { "class.main-nav-group": "true" } }, queries: [{ propertyName: "items", predicate: ClrMainNavGroupItem }], ngImport: i0, template: "<section\n class=\"nav-link collapsible\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onClick($event)\"\n (keydown.space)=\"onClick($event)\"\n [class.active]=\"isActive()\"\n tabindex=\"0\"\n [attr.data-testid]=\"'main-nav-group-toggle-' + (id)\"\n>\n <input\n id=\"{{prefix}}{{id}}\"\n type=\"checkbox\"\n [checked]=\"isChecked()\"\n [attr.data-testid]=\"'main-nav-group-checkbox-' + (id)\"\n />\n <label class=\"nav-text nav-trigger\" for=\"{{prefix}}{{id}}\" [attr.data-testid]=\"'main-nav-group-label-' + (id)\">\n @if (icon) {\n <cds-icon class=\"title-icon\" [shape]=\"icon\"></cds-icon>\n } {{title}}\n <cds-icon class=\"dropdown-icon\" shape=\"angle\" direction=\"down\"></cds-icon>\n </label>\n <div class=\"nav-list dropdown-menu\">\n <ng-content></ng-content>\n </div>\n</section>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }] }); }
|
|
1492
1492
|
}
|
|
1493
1493
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrMainNavGroup, decorators: [{
|
|
1494
1494
|
type: Component,
|
|
1495
|
-
args: [{ selector: 'clr-main-nav-group', host: { '[class.main-nav-group]': 'true' }, standalone: false, template: "<section\n class=\"nav-link collapsible\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onClick($event)\"\n (keydown.space)=\"onClick($event)\"\n [class.active]=\"isActive()\"\n tabindex=\"0\"\n>\n <input
|
|
1495
|
+
args: [{ selector: 'clr-main-nav-group', host: { '[class.main-nav-group]': 'true' }, standalone: false, template: "<section\n class=\"nav-link collapsible\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onClick($event)\"\n (keydown.space)=\"onClick($event)\"\n [class.active]=\"isActive()\"\n tabindex=\"0\"\n [attr.data-testid]=\"'main-nav-group-toggle-' + (id)\"\n>\n <input\n id=\"{{prefix}}{{id}}\"\n type=\"checkbox\"\n [checked]=\"isChecked()\"\n [attr.data-testid]=\"'main-nav-group-checkbox-' + (id)\"\n />\n <label class=\"nav-text nav-trigger\" for=\"{{prefix}}{{id}}\" [attr.data-testid]=\"'main-nav-group-label-' + (id)\">\n @if (icon) {\n <cds-icon class=\"title-icon\" [shape]=\"icon\"></cds-icon>\n } {{title}}\n <cds-icon class=\"dropdown-icon\" shape=\"angle\" direction=\"down\"></cds-icon>\n </label>\n <div class=\"nav-list dropdown-menu\">\n <ng-content></ng-content>\n </div>\n</section>\n" }]
|
|
1496
1496
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { title: [{
|
|
1497
1497
|
type: Input,
|
|
1498
1498
|
args: ['clrTitle']
|
|
@@ -1899,14 +1899,20 @@ class ClrMultilingualSelector {
|
|
|
1899
1899
|
class="btn btn-outline btn-sm clr-multilingual-button"
|
|
1900
1900
|
clrDropdownTrigger
|
|
1901
1901
|
[disabled]="disabled"
|
|
1902
|
+
data-testid="multilingual-selector-trigger"
|
|
1902
1903
|
>
|
|
1903
1904
|
{{ selectedLang }}
|
|
1904
1905
|
<cds-icon shape="angle" direction="down"></cds-icon>
|
|
1905
1906
|
</button>
|
|
1906
|
-
<clr-dropdown-menu *clrIfOpen>
|
|
1907
|
+
<clr-dropdown-menu *clrIfOpen data-testid="multilingual-selector-menu">
|
|
1907
1908
|
@for (text of texts | keyvalue; track text) {
|
|
1908
1909
|
@if (text.key !== selectedLang) {
|
|
1909
|
-
<div
|
|
1910
|
+
<div
|
|
1911
|
+
class="clr-multilingual-dd-entry"
|
|
1912
|
+
clrDropdownItem
|
|
1913
|
+
(click)="selectedLangChange.emit(text.key)"
|
|
1914
|
+
[attr.data-testid]="'multilingual-selector-option-' + text.key"
|
|
1915
|
+
>
|
|
1910
1916
|
<span class="label">{{ text.key }}</span
|
|
1911
1917
|
>{{ text.value }}
|
|
1912
1918
|
</div>
|
|
@@ -1929,14 +1935,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
1929
1935
|
class="btn btn-outline btn-sm clr-multilingual-button"
|
|
1930
1936
|
clrDropdownTrigger
|
|
1931
1937
|
[disabled]="disabled"
|
|
1938
|
+
data-testid="multilingual-selector-trigger"
|
|
1932
1939
|
>
|
|
1933
1940
|
{{ selectedLang }}
|
|
1934
1941
|
<cds-icon shape="angle" direction="down"></cds-icon>
|
|
1935
1942
|
</button>
|
|
1936
|
-
<clr-dropdown-menu *clrIfOpen>
|
|
1943
|
+
<clr-dropdown-menu *clrIfOpen data-testid="multilingual-selector-menu">
|
|
1937
1944
|
@for (text of texts | keyvalue; track text) {
|
|
1938
1945
|
@if (text.key !== selectedLang) {
|
|
1939
|
-
<div
|
|
1946
|
+
<div
|
|
1947
|
+
class="clr-multilingual-dd-entry"
|
|
1948
|
+
clrDropdownItem
|
|
1949
|
+
(click)="selectedLangChange.emit(text.key)"
|
|
1950
|
+
[attr.data-testid]="'multilingual-selector-option-' + text.key"
|
|
1951
|
+
>
|
|
1940
1952
|
<span class="label">{{ text.key }}</span
|
|
1941
1953
|
>{{ text.value }}
|
|
1942
1954
|
</div>
|
|
@@ -1976,7 +1988,7 @@ class ClrMultilingualInput extends ClrMultilingualAbstract {
|
|
|
1976
1988
|
multi: true,
|
|
1977
1989
|
},
|
|
1978
1990
|
ControlIdService,
|
|
1979
|
-
], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n @if (showLanguageSelector()) {\n <clr-multilingual-selector\n [disabled]=\"disabled\"\n [texts]=\"shownTexts\"\n [selectedLang]=\"selectedLang\"\n (selectedLangChange)=\"changeLanguage($event)\"\n >\n </clr-multilingual-selector>\n } @if (readonly || readonly === '') {\n <span [title]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"
|
|
1991
|
+
], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n @if (showLanguageSelector()) {\n <clr-multilingual-selector\n data-testid=\"multilingual-input-language-selector\"\n [disabled]=\"disabled\"\n [texts]=\"shownTexts\"\n [selectedLang]=\"selectedLang\"\n (selectedLangChange)=\"changeLanguage($event)\"\n >\n </clr-multilingual-selector>\n } @if (readonly || readonly === '') {\n <span\n [attr.data-testid]=\"'multilingual-input-readonly-value-' + (selectedLang)\"\n [title]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n class=\"text-truncate\"\n >\n {{ !!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : '' }}\n </span>\n } @else {\n <div class=\"clr-multi-input-wrapper\">\n <div class=\"clr-input-wrapper\">\n <input\n class=\"clr-input\"\n type=\"text\"\n [id]=\"inputId\"\n [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n (ngModelChange)=\"setText(selectedLang, $event)\"\n (blur)=\"onTouch()\"\n [disabled]=\"disabled\"\n autocomplete=\"off\"\n [attr.data-testid]=\"'multilingual-input-text-' + (selectedLang)\"\n [maxlength]=\"maxlength || null\"\n #input\n />\n @if (showError) {\n <cds-icon class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></cds-icon>\n }\n </div>\n @if (!showError) {\n <ng-content select=\"clr-control-helper\"></ng-content>\n } @if (showError) {\n <ng-content select=\"clr-control-error\"></ng-content>\n }\n </div>\n }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrMultilingualSelector, selector: "clr-multilingual-selector", inputs: ["disabled", "texts", "selectedLang"], outputs: ["selectedLangChange"] }] }); }
|
|
1980
1992
|
}
|
|
1981
1993
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrMultilingualInput, decorators: [{
|
|
1982
1994
|
type: Component,
|
|
@@ -1987,7 +1999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
1987
1999
|
multi: true,
|
|
1988
2000
|
},
|
|
1989
2001
|
ControlIdService,
|
|
1990
|
-
], standalone: false, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n @if (showLanguageSelector()) {\n <clr-multilingual-selector\n [disabled]=\"disabled\"\n [texts]=\"shownTexts\"\n [selectedLang]=\"selectedLang\"\n (selectedLangChange)=\"changeLanguage($event)\"\n >\n </clr-multilingual-selector>\n } @if (readonly || readonly === '') {\n <span [title]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"
|
|
2002
|
+
], standalone: false, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n @if (showLanguageSelector()) {\n <clr-multilingual-selector\n data-testid=\"multilingual-input-language-selector\"\n [disabled]=\"disabled\"\n [texts]=\"shownTexts\"\n [selectedLang]=\"selectedLang\"\n (selectedLangChange)=\"changeLanguage($event)\"\n >\n </clr-multilingual-selector>\n } @if (readonly || readonly === '') {\n <span\n [attr.data-testid]=\"'multilingual-input-readonly-value-' + (selectedLang)\"\n [title]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n class=\"text-truncate\"\n >\n {{ !!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : '' }}\n </span>\n } @else {\n <div class=\"clr-multi-input-wrapper\">\n <div class=\"clr-input-wrapper\">\n <input\n class=\"clr-input\"\n type=\"text\"\n [id]=\"inputId\"\n [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n (ngModelChange)=\"setText(selectedLang, $event)\"\n (blur)=\"onTouch()\"\n [disabled]=\"disabled\"\n autocomplete=\"off\"\n [attr.data-testid]=\"'multilingual-input-text-' + (selectedLang)\"\n [maxlength]=\"maxlength || null\"\n #input\n />\n @if (showError) {\n <cds-icon class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></cds-icon>\n }\n </div>\n @if (!showError) {\n <ng-content select=\"clr-control-helper\"></ng-content>\n } @if (showError) {\n <ng-content select=\"clr-control-error\"></ng-content>\n }\n </div>\n }\n</div>\n" }]
|
|
1991
2003
|
}], ctorParameters: () => [{ type: i0.Injector }] });
|
|
1992
2004
|
|
|
1993
2005
|
/*
|
|
@@ -2008,7 +2020,7 @@ class ClrMultilingualTextarea extends ClrMultilingualAbstract {
|
|
|
2008
2020
|
multi: true,
|
|
2009
2021
|
},
|
|
2010
2022
|
ControlIdService,
|
|
2011
|
-
], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n @if (showLanguageSelector()) {\n <clr-multilingual-selector\n [disabled]=\"disabled\"\n [texts]=\"shownTexts\"\n [selectedLang]=\"selectedLang\"\n (selectedLangChange)=\"changeLanguage($event)\"\n >\n </clr-multilingual-selector>\n }\n <div class=\"clr-multi-input-wrapper\">\n <div class=\"clr-textarea-wrapper\">\n <textarea\n class=\"clr-textarea\"\n [id]=\"inputId\"\n [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n (ngModelChange)=\"setText(selectedLang, $event)\"\n (blur)=\"onTouch()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly || readonly === ''\"\n [maxlength]=\"maxlength || null\"\n [rows]=\"rows || 1\"\n #input\n ></textarea>\n @if (showError) {\n <cds-icon class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></cds-icon>\n }\n </div>\n @if (!showError) {\n <ng-content select=\"clr-control-helper\"></ng-content>\n } @if (showError) {\n <ng-content select=\"clr-control-error\"></ng-content>\n }\n <ng-content></ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrMultilingualSelector, selector: "clr-multilingual-selector", inputs: ["disabled", "texts", "selectedLang"], outputs: ["selectedLangChange"] }] }); }
|
|
2023
|
+
], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n @if (showLanguageSelector()) {\n <clr-multilingual-selector\n data-testid=\"multilingual-textarea-language-selector\"\n [disabled]=\"disabled\"\n [texts]=\"shownTexts\"\n [selectedLang]=\"selectedLang\"\n (selectedLangChange)=\"changeLanguage($event)\"\n >\n </clr-multilingual-selector>\n }\n <div class=\"clr-multi-input-wrapper\">\n <div class=\"clr-textarea-wrapper\">\n <textarea\n class=\"clr-textarea\"\n [id]=\"inputId\"\n [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n (ngModelChange)=\"setText(selectedLang, $event)\"\n (blur)=\"onTouch()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly || readonly === ''\"\n [maxlength]=\"maxlength || null\"\n [attr.data-testid]=\"'multilingual-textarea-text-' + (selectedLang)\"\n [rows]=\"rows || 1\"\n #input\n ></textarea>\n @if (showError) {\n <cds-icon class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></cds-icon>\n }\n </div>\n @if (!showError) {\n <ng-content select=\"clr-control-helper\"></ng-content>\n } @if (showError) {\n <ng-content select=\"clr-control-error\"></ng-content>\n }\n <ng-content></ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrMultilingualSelector, selector: "clr-multilingual-selector", inputs: ["disabled", "texts", "selectedLang"], outputs: ["selectedLangChange"] }] }); }
|
|
2012
2024
|
}
|
|
2013
2025
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrMultilingualTextarea, decorators: [{
|
|
2014
2026
|
type: Component,
|
|
@@ -2019,7 +2031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
2019
2031
|
multi: true,
|
|
2020
2032
|
},
|
|
2021
2033
|
ControlIdService,
|
|
2022
|
-
], standalone: false, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n @if (showLanguageSelector()) {\n <clr-multilingual-selector\n [disabled]=\"disabled\"\n [texts]=\"shownTexts\"\n [selectedLang]=\"selectedLang\"\n (selectedLangChange)=\"changeLanguage($event)\"\n >\n </clr-multilingual-selector>\n }\n <div class=\"clr-multi-input-wrapper\">\n <div class=\"clr-textarea-wrapper\">\n <textarea\n class=\"clr-textarea\"\n [id]=\"inputId\"\n [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n (ngModelChange)=\"setText(selectedLang, $event)\"\n (blur)=\"onTouch()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly || readonly === ''\"\n [maxlength]=\"maxlength || null\"\n [rows]=\"rows || 1\"\n #input\n ></textarea>\n @if (showError) {\n <cds-icon class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></cds-icon>\n }\n </div>\n @if (!showError) {\n <ng-content select=\"clr-control-helper\"></ng-content>\n } @if (showError) {\n <ng-content select=\"clr-control-error\"></ng-content>\n }\n <ng-content></ng-content>\n </div>\n</div>\n" }]
|
|
2034
|
+
], standalone: false, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n @if (showLanguageSelector()) {\n <clr-multilingual-selector\n data-testid=\"multilingual-textarea-language-selector\"\n [disabled]=\"disabled\"\n [texts]=\"shownTexts\"\n [selectedLang]=\"selectedLang\"\n (selectedLangChange)=\"changeLanguage($event)\"\n >\n </clr-multilingual-selector>\n }\n <div class=\"clr-multi-input-wrapper\">\n <div class=\"clr-textarea-wrapper\">\n <textarea\n class=\"clr-textarea\"\n [id]=\"inputId\"\n [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n (ngModelChange)=\"setText(selectedLang, $event)\"\n (blur)=\"onTouch()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly || readonly === ''\"\n [maxlength]=\"maxlength || null\"\n [attr.data-testid]=\"'multilingual-textarea-text-' + (selectedLang)\"\n [rows]=\"rows || 1\"\n #input\n ></textarea>\n @if (showError) {\n <cds-icon class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></cds-icon>\n }\n </div>\n @if (!showError) {\n <ng-content select=\"clr-control-helper\"></ng-content>\n } @if (showError) {\n <ng-content select=\"clr-control-error\"></ng-content>\n }\n <ng-content></ng-content>\n </div>\n</div>\n" }]
|
|
2023
2035
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { rows: [{
|
|
2024
2036
|
type: Input
|
|
2025
2037
|
}] } });
|
|
@@ -2248,7 +2260,7 @@ class ClrNotification {
|
|
|
2248
2260
|
zonedTimer(300, this.ngZone).subscribe(() => (this.state = { value: 'currentPosition', params: { absolute: this._translate } }));
|
|
2249
2261
|
}
|
|
2250
2262
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrNotification, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2251
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrNotification, isStandalone: false, selector: "clr-notification", inputs: { timeout: "timeout", notificationType: "notificationType", dismissable: "dismissable", progressbar: "progressbar" }, outputs: { closed: "closed" }, host: { properties: { "class.notification": "true" } }, viewQueries: [{ propertyName: "clrAlert", first: true, predicate: ClrAlert, descendants: true, static: true }], ngImport: i0, template: "<div class=\"notification__wrapper\" [@slideDown] [@move]=\"state\" [@fade]=\"state\">\n @if (progressbar && timeout > 0) {\n <div class=\"progress top\" [ngClass]=\"notificationType\">\n <progress class=\"progress\" [max]=\"timeout\" [value]=\"progressStatus\"></progress>\n </div>\n }\n <clr-alert\n [clrAlertType]=\"notificationType\"\n [clrAlertAppLevel]=\"true\"\n [clrAlertClosable]=\"dismissable\"\n (clrAlertClosedChange)=\"close()\"\n >\n <div class=\"alert-item\">\n <span class=\"alert-text\">\n <ng-content select=\"[clr-notification-message]\"></ng-content>\n </span>\n </div>\n </clr-alert>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$4.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "directive", type: i2$4.ClrAlertText, selector: ".alert-text" }], animations: [
|
|
2263
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrNotification, isStandalone: false, selector: "clr-notification", inputs: { timeout: "timeout", notificationType: "notificationType", dismissable: "dismissable", progressbar: "progressbar" }, outputs: { closed: "closed" }, host: { properties: { "class.notification": "true" } }, viewQueries: [{ propertyName: "clrAlert", first: true, predicate: ClrAlert, descendants: true, static: true }], ngImport: i0, template: "<div class=\"notification__wrapper\" data-testid=\"notification\" [@slideDown] [@move]=\"state\" [@fade]=\"state\">\n @if (progressbar && timeout > 0) {\n <div class=\"progress top\" [ngClass]=\"notificationType\" data-testid=\"notification-progress-container\">\n <progress class=\"progress\" [max]=\"timeout\" [value]=\"progressStatus\" data-testid=\"notification-progress\"></progress>\n </div>\n }\n <clr-alert\n data-testid=\"notification-alert\"\n [clrAlertType]=\"notificationType\"\n [clrAlertAppLevel]=\"true\"\n [clrAlertClosable]=\"dismissable\"\n (clrAlertClosedChange)=\"close()\"\n >\n <div class=\"alert-item\">\n <span class=\"alert-text\" data-testid=\"notification-message\">\n <ng-content select=\"[clr-notification-message]\"></ng-content>\n </span>\n </div>\n </clr-alert>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$4.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "directive", type: i2$4.ClrAlertText, selector: ".alert-text" }], animations: [
|
|
2252
2264
|
trigger('slideDown', [
|
|
2253
2265
|
transition(':enter', [
|
|
2254
2266
|
style({ transform: 'translateY(-200%)' }),
|
|
@@ -2290,7 +2302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
2290
2302
|
]),
|
|
2291
2303
|
], host: {
|
|
2292
2304
|
'[class.notification]': 'true',
|
|
2293
|
-
}, standalone: false, template: "<div class=\"notification__wrapper\" [@slideDown] [@move]=\"state\" [@fade]=\"state\">\n @if (progressbar && timeout > 0) {\n <div class=\"progress top\" [ngClass]=\"notificationType\">\n <progress class=\"progress\" [max]=\"timeout\" [value]=\"progressStatus\"></progress>\n </div>\n }\n <clr-alert\n [clrAlertType]=\"notificationType\"\n [clrAlertAppLevel]=\"true\"\n [clrAlertClosable]=\"dismissable\"\n (clrAlertClosedChange)=\"close()\"\n >\n <div class=\"alert-item\">\n <span class=\"alert-text\">\n <ng-content select=\"[clr-notification-message]\"></ng-content>\n </span>\n </div>\n </clr-alert>\n</div>\n" }]
|
|
2305
|
+
}, standalone: false, template: "<div class=\"notification__wrapper\" data-testid=\"notification\" [@slideDown] [@move]=\"state\" [@fade]=\"state\">\n @if (progressbar && timeout > 0) {\n <div class=\"progress top\" [ngClass]=\"notificationType\" data-testid=\"notification-progress-container\">\n <progress class=\"progress\" [max]=\"timeout\" [value]=\"progressStatus\" data-testid=\"notification-progress\"></progress>\n </div>\n }\n <clr-alert\n data-testid=\"notification-alert\"\n [clrAlertType]=\"notificationType\"\n [clrAlertAppLevel]=\"true\"\n [clrAlertClosable]=\"dismissable\"\n (clrAlertClosedChange)=\"close()\"\n >\n <div class=\"alert-item\">\n <span class=\"alert-text\" data-testid=\"notification-message\">\n <ng-content select=\"[clr-notification-message]\"></ng-content>\n </span>\n </div>\n </clr-alert>\n</div>\n" }]
|
|
2294
2306
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { clrAlert: [{
|
|
2295
2307
|
type: ViewChild,
|
|
2296
2308
|
args: [ClrAlert, { static: true }]
|
|
@@ -3096,11 +3108,11 @@ class ClrPager {
|
|
|
3096
3108
|
return middlePages;
|
|
3097
3109
|
}
|
|
3098
3110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3099
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrPager, isStandalone: false, selector: "clr-pager", inputs: { pageSize: ["clrPageSize", "pageSize"], totalItems: ["clrTotalItems", "totalItems"], last: ["clrLast", "last"], page: ["clrPage", "page"] }, outputs: { pageChange: "clrPageChange" }, host: { properties: { "class.pager": "true" } }, ngImport: i0, template: "@if (last > 1) {\n<div class=\"btn-group\">\n <button
|
|
3111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrPager, isStandalone: false, selector: "clr-pager", inputs: { pageSize: ["clrPageSize", "pageSize"], totalItems: ["clrTotalItems", "totalItems"], last: ["clrLast", "last"], page: ["clrPage", "page"] }, outputs: { pageChange: "clrPageChange" }, host: { properties: { "class.pager": "true" } }, ngImport: i0, template: "@if (last > 1) {\n<div class=\"btn-group\">\n <button\n class=\"btn pagination-previous\"\n (click)=\"previous()\"\n [disabled]=\"page == 1\"\n data-testid=\"pager-previous-button\"\n >\n <cds-icon shape=\"angle\" direction=\"left\"></cds-icon>\n </button>\n @if (page > 2) {\n <button class=\"btn\" (click)=\"page = 1\" data-testid=\"pager-page-1\">1</button>\n } @if (page > 3) {\n <button class=\"btn\" disabled data-testid=\"pager-leading-ellipsis\">...</button>\n } @for (pageNum of middlePages; track pageNum) { @if (pageNum !== page) {\n <button class=\"btn\" (click)=\"page = pageNum\" [attr.data-testid]=\"'pager-page-' + (pageNum)\">{{pageNum}}</button>\n } @else {\n <button class=\"btn btn-primary\" type=\"button\" [attr.data-testid]=\"'pager-current-page-' + (pageNum)\">\n {{pageNum}}\n </button>\n } } @if (page < last - 2) {\n <button class=\"btn\" disabled data-testid=\"pager-trailing-ellipsis\">...</button>\n } @if (page < last - 1) {\n <button class=\"btn\" (click)=\"page = last\" [attr.data-testid]=\"'pager-page-' + (last)\">{{last}}</button>\n }\n <button class=\"btn pagination-next\" (click)=\"next()\" [disabled]=\"page == last\" data-testid=\"pager-next-button\">\n <cds-icon shape=\"angle\" direction=\"right\"></cds-icon>\n </button>\n</div>\n}\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
|
|
3100
3112
|
}
|
|
3101
3113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrPager, decorators: [{
|
|
3102
3114
|
type: Component,
|
|
3103
|
-
args: [{ selector: 'clr-pager', host: { '[class.pager]': 'true' }, standalone: false, template: "@if (last > 1) {\n<div class=\"btn-group\">\n <button
|
|
3115
|
+
args: [{ selector: 'clr-pager', host: { '[class.pager]': 'true' }, standalone: false, template: "@if (last > 1) {\n<div class=\"btn-group\">\n <button\n class=\"btn pagination-previous\"\n (click)=\"previous()\"\n [disabled]=\"page == 1\"\n data-testid=\"pager-previous-button\"\n >\n <cds-icon shape=\"angle\" direction=\"left\"></cds-icon>\n </button>\n @if (page > 2) {\n <button class=\"btn\" (click)=\"page = 1\" data-testid=\"pager-page-1\">1</button>\n } @if (page > 3) {\n <button class=\"btn\" disabled data-testid=\"pager-leading-ellipsis\">...</button>\n } @for (pageNum of middlePages; track pageNum) { @if (pageNum !== page) {\n <button class=\"btn\" (click)=\"page = pageNum\" [attr.data-testid]=\"'pager-page-' + (pageNum)\">{{pageNum}}</button>\n } @else {\n <button class=\"btn btn-primary\" type=\"button\" [attr.data-testid]=\"'pager-current-page-' + (pageNum)\">\n {{pageNum}}\n </button>\n } } @if (page < last - 2) {\n <button class=\"btn\" disabled data-testid=\"pager-trailing-ellipsis\">...</button>\n } @if (page < last - 1) {\n <button class=\"btn\" (click)=\"page = last\" [attr.data-testid]=\"'pager-page-' + (last)\">{{last}}</button>\n }\n <button class=\"btn pagination-next\" (click)=\"next()\" [disabled]=\"page == last\" data-testid=\"pager-next-button\">\n <cds-icon shape=\"angle\" direction=\"right\"></cds-icon>\n </button>\n</div>\n}\n" }]
|
|
3104
3116
|
}], propDecorators: { pageChange: [{
|
|
3105
3117
|
type: Output,
|
|
3106
3118
|
args: ['clrPageChange']
|
|
@@ -3143,11 +3155,11 @@ class ClrPagedSearchResultList {
|
|
|
3143
3155
|
this.pageSizeChange = new EventEmitter();
|
|
3144
3156
|
}
|
|
3145
3157
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrPagedSearchResultList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3146
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrPagedSearchResultList, isStandalone: false, selector: "clr-paged-search-result-list", inputs: { pageSize: ["clrPageSize", "pageSize"], pageSizeOptions: ["clrPageSizeOptions", "pageSizeOptions"], pageSizeLabel: ["clrPageSizeLabel", "pageSizeLabel"], currentPage: ["clrPage", "currentPage"], totalItems: ["clrTotalItems", "totalItems"], items: ["clrItems", "items"], clrPagerPosition: "clrPagerPosition" }, outputs: { pageChange: "clrPageChange", pageSizeChange: "clrPageSizeChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "@if (clrPagerPosition === 'top' || clrPagerPosition === 'both') {\n<div>\n <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'top' }\"></ng-container>\n</div>\n} @for (item of items; track item) {\n<ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: item}\">\n @if (!itemTemplate) {\n <div>Item template input is undefined!</div>\n }\n</ng-container>\n} @if (clrPagerPosition === 'bottom' || clrPagerPosition === 'both') {\n<div>\n <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'bottom' }\"></ng-container>\n</div>\n}\n<ng-template #pager let-position>\n <div class=\"clr-row\">\n <div
|
|
3158
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrPagedSearchResultList, isStandalone: false, selector: "clr-paged-search-result-list", inputs: { pageSize: ["clrPageSize", "pageSize"], pageSizeOptions: ["clrPageSizeOptions", "pageSizeOptions"], pageSizeLabel: ["clrPageSizeLabel", "pageSizeLabel"], currentPage: ["clrPage", "currentPage"], totalItems: ["clrTotalItems", "totalItems"], items: ["clrItems", "items"], clrPagerPosition: "clrPagerPosition" }, outputs: { pageChange: "clrPageChange", pageSizeChange: "clrPageSizeChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "@if (clrPagerPosition === 'top' || clrPagerPosition === 'both') {\n<div>\n <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'top' }\"></ng-container>\n</div>\n} @for (item of items; track item) {\n<ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: item}\">\n @if (!itemTemplate) {\n <div>Item template input is undefined!</div>\n }\n</ng-container>\n} @if (clrPagerPosition === 'bottom' || clrPagerPosition === 'both') {\n<div>\n <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'bottom' }\"></ng-container>\n</div>\n}\n<ng-template #pager let-position>\n <div class=\"clr-row\" [attr.data-testid]=\"'paged-search-result-list-pager-row-' + (position)\">\n <div\n [class.pager-top]=\"position === 'top'\"\n [class.pager-bottom]=\"position === 'bottom'\"\n [attr.data-testid]=\"'paged-search-result-list-pager-container-' + (position)\"\n >\n <ng-container *ngTemplateOutlet=\"pageSizeDropdown\"></ng-container>\n <clr-pager\n [clrPage]=\"currentPage\"\n [clrPageSize]=\"pageSize\"\n [clrTotalItems]=\"totalItems\"\n (clrPageChange)=\"pageChange.emit($event)\"\n [attr.data-testid]=\"'paged-search-result-list-pager-' + (position)\"\n ></clr-pager>\n </div>\n </div>\n</ng-template>\n<ng-template #pageSizeDropdown>\n @if (pageSizeOptions?.length > 1) {\n <div>\n <clr-dropdown>\n <button\n type=\"button\"\n class=\"btn btn-link btn-no-capitalized\"\n clrDropdownTrigger\n data-testid=\"paged-search-result-list-page-size-trigger\"\n >\n <span class=\"options-text-button\" data-testid=\"paged-search-result-list-page-size-label\">\n {{ pageSizeLabel }}: {{ pageSize }}\n </span>\n <cds-icon class=\"options-icon-button\" shape=\"cog\"></cds-icon>\n <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n </button>\n <clr-dropdown-menu\n class=\"spinner-in-front\"\n clrPosition=\"top-right\"\n data-testid=\"paged-search-result-list-page-size-menu\"\n >\n @for (sizeOption of pageSizeOptions; track sizeOption) {\n <button\n type=\"button\"\n clrDropdownItem\n (click)=\"pageSizeChange.emit(sizeOption)\"\n [attr.data-testid]=\"'paged-search-result-list-page-size-option-' + (sizeOption)\"\n >\n {{ sizeOption }}\n </button>\n }\n </clr-dropdown-menu>\n </clr-dropdown>\n </div>\n }\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "component", type: ClrPager, selector: "clr-pager", inputs: ["clrPageSize", "clrTotalItems", "clrLast", "clrPage"], outputs: ["clrPageChange"] }] }); }
|
|
3147
3159
|
}
|
|
3148
3160
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrPagedSearchResultList, decorators: [{
|
|
3149
3161
|
type: Component,
|
|
3150
|
-
args: [{ selector: 'clr-paged-search-result-list', standalone: false, template: "@if (clrPagerPosition === 'top' || clrPagerPosition === 'both') {\n<div>\n <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'top' }\"></ng-container>\n</div>\n} @for (item of items; track item) {\n<ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: item}\">\n @if (!itemTemplate) {\n <div>Item template input is undefined!</div>\n }\n</ng-container>\n} @if (clrPagerPosition === 'bottom' || clrPagerPosition === 'both') {\n<div>\n <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'bottom' }\"></ng-container>\n</div>\n}\n<ng-template #pager let-position>\n <div class=\"clr-row\">\n <div
|
|
3162
|
+
args: [{ selector: 'clr-paged-search-result-list', standalone: false, template: "@if (clrPagerPosition === 'top' || clrPagerPosition === 'both') {\n<div>\n <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'top' }\"></ng-container>\n</div>\n} @for (item of items; track item) {\n<ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: item}\">\n @if (!itemTemplate) {\n <div>Item template input is undefined!</div>\n }\n</ng-container>\n} @if (clrPagerPosition === 'bottom' || clrPagerPosition === 'both') {\n<div>\n <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'bottom' }\"></ng-container>\n</div>\n}\n<ng-template #pager let-position>\n <div class=\"clr-row\" [attr.data-testid]=\"'paged-search-result-list-pager-row-' + (position)\">\n <div\n [class.pager-top]=\"position === 'top'\"\n [class.pager-bottom]=\"position === 'bottom'\"\n [attr.data-testid]=\"'paged-search-result-list-pager-container-' + (position)\"\n >\n <ng-container *ngTemplateOutlet=\"pageSizeDropdown\"></ng-container>\n <clr-pager\n [clrPage]=\"currentPage\"\n [clrPageSize]=\"pageSize\"\n [clrTotalItems]=\"totalItems\"\n (clrPageChange)=\"pageChange.emit($event)\"\n [attr.data-testid]=\"'paged-search-result-list-pager-' + (position)\"\n ></clr-pager>\n </div>\n </div>\n</ng-template>\n<ng-template #pageSizeDropdown>\n @if (pageSizeOptions?.length > 1) {\n <div>\n <clr-dropdown>\n <button\n type=\"button\"\n class=\"btn btn-link btn-no-capitalized\"\n clrDropdownTrigger\n data-testid=\"paged-search-result-list-page-size-trigger\"\n >\n <span class=\"options-text-button\" data-testid=\"paged-search-result-list-page-size-label\">\n {{ pageSizeLabel }}: {{ pageSize }}\n </span>\n <cds-icon class=\"options-icon-button\" shape=\"cog\"></cds-icon>\n <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n </button>\n <clr-dropdown-menu\n class=\"spinner-in-front\"\n clrPosition=\"top-right\"\n data-testid=\"paged-search-result-list-page-size-menu\"\n >\n @for (sizeOption of pageSizeOptions; track sizeOption) {\n <button\n type=\"button\"\n clrDropdownItem\n (click)=\"pageSizeChange.emit(sizeOption)\"\n [attr.data-testid]=\"'paged-search-result-list-page-size-option-' + (sizeOption)\"\n >\n {{ sizeOption }}\n </button>\n }\n </clr-dropdown-menu>\n </clr-dropdown>\n </div>\n }\n</ng-template>\n" }]
|
|
3151
3163
|
}], propDecorators: { pageSize: [{
|
|
3152
3164
|
type: Input,
|
|
3153
3165
|
args: ['clrPageSize']
|
|
@@ -3278,8 +3290,8 @@ class ClrProgressSpinnerComponent {
|
|
|
3278
3290
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrProgressSpinnerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3279
3291
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrProgressSpinnerComponent, isStandalone: false, selector: "clr-progress-spinner", inputs: { size: ["clrSize", "size"], showSpinner: ["clrShowSpinner", "showSpinner"] }, host: { properties: { "class.progress-spinner-overlay": "_showSpinner" } }, ngImport: i0, template: `
|
|
3280
3292
|
@if (_showSpinner) {
|
|
3281
|
-
<span [class]="'spinner-' + size + ' spinner'"></span>
|
|
3282
|
-
<span> <ng-content></ng-content></span>
|
|
3293
|
+
<span [class]="'spinner-' + size + ' spinner'" data-testid="progress-spinner"></span>
|
|
3294
|
+
<span data-testid="progress-spinner-content"> <ng-content></ng-content></span>
|
|
3283
3295
|
}
|
|
3284
3296
|
`, isInline: true }); }
|
|
3285
3297
|
}
|
|
@@ -3289,8 +3301,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
3289
3301
|
selector: 'clr-progress-spinner',
|
|
3290
3302
|
template: `
|
|
3291
3303
|
@if (_showSpinner) {
|
|
3292
|
-
<span [class]="'spinner-' + size + ' spinner'"></span>
|
|
3293
|
-
<span> <ng-content></ng-content></span>
|
|
3304
|
+
<span [class]="'spinner-' + size + ' spinner'" data-testid="progress-spinner"></span>
|
|
3305
|
+
<span data-testid="progress-spinner-content"> <ng-content></ng-content></span>
|
|
3294
3306
|
}
|
|
3295
3307
|
`,
|
|
3296
3308
|
host: {
|
|
@@ -3376,11 +3388,11 @@ class ClrAddOption {
|
|
|
3376
3388
|
}
|
|
3377
3389
|
}
|
|
3378
3390
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrAddOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3379
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrAddOption, isStandalone: false, selector: "clr-add-option", inputs: { blankOption: "blankOption", value: "value", mandatory: "mandatory", allValues: "allValues", excludedValues: "excludedValues", readonly: "readonly", disabled: "disabled", disableAddButton: "disableAddButton", showAddButton: "showAddButton" }, outputs: { valueChanged: "valueChanged", remove: "remove", add: "add" }, host: { properties: { "class.quick-list-option": "true" } }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "@if (!(readonly || readonly === '')) {\n<div class=\"clr-select-wrapper quick-list-input\">\n <select
|
|
3391
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrAddOption, isStandalone: false, selector: "clr-add-option", inputs: { blankOption: "blankOption", value: "value", mandatory: "mandatory", allValues: "allValues", excludedValues: "excludedValues", readonly: "readonly", disabled: "disabled", disableAddButton: "disableAddButton", showAddButton: "showAddButton" }, outputs: { valueChanged: "valueChanged", remove: "remove", add: "add" }, host: { properties: { "class.quick-list-option": "true" } }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "@if (!(readonly || readonly === '')) {\n<div class=\"clr-select-wrapper quick-list-input\">\n <select\n #select\n clr-select\n class=\"quick-list-select\"\n name=\"options\"\n [(ngModel)]=\"selectedValue\"\n [disabled]=\"disabled\"\n [attr.data-testid]=\"'quick-list-select-' + (value.id)\"\n >\n @if (blankOption.id === selectedValue) {\n <option [selected]=\"true\" [disabled]=\"true\" [ngValue]=\"blankOption.id\" data-testid=\"quick-list-blank-option\">\n {{blankOption.label}}\n </option>\n } @for (val of getValues(); track val) {\n <option\n [selected]=\"val.id === selectedValue\"\n [ngValue]=\"val.id\"\n [attr.data-testid]=\"'quick-list-option-' + (val.id)\"\n >\n {{val.label}}\n </option>\n }\n </select>\n</div>\n} @else {\n<span [attr.data-testid]=\"'quick-list-readonly-value-' + (value.id)\">{{value.label}}</span>\n} @if (!(readonly || readonly === '')) {\n<button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-trash\"\n [ngClass]=\"{'quick-list-trash-ext': !showAddButton}\"\n [disabled]=\"trashDisabled() || disabled\"\n (click)=\"remove.emit()\"\n [attr.data-testid]=\"'quick-list-remove-button-' + (value.id)\"\n>\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n} @if (!(readonly || readonly === '') && showAddButton) {\n<button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"add.emit()\"\n [disabled]=\"disableAddButton\"\n data-testid=\"quick-list-add-compact-button\"\n>\n <cds-icon shape=\"plus-circle\"></cds-icon>\n</button>\n}\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
|
|
3380
3392
|
}
|
|
3381
3393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrAddOption, decorators: [{
|
|
3382
3394
|
type: Component,
|
|
3383
|
-
args: [{ selector: 'clr-add-option', host: { '[class.quick-list-option]': 'true' }, standalone: false, template: "@if (!(readonly || readonly === '')) {\n<div class=\"clr-select-wrapper quick-list-input\">\n <select
|
|
3395
|
+
args: [{ selector: 'clr-add-option', host: { '[class.quick-list-option]': 'true' }, standalone: false, template: "@if (!(readonly || readonly === '')) {\n<div class=\"clr-select-wrapper quick-list-input\">\n <select\n #select\n clr-select\n class=\"quick-list-select\"\n name=\"options\"\n [(ngModel)]=\"selectedValue\"\n [disabled]=\"disabled\"\n [attr.data-testid]=\"'quick-list-select-' + (value.id)\"\n >\n @if (blankOption.id === selectedValue) {\n <option [selected]=\"true\" [disabled]=\"true\" [ngValue]=\"blankOption.id\" data-testid=\"quick-list-blank-option\">\n {{blankOption.label}}\n </option>\n } @for (val of getValues(); track val) {\n <option\n [selected]=\"val.id === selectedValue\"\n [ngValue]=\"val.id\"\n [attr.data-testid]=\"'quick-list-option-' + (val.id)\"\n >\n {{val.label}}\n </option>\n }\n </select>\n</div>\n} @else {\n<span [attr.data-testid]=\"'quick-list-readonly-value-' + (value.id)\">{{value.label}}</span>\n} @if (!(readonly || readonly === '')) {\n<button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-trash\"\n [ngClass]=\"{'quick-list-trash-ext': !showAddButton}\"\n [disabled]=\"trashDisabled() || disabled\"\n (click)=\"remove.emit()\"\n [attr.data-testid]=\"'quick-list-remove-button-' + (value.id)\"\n>\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n} @if (!(readonly || readonly === '') && showAddButton) {\n<button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"add.emit()\"\n [disabled]=\"disableAddButton\"\n data-testid=\"quick-list-add-compact-button\"\n>\n <cds-icon shape=\"plus-circle\"></cds-icon>\n</button>\n}\n" }]
|
|
3384
3396
|
}], propDecorators: { blankOption: [{
|
|
3385
3397
|
type: Input
|
|
3386
3398
|
}], value: [{
|
|
@@ -3484,7 +3496,7 @@ class ClrQuickList extends ClrAbstractFormComponent {
|
|
|
3484
3496
|
useExisting: forwardRef(() => ClrQuickList),
|
|
3485
3497
|
multi: true,
|
|
3486
3498
|
},
|
|
3487
|
-
], viewQueries: [{ propertyName: "options", predicate: ClrAddOption, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n @for (value of values; track value; let i = $index) {\n <clr-add-option\n [allValues]=\"allValues\"\n [excludedValues]=\"values\"\n (remove)=\"onRemoveValue(i)\"\n (add)=\"addBlankOption()\"\n [value]=\"value\"\n (valueChanged)=\"onValueChanged($event, i)\"\n [blankOption]=\"blankOption\"\n [mandatory]=\"mandatory\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [disableAddButton]=\"addNotPossible() || disabled\"\n [showAddButton]=\"compactMode && i === values.length - 1\"\n >\n </clr-add-option>\n } @if (!(readonly || readonly === '') && values.length === 0 && compactMode) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addBlankOption()\"\n [disabled]=\"addNotPossible() || disabled\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n } @if (!(readonly || readonly === '') && !compactMode) {\n <button\n type=\"button\"\n class=\"btn btn-link btn-sm quick-list-add\"\n (click)=\"addBlankOption()\"\n [disabled]=\"addNotPossible() || disabled\"\n >\n {{addLabel}}\n </button>\n }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrAddOption, selector: "clr-add-option", inputs: ["blankOption", "value", "mandatory", "allValues", "excludedValues", "readonly", "disabled", "disableAddButton", "showAddButton"], outputs: ["valueChanged", "remove", "add"] }] }); }
|
|
3499
|
+
], viewQueries: [{ propertyName: "options", predicate: ClrAddOption, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n @for (value of values; track value; let i = $index) {\n <clr-add-option\n [attr.data-testid]=\"'quick-list-option-row-' + (value.id || i)\"\n [allValues]=\"allValues\"\n [excludedValues]=\"values\"\n (remove)=\"onRemoveValue(i)\"\n (add)=\"addBlankOption()\"\n [value]=\"value\"\n (valueChanged)=\"onValueChanged($event, i)\"\n [blankOption]=\"blankOption\"\n [mandatory]=\"mandatory\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [disableAddButton]=\"addNotPossible() || disabled\"\n [showAddButton]=\"compactMode && i === values.length - 1\"\n >\n </clr-add-option>\n } @if (!(readonly || readonly === '') && values.length === 0 && compactMode) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addBlankOption()\"\n [disabled]=\"addNotPossible() || disabled\"\n data-testid=\"quick-list-add-compact-button-empty\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n } @if (!(readonly || readonly === '') && !compactMode) {\n <button\n type=\"button\"\n class=\"btn btn-link btn-sm quick-list-add\"\n (click)=\"addBlankOption()\"\n [disabled]=\"addNotPossible() || disabled\"\n data-testid=\"quick-list-add-button\"\n >\n {{addLabel}}\n </button>\n }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrAddOption, selector: "clr-add-option", inputs: ["blankOption", "value", "mandatory", "allValues", "excludedValues", "readonly", "disabled", "disableAddButton", "showAddButton"], outputs: ["valueChanged", "remove", "add"] }] }); }
|
|
3488
3500
|
}
|
|
3489
3501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrQuickList, decorators: [{
|
|
3490
3502
|
type: Component,
|
|
@@ -3494,7 +3506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
3494
3506
|
useExisting: forwardRef(() => ClrQuickList),
|
|
3495
3507
|
multi: true,
|
|
3496
3508
|
},
|
|
3497
|
-
], standalone: false, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n @for (value of values; track value; let i = $index) {\n <clr-add-option\n [allValues]=\"allValues\"\n [excludedValues]=\"values\"\n (remove)=\"onRemoveValue(i)\"\n (add)=\"addBlankOption()\"\n [value]=\"value\"\n (valueChanged)=\"onValueChanged($event, i)\"\n [blankOption]=\"blankOption\"\n [mandatory]=\"mandatory\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [disableAddButton]=\"addNotPossible() || disabled\"\n [showAddButton]=\"compactMode && i === values.length - 1\"\n >\n </clr-add-option>\n } @if (!(readonly || readonly === '') && values.length === 0 && compactMode) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addBlankOption()\"\n [disabled]=\"addNotPossible() || disabled\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n } @if (!(readonly || readonly === '') && !compactMode) {\n <button\n type=\"button\"\n class=\"btn btn-link btn-sm quick-list-add\"\n (click)=\"addBlankOption()\"\n [disabled]=\"addNotPossible() || disabled\"\n >\n {{addLabel}}\n </button>\n }\n</div>\n" }]
|
|
3509
|
+
], standalone: false, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n @for (value of values; track value; let i = $index) {\n <clr-add-option\n [attr.data-testid]=\"'quick-list-option-row-' + (value.id || i)\"\n [allValues]=\"allValues\"\n [excludedValues]=\"values\"\n (remove)=\"onRemoveValue(i)\"\n (add)=\"addBlankOption()\"\n [value]=\"value\"\n (valueChanged)=\"onValueChanged($event, i)\"\n [blankOption]=\"blankOption\"\n [mandatory]=\"mandatory\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [disableAddButton]=\"addNotPossible() || disabled\"\n [showAddButton]=\"compactMode && i === values.length - 1\"\n >\n </clr-add-option>\n } @if (!(readonly || readonly === '') && values.length === 0 && compactMode) {\n <button\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addBlankOption()\"\n [disabled]=\"addNotPossible() || disabled\"\n data-testid=\"quick-list-add-compact-button-empty\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n } @if (!(readonly || readonly === '') && !compactMode) {\n <button\n type=\"button\"\n class=\"btn btn-link btn-sm quick-list-add\"\n (click)=\"addBlankOption()\"\n [disabled]=\"addNotPossible() || disabled\"\n data-testid=\"quick-list-add-button\"\n >\n {{addLabel}}\n </button>\n }\n</div>\n" }]
|
|
3498
3510
|
}], propDecorators: { blankOption: [{
|
|
3499
3511
|
type: Input,
|
|
3500
3512
|
args: ['clrBlankOption']
|
|
@@ -3711,11 +3723,17 @@ class ClrTreetableActionOverflow {
|
|
|
3711
3723
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrTreetableActionOverflow, isStandalone: false, selector: "clr-tt-action-overflow", inputs: { empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "cell" }, properties: { "class.treetable-row-actions": "true", "class.treetable-cell": "true" } }, providers: [ClrPopoverService], ngImport: i0, template: `
|
|
3712
3724
|
@if (!empty()) {
|
|
3713
3725
|
<ng-container>
|
|
3714
|
-
<button
|
|
3726
|
+
<button
|
|
3727
|
+
class="treetable-action-trigger"
|
|
3728
|
+
data-testid="treetable-action-overflow-toggle"
|
|
3729
|
+
clrPopoverOrigin
|
|
3730
|
+
clrPopoverOpenCloseButton
|
|
3731
|
+
>
|
|
3715
3732
|
<cds-icon shape="ellipsis-vertical"></cds-icon>
|
|
3716
3733
|
</button>
|
|
3717
3734
|
<div
|
|
3718
3735
|
class="datagrid-action-overflow"
|
|
3736
|
+
data-testid="treetable-action-overflow-menu"
|
|
3719
3737
|
cdkTrapFocus
|
|
3720
3738
|
(click)="closeOverflowContent($event)"
|
|
3721
3739
|
*clrPopoverContent="false; at: smartPosition; outsideClickToClose: true; scrollToClose: true"
|
|
@@ -3734,11 +3752,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
3734
3752
|
template: `
|
|
3735
3753
|
@if (!empty()) {
|
|
3736
3754
|
<ng-container>
|
|
3737
|
-
<button
|
|
3755
|
+
<button
|
|
3756
|
+
class="treetable-action-trigger"
|
|
3757
|
+
data-testid="treetable-action-overflow-toggle"
|
|
3758
|
+
clrPopoverOrigin
|
|
3759
|
+
clrPopoverOpenCloseButton
|
|
3760
|
+
>
|
|
3738
3761
|
<cds-icon shape="ellipsis-vertical"></cds-icon>
|
|
3739
3762
|
</button>
|
|
3740
3763
|
<div
|
|
3741
3764
|
class="datagrid-action-overflow"
|
|
3765
|
+
data-testid="treetable-action-overflow-menu"
|
|
3742
3766
|
cdkTrapFocus
|
|
3743
3767
|
(click)="closeOverflowContent($event)"
|
|
3744
3768
|
*clrPopoverContent="false; at: smartPosition; outsideClickToClose: true; scrollToClose: true"
|
|
@@ -3865,7 +3889,7 @@ class ClrTreetableRowCheckbox {
|
|
|
3865
3889
|
}
|
|
3866
3890
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrTreetableRowCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3867
3891
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: ClrTreetableRowCheckbox, isStandalone: false, selector: "clr-tt-row-checkbox", inputs: { clrTtSelectionState: { classPropertyName: "clrTtSelectionState", publicName: "clrTtSelectionState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSelectionState: "clrTtSelectionStateChange" }, host: { attributes: { "role": "gridcell" }, properties: { "class.treetable-row-selection": "true", "class.treetable-cell": "true" } }, ngImport: i0, template: `
|
|
3868
|
-
<div class="clr-checkbox-wrapper">
|
|
3892
|
+
<div class="clr-checkbox-wrapper" data-testid="treetable-row-checkbox-wrapper">
|
|
3869
3893
|
<input
|
|
3870
3894
|
type="checkbox"
|
|
3871
3895
|
data-testId="clrTtRowCheckbox"
|
|
@@ -3879,7 +3903,7 @@ class ClrTreetableRowCheckbox {
|
|
|
3879
3903
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrTreetableRowCheckbox, decorators: [{
|
|
3880
3904
|
type: Component,
|
|
3881
3905
|
args: [{ selector: 'clr-tt-row-checkbox', template: `
|
|
3882
|
-
<div class="clr-checkbox-wrapper">
|
|
3906
|
+
<div class="clr-checkbox-wrapper" data-testid="treetable-row-checkbox-wrapper">
|
|
3883
3907
|
<input
|
|
3884
3908
|
type="checkbox"
|
|
3885
3909
|
data-testId="clrTtRowCheckbox"
|
|
@@ -3946,11 +3970,11 @@ class ClrTreetableRow {
|
|
|
3946
3970
|
}
|
|
3947
3971
|
}
|
|
3948
3972
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrTreetableRow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3949
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrTreetableRow, isStandalone: false, selector: "clr-tt-row", inputs: { clrExpanded: { classPropertyName: "clrExpanded", publicName: "clrExpanded", isSignal: true, isRequired: false, transformFunction: null }, clrExpandable: { classPropertyName: "clrExpandable", publicName: "clrExpandable", isSignal: true, isRequired: false, transformFunction: null }, clrClickable: { classPropertyName: "clrClickable", publicName: "clrClickable", isSignal: true, isRequired: false, transformFunction: null }, clrTtItem: { classPropertyName: "clrTtItem", publicName: "clrTtItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrExpanded: "clrExpandedChange" }, host: { properties: { "class.treetable-row-wrapper": "true", "class.treetable-selected": "isSelected()" } }, providers: [TREETABLE_RECURSION_SERVICE_PROVIDER], queries: [{ propertyName: "_actionOverflow", first: true, predicate: ClrTreetableActionOverflow, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n ~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<div\n class=\"clr-tt-node-content treetable-row\"\n [class.clr-row-clickable]=\"showClickClass()\"\n [class.treetable-selected]=\"isSelected()\"\n (click)=\"onRowClick($event)\"\n>\n @if (showSelection()) {\n <clr-tt-row-checkbox\n [clrTtSelectionState]=\"clrTtItem().selected()\"\n (clrTtSelectionStateChange)=\"toggleSelection($event)\"\n (click)=\"$event.stopPropagation()\"\n >\n </clr-tt-row-checkbox>\n }\n\n <ng-content select=\"clr-tt-action-overflow\" />\n\n @if (showActionOverflow() && showEmptyActionOverflow()) {\n <clr-tt-action-overflow [empty]=\"true\" />\n }\n\n <div class=\"treetable-scrolling-cells\">\n @if (clrExpandable()) {\n <div class=\"treetable-expandable-caret\">\n <button\n type=\"button\"\n class=\"treetable-expandable-caret-button\"\n data-testId=\"clrTtRowCaret\"\n (click)=\"onCaretClick()\"\n >\n <cds-icon\n shape=\"angle\"\n [direction]=\"clrExpanded() ? 'down' : 'right'\"\n class=\"treetable-expandable-caret-icon\"\n ></cds-icon>\n </button>\n </div>\n }\n\n <ng-content select=\"clr-tt-cell\" />\n </div>\n</div>\n\n<div\n class=\"treetable-children-container\"\n data-testId=\"clrTtRowChildContainer\"\n [class.expanded]=\"clrExpanded()\"\n [class.collapsed]=\"!clrExpanded()\"\n [class.animate]=\"shouldAnimate()\"\n>\n @if (isRecursionMode()) {\n <clr-tt-recursive-rows [parent]=\"clrTtItem()\" />\n } @else {\n <ng-content select=\"clr-tt-row\" />\n }\n</div>\n", styles: [".treetable-children-container{opacity:0;will-change:height,opacity}.treetable-children-container.expanded{opacity:1}.treetable-children-container.collapsed{height:0;opacity:0;overflow:hidden}.treetable-children-container.animate{transition:height .4s ease,opacity .4s ease}\n"], dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrTreetableActionOverflow, selector: "clr-tt-action-overflow", inputs: ["empty"] }, { kind: "component", type: ClrTreetableRecursiveRows, selector: "clr-tt-recursive-rows", inputs: ["parent", "children"] }, { kind: "component", type: ClrTreetableRowCheckbox, selector: "clr-tt-row-checkbox", inputs: ["clrTtSelectionState"], outputs: ["clrTtSelectionStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3973
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrTreetableRow, isStandalone: false, selector: "clr-tt-row", inputs: { clrExpanded: { classPropertyName: "clrExpanded", publicName: "clrExpanded", isSignal: true, isRequired: false, transformFunction: null }, clrExpandable: { classPropertyName: "clrExpandable", publicName: "clrExpandable", isSignal: true, isRequired: false, transformFunction: null }, clrClickable: { classPropertyName: "clrClickable", publicName: "clrClickable", isSignal: true, isRequired: false, transformFunction: null }, clrTtItem: { classPropertyName: "clrTtItem", publicName: "clrTtItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrExpanded: "clrExpandedChange" }, host: { properties: { "class.treetable-row-wrapper": "true", "class.treetable-selected": "isSelected()" } }, providers: [TREETABLE_RECURSION_SERVICE_PROVIDER], queries: [{ propertyName: "_actionOverflow", first: true, predicate: ClrTreetableActionOverflow, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n ~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<div\n class=\"clr-tt-node-content treetable-row\"\n [attr.data-testid]=\"'treetable-row-' + (clrTtItem()?.id || 'item')\"\n [class.clr-row-clickable]=\"showClickClass()\"\n [class.treetable-selected]=\"isSelected()\"\n (click)=\"onRowClick($event)\"\n>\n @if (showSelection()) {\n <clr-tt-row-checkbox\n [attr.data-testid]=\"'treetable-row-checkbox-' + (clrTtItem()?.id || 'item')\"\n [clrTtSelectionState]=\"clrTtItem().selected()\"\n (clrTtSelectionStateChange)=\"toggleSelection($event)\"\n (click)=\"$event.stopPropagation()\"\n >\n </clr-tt-row-checkbox>\n }\n\n <ng-content select=\"clr-tt-action-overflow\" />\n\n @if (showActionOverflow() && showEmptyActionOverflow()) {\n <clr-tt-action-overflow [empty]=\"true\" />\n }\n\n <div class=\"treetable-scrolling-cells\">\n @if (clrExpandable()) {\n <div class=\"treetable-expandable-caret\">\n <button\n type=\"button\"\n class=\"treetable-expandable-caret-button\"\n data-testId=\"clrTtRowCaret\"\n (click)=\"onCaretClick()\"\n >\n <cds-icon\n shape=\"angle\"\n [direction]=\"clrExpanded() ? 'down' : 'right'\"\n class=\"treetable-expandable-caret-icon\"\n ></cds-icon>\n </button>\n </div>\n }\n\n <ng-content select=\"clr-tt-cell\" />\n </div>\n</div>\n\n<div\n class=\"treetable-children-container\"\n data-testId=\"clrTtRowChildContainer\"\n [class.expanded]=\"clrExpanded()\"\n [class.collapsed]=\"!clrExpanded()\"\n [class.animate]=\"shouldAnimate()\"\n>\n @if (isRecursionMode()) {\n <clr-tt-recursive-rows [parent]=\"clrTtItem()\" />\n } @else {\n <ng-content select=\"clr-tt-row\" />\n }\n</div>\n", styles: [".treetable-children-container{opacity:0;will-change:height,opacity}.treetable-children-container.expanded{opacity:1}.treetable-children-container.collapsed{height:0;opacity:0;overflow:hidden}.treetable-children-container.animate{transition:height .4s ease,opacity .4s ease}\n"], dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrTreetableActionOverflow, selector: "clr-tt-action-overflow", inputs: ["empty"] }, { kind: "component", type: ClrTreetableRecursiveRows, selector: "clr-tt-recursive-rows", inputs: ["parent", "children"] }, { kind: "component", type: ClrTreetableRowCheckbox, selector: "clr-tt-row-checkbox", inputs: ["clrTtSelectionState"], outputs: ["clrTtSelectionStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3950
3974
|
}
|
|
3951
3975
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrTreetableRow, decorators: [{
|
|
3952
3976
|
type: Component,
|
|
3953
|
-
args: [{ selector: 'clr-tt-row', providers: [TREETABLE_RECURSION_SERVICE_PROVIDER], host: { '[class.treetable-row-wrapper]': 'true', '[class.treetable-selected]': 'isSelected()' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!--\n ~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<div\n class=\"clr-tt-node-content treetable-row\"\n [class.clr-row-clickable]=\"showClickClass()\"\n [class.treetable-selected]=\"isSelected()\"\n (click)=\"onRowClick($event)\"\n>\n @if (showSelection()) {\n <clr-tt-row-checkbox\n [clrTtSelectionState]=\"clrTtItem().selected()\"\n (clrTtSelectionStateChange)=\"toggleSelection($event)\"\n (click)=\"$event.stopPropagation()\"\n >\n </clr-tt-row-checkbox>\n }\n\n <ng-content select=\"clr-tt-action-overflow\" />\n\n @if (showActionOverflow() && showEmptyActionOverflow()) {\n <clr-tt-action-overflow [empty]=\"true\" />\n }\n\n <div class=\"treetable-scrolling-cells\">\n @if (clrExpandable()) {\n <div class=\"treetable-expandable-caret\">\n <button\n type=\"button\"\n class=\"treetable-expandable-caret-button\"\n data-testId=\"clrTtRowCaret\"\n (click)=\"onCaretClick()\"\n >\n <cds-icon\n shape=\"angle\"\n [direction]=\"clrExpanded() ? 'down' : 'right'\"\n class=\"treetable-expandable-caret-icon\"\n ></cds-icon>\n </button>\n </div>\n }\n\n <ng-content select=\"clr-tt-cell\" />\n </div>\n</div>\n\n<div\n class=\"treetable-children-container\"\n data-testId=\"clrTtRowChildContainer\"\n [class.expanded]=\"clrExpanded()\"\n [class.collapsed]=\"!clrExpanded()\"\n [class.animate]=\"shouldAnimate()\"\n>\n @if (isRecursionMode()) {\n <clr-tt-recursive-rows [parent]=\"clrTtItem()\" />\n } @else {\n <ng-content select=\"clr-tt-row\" />\n }\n</div>\n", styles: [".treetable-children-container{opacity:0;will-change:height,opacity}.treetable-children-container.expanded{opacity:1}.treetable-children-container.collapsed{height:0;opacity:0;overflow:hidden}.treetable-children-container.animate{transition:height .4s ease,opacity .4s ease}\n"] }]
|
|
3977
|
+
args: [{ selector: 'clr-tt-row', providers: [TREETABLE_RECURSION_SERVICE_PROVIDER], host: { '[class.treetable-row-wrapper]': 'true', '[class.treetable-selected]': 'isSelected()' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!--\n ~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<div\n class=\"clr-tt-node-content treetable-row\"\n [attr.data-testid]=\"'treetable-row-' + (clrTtItem()?.id || 'item')\"\n [class.clr-row-clickable]=\"showClickClass()\"\n [class.treetable-selected]=\"isSelected()\"\n (click)=\"onRowClick($event)\"\n>\n @if (showSelection()) {\n <clr-tt-row-checkbox\n [attr.data-testid]=\"'treetable-row-checkbox-' + (clrTtItem()?.id || 'item')\"\n [clrTtSelectionState]=\"clrTtItem().selected()\"\n (clrTtSelectionStateChange)=\"toggleSelection($event)\"\n (click)=\"$event.stopPropagation()\"\n >\n </clr-tt-row-checkbox>\n }\n\n <ng-content select=\"clr-tt-action-overflow\" />\n\n @if (showActionOverflow() && showEmptyActionOverflow()) {\n <clr-tt-action-overflow [empty]=\"true\" />\n }\n\n <div class=\"treetable-scrolling-cells\">\n @if (clrExpandable()) {\n <div class=\"treetable-expandable-caret\">\n <button\n type=\"button\"\n class=\"treetable-expandable-caret-button\"\n data-testId=\"clrTtRowCaret\"\n (click)=\"onCaretClick()\"\n >\n <cds-icon\n shape=\"angle\"\n [direction]=\"clrExpanded() ? 'down' : 'right'\"\n class=\"treetable-expandable-caret-icon\"\n ></cds-icon>\n </button>\n </div>\n }\n\n <ng-content select=\"clr-tt-cell\" />\n </div>\n</div>\n\n<div\n class=\"treetable-children-container\"\n data-testId=\"clrTtRowChildContainer\"\n [class.expanded]=\"clrExpanded()\"\n [class.collapsed]=\"!clrExpanded()\"\n [class.animate]=\"shouldAnimate()\"\n>\n @if (isRecursionMode()) {\n <clr-tt-recursive-rows [parent]=\"clrTtItem()\" />\n } @else {\n <ng-content select=\"clr-tt-row\" />\n }\n</div>\n", styles: [".treetable-children-container{opacity:0;will-change:height,opacity}.treetable-children-container.expanded{opacity:1}.treetable-children-container.collapsed{height:0;opacity:0;overflow:hidden}.treetable-children-container.animate{transition:height .4s ease,opacity .4s ease}\n"] }]
|
|
3954
3978
|
}], propDecorators: { clrExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrExpanded", required: false }] }, { type: i0.Output, args: ["clrExpandedChange"] }], clrExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrExpandable", required: false }] }], clrClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrClickable", required: false }] }], clrTtItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtItem", required: false }] }], _actionOverflow: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClrTreetableActionOverflow), { isSignal: true }] }] } });
|
|
3955
3979
|
|
|
3956
3980
|
/*
|
|
@@ -4737,7 +4761,7 @@ class ClrTreetable {
|
|
|
4737
4761
|
TreetableColumnStateService,
|
|
4738
4762
|
SortStateService,
|
|
4739
4763
|
FilterStateService,
|
|
4740
|
-
], queries: [{ propertyName: "_ttRows", predicate: ClrTreetableRow, descendants: true, isSignal: true }, { propertyName: "_actionOverflow", predicate: ClrTreetableActionOverflow, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<div class=\"treetable\">\n <div class=\"treetable-grid\" role=\"grid\">\n <div class=\"treetable-header\" role=\"rowgroup\" [class.hide-header]=\"clrHideHeader()\">\n @if (showSelection() && !empty()) {\n <div class=\"treetable-row-selection treetable-column\" role=\"columnheader\">\n <div class=\"clr-checkbox-wrapper\">\n <input\n type=\"checkbox\"\n data-testId=\"clrTtSelectAll\"\n [id]=\"selectAllId\"\n [checked]=\"areAllRowsSelected()\"\n (change)=\"toggleSelectAll()\"\n />\n <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a treetable is wrapped inside clrForm -->\n <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n <span class=\"clr-sr-only\">{{ commonStrings.selectAll }}</span>\n </label>\n </div>\n </div>\n } @if (hasActionOverflow()) {\n <div class=\"treetable-row-actions treetable-column\"> </div>\n }\n <div class=\"treetable-row-scrollable\">\n <ng-content select=\"clr-tt-column\" />\n </div>\n </div>\n\n <div class=\"treetable-body\">\n @if (isRecursionMode()) {\n <clr-tt-recursive-rows [children]=\"displayedNodes()\" />\n } @else {\n <ng-content select=\"clr-tt-row\" />\n } @if (empty() && !clrTtLoading()) {\n <ng-content select=\"clr-tt-placeholder\" />\n }\n </div>\n </div>\n\n <ng-content select=\"clr-tt-footer\"></ng-content>\n\n @if (clrTtLoading()) {\n <div class=\"treetable-spinner\">\n <clr-spinner clrMedium />\n </div>\n }\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i2$5.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "component", type: ClrTreetableRecursiveRows, selector: "clr-tt-recursive-rows", inputs: ["parent", "children"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4764
|
+
], queries: [{ propertyName: "_ttRows", predicate: ClrTreetableRow, descendants: true, isSignal: true }, { propertyName: "_actionOverflow", predicate: ClrTreetableActionOverflow, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<div class=\"treetable\" data-testid=\"treetable\">\n <div class=\"treetable-grid\" role=\"grid\" data-testid=\"treetable-grid\">\n <div class=\"treetable-header\" role=\"rowgroup\" data-testid=\"treetable-header\" [class.hide-header]=\"clrHideHeader()\">\n @if (showSelection() && !empty()) {\n <div class=\"treetable-row-selection treetable-column\" role=\"columnheader\">\n <div class=\"clr-checkbox-wrapper\">\n <input\n type=\"checkbox\"\n data-testId=\"clrTtSelectAll\"\n [id]=\"selectAllId\"\n [checked]=\"areAllRowsSelected()\"\n (change)=\"toggleSelectAll()\"\n />\n <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a treetable is wrapped inside clrForm -->\n <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\" data-testid=\"treetable-select-all-label\">\n <span class=\"clr-sr-only\" data-testid=\"treetable-select-all-text\">{{ commonStrings.selectAll }}</span>\n </label>\n </div>\n </div>\n } @if (hasActionOverflow()) {\n <div class=\"treetable-row-actions treetable-column\" data-testid=\"treetable-action-header\"> </div>\n }\n <div class=\"treetable-row-scrollable\" data-testid=\"treetable-column-headers\">\n <ng-content select=\"clr-tt-column\" />\n </div>\n </div>\n\n <div class=\"treetable-body\" data-testid=\"treetable-body\">\n @if (isRecursionMode()) {\n <clr-tt-recursive-rows [children]=\"displayedNodes()\" />\n } @else {\n <ng-content select=\"clr-tt-row\" />\n } @if (empty() && !clrTtLoading()) {\n <ng-content select=\"clr-tt-placeholder\" />\n }\n </div>\n </div>\n\n <ng-content select=\"clr-tt-footer\"></ng-content>\n\n @if (clrTtLoading()) {\n <div class=\"treetable-spinner\" data-testid=\"treetable-loading\">\n <clr-spinner clrMedium data-testid=\"treetable-loading-spinner\" />\n </div>\n }\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i2$5.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "component", type: ClrTreetableRecursiveRows, selector: "clr-tt-recursive-rows", inputs: ["parent", "children"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4741
4765
|
}
|
|
4742
4766
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrTreetable, decorators: [{
|
|
4743
4767
|
type: Component,
|
|
@@ -4747,7 +4771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
4747
4771
|
TreetableColumnStateService,
|
|
4748
4772
|
SortStateService,
|
|
4749
4773
|
FilterStateService,
|
|
4750
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<div class=\"treetable\">\n <div class=\"treetable-grid\" role=\"grid\">\n <div class=\"treetable-header\" role=\"rowgroup\" [class.hide-header]=\"clrHideHeader()\">\n @if (showSelection() && !empty()) {\n <div class=\"treetable-row-selection treetable-column\" role=\"columnheader\">\n <div class=\"clr-checkbox-wrapper\">\n <input\n type=\"checkbox\"\n data-testId=\"clrTtSelectAll\"\n [id]=\"selectAllId\"\n [checked]=\"areAllRowsSelected()\"\n (change)=\"toggleSelectAll()\"\n />\n <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a treetable is wrapped inside clrForm -->\n <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n <span class=\"clr-sr-only\">{{ commonStrings.selectAll }}</span>\n </label>\n </div>\n </div>\n } @if (hasActionOverflow()) {\n <div class=\"treetable-row-actions treetable-column\"> </div>\n }\n <div class=\"treetable-row-scrollable\">\n <ng-content select=\"clr-tt-column\" />\n </div>\n </div>\n\n <div class=\"treetable-body\">\n @if (isRecursionMode()) {\n <clr-tt-recursive-rows [children]=\"displayedNodes()\" />\n } @else {\n <ng-content select=\"clr-tt-row\" />\n } @if (empty() && !clrTtLoading()) {\n <ng-content select=\"clr-tt-placeholder\" />\n }\n </div>\n </div>\n\n <ng-content select=\"clr-tt-footer\"></ng-content>\n\n @if (clrTtLoading()) {\n <div class=\"treetable-spinner\">\n <clr-spinner clrMedium />\n </div>\n }\n</div>\n" }]
|
|
4774
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<div class=\"treetable\" data-testid=\"treetable\">\n <div class=\"treetable-grid\" role=\"grid\" data-testid=\"treetable-grid\">\n <div class=\"treetable-header\" role=\"rowgroup\" data-testid=\"treetable-header\" [class.hide-header]=\"clrHideHeader()\">\n @if (showSelection() && !empty()) {\n <div class=\"treetable-row-selection treetable-column\" role=\"columnheader\">\n <div class=\"clr-checkbox-wrapper\">\n <input\n type=\"checkbox\"\n data-testId=\"clrTtSelectAll\"\n [id]=\"selectAllId\"\n [checked]=\"areAllRowsSelected()\"\n (change)=\"toggleSelectAll()\"\n />\n <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a treetable is wrapped inside clrForm -->\n <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\" data-testid=\"treetable-select-all-label\">\n <span class=\"clr-sr-only\" data-testid=\"treetable-select-all-text\">{{ commonStrings.selectAll }}</span>\n </label>\n </div>\n </div>\n } @if (hasActionOverflow()) {\n <div class=\"treetable-row-actions treetable-column\" data-testid=\"treetable-action-header\"> </div>\n }\n <div class=\"treetable-row-scrollable\" data-testid=\"treetable-column-headers\">\n <ng-content select=\"clr-tt-column\" />\n </div>\n </div>\n\n <div class=\"treetable-body\" data-testid=\"treetable-body\">\n @if (isRecursionMode()) {\n <clr-tt-recursive-rows [children]=\"displayedNodes()\" />\n } @else {\n <ng-content select=\"clr-tt-row\" />\n } @if (empty() && !clrTtLoading()) {\n <ng-content select=\"clr-tt-placeholder\" />\n }\n </div>\n </div>\n\n <ng-content select=\"clr-tt-footer\"></ng-content>\n\n @if (clrTtLoading()) {\n <div class=\"treetable-spinner\" data-testid=\"treetable-loading\">\n <clr-spinner clrMedium data-testid=\"treetable-loading-spinner\" />\n </div>\n }\n</div>\n" }]
|
|
4751
4775
|
}], ctorParameters: () => [], propDecorators: { clrClickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrClickableRows", required: false }] }], clrHideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrHideHeader", required: false }] }], clrTtLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtLoading", required: false }] }], clrTtSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSelected", required: false }] }], clrTtAutoParentSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtAutoParentSelection", required: false }] }], clrTtSelectedChange: [{ type: i0.Output, args: ["clrTtSelectedChange"] }], clrTtRefresh: [{ type: i0.Output, args: ["clrTtRefresh"] }], _ttRows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ClrTreetableRow), { ...{ descendants: true }, isSignal: true }] }], _actionOverflow: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ClrTreetableActionOverflow), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
4752
4776
|
|
|
4753
4777
|
/*
|
|
@@ -4953,13 +4977,18 @@ class ClrTreetableColumnSeparator {
|
|
|
4953
4977
|
<button
|
|
4954
4978
|
type="button"
|
|
4955
4979
|
class="treetable-column-handle"
|
|
4980
|
+
[attr.data-testid]="'treetable-column-resize-handle-' + columnId()"
|
|
4956
4981
|
[aria-label]="commonStrings.columnSeparatorAriaLabel"
|
|
4957
4982
|
#columnHandle
|
|
4958
4983
|
></button>
|
|
4959
|
-
<span class="clr-sr-only">
|
|
4984
|
+
<span class="clr-sr-only" [attr.data-testid]="'treetable-column-resize-description-' + columnId()">
|
|
4960
4985
|
{{ commonStrings.columnSeparatorDescription }}
|
|
4961
4986
|
</span>
|
|
4962
|
-
<div
|
|
4987
|
+
<div
|
|
4988
|
+
class="treetable-column-resize-tracker"
|
|
4989
|
+
[attr.data-testid]="'treetable-column-resize-tracker-' + columnId()"
|
|
4990
|
+
#resizeTracker
|
|
4991
|
+
></div>
|
|
4963
4992
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4964
4993
|
}
|
|
4965
4994
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrTreetableColumnSeparator, decorators: [{
|
|
@@ -4970,13 +4999,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
4970
4999
|
<button
|
|
4971
5000
|
type="button"
|
|
4972
5001
|
class="treetable-column-handle"
|
|
5002
|
+
[attr.data-testid]="'treetable-column-resize-handle-' + columnId()"
|
|
4973
5003
|
[aria-label]="commonStrings.columnSeparatorAriaLabel"
|
|
4974
5004
|
#columnHandle
|
|
4975
5005
|
></button>
|
|
4976
|
-
<span class="clr-sr-only">
|
|
5006
|
+
<span class="clr-sr-only" [attr.data-testid]="'treetable-column-resize-description-' + columnId()">
|
|
4977
5007
|
{{ commonStrings.columnSeparatorDescription }}
|
|
4978
5008
|
</span>
|
|
4979
|
-
<div
|
|
5009
|
+
<div
|
|
5010
|
+
class="treetable-column-resize-tracker"
|
|
5011
|
+
[attr.data-testid]="'treetable-column-resize-tracker-' + columnId()"
|
|
5012
|
+
#resizeTracker
|
|
5013
|
+
></div>
|
|
4980
5014
|
`,
|
|
4981
5015
|
host: {
|
|
4982
5016
|
'[class.treetable-column-separator]': 'true',
|
|
@@ -5086,7 +5120,7 @@ class ClrTreetableColumn {
|
|
|
5086
5120
|
this._sort.toggle(comparator, reverse);
|
|
5087
5121
|
}
|
|
5088
5122
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrTreetableColumn, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5089
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrTreetableColumn, isStandalone: false, selector: "clr-tt-column", inputs: { clrTtSortBy: { classPropertyName: "clrTtSortBy", publicName: "clrTtSortBy", isSignal: true, isRequired: false, transformFunction: null }, clrTtSortOrder: { classPropertyName: "clrTtSortOrder", publicName: "clrTtSortOrder", isSignal: true, isRequired: false, transformFunction: null }, clrTtColumnSize: { classPropertyName: "clrTtColumnSize", publicName: "clrTtColumnSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSortOrderChange: "clrTtSortOrderChange", clrTtColumnResize: "clrTtColumnResize" }, host: { attributes: { "role": "columnheader" }, properties: { "class.treetable-column": "true", "attr.aria-sort": "ariaSort()" } }, providers: [ClrPopoverService], viewQueries: [{ propertyName: "_columnTitleRef", first: true, predicate: ["columnTitle"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
|
|
5123
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrTreetableColumn, isStandalone: false, selector: "clr-tt-column", inputs: { clrTtSortBy: { classPropertyName: "clrTtSortBy", publicName: "clrTtSortBy", isSignal: true, isRequired: false, transformFunction: null }, clrTtSortOrder: { classPropertyName: "clrTtSortOrder", publicName: "clrTtSortOrder", isSignal: true, isRequired: false, transformFunction: null }, clrTtColumnSize: { classPropertyName: "clrTtColumnSize", publicName: "clrTtColumnSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSortOrderChange: "clrTtSortOrderChange", clrTtColumnResize: "clrTtColumnResize" }, host: { attributes: { "role": "columnheader" }, properties: { "class.treetable-column": "true", "attr.aria-sort": "ariaSort()", "attr.data-testid": "\"treetable-column-\" + columnId" } }, providers: [ClrPopoverService], viewQueries: [{ propertyName: "_columnTitleRef", first: true, predicate: ["columnTitle"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
|
|
5090
5124
|
@if (isSortable()) {
|
|
5091
5125
|
<button type="button" class="treetable-column-title" data-testId="clrTtSortButton" (click)="sort()">
|
|
5092
5126
|
<ng-container *ngTemplateOutlet="columnTitle" />
|
|
@@ -5101,7 +5135,7 @@ class ClrTreetableColumn {
|
|
|
5101
5135
|
}
|
|
5102
5136
|
</button>
|
|
5103
5137
|
} @else {
|
|
5104
|
-
<div class="treetable-column-title">
|
|
5138
|
+
<div class="treetable-column-title" [attr.data-testid]="'treetable-column-header-' + columnId">
|
|
5105
5139
|
<ng-container *ngTemplateOutlet="columnTitle" />
|
|
5106
5140
|
</div>
|
|
5107
5141
|
}
|
|
@@ -5135,7 +5169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5135
5169
|
}
|
|
5136
5170
|
</button>
|
|
5137
5171
|
} @else {
|
|
5138
|
-
<div class="treetable-column-title">
|
|
5172
|
+
<div class="treetable-column-title" [attr.data-testid]="'treetable-column-header-' + columnId">
|
|
5139
5173
|
<ng-container *ngTemplateOutlet="columnTitle" />
|
|
5140
5174
|
</div>
|
|
5141
5175
|
}
|
|
@@ -5151,6 +5185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5151
5185
|
host: {
|
|
5152
5186
|
'[class.treetable-column]': 'true',
|
|
5153
5187
|
'[attr.aria-sort]': 'ariaSort()',
|
|
5188
|
+
'[attr.data-testid]': '"treetable-column-" + columnId',
|
|
5154
5189
|
role: 'columnheader',
|
|
5155
5190
|
},
|
|
5156
5191
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -5196,6 +5231,7 @@ class ClrTreetableColumnManagerMenuComponent {
|
|
|
5196
5231
|
class="btn btn-sm column-manager-menu-open"
|
|
5197
5232
|
clrPopoverOrigin
|
|
5198
5233
|
clrPopoverOpenCloseButton
|
|
5234
|
+
data-testid="treetable-column-manager-toggle"
|
|
5199
5235
|
[attr.aria-controls]="popoverId"
|
|
5200
5236
|
[attr.aria-expanded]="open()"
|
|
5201
5237
|
[attr.aria-haspopup]="'menu'"
|
|
@@ -5206,6 +5242,7 @@ class ClrTreetableColumnManagerMenuComponent {
|
|
|
5206
5242
|
class="column-switch"
|
|
5207
5243
|
role="dialog"
|
|
5208
5244
|
[attr.aria-label]="commonStrings.showColumnsMenuDescription"
|
|
5245
|
+
data-testid="treetable-column-manager-menu"
|
|
5209
5246
|
[id]="popoverId"
|
|
5210
5247
|
cdkTrapFocus
|
|
5211
5248
|
cdkTrapFocusAutoCapture
|
|
@@ -5218,12 +5255,15 @@ class ClrTreetableColumnManagerMenuComponent {
|
|
|
5218
5255
|
"
|
|
5219
5256
|
>
|
|
5220
5257
|
<div class="switch-header">
|
|
5221
|
-
<div class="clr-sr-only" tabindex="-1" #allSelected>
|
|
5222
|
-
|
|
5258
|
+
<div class="clr-sr-only" tabindex="-1" data-testid="treetable-column-manager-all-selected" #allSelected>
|
|
5259
|
+
{{ commonStrings.allColumnsSelected }}
|
|
5260
|
+
</div>
|
|
5261
|
+
<h2 data-testid="treetable-column-manager-title">{{ commonStrings.showColumns }}</h2>
|
|
5223
5262
|
<button
|
|
5224
5263
|
class="btn btn-sm btn-link-neutral toggle-switch-close-button"
|
|
5225
5264
|
clrPopoverCloseButton
|
|
5226
5265
|
type="button"
|
|
5266
|
+
data-testid="treetable-column-manager-close"
|
|
5227
5267
|
[attr.aria-label]="commonStrings.close"
|
|
5228
5268
|
>
|
|
5229
5269
|
<cds-icon shape="window-close" aria-hidden="true" [attr.title]="commonStrings.close"></cds-icon>
|
|
@@ -5232,16 +5272,17 @@ class ClrTreetableColumnManagerMenuComponent {
|
|
|
5232
5272
|
</div>
|
|
5233
5273
|
<ul class="switch-content list-unstyled">
|
|
5234
5274
|
@for (column of hideableColumns(); track column.id) {
|
|
5235
|
-
<li>
|
|
5236
|
-
<clr-checkbox-wrapper>
|
|
5275
|
+
<li [attr.data-testid]="'treetable-column-manager-item-' + column.id">
|
|
5276
|
+
<clr-checkbox-wrapper [attr.data-testid]="'treetable-column-manager-checkbox-wrapper-' + column.id">
|
|
5237
5277
|
<input
|
|
5238
5278
|
clrCheckbox
|
|
5239
5279
|
type="checkbox"
|
|
5280
|
+
[attr.data-testid]="'treetable-column-manager-checkbox-' + column.id"
|
|
5240
5281
|
[disabled]="hasOnlyOneVisibleColumn() && !column.hidden"
|
|
5241
5282
|
[ngModel]="!column.hidden"
|
|
5242
5283
|
(ngModelChange)="toggleColumnState(column.id)"
|
|
5243
5284
|
/>
|
|
5244
|
-
<label>
|
|
5285
|
+
<label [attr.data-testid]="'treetable-column-manager-label-' + column.id">
|
|
5245
5286
|
<ng-template [ngTemplateOutlet]="column.titleTemplateRef"></ng-template>
|
|
5246
5287
|
</label>
|
|
5247
5288
|
</clr-checkbox-wrapper>
|
|
@@ -5252,6 +5293,7 @@ class ClrTreetableColumnManagerMenuComponent {
|
|
|
5252
5293
|
<button
|
|
5253
5294
|
type="button"
|
|
5254
5295
|
class="btn btn-sm btn-link switch-button"
|
|
5296
|
+
data-testid="treetable-column-manager-select-all"
|
|
5255
5297
|
[disabled]="areAllColumnsVisible()"
|
|
5256
5298
|
(click)="selectAll()"
|
|
5257
5299
|
>
|
|
@@ -5260,6 +5302,7 @@ class ClrTreetableColumnManagerMenuComponent {
|
|
|
5260
5302
|
<button
|
|
5261
5303
|
type="button"
|
|
5262
5304
|
class="btn btn-sm btn-link switch-button"
|
|
5305
|
+
data-testid="treetable-column-manager-reset"
|
|
5263
5306
|
[disabled]="areAllColumnsReset()"
|
|
5264
5307
|
(click)="resetAllToInitial()"
|
|
5265
5308
|
>
|
|
@@ -5280,6 +5323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5280
5323
|
class="btn btn-sm column-manager-menu-open"
|
|
5281
5324
|
clrPopoverOrigin
|
|
5282
5325
|
clrPopoverOpenCloseButton
|
|
5326
|
+
data-testid="treetable-column-manager-toggle"
|
|
5283
5327
|
[attr.aria-controls]="popoverId"
|
|
5284
5328
|
[attr.aria-expanded]="open()"
|
|
5285
5329
|
[attr.aria-haspopup]="'menu'"
|
|
@@ -5290,6 +5334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5290
5334
|
class="column-switch"
|
|
5291
5335
|
role="dialog"
|
|
5292
5336
|
[attr.aria-label]="commonStrings.showColumnsMenuDescription"
|
|
5337
|
+
data-testid="treetable-column-manager-menu"
|
|
5293
5338
|
[id]="popoverId"
|
|
5294
5339
|
cdkTrapFocus
|
|
5295
5340
|
cdkTrapFocusAutoCapture
|
|
@@ -5302,12 +5347,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5302
5347
|
"
|
|
5303
5348
|
>
|
|
5304
5349
|
<div class="switch-header">
|
|
5305
|
-
<div class="clr-sr-only" tabindex="-1" #allSelected>
|
|
5306
|
-
|
|
5350
|
+
<div class="clr-sr-only" tabindex="-1" data-testid="treetable-column-manager-all-selected" #allSelected>
|
|
5351
|
+
{{ commonStrings.allColumnsSelected }}
|
|
5352
|
+
</div>
|
|
5353
|
+
<h2 data-testid="treetable-column-manager-title">{{ commonStrings.showColumns }}</h2>
|
|
5307
5354
|
<button
|
|
5308
5355
|
class="btn btn-sm btn-link-neutral toggle-switch-close-button"
|
|
5309
5356
|
clrPopoverCloseButton
|
|
5310
5357
|
type="button"
|
|
5358
|
+
data-testid="treetable-column-manager-close"
|
|
5311
5359
|
[attr.aria-label]="commonStrings.close"
|
|
5312
5360
|
>
|
|
5313
5361
|
<cds-icon shape="window-close" aria-hidden="true" [attr.title]="commonStrings.close"></cds-icon>
|
|
@@ -5316,16 +5364,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5316
5364
|
</div>
|
|
5317
5365
|
<ul class="switch-content list-unstyled">
|
|
5318
5366
|
@for (column of hideableColumns(); track column.id) {
|
|
5319
|
-
<li>
|
|
5320
|
-
<clr-checkbox-wrapper>
|
|
5367
|
+
<li [attr.data-testid]="'treetable-column-manager-item-' + column.id">
|
|
5368
|
+
<clr-checkbox-wrapper [attr.data-testid]="'treetable-column-manager-checkbox-wrapper-' + column.id">
|
|
5321
5369
|
<input
|
|
5322
5370
|
clrCheckbox
|
|
5323
5371
|
type="checkbox"
|
|
5372
|
+
[attr.data-testid]="'treetable-column-manager-checkbox-' + column.id"
|
|
5324
5373
|
[disabled]="hasOnlyOneVisibleColumn() && !column.hidden"
|
|
5325
5374
|
[ngModel]="!column.hidden"
|
|
5326
5375
|
(ngModelChange)="toggleColumnState(column.id)"
|
|
5327
5376
|
/>
|
|
5328
|
-
<label>
|
|
5377
|
+
<label [attr.data-testid]="'treetable-column-manager-label-' + column.id">
|
|
5329
5378
|
<ng-template [ngTemplateOutlet]="column.titleTemplateRef"></ng-template>
|
|
5330
5379
|
</label>
|
|
5331
5380
|
</clr-checkbox-wrapper>
|
|
@@ -5336,6 +5385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5336
5385
|
<button
|
|
5337
5386
|
type="button"
|
|
5338
5387
|
class="btn btn-sm btn-link switch-button"
|
|
5388
|
+
data-testid="treetable-column-manager-select-all"
|
|
5339
5389
|
[disabled]="areAllColumnsVisible()"
|
|
5340
5390
|
(click)="selectAll()"
|
|
5341
5391
|
>
|
|
@@ -5344,6 +5394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5344
5394
|
<button
|
|
5345
5395
|
type="button"
|
|
5346
5396
|
class="btn btn-sm btn-link switch-button"
|
|
5397
|
+
data-testid="treetable-column-manager-reset"
|
|
5347
5398
|
[disabled]="areAllColumnsReset()"
|
|
5348
5399
|
(click)="resetAllToInitial()"
|
|
5349
5400
|
>
|
|
@@ -5377,10 +5428,18 @@ class ClrTreetableFooter {
|
|
|
5377
5428
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrTreetableFooter, isStandalone: false, selector: "clr-tt-footer", inputs: { clrResetLabel: { classPropertyName: "clrResetLabel", publicName: "clrResetLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.treetable-footer": "true" } }, ngImport: i0, template: `
|
|
5378
5429
|
@if (hasSelectedRows()) {
|
|
5379
5430
|
<div class="clr-form-control-disabled">
|
|
5380
|
-
<clr-checkbox-wrapper class="treetable-footer-select">
|
|
5381
|
-
<input
|
|
5382
|
-
|
|
5383
|
-
|
|
5431
|
+
<clr-checkbox-wrapper class="treetable-footer-select" data-testid="treetable-footer-selected-wrapper">
|
|
5432
|
+
<input
|
|
5433
|
+
clrCheckbox
|
|
5434
|
+
type="checkbox"
|
|
5435
|
+
data-testid="treetable-footer-selected-checkbox"
|
|
5436
|
+
checked="checked"
|
|
5437
|
+
disabled
|
|
5438
|
+
/>
|
|
5439
|
+
<label data-testid="treetable-footer-selected-count">{{ selectedRows().length }}</label>
|
|
5440
|
+
<span class="clr-sr-only" data-testid="treetable-footer-selected-label">
|
|
5441
|
+
{{ commonStrings.selectedRows }}
|
|
5442
|
+
</span>
|
|
5384
5443
|
</clr-checkbox-wrapper>
|
|
5385
5444
|
</div>
|
|
5386
5445
|
}
|
|
@@ -5388,7 +5447,7 @@ class ClrTreetableFooter {
|
|
|
5388
5447
|
<clr-tt-column-manager-menu [resetLabel]="clrResetLabel()" />
|
|
5389
5448
|
}
|
|
5390
5449
|
|
|
5391
|
-
<div class="treetable-footer-description">
|
|
5450
|
+
<div class="treetable-footer-description" data-testid="treetable-footer-description">
|
|
5392
5451
|
<ng-content />
|
|
5393
5452
|
</div>
|
|
5394
5453
|
`, isInline: true, dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i4.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "component", type: ClrTreetableColumnManagerMenuComponent, selector: "clr-tt-column-manager-menu", inputs: ["resetLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
@@ -5400,10 +5459,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5400
5459
|
template: `
|
|
5401
5460
|
@if (hasSelectedRows()) {
|
|
5402
5461
|
<div class="clr-form-control-disabled">
|
|
5403
|
-
<clr-checkbox-wrapper class="treetable-footer-select">
|
|
5404
|
-
<input
|
|
5405
|
-
|
|
5406
|
-
|
|
5462
|
+
<clr-checkbox-wrapper class="treetable-footer-select" data-testid="treetable-footer-selected-wrapper">
|
|
5463
|
+
<input
|
|
5464
|
+
clrCheckbox
|
|
5465
|
+
type="checkbox"
|
|
5466
|
+
data-testid="treetable-footer-selected-checkbox"
|
|
5467
|
+
checked="checked"
|
|
5468
|
+
disabled
|
|
5469
|
+
/>
|
|
5470
|
+
<label data-testid="treetable-footer-selected-count">{{ selectedRows().length }}</label>
|
|
5471
|
+
<span class="clr-sr-only" data-testid="treetable-footer-selected-label">
|
|
5472
|
+
{{ commonStrings.selectedRows }}
|
|
5473
|
+
</span>
|
|
5407
5474
|
</clr-checkbox-wrapper>
|
|
5408
5475
|
</div>
|
|
5409
5476
|
}
|
|
@@ -5411,7 +5478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5411
5478
|
<clr-tt-column-manager-menu [resetLabel]="clrResetLabel()" />
|
|
5412
5479
|
}
|
|
5413
5480
|
|
|
5414
|
-
<div class="treetable-footer-description">
|
|
5481
|
+
<div class="treetable-footer-description" data-testid="treetable-footer-description">
|
|
5415
5482
|
<ng-content />
|
|
5416
5483
|
</div>
|
|
5417
5484
|
`,
|
|
@@ -5542,12 +5609,13 @@ class ClrTreetableFilter {
|
|
|
5542
5609
|
<div
|
|
5543
5610
|
class="treetable-filter"
|
|
5544
5611
|
role="dialog"
|
|
5612
|
+
data-testid="treetable-filter-dialog"
|
|
5545
5613
|
cdkTrapFocus
|
|
5546
5614
|
*clrPopoverContent="open(); at: popoverPosition; outsideClickToClose: true; scrollToClose: true"
|
|
5547
5615
|
[attr.aria-label]="commonStrings.datagridFilterDialogAriaLabel"
|
|
5548
5616
|
>
|
|
5549
5617
|
<div class="treetable-filter-close-wrapper">
|
|
5550
|
-
<button type="button" class="close" clrPopoverCloseButton>
|
|
5618
|
+
<button type="button" class="close" data-testid="treetable-filter-close" clrPopoverCloseButton>
|
|
5551
5619
|
<cds-icon shape="window-close" [attr.aria-label]="commonStrings.close"></cds-icon>
|
|
5552
5620
|
</button>
|
|
5553
5621
|
</div>
|
|
@@ -5581,12 +5649,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5581
5649
|
<div
|
|
5582
5650
|
class="treetable-filter"
|
|
5583
5651
|
role="dialog"
|
|
5652
|
+
data-testid="treetable-filter-dialog"
|
|
5584
5653
|
cdkTrapFocus
|
|
5585
5654
|
*clrPopoverContent="open(); at: popoverPosition; outsideClickToClose: true; scrollToClose: true"
|
|
5586
5655
|
[attr.aria-label]="commonStrings.datagridFilterDialogAriaLabel"
|
|
5587
5656
|
>
|
|
5588
5657
|
<div class="treetable-filter-close-wrapper">
|
|
5589
|
-
<button type="button" class="close" clrPopoverCloseButton>
|
|
5658
|
+
<button type="button" class="close" data-testid="treetable-filter-close" clrPopoverCloseButton>
|
|
5590
5659
|
<cds-icon shape="window-close" [attr.aria-label]="commonStrings.close"></cds-icon>
|
|
5591
5660
|
</button>
|
|
5592
5661
|
</div>
|
|
@@ -5606,7 +5675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5606
5675
|
*/
|
|
5607
5676
|
class ClrTreetableCell {
|
|
5608
5677
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrTreetableCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5609
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrTreetableCell, isStandalone: false, selector: "clr-tt-cell", host: { attributes: { "role": "gridcell" }, properties: { "class.treetable-cell": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5678
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrTreetableCell, isStandalone: false, selector: "clr-tt-cell", host: { attributes: { "data-testid": "treetable-cell", "role": "gridcell" }, properties: { "class.treetable-cell": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5610
5679
|
}
|
|
5611
5680
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrTreetableCell, decorators: [{
|
|
5612
5681
|
type: Component,
|
|
@@ -5615,6 +5684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5615
5684
|
template: '<ng-content></ng-content>',
|
|
5616
5685
|
host: {
|
|
5617
5686
|
'[class.treetable-cell]': 'true',
|
|
5687
|
+
'data-testid': 'treetable-cell',
|
|
5618
5688
|
role: 'gridcell',
|
|
5619
5689
|
},
|
|
5620
5690
|
standalone: false,
|
|
@@ -5630,8 +5700,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5630
5700
|
class ClrTreetablePlaceholder {
|
|
5631
5701
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrTreetablePlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5632
5702
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrTreetablePlaceholder, isStandalone: false, selector: "clr-tt-placeholder", host: { properties: { "class.treetable-placeholder-container": "true" } }, ngImport: i0, template: `
|
|
5633
|
-
<div class="treetable-placeholder treetable-empty">
|
|
5634
|
-
<div class="treetable-placeholder-image"></div>
|
|
5703
|
+
<div class="treetable-placeholder treetable-empty" data-testid="treetable-placeholder">
|
|
5704
|
+
<div class="treetable-placeholder-image" data-testid="treetable-placeholder-image"></div>
|
|
5635
5705
|
<ng-content></ng-content>
|
|
5636
5706
|
</div>
|
|
5637
5707
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
@@ -5641,8 +5711,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5641
5711
|
args: [{
|
|
5642
5712
|
selector: 'clr-tt-placeholder',
|
|
5643
5713
|
template: `
|
|
5644
|
-
<div class="treetable-placeholder treetable-empty">
|
|
5645
|
-
<div class="treetable-placeholder-image"></div>
|
|
5714
|
+
<div class="treetable-placeholder treetable-empty" data-testid="treetable-placeholder">
|
|
5715
|
+
<div class="treetable-placeholder-image" data-testid="treetable-placeholder-image"></div>
|
|
5646
5716
|
<ng-content></ng-content>
|
|
5647
5717
|
</div>
|
|
5648
5718
|
`,
|
|
@@ -6071,8 +6141,8 @@ class ClrTreetableStringFilter {
|
|
|
6071
6141
|
>
|
|
6072
6142
|
<cds-icon shape="trash"></cds-icon>
|
|
6073
6143
|
</button>
|
|
6074
|
-
<clr-input-container>
|
|
6075
|
-
<label for="filter">{{ filterLabel() }}</label>
|
|
6144
|
+
<clr-input-container data-testid="treetable-string-filter-container">
|
|
6145
|
+
<label for="filter" data-testid="treetable-string-filter-label">{{ filterLabel() }}</label>
|
|
6076
6146
|
<input
|
|
6077
6147
|
#input
|
|
6078
6148
|
clrInput
|
|
@@ -6100,8 +6170,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
6100
6170
|
>
|
|
6101
6171
|
<cds-icon shape="trash"></cds-icon>
|
|
6102
6172
|
</button>
|
|
6103
|
-
<clr-input-container>
|
|
6104
|
-
<label for="filter">{{ filterLabel() }}</label>
|
|
6173
|
+
<clr-input-container data-testid="treetable-string-filter-container">
|
|
6174
|
+
<label for="filter" data-testid="treetable-string-filter-label">{{ filterLabel() }}</label>
|
|
6105
6175
|
<input
|
|
6106
6176
|
#input
|
|
6107
6177
|
clrInput
|
|
@@ -6291,7 +6361,7 @@ class ClrViewEditSection {
|
|
|
6291
6361
|
}
|
|
6292
6362
|
}
|
|
6293
6363
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrViewEditSection, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6294
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrViewEditSection, isStandalone: false, selector: "clr-view-edit-section", inputs: { _title: ["clrTitle", "_title"], _saveText: ["clrSaveText", "_saveText"], _preventSave: ["clrPreventModeChangeOnSave", "_preventSave"], _cancelText: ["clrCancelText", "_cancelText"], _editable: ["clrEditable", "_editable"], _editIcon: ["clrEditIcon", "_editIcon"], _isCollapsible: ["clrIsCollapsible", "_isCollapsible"], _isCollapsed: ["clrIsCollapsed", "_isCollapsed"], _titleTextStyle: ["clrTitleTextStyle", "_titleTextStyle"], _titleTextFontWeight: ["clrTitleTextFontWeight", "_titleTextFontWeight"], _showBadge: ["clrShowBadge", "_showBadge"], _badgeContent: ["clrBadgeContent", "_badgeContent"], _badgeClass: ["clrBadgeClass", "_badgeClass"], viewRef: ["clrViewRef", "viewRef"], editRef: ["clrEditRef", "editRef"], editMode: ["clrEditMode", "editMode"] }, outputs: { _isCollapsedChange: "clrIsCollapsedChange", _editModeChanged: "clrEditModeChange", _submitted: "clrSectionSubmitted", _cancelled: "clrSectionEditCancelled" }, ngImport: i0, template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n <div class=\"card-block\">\n <div class=\"card-title\">\n <ng-template #titleContainer>\n <span
|
|
6364
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrViewEditSection, isStandalone: false, selector: "clr-view-edit-section", inputs: { _title: ["clrTitle", "_title"], _saveText: ["clrSaveText", "_saveText"], _preventSave: ["clrPreventModeChangeOnSave", "_preventSave"], _cancelText: ["clrCancelText", "_cancelText"], _editable: ["clrEditable", "_editable"], _editIcon: ["clrEditIcon", "_editIcon"], _isCollapsible: ["clrIsCollapsible", "_isCollapsible"], _isCollapsed: ["clrIsCollapsed", "_isCollapsed"], _titleTextStyle: ["clrTitleTextStyle", "_titleTextStyle"], _titleTextFontWeight: ["clrTitleTextFontWeight", "_titleTextFontWeight"], _showBadge: ["clrShowBadge", "_showBadge"], _badgeContent: ["clrBadgeContent", "_badgeContent"], _badgeClass: ["clrBadgeClass", "_badgeClass"], viewRef: ["clrViewRef", "viewRef"], editRef: ["clrEditRef", "editRef"], editMode: ["clrEditMode", "editMode"] }, outputs: { _isCollapsedChange: "clrIsCollapsedChange", _editModeChanged: "clrEditModeChange", _submitted: "clrSectionSubmitted", _cancelled: "clrSectionEditCancelled" }, ngImport: i0, template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\" data-testid=\"view-edit-section\">\n <div class=\"card-block\">\n <div class=\"card-title\">\n <ng-template #titleContainer>\n <span\n class=\"ves-title-text\"\n [attr.cds-text]=\"_titleTextStyle + ' ' + _titleTextFontWeight\"\n data-testid=\"view-edit-section-title\"\n >\n {{ _title }} @if (_showBadge) { @if (_badgeContent) {\n <span class=\"ves-badge\" [ngClass]=\"_badgeClass\" data-testid=\"view-edit-section-badge\">\n {{ _badgeContent }}\n </span>\n }\n <ng-content select=\"[badge]\"></ng-content>\n }\n </span>\n </ng-template>\n @if (_isCollapsible && !editMode) {\n <span class=\"ces-title-row\">\n <span\n class=\"ces-title-trigger\"\n data-testid=\"view-edit-section-title-trigger\"\n (click)=\"onCollapseExpand()\"\n (keydown.enter)=\"onCollapseExpand()\"\n (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"!_isCollapsed\"\n >\n <ng-template [ngTemplateOutlet]=\"titleContainer\"></ng-template>\n </span>\n <button\n type=\"button\"\n (click)=\"onCollapseExpand()\"\n class=\"btn btn-icon btn-link ces-caret-btn\"\n data-testid=\"view-edit-section-caret-button\"\n >\n <cds-icon shape=\"angle\" size=\"20\" class=\"ces-caret-icon\" [@rotateIcon]=\"_isCollapsed\"></cds-icon>\n </button>\n </span>\n } @else {\n <ng-template [ngTemplateOutlet]=\"titleContainer\"></ng-template>\n }\n <div class=\"ves-actions\">\n @if (_editable && !editMode && actionBlock.children.length == 0) {\n <button\n type=\"button\"\n (click)=\"onEdit()\"\n class=\"btn btn-icon btn-link ves-action\"\n data-testid=\"view-edit-section-edit-button\"\n >\n <cds-icon class=\"ves-edit-icon\" [shape]=\"_editIcon\" size=\"20\"></cds-icon>\n </button>\n }\n <div #actionBlock>\n <ng-content select=\"[action-block]\"></ng-content>\n </div>\n </div>\n </div>\n @if (!(_isCollapsed && _isCollapsible)) {\n <div class=\"card-text\" [@collapseExpandAnimation]=\"initialized\" data-testid=\"view-edit-section-content\">\n @if (!editMode) {\n <ng-template [ngTemplateOutlet]=\"viewRef\"></ng-template>\n } @if (editMode) {\n <ng-template [ngTemplateOutlet]=\"editRef\"></ng-template>\n } @if (editMode) {\n <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\" data-testid=\"view-edit-section-form\">\n <button class=\"btn btn-primary ves-save\" type=\"submit\" data-testid=\"view-edit-section-save-button\">\n {{ _saveText }}\n </button>\n <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\" data-testid=\"view-edit-section-cancel-button\">\n {{ _cancelText }}\n </button>\n </form>\n }\n </div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], animations: [
|
|
6295
6365
|
trigger('collapseExpandAnimation', [
|
|
6296
6366
|
transition(':enter', [
|
|
6297
6367
|
style({ opacity: 0, height: 0, overflow: 'hidden' }),
|
|
@@ -6329,7 +6399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
6329
6399
|
transition('true => false', animate('300ms ease-out')),
|
|
6330
6400
|
transition('false => true', animate('300ms ease-in')),
|
|
6331
6401
|
]),
|
|
6332
|
-
], standalone: false, template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n <div class=\"card-block\">\n <div class=\"card-title\">\n <ng-template #titleContainer>\n <span
|
|
6402
|
+
], standalone: false, template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\" data-testid=\"view-edit-section\">\n <div class=\"card-block\">\n <div class=\"card-title\">\n <ng-template #titleContainer>\n <span\n class=\"ves-title-text\"\n [attr.cds-text]=\"_titleTextStyle + ' ' + _titleTextFontWeight\"\n data-testid=\"view-edit-section-title\"\n >\n {{ _title }} @if (_showBadge) { @if (_badgeContent) {\n <span class=\"ves-badge\" [ngClass]=\"_badgeClass\" data-testid=\"view-edit-section-badge\">\n {{ _badgeContent }}\n </span>\n }\n <ng-content select=\"[badge]\"></ng-content>\n }\n </span>\n </ng-template>\n @if (_isCollapsible && !editMode) {\n <span class=\"ces-title-row\">\n <span\n class=\"ces-title-trigger\"\n data-testid=\"view-edit-section-title-trigger\"\n (click)=\"onCollapseExpand()\"\n (keydown.enter)=\"onCollapseExpand()\"\n (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"!_isCollapsed\"\n >\n <ng-template [ngTemplateOutlet]=\"titleContainer\"></ng-template>\n </span>\n <button\n type=\"button\"\n (click)=\"onCollapseExpand()\"\n class=\"btn btn-icon btn-link ces-caret-btn\"\n data-testid=\"view-edit-section-caret-button\"\n >\n <cds-icon shape=\"angle\" size=\"20\" class=\"ces-caret-icon\" [@rotateIcon]=\"_isCollapsed\"></cds-icon>\n </button>\n </span>\n } @else {\n <ng-template [ngTemplateOutlet]=\"titleContainer\"></ng-template>\n }\n <div class=\"ves-actions\">\n @if (_editable && !editMode && actionBlock.children.length == 0) {\n <button\n type=\"button\"\n (click)=\"onEdit()\"\n class=\"btn btn-icon btn-link ves-action\"\n data-testid=\"view-edit-section-edit-button\"\n >\n <cds-icon class=\"ves-edit-icon\" [shape]=\"_editIcon\" size=\"20\"></cds-icon>\n </button>\n }\n <div #actionBlock>\n <ng-content select=\"[action-block]\"></ng-content>\n </div>\n </div>\n </div>\n @if (!(_isCollapsed && _isCollapsible)) {\n <div class=\"card-text\" [@collapseExpandAnimation]=\"initialized\" data-testid=\"view-edit-section-content\">\n @if (!editMode) {\n <ng-template [ngTemplateOutlet]=\"viewRef\"></ng-template>\n } @if (editMode) {\n <ng-template [ngTemplateOutlet]=\"editRef\"></ng-template>\n } @if (editMode) {\n <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\" data-testid=\"view-edit-section-form\">\n <button class=\"btn btn-primary ves-save\" type=\"submit\" data-testid=\"view-edit-section-save-button\">\n {{ _saveText }}\n </button>\n <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\" data-testid=\"view-edit-section-cancel-button\">\n {{ _cancelText }}\n </button>\n </form>\n }\n </div>\n }\n </div>\n</div>\n" }]
|
|
6333
6403
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _title: [{
|
|
6334
6404
|
type: Input,
|
|
6335
6405
|
args: ['clrTitle']
|
|
@@ -6585,11 +6655,11 @@ class ClrHistory {
|
|
|
6585
6655
|
this.historyService.setHistoryPinned(this.username, !this.pinActivated);
|
|
6586
6656
|
}
|
|
6587
6657
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrHistory, deps: [{ token: ClrHistoryService }, { token: HISTORY_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6588
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrHistory, isStandalone: false, selector: "clr-history", inputs: { username: ["clrUsername", "username"], tenantId: ["clrTenantId", "tenantId"], context: ["clrContext", "context"], pinActive: ["clrPinActive", "pinActive"], dropdownHeader: ["clrDropdownHeader", "dropdownHeader"], dropdownPin: ["clrDropdownPin", "dropdownPin"], dropdownUnpin: ["clrDropdownUnpin", "dropdownUnpin"], domain: ["clrDomain", "domain"], position: ["clrPosition", "position"] }, host: { classAttribute: "clr-history" }, ngImport: i0, template: "<clr-dropdown>\n <button
|
|
6658
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrHistory, isStandalone: false, selector: "clr-history", inputs: { username: ["clrUsername", "username"], tenantId: ["clrTenantId", "tenantId"], context: ["clrContext", "context"], pinActive: ["clrPinActive", "pinActive"], dropdownHeader: ["clrDropdownHeader", "dropdownHeader"], dropdownPin: ["clrDropdownPin", "dropdownPin"], dropdownUnpin: ["clrDropdownUnpin", "dropdownUnpin"], domain: ["clrDomain", "domain"], position: ["clrPosition", "position"] }, host: { classAttribute: "clr-history" }, ngImport: i0, template: "<clr-dropdown>\n <button\n type=\"button\"\n class=\"btn btn-icon btn-outline-primary history-button\"\n clrDropdownTrigger\n data-testid=\"history-trigger\"\n >\n <cds-icon shape=\"history\" size=\"16\"></cds-icon>\n <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n </button>\n <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen data-testid=\"history-menu\">\n <label class=\"dropdown-header\" aria-hidden=\"true\" data-testid=\"history-header\">{{ dropdownHeader }}</label>\n @for (history of historyElements$ | async; track history) {\n <button\n type=\"button\"\n clrDropdownItem\n (click)=\"select(history)\"\n [attr.data-testid]=\"'history-option-' + (history.title)\"\n >\n {{ history.title }}\n </button>\n } @if (pinActive) {\n <div class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n }\n <button clrDropdownItem (click)=\"togglePinHistory()\" data-testid=\"history-pin-toggle\">\n @if (pinActive && !pinActivated) {\n <span data-testid=\"history-pin-label\">{{ dropdownPin }}</span>\n } @if (pinActive && pinActivated) {\n <span data-testid=\"history-unpin-label\">{{ dropdownUnpin }}</span>\n }\n </button>\n </clr-dropdown-menu>\n</clr-dropdown>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
6589
6659
|
}
|
|
6590
6660
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrHistory, decorators: [{
|
|
6591
6661
|
type: Component,
|
|
6592
|
-
args: [{ selector: 'clr-history', host: { class: 'clr-history' }, standalone: false, template: "<clr-dropdown>\n <button
|
|
6662
|
+
args: [{ selector: 'clr-history', host: { class: 'clr-history' }, standalone: false, template: "<clr-dropdown>\n <button\n type=\"button\"\n class=\"btn btn-icon btn-outline-primary history-button\"\n clrDropdownTrigger\n data-testid=\"history-trigger\"\n >\n <cds-icon shape=\"history\" size=\"16\"></cds-icon>\n <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n </button>\n <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen data-testid=\"history-menu\">\n <label class=\"dropdown-header\" aria-hidden=\"true\" data-testid=\"history-header\">{{ dropdownHeader }}</label>\n @for (history of historyElements$ | async; track history) {\n <button\n type=\"button\"\n clrDropdownItem\n (click)=\"select(history)\"\n [attr.data-testid]=\"'history-option-' + (history.title)\"\n >\n {{ history.title }}\n </button>\n } @if (pinActive) {\n <div class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n }\n <button clrDropdownItem (click)=\"togglePinHistory()\" data-testid=\"history-pin-toggle\">\n @if (pinActive && !pinActivated) {\n <span data-testid=\"history-pin-label\">{{ dropdownPin }}</span>\n } @if (pinActive && pinActivated) {\n <span data-testid=\"history-unpin-label\">{{ dropdownUnpin }}</span>\n }\n </button>\n </clr-dropdown-menu>\n</clr-dropdown>\n" }]
|
|
6593
6663
|
}], ctorParameters: () => [{ type: ClrHistoryService }, { type: HistoryProvider, decorators: [{
|
|
6594
6664
|
type: Inject,
|
|
6595
6665
|
args: [HISTORY_PROVIDER]
|
|
@@ -6660,11 +6730,11 @@ class ClrHistoryPinned {
|
|
|
6660
6730
|
this.settingsSubscription.unsubscribe();
|
|
6661
6731
|
}
|
|
6662
6732
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrHistoryPinned, deps: [{ token: ClrHistoryService }, { token: HISTORY_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6663
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrHistoryPinned, isStandalone: false, selector: "clr-history-pinned", inputs: { username: ["clrUsername", "username"], tenantId: ["clrTenantId", "tenantId"], context: ["clrContext", "context"], domain: ["clrDomain", "domain"] }, ngImport: i0, template: "@if ((active$ | async)) {\n<nav aria-label=\"history\" class=\"history-container\">\n <ol class=\"history\">\n <!-- dummy entry with no visible content to reserve space for the history header -->\n <li> </li>\n @for (historyItem of historyElements$ | async; track historyItem) { @if (historyItem.url) {\n <li class=\"history-item\">\n <a [href]=\"historyItem.url\">{{ historyItem.title }}</a>\n </li>\n } }\n </ol>\n</nav>\n}\n", dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
6733
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrHistoryPinned, isStandalone: false, selector: "clr-history-pinned", inputs: { username: ["clrUsername", "username"], tenantId: ["clrTenantId", "tenantId"], context: ["clrContext", "context"], domain: ["clrDomain", "domain"] }, ngImport: i0, template: "@if ((active$ | async)) {\n<nav aria-label=\"history\" class=\"history-container\" data-testid=\"history-pinned-nav\">\n <ol class=\"history\">\n <!-- dummy entry with no visible content to reserve space for the history header -->\n <li> </li>\n @for (historyItem of historyElements$ | async; track historyItem) { @if (historyItem.url) {\n <li class=\"history-item\" [attr.data-testid]=\"'history-pinned-entry-' + (historyItem.title)\">\n <a [href]=\"historyItem.url\" [attr.data-testid]=\"'history-pinned-link-' + (historyItem.title)\"\n >{{ historyItem.title }}</a\n >\n </li>\n } }\n </ol>\n</nav>\n}\n", dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
6664
6734
|
}
|
|
6665
6735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrHistoryPinned, decorators: [{
|
|
6666
6736
|
type: Component,
|
|
6667
|
-
args: [{ selector: 'clr-history-pinned', standalone: false, template: "@if ((active$ | async)) {\n<nav aria-label=\"history\" class=\"history-container\">\n <ol class=\"history\">\n <!-- dummy entry with no visible content to reserve space for the history header -->\n <li> </li>\n @for (historyItem of historyElements$ | async; track historyItem) { @if (historyItem.url) {\n <li class=\"history-item\">\n <a [href]=\"historyItem.url\">{{ historyItem.title }}</a>\n </li>\n } }\n </ol>\n</nav>\n}\n" }]
|
|
6737
|
+
args: [{ selector: 'clr-history-pinned', standalone: false, template: "@if ((active$ | async)) {\n<nav aria-label=\"history\" class=\"history-container\" data-testid=\"history-pinned-nav\">\n <ol class=\"history\">\n <!-- dummy entry with no visible content to reserve space for the history header -->\n <li> </li>\n @for (historyItem of historyElements$ | async; track historyItem) { @if (historyItem.url) {\n <li class=\"history-item\" [attr.data-testid]=\"'history-pinned-entry-' + (historyItem.title)\">\n <a [href]=\"historyItem.url\" [attr.data-testid]=\"'history-pinned-link-' + (historyItem.title)\"\n >{{ historyItem.title }}</a\n >\n </li>\n } }\n </ol>\n</nav>\n}\n" }]
|
|
6668
6738
|
}], ctorParameters: () => [{ type: ClrHistoryService }, { type: HistoryProvider, decorators: [{
|
|
6669
6739
|
type: Inject,
|
|
6670
6740
|
args: [HISTORY_PROVIDER]
|
|
@@ -12365,11 +12435,11 @@ class ClrBrandAvatar {
|
|
|
12365
12435
|
return output;
|
|
12366
12436
|
}
|
|
12367
12437
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrBrandAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12368
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrBrandAvatar, isStandalone: false, selector: "clr-brand-avatar", inputs: { brand: ["clrBrand", "brand"], size: ["clrSize", "size"] }, host: { properties: { "class.clr-brand-avatar": "this.avatar" } }, viewQueries: [{ propertyName: "avatarElement", first: true, predicate: ["avatar"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"brand-avatar-rectangle\">\n <div #avatar class=\"brand-avatar-icon-container\">\n <cds-icon\n [size]=\"'' + size\"\n [shape]=\"getShape()\"\n [ngClass]=\"{'default-icon': getShape() === getDefaultIcon()}\"\n ></cds-icon>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
|
|
12438
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrBrandAvatar, isStandalone: false, selector: "clr-brand-avatar", inputs: { brand: ["clrBrand", "brand"], size: ["clrSize", "size"] }, host: { properties: { "class.clr-brand-avatar": "this.avatar" } }, viewQueries: [{ propertyName: "avatarElement", first: true, predicate: ["avatar"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"brand-avatar-rectangle\">\n <div #avatar class=\"brand-avatar-icon-container\">\n <cds-icon\n data-testid=\"brand-avatar-icon\"\n [size]=\"'' + size\"\n [shape]=\"getShape()\"\n [ngClass]=\"{'default-icon': getShape() === getDefaultIcon()}\"\n ></cds-icon>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
|
|
12369
12439
|
}
|
|
12370
12440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrBrandAvatar, decorators: [{
|
|
12371
12441
|
type: Component,
|
|
12372
|
-
args: [{ selector: 'clr-brand-avatar', standalone: false, template: "<div class=\"brand-avatar-rectangle\">\n <div #avatar class=\"brand-avatar-icon-container\">\n <cds-icon\n [size]=\"'' + size\"\n [shape]=\"getShape()\"\n [ngClass]=\"{'default-icon': getShape() === getDefaultIcon()}\"\n ></cds-icon>\n </div>\n</div>\n" }]
|
|
12442
|
+
args: [{ selector: 'clr-brand-avatar', standalone: false, template: "<div class=\"brand-avatar-rectangle\">\n <div #avatar class=\"brand-avatar-icon-container\">\n <cds-icon\n data-testid=\"brand-avatar-icon\"\n [size]=\"'' + size\"\n [shape]=\"getShape()\"\n [ngClass]=\"{'default-icon': getShape() === getDefaultIcon()}\"\n ></cds-icon>\n </div>\n</div>\n" }]
|
|
12373
12443
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { avatar: [{
|
|
12374
12444
|
type: HostBinding,
|
|
12375
12445
|
args: ['class.clr-brand-avatar']
|
|
@@ -12573,11 +12643,11 @@ class LocationBarSearchComponent {
|
|
|
12573
12643
|
return `Type ${this.searchRequest?.minCharacters ?? this.MIN_CHARACTERS_DEFAULT}+ characters to search.`;
|
|
12574
12644
|
}
|
|
12575
12645
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LocationBarSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12576
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: LocationBarSearchComponent, isStandalone: false, selector: "clr-location-bar-search", inputs: { searchRequest: ["clrSearchRequest", "searchRequest"] }, outputs: { searchPerformed: "searchPerformed" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"clr-col-md-12 search-wrapper\">\n <form clrForm>\n <clr-input-container class=\"input-container\">\n <label hidden></label>\n <input\n #searchInput\n class=\"clr-col-md-12\"\n clrInput\n clrSearch\n [placeholder]=\"searchRequest?.placeholder ?? ''\"\n type=\"text\"\n name=\"search\"\n (keydown.Space)=\"preventDropdownActions($event)\"\n [formControl]=\"searchControl\"\n />\n @if (displayWarning) {\n <clr-control-helper class=\"min-text-warning\">{{\n searchRequest?.minCharacterText ?? getMinCharactersText()\n }}</clr-control-helper>\n }\n </clr-input-container>\n </form>\n</div>\n", styles: ["input::placeholder{font-size:.55rem}.search-wrapper{margin-bottom:.3rem}.input-container{margin-top:0}.min-text-warning{color:var(--cds-global-color-construction-800)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i1$1.ClrControlHelper, selector: "clr-control-helper" }, { kind: "directive", type: i1$1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i3$2.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3$2.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ClrAutocompleteOff, selector: "input:not([autocomplete])" }, { kind: "directive", type: ClrAddonsLabel, selector: "label" }, { kind: "directive", type: ClrSearchField, selector: "[clrSearch]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12646
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: LocationBarSearchComponent, isStandalone: false, selector: "clr-location-bar-search", inputs: { searchRequest: ["clrSearchRequest", "searchRequest"] }, outputs: { searchPerformed: "searchPerformed" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"clr-col-md-12 search-wrapper\">\n <form clrForm>\n <clr-input-container class=\"input-container\">\n <label hidden></label>\n <input\n #searchInput\n class=\"clr-col-md-12\"\n clrInput\n clrSearch\n [placeholder]=\"searchRequest?.placeholder ?? ''\"\n type=\"text\"\n name=\"search\"\n (keydown.Space)=\"preventDropdownActions($event)\"\n [formControl]=\"searchControl\"\n data-testid=\"location-bar-search-input\"\n />\n @if (displayWarning) {\n <clr-control-helper class=\"min-text-warning\" data-testid=\"location-bar-search-min-warning\">{{\n searchRequest?.minCharacterText ?? getMinCharactersText()\n }}</clr-control-helper>\n }\n </clr-input-container>\n </form>\n</div>\n", styles: ["input::placeholder{font-size:.55rem}.search-wrapper{margin-bottom:.3rem}.input-container{margin-top:0}.min-text-warning{color:var(--cds-global-color-construction-800)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i1$1.ClrControlHelper, selector: "clr-control-helper" }, { kind: "directive", type: i1$1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i3$2.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3$2.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ClrAutocompleteOff, selector: "input:not([autocomplete])" }, { kind: "directive", type: ClrAddonsLabel, selector: "label" }, { kind: "directive", type: ClrSearchField, selector: "[clrSearch]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12577
12647
|
}
|
|
12578
12648
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LocationBarSearchComponent, decorators: [{
|
|
12579
12649
|
type: Component,
|
|
12580
|
-
args: [{ selector: 'clr-location-bar-search', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"clr-col-md-12 search-wrapper\">\n <form clrForm>\n <clr-input-container class=\"input-container\">\n <label hidden></label>\n <input\n #searchInput\n class=\"clr-col-md-12\"\n clrInput\n clrSearch\n [placeholder]=\"searchRequest?.placeholder ?? ''\"\n type=\"text\"\n name=\"search\"\n (keydown.Space)=\"preventDropdownActions($event)\"\n [formControl]=\"searchControl\"\n />\n @if (displayWarning) {\n <clr-control-helper class=\"min-text-warning\">{{\n searchRequest?.minCharacterText ?? getMinCharactersText()\n }}</clr-control-helper>\n }\n </clr-input-container>\n </form>\n</div>\n", styles: ["input::placeholder{font-size:.55rem}.search-wrapper{margin-bottom:.3rem}.input-container{margin-top:0}.min-text-warning{color:var(--cds-global-color-construction-800)}\n"] }]
|
|
12650
|
+
args: [{ selector: 'clr-location-bar-search', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"clr-col-md-12 search-wrapper\">\n <form clrForm>\n <clr-input-container class=\"input-container\">\n <label hidden></label>\n <input\n #searchInput\n class=\"clr-col-md-12\"\n clrInput\n clrSearch\n [placeholder]=\"searchRequest?.placeholder ?? ''\"\n type=\"text\"\n name=\"search\"\n (keydown.Space)=\"preventDropdownActions($event)\"\n [formControl]=\"searchControl\"\n data-testid=\"location-bar-search-input\"\n />\n @if (displayWarning) {\n <clr-control-helper class=\"min-text-warning\" data-testid=\"location-bar-search-min-warning\">{{\n searchRequest?.minCharacterText ?? getMinCharactersText()\n }}</clr-control-helper>\n }\n </clr-input-container>\n </form>\n</div>\n", styles: ["input::placeholder{font-size:.55rem}.search-wrapper{margin-bottom:.3rem}.input-container{margin-top:0}.min-text-warning{color:var(--cds-global-color-construction-800)}\n"] }]
|
|
12581
12651
|
}], propDecorators: { searchRequest: [{
|
|
12582
12652
|
type: Input,
|
|
12583
12653
|
args: ['clrSearchRequest']
|
|
@@ -12699,11 +12769,11 @@ class LocationBarNodeComponent {
|
|
|
12699
12769
|
this.searchItemChanged.emit(searchedItem);
|
|
12700
12770
|
}
|
|
12701
12771
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LocationBarNodeComponent, deps: [{ token: CONTENT_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12702
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: LocationBarNodeComponent, isStandalone: false, selector: "clr-location-bar-node", inputs: { parentNode: "parentNode", searchResultItems: ["clrSearchResultItems", "searchResultItems"], searchRequest: ["clrSearchRequest", "searchRequest"] }, outputs: { selectionChanged: "selectionChanged", searchItemChanged: "searchItemChanged" }, host: { properties: { "class.location-bar-node": "true" } }, viewQueries: [{ propertyName: "locationBarSearch", first: true, predicate: ["locationBarSearch"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (parentNode) {
|
|
12772
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: LocationBarNodeComponent, isStandalone: false, selector: "clr-location-bar-node", inputs: { parentNode: "parentNode", searchResultItems: ["clrSearchResultItems", "searchResultItems"], searchRequest: ["clrSearchRequest", "searchRequest"] }, outputs: { selectionChanged: "selectionChanged", searchItemChanged: "searchItemChanged" }, host: { properties: { "class.location-bar-node": "true" } }, viewQueries: [{ propertyName: "locationBarSearch", first: true, predicate: ["locationBarSearch"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (parentNode) {\n @if (parentNode.getChildren()?.length > 0) {\n <ng-content></ng-content>\n }\n @if ((selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1) {\n <clr-dropdown data-testid=\"location-bar-dropdown\">\n <button\n class=\"btn btn-link btn-sm\"\n (blur)=\"focus = false\"\n (focus)=\"focus = true\"\n (click)=\"resetSearch()\"\n clrDropdownTrigger\n data-testid=\"location-bar-dropdown-trigger\"\n >\n @if (parentNode.getSelectedChild(); as node) {\n <span\n (click)=\"resetSearch()\"\n class=\"text-truncate\"\n [class.locationbar-last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n title=\"{{ node.label }}\"\n [attr.data-testid]=\"'location-bar-selected-node-' + node.label\"\n >\n {{ node.label }}\n </span>\n <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n } @else {\n <cds-icon\n class=\"locationbar-unselected\"\n size=\"18\"\n [solid]=\"focus\"\n shape=\"tree-view\"\n data-testid=\"location-bar-unselected-icon\"\n ></cds-icon\n > ...\n }\n </button>\n <clr-dropdown-menu\n class=\"locationbar-clr-dropdown-menu\"\n [clrPosition]=\"'bottom-left'\"\n [clrDropdownMenuItemMinHeight]=\"'24px'\"\n *clrIfOpen\n >\n @if (searchRequest) {\n <clr-location-bar-search\n #locationBarSearch\n [clrSearchRequest]=\"searchRequest\"\n (searchPerformed)=\"onSearch($event)\"\n ></clr-location-bar-search>\n }\n @if (displaySearchResult()) {\n @if (searchResultItems.length !== 0) {\n @for (searchResultItem of searchResultItems; track searchResultItem; let index = $index) {\n <button\n type=\"button\"\n clrDropdownItem\n class=\"text-truncate\"\n (click)=\"onSearchItemChanged(searchResultItem)\"\n [attr.data-testid]=\"'location-bar-search-result-' + index\"\n >\n <ng-container\n *ngTemplateOutlet=\"searchRequest?.searchResultItemRef; context: { $implicit: searchResultItem }\"\n ></ng-container>\n </button>\n }\n } @else {\n <span class=\"locationbar-no-result-text\" data-testid=\"location-bar-no-results-text\">\n {{ searchRequest?.noResultsText ?? 'No search result found.' }}\n </span>\n }\n } @else {\n @for (item of selectableChilds; track item) {\n <button\n type=\"button\"\n clrDropdownItem\n class=\"text-truncate\"\n [class.locationbar-selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n (click)=\"selectNode(item)\"\n title=\"{{ item.label }}\"\n [attr.data-testid]=\"'location-bar-child-' + item.label\"\n >\n {{ item.label }}\n </button>\n }\n }\n </clr-dropdown-menu>\n </clr-dropdown>\n } @else {\n @if (parentNode.getSelectedChild()) {\n @if (parentNode.getSelectedChild().selectable) {\n <button\n class=\"btn btn-link btn-sm locationbar-btn\"\n (click)=\"selectNode(parentNode.getSelectedChild())\"\n [class.locationbar-last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n title=\"{{ parentNode.getSelectedChild().label }}\"\n [attr.data-testid]=\"'location-bar-selected-button-' + parentNode.getSelectedChild().label\"\n >\n {{ parentNode.getSelectedChild().label }}\n </button>\n } @else {\n <span\n class=\"locationbar-unselectable-node text-truncate\"\n [class.locationbar-last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n title=\"{{ parentNode.getSelectedChild().label }}\"\n [attr.data-testid]=\"'location-bar-unselectable-node-' + parentNode.getSelectedChild().label\"\n >\n {{ parentNode.getSelectedChild().label }}\n </span>\n }\n }\n }\n @if (parentNode.getSelectedChild() && parentNode.getChildren().length > 0) {\n <clr-location-bar-node\n [parentNode]=\"parentNode.getSelectedChild()\"\n [clrSearchRequest]=\"searchRequest\"\n [clrSearchResultItems]=\"searchResultItems\"\n (selectionChanged)=\"onSelectionChanged($event)\"\n (searchItemChanged)=\"onSearchItemChanged(null)\"\n >\n <span data-testid=\"location-bar-separator\">/</span>\n </clr-location-bar-node>\n }\n}\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode", "clrSearchResultItems", "clrSearchRequest"], outputs: ["selectionChanged", "searchItemChanged"] }, { kind: "component", type: LocationBarSearchComponent, selector: "clr-location-bar-search", inputs: ["clrSearchRequest"], outputs: ["searchPerformed"] }] }); }
|
|
12703
12773
|
}
|
|
12704
12774
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LocationBarNodeComponent, decorators: [{
|
|
12705
12775
|
type: Component,
|
|
12706
|
-
args: [{ selector: 'clr-location-bar-node', host: { '[class.location-bar-node]': 'true' }, standalone: false, template: "@if (parentNode) {
|
|
12776
|
+
args: [{ selector: 'clr-location-bar-node', host: { '[class.location-bar-node]': 'true' }, standalone: false, template: "@if (parentNode) {\n @if (parentNode.getChildren()?.length > 0) {\n <ng-content></ng-content>\n }\n @if ((selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1) {\n <clr-dropdown data-testid=\"location-bar-dropdown\">\n <button\n class=\"btn btn-link btn-sm\"\n (blur)=\"focus = false\"\n (focus)=\"focus = true\"\n (click)=\"resetSearch()\"\n clrDropdownTrigger\n data-testid=\"location-bar-dropdown-trigger\"\n >\n @if (parentNode.getSelectedChild(); as node) {\n <span\n (click)=\"resetSearch()\"\n class=\"text-truncate\"\n [class.locationbar-last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n title=\"{{ node.label }}\"\n [attr.data-testid]=\"'location-bar-selected-node-' + node.label\"\n >\n {{ node.label }}\n </span>\n <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n } @else {\n <cds-icon\n class=\"locationbar-unselected\"\n size=\"18\"\n [solid]=\"focus\"\n shape=\"tree-view\"\n data-testid=\"location-bar-unselected-icon\"\n ></cds-icon\n > ...\n }\n </button>\n <clr-dropdown-menu\n class=\"locationbar-clr-dropdown-menu\"\n [clrPosition]=\"'bottom-left'\"\n [clrDropdownMenuItemMinHeight]=\"'24px'\"\n *clrIfOpen\n >\n @if (searchRequest) {\n <clr-location-bar-search\n #locationBarSearch\n [clrSearchRequest]=\"searchRequest\"\n (searchPerformed)=\"onSearch($event)\"\n ></clr-location-bar-search>\n }\n @if (displaySearchResult()) {\n @if (searchResultItems.length !== 0) {\n @for (searchResultItem of searchResultItems; track searchResultItem; let index = $index) {\n <button\n type=\"button\"\n clrDropdownItem\n class=\"text-truncate\"\n (click)=\"onSearchItemChanged(searchResultItem)\"\n [attr.data-testid]=\"'location-bar-search-result-' + index\"\n >\n <ng-container\n *ngTemplateOutlet=\"searchRequest?.searchResultItemRef; context: { $implicit: searchResultItem }\"\n ></ng-container>\n </button>\n }\n } @else {\n <span class=\"locationbar-no-result-text\" data-testid=\"location-bar-no-results-text\">\n {{ searchRequest?.noResultsText ?? 'No search result found.' }}\n </span>\n }\n } @else {\n @for (item of selectableChilds; track item) {\n <button\n type=\"button\"\n clrDropdownItem\n class=\"text-truncate\"\n [class.locationbar-selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n (click)=\"selectNode(item)\"\n title=\"{{ item.label }}\"\n [attr.data-testid]=\"'location-bar-child-' + item.label\"\n >\n {{ item.label }}\n </button>\n }\n }\n </clr-dropdown-menu>\n </clr-dropdown>\n } @else {\n @if (parentNode.getSelectedChild()) {\n @if (parentNode.getSelectedChild().selectable) {\n <button\n class=\"btn btn-link btn-sm locationbar-btn\"\n (click)=\"selectNode(parentNode.getSelectedChild())\"\n [class.locationbar-last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n title=\"{{ parentNode.getSelectedChild().label }}\"\n [attr.data-testid]=\"'location-bar-selected-button-' + parentNode.getSelectedChild().label\"\n >\n {{ parentNode.getSelectedChild().label }}\n </button>\n } @else {\n <span\n class=\"locationbar-unselectable-node text-truncate\"\n [class.locationbar-last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n title=\"{{ parentNode.getSelectedChild().label }}\"\n [attr.data-testid]=\"'location-bar-unselectable-node-' + parentNode.getSelectedChild().label\"\n >\n {{ parentNode.getSelectedChild().label }}\n </span>\n }\n }\n }\n @if (parentNode.getSelectedChild() && parentNode.getChildren().length > 0) {\n <clr-location-bar-node\n [parentNode]=\"parentNode.getSelectedChild()\"\n [clrSearchRequest]=\"searchRequest\"\n [clrSearchResultItems]=\"searchResultItems\"\n (selectionChanged)=\"onSelectionChanged($event)\"\n (searchItemChanged)=\"onSearchItemChanged(null)\"\n >\n <span data-testid=\"location-bar-separator\">/</span>\n </clr-location-bar-node>\n }\n}\n" }]
|
|
12707
12777
|
}], ctorParameters: () => [{ type: LocationBarContentProvider, decorators: [{
|
|
12708
12778
|
type: Inject,
|
|
12709
12779
|
args: [CONTENT_PROVIDER]
|
|
@@ -12753,11 +12823,11 @@ class LocationBarComponent {
|
|
|
12753
12823
|
this.selectionChanged.emit(selection);
|
|
12754
12824
|
}
|
|
12755
12825
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LocationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12756
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: LocationBarComponent, isStandalone: false, selector: "clr-location-bar", inputs: { iconShape: ["clrIconShape", "iconShape"], iconTitle: ["clrIconTitle", "iconTitle"], searchRequest: ["clrSearchRequest", "searchRequest"], searchResultItems: ["clrSearchResultItems", "searchResultItems"], roots: ["clrRoots", "roots"] }, outputs: { selectionChanged: "clrSelectionChanged", searchItemChanged: "clrSearchItemChanged" }, usesOnChanges: true, ngImport: i0, template: "@if (iconShape) {\n<cds-icon [shape]=\"iconShape\" [title]=\"iconTitle\"></cds-icon>\n}\n<clr-location-bar-node\n (selectionChanged)=\"onSelectionChanged($event)\"\n (searchItemChanged)=\"searchItemChanged.emit($event)\"\n [parentNode]=\"root$ | async\"\n [clrSearchRequest]=\"searchRequest\"\n [clrSearchResultItems]=\"searchResultItems\"\n>\n</clr-location-bar-node>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode", "clrSearchResultItems", "clrSearchRequest"], outputs: ["selectionChanged", "searchItemChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
12826
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: LocationBarComponent, isStandalone: false, selector: "clr-location-bar", inputs: { iconShape: ["clrIconShape", "iconShape"], iconTitle: ["clrIconTitle", "iconTitle"], searchRequest: ["clrSearchRequest", "searchRequest"], searchResultItems: ["clrSearchResultItems", "searchResultItems"], roots: ["clrRoots", "roots"] }, outputs: { selectionChanged: "clrSelectionChanged", searchItemChanged: "clrSearchItemChanged" }, usesOnChanges: true, ngImport: i0, template: "@if (iconShape) {\n<cds-icon [shape]=\"iconShape\" [title]=\"iconTitle\" data-testid=\"location-bar-icon\"></cds-icon>\n}\n<clr-location-bar-node\n (selectionChanged)=\"onSelectionChanged($event)\"\n (searchItemChanged)=\"searchItemChanged.emit($event)\"\n [parentNode]=\"root$ | async\"\n [clrSearchRequest]=\"searchRequest\"\n [clrSearchResultItems]=\"searchResultItems\"\n>\n</clr-location-bar-node>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode", "clrSearchResultItems", "clrSearchRequest"], outputs: ["selectionChanged", "searchItemChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
12757
12827
|
}
|
|
12758
12828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LocationBarComponent, decorators: [{
|
|
12759
12829
|
type: Component,
|
|
12760
|
-
args: [{ selector: 'clr-location-bar', standalone: false, template: "@if (iconShape) {\n<cds-icon [shape]=\"iconShape\" [title]=\"iconTitle\"></cds-icon>\n}\n<clr-location-bar-node\n (selectionChanged)=\"onSelectionChanged($event)\"\n (searchItemChanged)=\"searchItemChanged.emit($event)\"\n [parentNode]=\"root$ | async\"\n [clrSearchRequest]=\"searchRequest\"\n [clrSearchResultItems]=\"searchResultItems\"\n>\n</clr-location-bar-node>\n" }]
|
|
12830
|
+
args: [{ selector: 'clr-location-bar', standalone: false, template: "@if (iconShape) {\n<cds-icon [shape]=\"iconShape\" [title]=\"iconTitle\" data-testid=\"location-bar-icon\"></cds-icon>\n}\n<clr-location-bar-node\n (selectionChanged)=\"onSelectionChanged($event)\"\n (searchItemChanged)=\"searchItemChanged.emit($event)\"\n [parentNode]=\"root$ | async\"\n [clrSearchRequest]=\"searchRequest\"\n [clrSearchResultItems]=\"searchResultItems\"\n>\n</clr-location-bar-node>\n" }]
|
|
12761
12831
|
}], propDecorators: { iconShape: [{
|
|
12762
12832
|
type: Input,
|
|
12763
12833
|
args: ['clrIconShape']
|
|
@@ -13565,11 +13635,11 @@ class ClrEnumFilterComponent {
|
|
|
13565
13635
|
return value ? { value: value, displayValue: value } : { value: '', displayValue: this.emptyValue };
|
|
13566
13636
|
}
|
|
13567
13637
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrEnumFilterComponent, deps: [{ token: i1$2.ClrDatagridFilter }, { token: i1$2.ClrDatagrid }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13568
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrEnumFilterComponent, isStandalone: false, selector: "clr-enum-filter", inputs: { property: ["clrProperty", "property"], setEmptyValuesTranslation: ["clrEmptyValuesTranslation", "setEmptyValuesTranslation"], value: ["clrFilterValues", "value"], clrPossibleValues: "clrPossibleValues" }, outputs: { clrFilterValuesChange: "clrFilterValuesChange" }, ngImport: i0, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilters()\">\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<clr-checkbox-container class=\"filter-selection\">\n @for (possibleValue of possibleValues; track possibleValue) {\n
|
|
13638
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrEnumFilterComponent, isStandalone: false, selector: "clr-enum-filter", inputs: { property: ["clrProperty", "property"], setEmptyValuesTranslation: ["clrEmptyValuesTranslation", "setEmptyValuesTranslation"], value: ["clrFilterValues", "value"], clrPossibleValues: "clrPossibleValues" }, outputs: { clrFilterValuesChange: "clrFilterValuesChange" }, ngImport: i0, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilters()\" data-testid=\"enum-filter-clear-button\">\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<clr-checkbox-container class=\"filter-selection\">\n @for (possibleValue of possibleValues; track possibleValue) {\n <clr-checkbox-wrapper>\n <input\n type=\"checkbox\"\n clrCheckbox\n value=\"{{ possibleValue.displayValue ?? possibleValue }}\"\n name=\"possibleValue\"\n [ngModel]=\"containsFilterValue(filteredValues, possibleValue)\"\n (ngModelChange)=\"onChange(possibleValue, $event)\"\n [attr.data-testid]=\"'enum-filter-option-' + possibleValue.value\"\n />\n <label [attr.data-testid]=\"'enum-filter-option-label-' + possibleValue.value\">\n {{ possibleValue.displayValue ?? possibleValue }}\n </label>\n </clr-checkbox-wrapper>\n }\n</clr-checkbox-container>\n", styles: [".filter-selection{display:block;max-height:calc(100dvh - 4rem);overflow-y:auto}.btn-trash{position:absolute;top:15px;right:40px;padding:0}\n"], dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i4.ClrCheckboxContainer, selector: "clr-checkbox-container,clr-toggle-container", inputs: ["clrInline"] }, { kind: "component", type: i4.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
13569
13639
|
}
|
|
13570
13640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrEnumFilterComponent, decorators: [{
|
|
13571
13641
|
type: Component,
|
|
13572
|
-
args: [{ selector: 'clr-enum-filter', standalone: false, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilters()\">\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<clr-checkbox-container class=\"filter-selection\">\n @for (possibleValue of possibleValues; track possibleValue) {\n
|
|
13642
|
+
args: [{ selector: 'clr-enum-filter', standalone: false, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilters()\" data-testid=\"enum-filter-clear-button\">\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<clr-checkbox-container class=\"filter-selection\">\n @for (possibleValue of possibleValues; track possibleValue) {\n <clr-checkbox-wrapper>\n <input\n type=\"checkbox\"\n clrCheckbox\n value=\"{{ possibleValue.displayValue ?? possibleValue }}\"\n name=\"possibleValue\"\n [ngModel]=\"containsFilterValue(filteredValues, possibleValue)\"\n (ngModelChange)=\"onChange(possibleValue, $event)\"\n [attr.data-testid]=\"'enum-filter-option-' + possibleValue.value\"\n />\n <label [attr.data-testid]=\"'enum-filter-option-label-' + possibleValue.value\">\n {{ possibleValue.displayValue ?? possibleValue }}\n </label>\n </clr-checkbox-wrapper>\n }\n</clr-checkbox-container>\n", styles: [".filter-selection{display:block;max-height:calc(100dvh - 4rem);overflow-y:auto}.btn-trash{position:absolute;top:15px;right:40px;padding:0}\n"] }]
|
|
13573
13643
|
}], ctorParameters: () => [{ type: i1$2.ClrDatagridFilter }, { type: i1$2.ClrDatagrid }], propDecorators: { property: [{
|
|
13574
13644
|
type: Input,
|
|
13575
13645
|
args: ['clrProperty']
|
|
@@ -13809,11 +13879,11 @@ class ClrDateFilterComponent {
|
|
|
13809
13879
|
}
|
|
13810
13880
|
}
|
|
13811
13881
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrDateFilterComponent, deps: [{ token: i1$2.ClrCommonStringsService }, { token: i1$2.ClrDatagridFilter }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13812
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrDateFilterComponent, isStandalone: false, selector: "clr-date-filter", inputs: { timeActive: "timeActive", dateValidationError: "dateValidationError", property: ["clrProperty", "property"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, ngImport: i0, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilter()\">\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n@if (!timeActive) {\n<clr-date-container class=\"filter-selection\">\n <input\n #input_from\n type=\"date\"\n name=\"from\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"from\"\n [placeholder]=\"minPlaceholderValue\"\n [attr.aria-label]=\"minPlaceholderValue\"\n />\n</clr-date-container>\n<clr-date-container class=\"filter-selection\">\n <input\n type=\"date\"\n name=\"to\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"to\"\n [placeholder]=\"maxPlaceholderValue\"\n [attr.aria-label]=\"maxPlaceholderValue\"\n />\n</clr-date-container>\n@if (valError) {\n<clr-control-error
|
|
13882
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrDateFilterComponent, isStandalone: false, selector: "clr-date-filter", inputs: { timeActive: "timeActive", dateValidationError: "dateValidationError", property: ["clrProperty", "property"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, ngImport: i0, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilter()\" data-testid=\"date-filter-clear-button\">\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n@if (!timeActive) {\n<clr-date-container class=\"filter-selection\">\n <input\n #input_from\n type=\"date\"\n name=\"from\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"from\"\n [placeholder]=\"minPlaceholderValue\"\n [attr.aria-label]=\"minPlaceholderValue\"\n data-testid=\"date-filter-from-date-input\"\n />\n</clr-date-container>\n<clr-date-container class=\"filter-selection\">\n <input\n type=\"date\"\n name=\"to\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"to\"\n [placeholder]=\"maxPlaceholderValue\"\n [attr.aria-label]=\"maxPlaceholderValue\"\n data-testid=\"date-filter-to-date-input\"\n />\n</clr-date-container>\n@if (valError) {\n<clr-control-error data-testid=\"date-filter-validation-error\">\n {{ dateValidationError || 'Date \"from\" must be before date \"to\"!' }}\n</clr-control-error>\n} } @if (timeActive) {\n<clr-date-time-container class=\"filter-selection\">\n <clr-date-container class=\"time-filter-active\">\n <input\n #input_from\n type=\"date\"\n name=\"from\"\n class=\"datagrid-date-filter-input time-filter-active-input\"\n [(clrDate)]=\"from\"\n [placeholder]=\"minPlaceholderValue\"\n [attr.aria-label]=\"minPlaceholderValue\"\n data-testid=\"date-filter-from-date-input\"\n />\n </clr-date-container>\n <input\n clrTime\n type=\"time\"\n class=\"time-filter-input\"\n step=\"60\"\n [(ngModel)]=\"fromTime\"\n data-testid=\"date-filter-from-time-input\"\n />\n</clr-date-time-container>\n<clr-date-time-container>\n <clr-date-container class=\"time-filter-active\">\n <input\n type=\"date\"\n name=\"to\"\n class=\"datagrid-date-filter-input time-filter-active-input\"\n [(clrDate)]=\"to\"\n [placeholder]=\"maxPlaceholderValue\"\n [attr.aria-label]=\"maxPlaceholderValue\"\n data-testid=\"date-filter-to-date-input\"\n />\n </clr-date-container>\n <input\n clrTime\n type=\"time\"\n class=\"time-filter-input\"\n step=\"60\"\n [(ngModel)]=\"toTime\"\n data-testid=\"date-filter-to-time-input\"\n />\n</clr-date-time-container>\n@if (valError) {\n<clr-control-error data-testid=\"date-filter-validation-error\">\n {{ dateValidationError || 'Date \"from\" must be before date \"to\"!' }}\n</clr-control-error>\n} }\n", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}.time-filter-active{width:12rem;margin-top:.5rem}.time-filter-active-input,.time-filter-input{width:4.5rem!important}.filter-selection{margin-top:.5rem}\n"], dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i1$1.ClrControlError, selector: "clr-control-error" }, { kind: "directive", type: i4$1.ClrDateInput, selector: "[clrDate]", inputs: ["clrDate", "min", "max"], outputs: ["clrDateChange"] }, { kind: "component", type: i4$1.ClrDateContainer, selector: "clr-date-container, clr-date-range-container", inputs: ["clrFirstDayOfWeek", "showActionButtons", "clrPosition", "rangeOptions", "min", "max"] }, { kind: "directive", type: i4$1.ClrDateInputValidator, selector: "[clrDate], [clrStartDate], [clrEndDate]" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrDateTimeContainer, selector: "clr-date-time-container" }, { kind: "directive", type: ClrTimeInput, selector: "[clrTime]" }] }); }
|
|
13813
13883
|
}
|
|
13814
13884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrDateFilterComponent, decorators: [{
|
|
13815
13885
|
type: Component,
|
|
13816
|
-
args: [{ selector: 'clr-date-filter', standalone: false, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilter()\">\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n@if (!timeActive) {\n<clr-date-container class=\"filter-selection\">\n <input\n #input_from\n type=\"date\"\n name=\"from\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"from\"\n [placeholder]=\"minPlaceholderValue\"\n [attr.aria-label]=\"minPlaceholderValue\"\n />\n</clr-date-container>\n<clr-date-container class=\"filter-selection\">\n <input\n type=\"date\"\n name=\"to\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"to\"\n [placeholder]=\"maxPlaceholderValue\"\n [attr.aria-label]=\"maxPlaceholderValue\"\n />\n</clr-date-container>\n@if (valError) {\n<clr-control-error
|
|
13886
|
+
args: [{ selector: 'clr-date-filter', standalone: false, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilter()\" data-testid=\"date-filter-clear-button\">\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n@if (!timeActive) {\n<clr-date-container class=\"filter-selection\">\n <input\n #input_from\n type=\"date\"\n name=\"from\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"from\"\n [placeholder]=\"minPlaceholderValue\"\n [attr.aria-label]=\"minPlaceholderValue\"\n data-testid=\"date-filter-from-date-input\"\n />\n</clr-date-container>\n<clr-date-container class=\"filter-selection\">\n <input\n type=\"date\"\n name=\"to\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"to\"\n [placeholder]=\"maxPlaceholderValue\"\n [attr.aria-label]=\"maxPlaceholderValue\"\n data-testid=\"date-filter-to-date-input\"\n />\n</clr-date-container>\n@if (valError) {\n<clr-control-error data-testid=\"date-filter-validation-error\">\n {{ dateValidationError || 'Date \"from\" must be before date \"to\"!' }}\n</clr-control-error>\n} } @if (timeActive) {\n<clr-date-time-container class=\"filter-selection\">\n <clr-date-container class=\"time-filter-active\">\n <input\n #input_from\n type=\"date\"\n name=\"from\"\n class=\"datagrid-date-filter-input time-filter-active-input\"\n [(clrDate)]=\"from\"\n [placeholder]=\"minPlaceholderValue\"\n [attr.aria-label]=\"minPlaceholderValue\"\n data-testid=\"date-filter-from-date-input\"\n />\n </clr-date-container>\n <input\n clrTime\n type=\"time\"\n class=\"time-filter-input\"\n step=\"60\"\n [(ngModel)]=\"fromTime\"\n data-testid=\"date-filter-from-time-input\"\n />\n</clr-date-time-container>\n<clr-date-time-container>\n <clr-date-container class=\"time-filter-active\">\n <input\n type=\"date\"\n name=\"to\"\n class=\"datagrid-date-filter-input time-filter-active-input\"\n [(clrDate)]=\"to\"\n [placeholder]=\"maxPlaceholderValue\"\n [attr.aria-label]=\"maxPlaceholderValue\"\n data-testid=\"date-filter-to-date-input\"\n />\n </clr-date-container>\n <input\n clrTime\n type=\"time\"\n class=\"time-filter-input\"\n step=\"60\"\n [(ngModel)]=\"toTime\"\n data-testid=\"date-filter-to-time-input\"\n />\n</clr-date-time-container>\n@if (valError) {\n<clr-control-error data-testid=\"date-filter-validation-error\">\n {{ dateValidationError || 'Date \"from\" must be before date \"to\"!' }}\n</clr-control-error>\n} }\n", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}.time-filter-active{width:12rem;margin-top:.5rem}.time-filter-active-input,.time-filter-input{width:4.5rem!important}.filter-selection{margin-top:.5rem}\n"] }]
|
|
13817
13887
|
}], ctorParameters: () => [{ type: i1$2.ClrCommonStringsService }, { type: i1$2.ClrDatagridFilter }], propDecorators: { timeActive: [{
|
|
13818
13888
|
type: Input
|
|
13819
13889
|
}], dateValidationError: [{
|
|
@@ -14030,11 +14100,11 @@ class ClrDatepickerComponent {
|
|
|
14030
14100
|
this.inputElm.nativeElement.focus();
|
|
14031
14101
|
}
|
|
14032
14102
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14033
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrDatepickerComponent, isStandalone: false, selector: "clr-datepicker", inputs: { value: "value", label: "label", minDate: "minDate", maxDate: "maxDate", timeSelection: "timeSelection" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputElm", first: true, predicate: ["inputElm"], descendants: true }], ngImport: i0, template: "<clr-date-container>\n <label>{{ this.label }}</label>\n <input
|
|
14103
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrDatepickerComponent, isStandalone: false, selector: "clr-datepicker", inputs: { value: "value", label: "label", minDate: "minDate", maxDate: "maxDate", timeSelection: "timeSelection" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputElm", first: true, predicate: ["inputElm"], descendants: true }], ngImport: i0, template: "<clr-date-container>\n <label data-testid=\"datepicker-label\">{{ this.label }}</label>\n <input\n #inputElm\n clrDate\n [(clrDate)]=\"this.date\"\n [min]=\"this.minDateAttr\"\n [max]=\"this.maxDateAttr\"\n data-testid=\"datepicker-input\"\n />\n</clr-date-container>\n", dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i4$1.ClrDateInput, selector: "[clrDate]", inputs: ["clrDate", "min", "max"], outputs: ["clrDateChange"] }, { kind: "component", type: i4$1.ClrDateContainer, selector: "clr-date-container, clr-date-range-container", inputs: ["clrFirstDayOfWeek", "showActionButtons", "clrPosition", "rangeOptions", "min", "max"] }, { kind: "directive", type: i4$1.ClrDateInputValidator, selector: "[clrDate], [clrStartDate], [clrEndDate]" }] }); }
|
|
14034
14104
|
}
|
|
14035
14105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrDatepickerComponent, decorators: [{
|
|
14036
14106
|
type: Component,
|
|
14037
|
-
args: [{ selector: 'clr-datepicker', standalone: false, template: "<clr-date-container>\n <label>{{ this.label }}</label>\n <input
|
|
14107
|
+
args: [{ selector: 'clr-datepicker', standalone: false, template: "<clr-date-container>\n <label data-testid=\"datepicker-label\">{{ this.label }}</label>\n <input\n #inputElm\n clrDate\n [(clrDate)]=\"this.date\"\n [min]=\"this.minDateAttr\"\n [max]=\"this.maxDateAttr\"\n data-testid=\"datepicker-input\"\n />\n</clr-date-container>\n" }]
|
|
14038
14108
|
}], propDecorators: { value: [{
|
|
14039
14109
|
type: Input
|
|
14040
14110
|
}], label: [{
|
|
@@ -14975,11 +15045,11 @@ class ClrTimepickerComponent {
|
|
|
14975
15045
|
this.inputElm.nativeElement.focus();
|
|
14976
15046
|
}
|
|
14977
15047
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14978
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrTimepickerComponent, isStandalone: false, selector: "clr-timepicker", inputs: { value: "value", activateSeconds: "activateSeconds" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputElm", first: true, predicate: ["inputElm"], descendants: true }], ngImport: i0, template: "<clr-input-container class=\"clr-input-time\">\n <label class=\"clr-control-label\"> </label>\n <input
|
|
15048
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrTimepickerComponent, isStandalone: false, selector: "clr-timepicker", inputs: { value: "value", activateSeconds: "activateSeconds" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputElm", first: true, predicate: ["inputElm"], descendants: true }], ngImport: i0, template: "<clr-input-container class=\"clr-input-time\">\n <label class=\"clr-control-label\"> </label>\n <input\n clrInput\n #inputElm\n [(ngModel)]=\"this.time\"\n type=\"time\"\n step=\"{{ activateSeconds ? 1 : 60 }}\"\n data-testid=\"timepicker-input\"\n />\n</clr-input-container>\n", styles: [".clr-input-time{margin-top:0}\n"], dependencies: [{ kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3$2.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3$2.ClrInputContainer, selector: "clr-input-container" }] }); }
|
|
14979
15049
|
}
|
|
14980
15050
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrTimepickerComponent, decorators: [{
|
|
14981
15051
|
type: Component,
|
|
14982
|
-
args: [{ selector: 'clr-timepicker', standalone: false, template: "<clr-input-container class=\"clr-input-time\">\n <label class=\"clr-control-label\"> </label>\n <input
|
|
15052
|
+
args: [{ selector: 'clr-timepicker', standalone: false, template: "<clr-input-container class=\"clr-input-time\">\n <label class=\"clr-control-label\"> </label>\n <input\n clrInput\n #inputElm\n [(ngModel)]=\"this.time\"\n type=\"time\"\n step=\"{{ activateSeconds ? 1 : 60 }}\"\n data-testid=\"timepicker-input\"\n />\n</clr-input-container>\n", styles: [".clr-input-time{margin-top:0}\n"] }]
|
|
14983
15053
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
14984
15054
|
type: Input
|
|
14985
15055
|
}], activateSeconds: [{
|
|
@@ -15213,11 +15283,11 @@ class ClrDaterangepickerContainerComponent extends ClrAbstractContainer {
|
|
|
15213
15283
|
});
|
|
15214
15284
|
}
|
|
15215
15285
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrDaterangepickerContainerComponent, deps: [{ token: i1$2.ClrPopoverService }, { token: i1$2.ClrCommonStringsService }, { token: i1$2.ClrLayout, optional: true }, { token: DaterangeControlStateService }, { token: DaterangeService }, { token: DaterangeParsingService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15216
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrDaterangepickerContainerComponent, isStandalone: false, selector: "clr-daterangepicker-container", inputs: { presets: "presets", presetsDateTime: "presetsDateTime", timeSelection: "timeSelection", activateSeconds: "activateSeconds", popoverPosition: ["clrPosition", "popoverPosition"], labelFrom: "labelFrom", labelTo: "labelTo" }, host: { properties: { "class": "this.classes" } }, providers: [ClrPopoverService, DaterangeControlStateService, DaterangeService, ControlIdService], queries: [{ propertyName: "daterangepickerDirective", first: true, predicate: ClrDaterangepickerDirective, descendants: true }], viewQueries: [{ propertyName: "datepickerComponents", predicate: ClrDatepickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n@if (!this.labelComponent && this.addLayoutGrid) {\n<label></label>\n}\n<div\n [class.clr-col-12]=\"this.addLayoutGrid\"\n [class.clr-col-md-10]=\"this.addLayoutGrid\"\n [class.clr-error]=\"this.isInvalid\"\n class=\"clr-control-container\"\n>\n <div class=\"clr-input-wrapper\">\n <div\n [class.clr-focus]=\"this.focus\"\n class=\"custom-input-group clr-input-group\"\n [ngClass]=\"_timeSelection ? 'custom-input-group-time' : 'custom-input-group-date'\"\n >\n <ng-content select=\"[clrDaterangepicker]\"></ng-content>\n <button\n [attr.aria-label]=\"this.friendlyDaterange\"\n [disabled]=\"this.disabled\"\n [title]=\"this.friendlyDaterange\"\n class=\"clr-input-group-icon-action\"\n clrPopoverOpenCloseButton\n clrPopoverOrigin\n type=\"button\"\n >\n <cds-icon shape=\"calendar\" status=\"info\"></cds-icon>\n </button>\n </div>\n @if (this.isInvalid) {\n <cds-icon aria-hidden=\"true\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" status=\"danger\"></cds-icon>\n } @if (!this.isInvalid) {\n <cds-icon aria-hidden=\"true\" class=\"clr-validate-icon\" shape=\"check-circle\" status=\"success\"></cds-icon>\n }\n </div>\n @if (this.showHelper) {\n <ng-content select=\"clr-control-helper\"></ng-content>\n } @if (this.showInvalid) {\n <ng-content select=\"clr-control-error\"></ng-content>\n } @if (this.showValid) {\n <ng-content select=\"clr-control-success\"></ng-content>\n }\n\n <div\n *clrPopoverContent=\"this.open; at: this.popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n class=\"clr-daterangepicker-container-popup datepicker\"\n >\n <button\n class=\"btn btn-sm btn-link close clr-smart-close-button btn-trash\"\n type=\"button\"\n (click)=\"daterangeService.updateSelectedDaterange(null)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n <button\n [attr.aria-label]=\"this.commonStrings.close\"\n class=\"btn btn-sm btn-link close\"\n clrPopoverCloseButton\n type=\"button\"\n >\n <cds-icon [attr.title]=\"this.commonStrings.close\" aria-hidden=\"true\" shape=\"window-close\"></cds-icon>\n <span class=\"clr-sr-only\">{{ this.commonStrings.close }}</span>\n </button>\n <div class=\"clr-daterangepicker-container-popup-content\">\n <form [clrLayout]=\"'vertical'\" clrForm>\n <div class=\"datetime-container\">\n <clr-datepicker\n (valueChange)=\"this.onDateFromChange($event)\"\n [label]=\"this.labelFrom\"\n [maxDate]=\"this.maxDate\"\n [minDate]=\"this.minDate\"\n [value]=\"this.dateFrom\"\n class=\"clr-datepicker\"\n >\n </clr-datepicker>\n @if (_timeSelection) {\n <clr-timepicker\n class=\"timepicker\"\n (valueChange)=\"this.onTimeFromChange($event)\"\n [value]=\"this.timeFrom\"\n [activateSeconds]=\"_activateSeconds\"\n >\n </clr-timepicker>\n }\n </div>\n <div class=\"datetime-container datetime-container-to\">\n <clr-datepicker\n (valueChange)=\"this.onDateToChange($event)\"\n [label]=\"this.labelTo\"\n [maxDate]=\"this.maxDate\"\n [minDate]=\"this.minDate\"\n [value]=\"this.dateTo\"\n class=\"clr-datepicker\"\n >\n </clr-datepicker>\n @if (_timeSelection) {\n <clr-timepicker\n class=\"timepicker\"\n (valueChange)=\"this.onTimeToChange($event)\"\n [value]=\"this.timeTo\"\n [activateSeconds]=\"_activateSeconds\"\n >\n </clr-timepicker>\n }\n </div>\n </form>\n @if (this.presets?.length > 0) {\n <div class=\"clr-daterangepicker-container-popup-content-presets\">\n @for (preset of this.presets; track preset) {\n <button (click)=\"this.applyPreset(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n {{ preset.text }}\n </button>\n }\n </div>\n } @if (this.presetsDateTime?.length > 0) {\n <div class=\"clr-daterangepicker-container-popup-content-presets\">\n @for (preset of this.presetsDateTime; track preset) {\n <button (click)=\"this.applyPresetTime(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n {{ preset.text }}\n </button>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".clr-input-wrapper>.clr-input-group{max-width:fit-content;padding-right:1.5rem}.clr-input-wrapper>.clr-input-group ::ng-deep>.clr-input{width:100%;padding:0 .3rem}.clr-daterangepicker-container-popup.datepicker{padding:0;width:auto;height:auto;display:block}.clr-daterangepicker-container-popup.datepicker .clr-smart-close-button{min-width:1.2rem;padding:0;position:absolute;right:0;margin:5px}.clr-daterangepicker-container-popup.datepicker .btn-trash{padding-right:25px;margin:5px}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content{padding:1rem;display:flex;flex-direction:row}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-form ::ng-deep clr-datepicker:first-of-type ::ng-deep clr-date-container{margin-top:0}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets{margin-left:.6rem;padding:.3rem}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets .btn{margin-right:0}.datetime-container{display:flex;flex-direction:row;align-items:flex-start}.datetime-container-to{padding-top:1rem}.timepicker{padding-left:1rem}.timepicker clr-input-container{margin-top:.8rem}.custom-input-group{padding-right:0!important}.custom-input-group .clr-input-group-icon-action{margin-left:.5rem}.custom-input-group input{min-width:10rem!important;width:10rem!important}.custom-input-group-time{min-width:17rem!important}.custom-input-group-date{min-width:12rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i1$2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i1$1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i1$1.ClrLayout, selector: "[clrForm][clrLayout]", inputs: ["clrLayout"] }, { kind: "directive", type: i2$3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$3.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "component", type: ClrDatepickerComponent, selector: "clr-datepicker", inputs: ["value", "label", "minDate", "maxDate", "timeSelection"], outputs: ["valueChange"] }, { kind: "component", type: ClrTimepickerComponent, selector: "clr-timepicker", inputs: ["value", "activateSeconds"], outputs: ["valueChange"] }] }); }
|
|
15286
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrDaterangepickerContainerComponent, isStandalone: false, selector: "clr-daterangepicker-container", inputs: { presets: "presets", presetsDateTime: "presetsDateTime", timeSelection: "timeSelection", activateSeconds: "activateSeconds", popoverPosition: ["clrPosition", "popoverPosition"], labelFrom: "labelFrom", labelTo: "labelTo" }, host: { properties: { "class": "this.classes" } }, providers: [ClrPopoverService, DaterangeControlStateService, DaterangeService, ControlIdService], queries: [{ propertyName: "daterangepickerDirective", first: true, predicate: ClrDaterangepickerDirective, descendants: true }], viewQueries: [{ propertyName: "datepickerComponents", predicate: ClrDatepickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n@if (!this.labelComponent && this.addLayoutGrid) {\n <label></label>\n}\n<div\n [class.clr-col-12]=\"this.addLayoutGrid\"\n [class.clr-col-md-10]=\"this.addLayoutGrid\"\n [class.clr-error]=\"this.isInvalid\"\n class=\"clr-control-container\"\n>\n <div class=\"clr-input-wrapper\">\n <div\n [class.clr-focus]=\"this.focus\"\n class=\"custom-input-group clr-input-group\"\n [ngClass]=\"_timeSelection ? 'custom-input-group-time' : 'custom-input-group-date'\"\n >\n <ng-content select=\"[clrDaterangepicker]\"></ng-content>\n <button\n [attr.aria-label]=\"this.friendlyDaterange\"\n [disabled]=\"this.disabled\"\n [title]=\"this.friendlyDaterange\"\n class=\"clr-input-group-icon-action\"\n clrPopoverOpenCloseButton\n clrPopoverOrigin\n type=\"button\"\n data-testid=\"daterangepicker-toggle-button\"\n >\n <cds-icon shape=\"calendar\" status=\"info\"></cds-icon>\n </button>\n </div>\n @if (this.isInvalid) {\n <cds-icon aria-hidden=\"true\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" status=\"danger\"></cds-icon>\n }\n @if (!this.isInvalid) {\n <cds-icon aria-hidden=\"true\" class=\"clr-validate-icon\" shape=\"check-circle\" status=\"success\"></cds-icon>\n }\n </div>\n @if (this.showHelper) {\n <ng-content select=\"clr-control-helper\"></ng-content>\n }\n @if (this.showInvalid) {\n <ng-content select=\"clr-control-error\"></ng-content>\n }\n @if (this.showValid) {\n <ng-content select=\"clr-control-success\"></ng-content>\n }\n\n <div\n *clrPopoverContent=\"this.open; at: this.popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n class=\"clr-daterangepicker-container-popup datepicker\"\n data-testid=\"daterangepicker-popup\"\n >\n <button\n class=\"btn btn-sm btn-link close clr-smart-close-button btn-trash\"\n type=\"button\"\n (click)=\"daterangeService.updateSelectedDaterange(null)\"\n data-testid=\"daterangepicker-clear-button\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n <button\n [attr.aria-label]=\"this.commonStrings.close\"\n class=\"btn btn-sm btn-link close\"\n clrPopoverCloseButton\n type=\"button\"\n data-testid=\"daterangepicker-close-button\"\n >\n <cds-icon [attr.title]=\"this.commonStrings.close\" aria-hidden=\"true\" shape=\"window-close\"></cds-icon>\n <span class=\"clr-sr-only\">{{ this.commonStrings.close }}</span>\n </button>\n <div class=\"clr-daterangepicker-container-popup-content\">\n <form [clrLayout]=\"'vertical'\" clrForm>\n <div class=\"datetime-container\">\n <clr-datepicker\n (valueChange)=\"this.onDateFromChange($event)\"\n [label]=\"this.labelFrom\"\n [maxDate]=\"this.maxDate\"\n [minDate]=\"this.minDate\"\n [value]=\"this.dateFrom\"\n class=\"clr-datepicker\"\n data-testid=\"daterangepicker-date-from\"\n >\n </clr-datepicker>\n @if (_timeSelection) {\n <clr-timepicker\n class=\"timepicker\"\n (valueChange)=\"this.onTimeFromChange($event)\"\n [value]=\"this.timeFrom\"\n [activateSeconds]=\"_activateSeconds\"\n data-testid=\"daterangepicker-time-from\"\n >\n </clr-timepicker>\n }\n </div>\n <div class=\"datetime-container datetime-container-to\">\n <clr-datepicker\n (valueChange)=\"this.onDateToChange($event)\"\n [label]=\"this.labelTo\"\n [maxDate]=\"this.maxDate\"\n [minDate]=\"this.minDate\"\n [value]=\"this.dateTo\"\n class=\"clr-datepicker\"\n data-testid=\"daterangepicker-date-to\"\n >\n </clr-datepicker>\n @if (_timeSelection) {\n <clr-timepicker\n class=\"timepicker\"\n (valueChange)=\"this.onTimeToChange($event)\"\n [value]=\"this.timeTo\"\n [activateSeconds]=\"_activateSeconds\"\n data-testid=\"daterangepicker-time-to\"\n >\n </clr-timepicker>\n }\n </div>\n </form>\n @if (this.presets?.length > 0) {\n <div class=\"clr-daterangepicker-container-popup-content-presets\">\n @for (preset of this.presets; track preset) {\n <button\n (click)=\"this.applyPreset(preset)\"\n class=\"btn btn-outline btn-sm btn-block\"\n type=\"button\"\n [attr.data-testid]=\"'daterangepicker-preset-' + preset.text\"\n >\n {{ preset.text }}\n </button>\n }\n </div>\n }\n @if (this.presetsDateTime?.length > 0) {\n <div class=\"clr-daterangepicker-container-popup-content-presets\">\n @for (preset of this.presetsDateTime; track preset) {\n <button\n (click)=\"this.applyPresetTime(preset)\"\n class=\"btn btn-outline btn-sm btn-block\"\n type=\"button\"\n [attr.data-testid]=\"'daterangepicker-time-preset-' + preset.text\"\n >\n {{ preset.text }}\n </button>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".clr-input-wrapper>.clr-input-group{max-width:fit-content;padding-right:1.5rem}.clr-input-wrapper>.clr-input-group ::ng-deep>.clr-input{width:100%;padding:0 .3rem}.clr-daterangepicker-container-popup.datepicker{padding:0;width:auto;height:auto;display:block}.clr-daterangepicker-container-popup.datepicker .clr-smart-close-button{min-width:1.2rem;padding:0;position:absolute;right:0;margin:5px}.clr-daterangepicker-container-popup.datepicker .btn-trash{padding-right:25px;margin:5px}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content{padding:1rem;display:flex;flex-direction:row}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-form ::ng-deep clr-datepicker:first-of-type ::ng-deep clr-date-container{margin-top:0}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets{margin-left:.6rem;padding:.3rem}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets .btn{margin-right:0}.datetime-container{display:flex;flex-direction:row;align-items:flex-start}.datetime-container-to{padding-top:1rem}.timepicker{padding-left:1rem}.timepicker clr-input-container{margin-top:.8rem}.custom-input-group{padding-right:0!important}.custom-input-group .clr-input-group-icon-action{margin-left:.5rem}.custom-input-group input{min-width:10rem!important;width:10rem!important}.custom-input-group-time{min-width:17rem!important}.custom-input-group-date{min-width:12rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i1$2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i1$1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i1$1.ClrLayout, selector: "[clrForm][clrLayout]", inputs: ["clrLayout"] }, { kind: "directive", type: i2$3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$3.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "component", type: ClrDatepickerComponent, selector: "clr-datepicker", inputs: ["value", "label", "minDate", "maxDate", "timeSelection"], outputs: ["valueChange"] }, { kind: "component", type: ClrTimepickerComponent, selector: "clr-timepicker", inputs: ["value", "activateSeconds"], outputs: ["valueChange"] }] }); }
|
|
15217
15287
|
}
|
|
15218
15288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrDaterangepickerContainerComponent, decorators: [{
|
|
15219
15289
|
type: Component,
|
|
15220
|
-
args: [{ selector: 'clr-daterangepicker-container', providers: [ClrPopoverService, DaterangeControlStateService, DaterangeService, ControlIdService], standalone: false, template: "<ng-content select=\"label\"></ng-content>\n@if (!this.labelComponent && this.addLayoutGrid) {\n<label></label>\n}\n<div\n [class.clr-col-12]=\"this.addLayoutGrid\"\n [class.clr-col-md-10]=\"this.addLayoutGrid\"\n [class.clr-error]=\"this.isInvalid\"\n class=\"clr-control-container\"\n>\n <div class=\"clr-input-wrapper\">\n <div\n [class.clr-focus]=\"this.focus\"\n class=\"custom-input-group clr-input-group\"\n [ngClass]=\"_timeSelection ? 'custom-input-group-time' : 'custom-input-group-date'\"\n >\n <ng-content select=\"[clrDaterangepicker]\"></ng-content>\n <button\n [attr.aria-label]=\"this.friendlyDaterange\"\n [disabled]=\"this.disabled\"\n [title]=\"this.friendlyDaterange\"\n class=\"clr-input-group-icon-action\"\n clrPopoverOpenCloseButton\n clrPopoverOrigin\n type=\"button\"\n >\n <cds-icon shape=\"calendar\" status=\"info\"></cds-icon>\n </button>\n </div>\n @if (this.isInvalid) {\n
|
|
15290
|
+
args: [{ selector: 'clr-daterangepicker-container', providers: [ClrPopoverService, DaterangeControlStateService, DaterangeService, ControlIdService], standalone: false, template: "<ng-content select=\"label\"></ng-content>\n@if (!this.labelComponent && this.addLayoutGrid) {\n <label></label>\n}\n<div\n [class.clr-col-12]=\"this.addLayoutGrid\"\n [class.clr-col-md-10]=\"this.addLayoutGrid\"\n [class.clr-error]=\"this.isInvalid\"\n class=\"clr-control-container\"\n>\n <div class=\"clr-input-wrapper\">\n <div\n [class.clr-focus]=\"this.focus\"\n class=\"custom-input-group clr-input-group\"\n [ngClass]=\"_timeSelection ? 'custom-input-group-time' : 'custom-input-group-date'\"\n >\n <ng-content select=\"[clrDaterangepicker]\"></ng-content>\n <button\n [attr.aria-label]=\"this.friendlyDaterange\"\n [disabled]=\"this.disabled\"\n [title]=\"this.friendlyDaterange\"\n class=\"clr-input-group-icon-action\"\n clrPopoverOpenCloseButton\n clrPopoverOrigin\n type=\"button\"\n data-testid=\"daterangepicker-toggle-button\"\n >\n <cds-icon shape=\"calendar\" status=\"info\"></cds-icon>\n </button>\n </div>\n @if (this.isInvalid) {\n <cds-icon aria-hidden=\"true\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" status=\"danger\"></cds-icon>\n }\n @if (!this.isInvalid) {\n <cds-icon aria-hidden=\"true\" class=\"clr-validate-icon\" shape=\"check-circle\" status=\"success\"></cds-icon>\n }\n </div>\n @if (this.showHelper) {\n <ng-content select=\"clr-control-helper\"></ng-content>\n }\n @if (this.showInvalid) {\n <ng-content select=\"clr-control-error\"></ng-content>\n }\n @if (this.showValid) {\n <ng-content select=\"clr-control-success\"></ng-content>\n }\n\n <div\n *clrPopoverContent=\"this.open; at: this.popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n class=\"clr-daterangepicker-container-popup datepicker\"\n data-testid=\"daterangepicker-popup\"\n >\n <button\n class=\"btn btn-sm btn-link close clr-smart-close-button btn-trash\"\n type=\"button\"\n (click)=\"daterangeService.updateSelectedDaterange(null)\"\n data-testid=\"daterangepicker-clear-button\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n <button\n [attr.aria-label]=\"this.commonStrings.close\"\n class=\"btn btn-sm btn-link close\"\n clrPopoverCloseButton\n type=\"button\"\n data-testid=\"daterangepicker-close-button\"\n >\n <cds-icon [attr.title]=\"this.commonStrings.close\" aria-hidden=\"true\" shape=\"window-close\"></cds-icon>\n <span class=\"clr-sr-only\">{{ this.commonStrings.close }}</span>\n </button>\n <div class=\"clr-daterangepicker-container-popup-content\">\n <form [clrLayout]=\"'vertical'\" clrForm>\n <div class=\"datetime-container\">\n <clr-datepicker\n (valueChange)=\"this.onDateFromChange($event)\"\n [label]=\"this.labelFrom\"\n [maxDate]=\"this.maxDate\"\n [minDate]=\"this.minDate\"\n [value]=\"this.dateFrom\"\n class=\"clr-datepicker\"\n data-testid=\"daterangepicker-date-from\"\n >\n </clr-datepicker>\n @if (_timeSelection) {\n <clr-timepicker\n class=\"timepicker\"\n (valueChange)=\"this.onTimeFromChange($event)\"\n [value]=\"this.timeFrom\"\n [activateSeconds]=\"_activateSeconds\"\n data-testid=\"daterangepicker-time-from\"\n >\n </clr-timepicker>\n }\n </div>\n <div class=\"datetime-container datetime-container-to\">\n <clr-datepicker\n (valueChange)=\"this.onDateToChange($event)\"\n [label]=\"this.labelTo\"\n [maxDate]=\"this.maxDate\"\n [minDate]=\"this.minDate\"\n [value]=\"this.dateTo\"\n class=\"clr-datepicker\"\n data-testid=\"daterangepicker-date-to\"\n >\n </clr-datepicker>\n @if (_timeSelection) {\n <clr-timepicker\n class=\"timepicker\"\n (valueChange)=\"this.onTimeToChange($event)\"\n [value]=\"this.timeTo\"\n [activateSeconds]=\"_activateSeconds\"\n data-testid=\"daterangepicker-time-to\"\n >\n </clr-timepicker>\n }\n </div>\n </form>\n @if (this.presets?.length > 0) {\n <div class=\"clr-daterangepicker-container-popup-content-presets\">\n @for (preset of this.presets; track preset) {\n <button\n (click)=\"this.applyPreset(preset)\"\n class=\"btn btn-outline btn-sm btn-block\"\n type=\"button\"\n [attr.data-testid]=\"'daterangepicker-preset-' + preset.text\"\n >\n {{ preset.text }}\n </button>\n }\n </div>\n }\n @if (this.presetsDateTime?.length > 0) {\n <div class=\"clr-daterangepicker-container-popup-content-presets\">\n @for (preset of this.presetsDateTime; track preset) {\n <button\n (click)=\"this.applyPresetTime(preset)\"\n class=\"btn btn-outline btn-sm btn-block\"\n type=\"button\"\n [attr.data-testid]=\"'daterangepicker-time-preset-' + preset.text\"\n >\n {{ preset.text }}\n </button>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".clr-input-wrapper>.clr-input-group{max-width:fit-content;padding-right:1.5rem}.clr-input-wrapper>.clr-input-group ::ng-deep>.clr-input{width:100%;padding:0 .3rem}.clr-daterangepicker-container-popup.datepicker{padding:0;width:auto;height:auto;display:block}.clr-daterangepicker-container-popup.datepicker .clr-smart-close-button{min-width:1.2rem;padding:0;position:absolute;right:0;margin:5px}.clr-daterangepicker-container-popup.datepicker .btn-trash{padding-right:25px;margin:5px}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content{padding:1rem;display:flex;flex-direction:row}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-form ::ng-deep clr-datepicker:first-of-type ::ng-deep clr-date-container{margin-top:0}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets{margin-left:.6rem;padding:.3rem}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets .btn{margin-right:0}.datetime-container{display:flex;flex-direction:row;align-items:flex-start}.datetime-container-to{padding-top:1rem}.timepicker{padding-left:1rem}.timepicker clr-input-container{margin-top:.8rem}.custom-input-group{padding-right:0!important}.custom-input-group .clr-input-group-icon-action{margin-left:.5rem}.custom-input-group input{min-width:10rem!important;width:10rem!important}.custom-input-group-time{min-width:17rem!important}.custom-input-group-date{min-width:12rem!important}\n"] }]
|
|
15221
15291
|
}], ctorParameters: () => [{ type: i1$2.ClrPopoverService }, { type: i1$2.ClrCommonStringsService }, { type: i1$2.ClrLayout, decorators: [{
|
|
15222
15292
|
type: Optional
|
|
15223
15293
|
}] }, { type: DaterangeControlStateService }, { type: DaterangeService }, { type: DaterangeParsingService }], propDecorators: { presets: [{
|
|
@@ -15717,6 +15787,7 @@ class ClrIfWarning {
|
|
|
15717
15787
|
this.renderer.addClass(this.iconRef.location.nativeElement, 'clr-control-warning-icon');
|
|
15718
15788
|
}
|
|
15719
15789
|
const iconEl = this.iconRef.location.nativeElement;
|
|
15790
|
+
this.renderer.setAttribute(iconEl, 'data-testid', 'clr-control-warning-icon');
|
|
15720
15791
|
const parent = this.helperElement.parentElement;
|
|
15721
15792
|
// clr-checkbox-container / clr-radio-container already group their
|
|
15722
15793
|
// clr-control-helper inside a `.clr-subtext-wrapper` div, mirroring
|
|
@@ -15831,7 +15902,7 @@ class ClrActionPanel {
|
|
|
15831
15902
|
window.dispatchEvent(new Event('resize'));
|
|
15832
15903
|
}
|
|
15833
15904
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrActionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15834
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrActionPanel, isStandalone: false, selector: "clr-action-panel", outputs: { opened: "clrOpened", closed: "clrClosed" }, host: { properties: { "class.action-panel": "true" } }, ngImport: i0, template: "@if (_open) {\n<div [@slideIn] class=\"action-panel-action-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n <ng-content select=\"[clr-action-panel-content]\"></ng-content>\n</div>\n<div
|
|
15905
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrActionPanel, isStandalone: false, selector: "clr-action-panel", outputs: { opened: "clrOpened", closed: "clrClosed" }, host: { properties: { "class.action-panel": "true" } }, ngImport: i0, template: "@if (_open) {\n<div data-testid=\"action-panel\" [@slideIn] class=\"action-panel-action-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n <ng-content select=\"[clr-action-panel-content]\"></ng-content>\n</div>\n<div\n data-testid=\"action-panel-backdrop\"\n [@fade]\n class=\"action-panel-backdrop\"\n (click)=\"close()\"\n (@fade.done)=\"resizeWindow()\"\n></div>\n}\n", animations: [
|
|
15835
15906
|
trigger('slideIn', [
|
|
15836
15907
|
transition(':enter', [style({ opacity: 0, width: 0 }), animate('0.2s', style({ opacity: 1, width: '*' }))]),
|
|
15837
15908
|
transition(':leave', [style({ opacity: 1, width: '*' }), animate('0.2s', style({ opacity: 0, width: 0 }))]),
|
|
@@ -15855,7 +15926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
15855
15926
|
]),
|
|
15856
15927
|
], host: {
|
|
15857
15928
|
'[class.action-panel]': 'true',
|
|
15858
|
-
}, standalone: false, template: "@if (_open) {\n<div [@slideIn] class=\"action-panel-action-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n <ng-content select=\"[clr-action-panel-content]\"></ng-content>\n</div>\n<div
|
|
15929
|
+
}, standalone: false, template: "@if (_open) {\n<div data-testid=\"action-panel\" [@slideIn] class=\"action-panel-action-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n <ng-content select=\"[clr-action-panel-content]\"></ng-content>\n</div>\n<div\n data-testid=\"action-panel-backdrop\"\n [@fade]\n class=\"action-panel-backdrop\"\n (click)=\"close()\"\n (@fade.done)=\"resizeWindow()\"\n></div>\n}\n" }]
|
|
15859
15930
|
}], propDecorators: { opened: [{
|
|
15860
15931
|
type: Output,
|
|
15861
15932
|
args: ['clrOpened']
|
|
@@ -15872,7 +15943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
15872
15943
|
class ClrActionPanelContainer {
|
|
15873
15944
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrActionPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15874
15945
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ClrActionPanelContainer, isStandalone: false, selector: "clr-action-panel-container", host: { properties: { "class.content-container": "true", "class.action-panel-container": "true" } }, ngImport: i0, template: `
|
|
15875
|
-
<div class="action-panel-outer-wrapper">
|
|
15946
|
+
<div class="action-panel-outer-wrapper" data-testid="action-panel-container">
|
|
15876
15947
|
<ng-content select="clr-action-panel-container-content"></ng-content>
|
|
15877
15948
|
<ng-content select="clr-action-panel-container-footer"></ng-content>
|
|
15878
15949
|
</div>
|
|
@@ -15884,7 +15955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
15884
15955
|
args: [{
|
|
15885
15956
|
selector: 'clr-action-panel-container',
|
|
15886
15957
|
template: `
|
|
15887
|
-
<div class="action-panel-outer-wrapper">
|
|
15958
|
+
<div class="action-panel-outer-wrapper" data-testid="action-panel-container">
|
|
15888
15959
|
<ng-content select="clr-action-panel-container-content"></ng-content>
|
|
15889
15960
|
<ng-content select="clr-action-panel-container-footer"></ng-content>
|
|
15890
15961
|
</div>
|
|
@@ -16661,11 +16732,11 @@ class ClrImageCarousel {
|
|
|
16661
16732
|
}
|
|
16662
16733
|
}
|
|
16663
16734
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrImageCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16664
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrImageCarousel, isStandalone: false, selector: "clr-image-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, productName: { classPropertyName: "productName", publicName: "productName", isSignal: true, isRequired: false, transformFunction: null }, initialIndex: { classPropertyName: "initialIndex", publicName: "initialIndex", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, thumbnailSize: { classPropertyName: "thumbnailSize", publicName: "thumbnailSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeCarousel: "closeCarousel" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "thumbStripRef", first: true, predicate: ["thumbStrip"], descendants: true }], ngImport: i0, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<div class=\"clr-image-carousel\">\n <!-- Header -->\n @if (!hideHeader()) {\n <div class=\"clr-image-carousel__header\">\n <span class=\"clr-image-carousel__title\">{{ productName() }}</span>\n <button
|
|
16735
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrImageCarousel, isStandalone: false, selector: "clr-image-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, productName: { classPropertyName: "productName", publicName: "productName", isSignal: true, isRequired: false, transformFunction: null }, initialIndex: { classPropertyName: "initialIndex", publicName: "initialIndex", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, thumbnailSize: { classPropertyName: "thumbnailSize", publicName: "thumbnailSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeCarousel: "closeCarousel" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "thumbStripRef", first: true, predicate: ["thumbStrip"], descendants: true }], ngImport: i0, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<div class=\"clr-image-carousel\" data-testid=\"image-carousel\">\n <!-- Header -->\n @if (!hideHeader()) {\n <div class=\"clr-image-carousel__header\">\n <span class=\"clr-image-carousel__title\" data-testid=\"image-carousel-title\">{{ productName() }}</span>\n <button\n class=\"clr-image-carousel__close\"\n (click)=\"closeCarousel.emit()\"\n aria-label=\"Close\"\n data-testid=\"image-carousel-close-button\"\n >\n <cds-icon shape=\"times\"></cds-icon>\n </button>\n </div>\n }\n\n <!-- Spotlight + thumbnails, constrained to image width -->\n <div class=\"clr-image-carousel__content\" [style.width.px]=\"imageSize() > 0 ? imageSize() : null\">\n <!-- Spotlight -->\n <div class=\"clr-image-carousel__spotlight\">\n <div\n class=\"clr-image-carousel__img-wrap\"\n [style.width.px]=\"imageSize() > 0 ? imageSize() : null\"\n [style.height.px]=\"imageSize() > 0 ? imageSize() : null\"\n >\n <button\n class=\"clr-image-carousel__arrow clr-image-carousel__arrow--prev\"\n (click)=\"prev()\"\n aria-label=\"Previous\"\n data-testid=\"image-carousel-prev-button\"\n >\n <cds-icon shape=\"circle-arrow\" direction=\"left\" solid></cds-icon>\n </button>\n\n @if (images().length > 0) {\n <img\n [src]=\"images()[activeIndex()].src\"\n [alt]=\"images()[activeIndex()].alt || ''\"\n class=\"clr-image-carousel__img\"\n data-testid=\"image-carousel-active-image\"\n />\n }\n\n <button\n class=\"clr-image-carousel__arrow clr-image-carousel__arrow--next\"\n (click)=\"next()\"\n aria-label=\"Next\"\n data-testid=\"image-carousel-next-button\"\n >\n <cds-icon shape=\"circle-arrow\" direction=\"right\" solid></cds-icon>\n </button>\n </div>\n </div>\n\n <!-- Thumbnail strip -->\n <div\n class=\"clr-image-carousel__thumbs-wrap\"\n [class.clr-image-carousel__thumbs-wrap--fade-left]=\"showFadeLeft()\"\n [class.clr-image-carousel__thumbs-wrap--fade-right]=\"showFadeRight()\"\n >\n <div\n class=\"clr-image-carousel__thumbs\"\n [class.clr-image-carousel__thumbs--centered]=\"!needsScroll()\"\n (scroll)=\"onThumbStripScroll()\"\n #thumbStrip\n data-testid=\"image-carousel-thumbnails\"\n >\n @for (img of images(); track img; let i = $index) {\n <div\n class=\"clr-image-carousel__thumb\"\n [style.width.px]=\"thumbnailSize()\"\n [style.height.px]=\"thumbnailSize()\"\n [class.clr-image-carousel__thumb--active]=\"i === activeIndex()\"\n (click)=\"setActive(i)\"\n [attr.data-testid]=\"'image-carousel-thumbnail-' + (i)\"\n >\n <img\n [src]=\"img.src\"\n [alt]=\"img.alt || ''\"\n class=\"clr-image-carousel__thumb-img\"\n [attr.data-testid]=\"'image-carousel-thumbnail-image-' + (i)\"\n />\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".clr-image-carousel{display:flex;flex-direction:column;align-items:center;padding:0 24px;box-sizing:border-box;width:100%;background:var(--clr-modal-bg-color, #fff);overflow:hidden}.clr-image-carousel__header{display:flex;align-items:center;justify-content:space-between;height:68px;flex-shrink:0;box-sizing:border-box;align-self:stretch}.clr-image-carousel__title{font-size:14px;font-weight:400;line-height:24px}.clr-image-carousel__close{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:inherit}.clr-image-carousel__close cds-icon{--color: currentColor;width:18px;height:18px}.clr-image-carousel__close:hover{opacity:.7}.clr-image-carousel__content{display:flex;flex-direction:column;flex-shrink:0;width:100%}.clr-image-carousel__spotlight{flex-shrink:0;display:flex;align-items:center;justify-content:center}.clr-image-carousel__img-wrap{position:relative;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:3px}.clr-image-carousel__img{display:block;width:100%;height:100%;object-fit:cover}.clr-image-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;background:none;border:none;padding:0;outline:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.25;transition:opacity .15s}.clr-image-carousel__arrow:focus{outline:none}.clr-image-carousel__arrow:hover{opacity:1}.clr-image-carousel__arrow--prev{left:12px}.clr-image-carousel__arrow--next{right:12px}.clr-image-carousel__arrow cds-icon{--color: white;width:56px;height:56px}.clr-image-carousel__thumbs-wrap{position:relative;flex-shrink:0;width:100%;overflow:hidden}.clr-image-carousel__thumbs-wrap:before,.clr-image-carousel__thumbs-wrap:after{content:\"\";position:absolute;top:0;bottom:0;width:48px;z-index:1;pointer-events:none;opacity:0;transition:opacity .15s}.clr-image-carousel__thumbs-wrap:before{left:0;background:linear-gradient(to right,var(--clr-modal-bg-color, #fff),transparent)}.clr-image-carousel__thumbs-wrap:after{right:0;background:linear-gradient(to left,var(--clr-modal-bg-color, #fff),transparent)}.clr-image-carousel__thumbs-wrap--fade-left:before{opacity:1}.clr-image-carousel__thumbs-wrap--fade-right:after{opacity:1}.clr-image-carousel__thumbs{display:flex;gap:8px;padding:8px 0 24px;overflow-x:auto;flex-shrink:0;width:100%;box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none}.clr-image-carousel__thumbs::-webkit-scrollbar{display:none}.clr-image-carousel__thumbs--centered{justify-content:center;overflow-x:hidden}.clr-image-carousel__thumbs-spacer{flex-shrink:0}.clr-image-carousel__thumb{flex-shrink:0;overflow:hidden;cursor:pointer;border-radius:3px;outline:4px solid transparent;outline-offset:-4px;transition:outline-color .15s}.clr-image-carousel__thumb--active{outline-color:#14a1a9}.clr-image-carousel__thumb:hover:not(.clr-image-carousel__thumb--active){outline-color:var(--cds-global-color-gray-400, #aaa)}.clr-image-carousel__thumb-img{width:100%;height:100%;object-fit:cover;display:block}\n"], dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
|
|
16665
16736
|
}
|
|
16666
16737
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrImageCarousel, decorators: [{
|
|
16667
16738
|
type: Component,
|
|
16668
|
-
args: [{ selector: 'clr-image-carousel', standalone: false, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<div class=\"clr-image-carousel\">\n <!-- Header -->\n @if (!hideHeader()) {\n <div class=\"clr-image-carousel__header\">\n <span class=\"clr-image-carousel__title\">{{ productName() }}</span>\n <button
|
|
16739
|
+
args: [{ selector: 'clr-image-carousel', standalone: false, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<div class=\"clr-image-carousel\" data-testid=\"image-carousel\">\n <!-- Header -->\n @if (!hideHeader()) {\n <div class=\"clr-image-carousel__header\">\n <span class=\"clr-image-carousel__title\" data-testid=\"image-carousel-title\">{{ productName() }}</span>\n <button\n class=\"clr-image-carousel__close\"\n (click)=\"closeCarousel.emit()\"\n aria-label=\"Close\"\n data-testid=\"image-carousel-close-button\"\n >\n <cds-icon shape=\"times\"></cds-icon>\n </button>\n </div>\n }\n\n <!-- Spotlight + thumbnails, constrained to image width -->\n <div class=\"clr-image-carousel__content\" [style.width.px]=\"imageSize() > 0 ? imageSize() : null\">\n <!-- Spotlight -->\n <div class=\"clr-image-carousel__spotlight\">\n <div\n class=\"clr-image-carousel__img-wrap\"\n [style.width.px]=\"imageSize() > 0 ? imageSize() : null\"\n [style.height.px]=\"imageSize() > 0 ? imageSize() : null\"\n >\n <button\n class=\"clr-image-carousel__arrow clr-image-carousel__arrow--prev\"\n (click)=\"prev()\"\n aria-label=\"Previous\"\n data-testid=\"image-carousel-prev-button\"\n >\n <cds-icon shape=\"circle-arrow\" direction=\"left\" solid></cds-icon>\n </button>\n\n @if (images().length > 0) {\n <img\n [src]=\"images()[activeIndex()].src\"\n [alt]=\"images()[activeIndex()].alt || ''\"\n class=\"clr-image-carousel__img\"\n data-testid=\"image-carousel-active-image\"\n />\n }\n\n <button\n class=\"clr-image-carousel__arrow clr-image-carousel__arrow--next\"\n (click)=\"next()\"\n aria-label=\"Next\"\n data-testid=\"image-carousel-next-button\"\n >\n <cds-icon shape=\"circle-arrow\" direction=\"right\" solid></cds-icon>\n </button>\n </div>\n </div>\n\n <!-- Thumbnail strip -->\n <div\n class=\"clr-image-carousel__thumbs-wrap\"\n [class.clr-image-carousel__thumbs-wrap--fade-left]=\"showFadeLeft()\"\n [class.clr-image-carousel__thumbs-wrap--fade-right]=\"showFadeRight()\"\n >\n <div\n class=\"clr-image-carousel__thumbs\"\n [class.clr-image-carousel__thumbs--centered]=\"!needsScroll()\"\n (scroll)=\"onThumbStripScroll()\"\n #thumbStrip\n data-testid=\"image-carousel-thumbnails\"\n >\n @for (img of images(); track img; let i = $index) {\n <div\n class=\"clr-image-carousel__thumb\"\n [style.width.px]=\"thumbnailSize()\"\n [style.height.px]=\"thumbnailSize()\"\n [class.clr-image-carousel__thumb--active]=\"i === activeIndex()\"\n (click)=\"setActive(i)\"\n [attr.data-testid]=\"'image-carousel-thumbnail-' + (i)\"\n >\n <img\n [src]=\"img.src\"\n [alt]=\"img.alt || ''\"\n class=\"clr-image-carousel__thumb-img\"\n [attr.data-testid]=\"'image-carousel-thumbnail-image-' + (i)\"\n />\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".clr-image-carousel{display:flex;flex-direction:column;align-items:center;padding:0 24px;box-sizing:border-box;width:100%;background:var(--clr-modal-bg-color, #fff);overflow:hidden}.clr-image-carousel__header{display:flex;align-items:center;justify-content:space-between;height:68px;flex-shrink:0;box-sizing:border-box;align-self:stretch}.clr-image-carousel__title{font-size:14px;font-weight:400;line-height:24px}.clr-image-carousel__close{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:inherit}.clr-image-carousel__close cds-icon{--color: currentColor;width:18px;height:18px}.clr-image-carousel__close:hover{opacity:.7}.clr-image-carousel__content{display:flex;flex-direction:column;flex-shrink:0;width:100%}.clr-image-carousel__spotlight{flex-shrink:0;display:flex;align-items:center;justify-content:center}.clr-image-carousel__img-wrap{position:relative;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:3px}.clr-image-carousel__img{display:block;width:100%;height:100%;object-fit:cover}.clr-image-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;background:none;border:none;padding:0;outline:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.25;transition:opacity .15s}.clr-image-carousel__arrow:focus{outline:none}.clr-image-carousel__arrow:hover{opacity:1}.clr-image-carousel__arrow--prev{left:12px}.clr-image-carousel__arrow--next{right:12px}.clr-image-carousel__arrow cds-icon{--color: white;width:56px;height:56px}.clr-image-carousel__thumbs-wrap{position:relative;flex-shrink:0;width:100%;overflow:hidden}.clr-image-carousel__thumbs-wrap:before,.clr-image-carousel__thumbs-wrap:after{content:\"\";position:absolute;top:0;bottom:0;width:48px;z-index:1;pointer-events:none;opacity:0;transition:opacity .15s}.clr-image-carousel__thumbs-wrap:before{left:0;background:linear-gradient(to right,var(--clr-modal-bg-color, #fff),transparent)}.clr-image-carousel__thumbs-wrap:after{right:0;background:linear-gradient(to left,var(--clr-modal-bg-color, #fff),transparent)}.clr-image-carousel__thumbs-wrap--fade-left:before{opacity:1}.clr-image-carousel__thumbs-wrap--fade-right:after{opacity:1}.clr-image-carousel__thumbs{display:flex;gap:8px;padding:8px 0 24px;overflow-x:auto;flex-shrink:0;width:100%;box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none}.clr-image-carousel__thumbs::-webkit-scrollbar{display:none}.clr-image-carousel__thumbs--centered{justify-content:center;overflow-x:hidden}.clr-image-carousel__thumbs-spacer{flex-shrink:0}.clr-image-carousel__thumb{flex-shrink:0;overflow:hidden;cursor:pointer;border-radius:3px;outline:4px solid transparent;outline-offset:-4px;transition:outline-color .15s}.clr-image-carousel__thumb--active{outline-color:#14a1a9}.clr-image-carousel__thumb:hover:not(.clr-image-carousel__thumb--active){outline-color:var(--cds-global-color-gray-400, #aaa)}.clr-image-carousel__thumb-img{width:100%;height:100%;object-fit:cover;display:block}\n"] }]
|
|
16669
16740
|
}], ctorParameters: () => [], propDecorators: { thumbStripRef: [{
|
|
16670
16741
|
type: ViewChild,
|
|
16671
16742
|
args: ['thumbStrip']
|
|
@@ -16724,11 +16795,11 @@ class ClrImageGallery {
|
|
|
16724
16795
|
}
|
|
16725
16796
|
}
|
|
16726
16797
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrImageGallery, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16727
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrImageGallery, isStandalone: false, selector: "clr-image-gallery", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, productName: { classPropertyName: "productName", publicName: "productName", isSignal: true, isRequired: false, transformFunction: null }, spotlightSize: { classPropertyName: "spotlightSize", publicName: "spotlightSize", isSignal: true, isRequired: false, transformFunction: null }, useBuiltInModal: { classPropertyName: "useBuiltInModal", publicName: "useBuiltInModal", isSignal: true, isRequired: false, transformFunction: null }, carouselImageSize: { classPropertyName: "carouselImageSize", publicName: "carouselImageSize", isSignal: true, isRequired: false, transformFunction: null }, carouselThumbnailSize: { classPropertyName: "carouselThumbnailSize", publicName: "carouselThumbnailSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { galleryOpen: "galleryOpen" }, ngImport: i0, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<!-- Static gallery view -->\n<div class=\"clr-image-gallery\" [style.width.px]=\"spotlightSize()\">\n <!-- Spotlight image -->\n <div\n class=\"clr-image-gallery__spotlight\"\n [style.width.px]=\"spotlightSize()\"\n [style.height.px]=\"spotlightSize()\"\n (click)=\"openModal(0)\"\n >\n @if (images().length > 0) {\n <img\n [ngSrc]=\"images()[0].src\"\n [width]=\"spotlightSize()\"\n [height]=\"spotlightSize()\"\n [alt]=\"images()[0].alt || ''\"\n class=\"clr-image-gallery__spotlight-img\"\n />\n }\n </div>\n\n <!-- Thumbnail row -->\n @if (images().length > 1) {\n <div class=\"clr-image-gallery__thumbs\">\n @for (img of staticThumbnails(); track img; let i = $index) {\n <div\n class=\"clr-image-gallery__thumb\"\n [style.width.px]=\"thumbnailSize()\"\n [style.height.px]=\"thumbnailSize()\"\n (click)=\"openModal(i + 1)\"\n >\n <img\n [ngSrc]=\"img.src\"\n [width]=\"thumbnailSize()\"\n [height]=\"thumbnailSize()\"\n [alt]=\"img.alt || ''\"\n class=\"clr-image-gallery__thumb-img\"\n />\n <!-- Overlay on last thumbnail when there are more images -->\n @if (i === maxThumbnails - 1 && remainingCount() > 0) {\n <div class=\"clr-image-gallery__thumb-overlay\">\n <span>{{ remainingCount() }}+</span>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Built-in modal (only when useBuiltInModal is true) -->\n@if (useBuiltInModal() && modalOpen()) {\n<div
|
|
16798
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrImageGallery, isStandalone: false, selector: "clr-image-gallery", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, productName: { classPropertyName: "productName", publicName: "productName", isSignal: true, isRequired: false, transformFunction: null }, spotlightSize: { classPropertyName: "spotlightSize", publicName: "spotlightSize", isSignal: true, isRequired: false, transformFunction: null }, useBuiltInModal: { classPropertyName: "useBuiltInModal", publicName: "useBuiltInModal", isSignal: true, isRequired: false, transformFunction: null }, carouselImageSize: { classPropertyName: "carouselImageSize", publicName: "carouselImageSize", isSignal: true, isRequired: false, transformFunction: null }, carouselThumbnailSize: { classPropertyName: "carouselThumbnailSize", publicName: "carouselThumbnailSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { galleryOpen: "galleryOpen" }, ngImport: i0, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<!-- Static gallery view -->\n<div class=\"clr-image-gallery\" [style.width.px]=\"spotlightSize()\" data-testid=\"image-gallery\">\n <!-- Spotlight image -->\n <div\n class=\"clr-image-gallery__spotlight\"\n [style.width.px]=\"spotlightSize()\"\n [style.height.px]=\"spotlightSize()\"\n (click)=\"openModal(0)\"\n data-testid=\"image-gallery-spotlight\"\n >\n @if (images().length > 0) {\n <img\n [ngSrc]=\"images()[0].src\"\n [width]=\"spotlightSize()\"\n [height]=\"spotlightSize()\"\n [alt]=\"images()[0].alt || ''\"\n class=\"clr-image-gallery__spotlight-img\"\n data-testid=\"image-gallery-spotlight-image\"\n />\n }\n </div>\n\n <!-- Thumbnail row -->\n @if (images().length > 1) {\n <div class=\"clr-image-gallery__thumbs\" data-testid=\"image-gallery-thumbnails\">\n @for (img of staticThumbnails(); track img; let i = $index) {\n <div\n class=\"clr-image-gallery__thumb\"\n [style.width.px]=\"thumbnailSize()\"\n [style.height.px]=\"thumbnailSize()\"\n (click)=\"openModal(i + 1)\"\n [attr.data-testid]=\"'image-gallery-thumbnail-' + (i + 1)\"\n >\n <img\n [ngSrc]=\"img.src\"\n [width]=\"thumbnailSize()\"\n [height]=\"thumbnailSize()\"\n [alt]=\"img.alt || ''\"\n class=\"clr-image-gallery__thumb-img\"\n [attr.data-testid]=\"'image-gallery-thumbnail-image-' + (i + 1)\"\n />\n <!-- Overlay on last thumbnail when there are more images -->\n @if (i === maxThumbnails - 1 && remainingCount() > 0) {\n <div class=\"clr-image-gallery__thumb-overlay\" data-testid=\"image-gallery-remaining-overlay\">\n <span data-testid=\"image-gallery-remaining-count\">{{ remainingCount() }}+</span>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Built-in modal (only when useBuiltInModal is true) -->\n@if (useBuiltInModal() && modalOpen()) {\n<div\n class=\"clr-image-gallery-backdrop\"\n (click)=\"onBackdropClick($event)\"\n role=\"dialog\"\n aria-modal=\"true\"\n data-testid=\"image-gallery-dialog\"\n>\n <div class=\"clr-image-gallery-modal\" data-testid=\"image-gallery-modal\">\n <clr-image-carousel\n data-testid=\"image-gallery-carousel\"\n [images]=\"images()\"\n [productName]=\"productName()\"\n [initialIndex]=\"activeIndex()\"\n [imageSize]=\"carouselImageSize()\"\n [thumbnailSize]=\"carouselThumbnailSize()\"\n (closeCarousel)=\"closeModal()\"\n ></clr-image-carousel>\n </div>\n</div>\n}\n", styles: [".clr-image-gallery{display:inline-flex;flex-direction:column;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.clr-image-gallery__spotlight{overflow:hidden;flex-shrink:0;border-radius:3px}.clr-image-gallery__spotlight-img{width:100%;height:100%;object-fit:cover;display:block}.clr-image-gallery__thumbs{display:flex;gap:8px}.clr-image-gallery__thumb{position:relative;overflow:hidden;flex-shrink:0;border-radius:3px}.clr-image-gallery__thumb-img{width:100%;height:100%;object-fit:cover;display:block}.clr-image-gallery__thumb-overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600}.clr-image-gallery-backdrop{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000}.clr-image-gallery-modal{background:var(--clr-modal-bg-color, #fff);border-radius:4px;display:flex;flex-direction:column;height:96vh;width:calc(96vh - 116px);max-width:98vw;overflow:hidden;box-shadow:0 4px 32px #00000059}\n"], dependencies: [{ kind: "directive", type: i1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: ClrImageCarousel, selector: "clr-image-carousel", inputs: ["images", "productName", "initialIndex", "hideHeader", "imageSize", "thumbnailSize"], outputs: ["closeCarousel"] }] }); }
|
|
16728
16799
|
}
|
|
16729
16800
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrImageGallery, decorators: [{
|
|
16730
16801
|
type: Component,
|
|
16731
|
-
args: [{ selector: 'clr-image-gallery', standalone: false, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<!-- Static gallery view -->\n<div class=\"clr-image-gallery\" [style.width.px]=\"spotlightSize()\">\n <!-- Spotlight image -->\n <div\n class=\"clr-image-gallery__spotlight\"\n [style.width.px]=\"spotlightSize()\"\n [style.height.px]=\"spotlightSize()\"\n (click)=\"openModal(0)\"\n >\n @if (images().length > 0) {\n <img\n [ngSrc]=\"images()[0].src\"\n [width]=\"spotlightSize()\"\n [height]=\"spotlightSize()\"\n [alt]=\"images()[0].alt || ''\"\n class=\"clr-image-gallery__spotlight-img\"\n />\n }\n </div>\n\n <!-- Thumbnail row -->\n @if (images().length > 1) {\n <div class=\"clr-image-gallery__thumbs\">\n @for (img of staticThumbnails(); track img; let i = $index) {\n <div\n class=\"clr-image-gallery__thumb\"\n [style.width.px]=\"thumbnailSize()\"\n [style.height.px]=\"thumbnailSize()\"\n (click)=\"openModal(i + 1)\"\n >\n <img\n [ngSrc]=\"img.src\"\n [width]=\"thumbnailSize()\"\n [height]=\"thumbnailSize()\"\n [alt]=\"img.alt || ''\"\n class=\"clr-image-gallery__thumb-img\"\n />\n <!-- Overlay on last thumbnail when there are more images -->\n @if (i === maxThumbnails - 1 && remainingCount() > 0) {\n <div class=\"clr-image-gallery__thumb-overlay\">\n <span>{{ remainingCount() }}+</span>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Built-in modal (only when useBuiltInModal is true) -->\n@if (useBuiltInModal() && modalOpen()) {\n<div
|
|
16802
|
+
args: [{ selector: 'clr-image-gallery', standalone: false, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<!-- Static gallery view -->\n<div class=\"clr-image-gallery\" [style.width.px]=\"spotlightSize()\" data-testid=\"image-gallery\">\n <!-- Spotlight image -->\n <div\n class=\"clr-image-gallery__spotlight\"\n [style.width.px]=\"spotlightSize()\"\n [style.height.px]=\"spotlightSize()\"\n (click)=\"openModal(0)\"\n data-testid=\"image-gallery-spotlight\"\n >\n @if (images().length > 0) {\n <img\n [ngSrc]=\"images()[0].src\"\n [width]=\"spotlightSize()\"\n [height]=\"spotlightSize()\"\n [alt]=\"images()[0].alt || ''\"\n class=\"clr-image-gallery__spotlight-img\"\n data-testid=\"image-gallery-spotlight-image\"\n />\n }\n </div>\n\n <!-- Thumbnail row -->\n @if (images().length > 1) {\n <div class=\"clr-image-gallery__thumbs\" data-testid=\"image-gallery-thumbnails\">\n @for (img of staticThumbnails(); track img; let i = $index) {\n <div\n class=\"clr-image-gallery__thumb\"\n [style.width.px]=\"thumbnailSize()\"\n [style.height.px]=\"thumbnailSize()\"\n (click)=\"openModal(i + 1)\"\n [attr.data-testid]=\"'image-gallery-thumbnail-' + (i + 1)\"\n >\n <img\n [ngSrc]=\"img.src\"\n [width]=\"thumbnailSize()\"\n [height]=\"thumbnailSize()\"\n [alt]=\"img.alt || ''\"\n class=\"clr-image-gallery__thumb-img\"\n [attr.data-testid]=\"'image-gallery-thumbnail-image-' + (i + 1)\"\n />\n <!-- Overlay on last thumbnail when there are more images -->\n @if (i === maxThumbnails - 1 && remainingCount() > 0) {\n <div class=\"clr-image-gallery__thumb-overlay\" data-testid=\"image-gallery-remaining-overlay\">\n <span data-testid=\"image-gallery-remaining-count\">{{ remainingCount() }}+</span>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Built-in modal (only when useBuiltInModal is true) -->\n@if (useBuiltInModal() && modalOpen()) {\n<div\n class=\"clr-image-gallery-backdrop\"\n (click)=\"onBackdropClick($event)\"\n role=\"dialog\"\n aria-modal=\"true\"\n data-testid=\"image-gallery-dialog\"\n>\n <div class=\"clr-image-gallery-modal\" data-testid=\"image-gallery-modal\">\n <clr-image-carousel\n data-testid=\"image-gallery-carousel\"\n [images]=\"images()\"\n [productName]=\"productName()\"\n [initialIndex]=\"activeIndex()\"\n [imageSize]=\"carouselImageSize()\"\n [thumbnailSize]=\"carouselThumbnailSize()\"\n (closeCarousel)=\"closeModal()\"\n ></clr-image-carousel>\n </div>\n</div>\n}\n", styles: [".clr-image-gallery{display:inline-flex;flex-direction:column;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.clr-image-gallery__spotlight{overflow:hidden;flex-shrink:0;border-radius:3px}.clr-image-gallery__spotlight-img{width:100%;height:100%;object-fit:cover;display:block}.clr-image-gallery__thumbs{display:flex;gap:8px}.clr-image-gallery__thumb{position:relative;overflow:hidden;flex-shrink:0;border-radius:3px}.clr-image-gallery__thumb-img{width:100%;height:100%;object-fit:cover;display:block}.clr-image-gallery__thumb-overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600}.clr-image-gallery-backdrop{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000}.clr-image-gallery-modal{background:var(--clr-modal-bg-color, #fff);border-radius:4px;display:flex;flex-direction:column;height:96vh;width:calc(96vh - 116px);max-width:98vw;overflow:hidden;box-shadow:0 4px 32px #00000059}\n"] }]
|
|
16732
16803
|
}], propDecorators: { images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: false }] }], productName: [{ type: i0.Input, args: [{ isSignal: true, alias: "productName", required: false }] }], spotlightSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spotlightSize", required: false }] }], useBuiltInModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "useBuiltInModal", required: false }] }], galleryOpen: [{ type: i0.Output, args: ["galleryOpen"] }], carouselImageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "carouselImageSize", required: false }] }], carouselThumbnailSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "carouselThumbnailSize", required: false }] }] } });
|
|
16733
16804
|
|
|
16734
16805
|
/*
|
|
@@ -17193,14 +17264,14 @@ class ClrCopyToClipboard {
|
|
|
17193
17264
|
});
|
|
17194
17265
|
}
|
|
17195
17266
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrCopyToClipboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17196
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: ClrCopyToClipboard, isStandalone: true, selector: "clr-copy-to-clipboard", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, hiddenUntilHovered: { classPropertyName: "hiddenUntilHovered", publicName: "hiddenUntilHovered", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.hidden-until-hovered": "hiddenUntilHovered()", "class.parent-hovered": "parentHovered" } }, ngImport: i0, template: "<clr-tooltip>\n <cds-icon\n clrTooltipTrigger\n class=\"copy-to-clipboard-icon\"\n [cdkCopyToClipboard]=\"trimmedValue()\"\n (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n [shape]=\"showCopiedIcon ? 'success-standard' : 'copy-to-clipboard'\"\n [ngClass]=\"{ 'attribute-was-copied-color': showCopiedIcon }\"\n (click)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.preventDefault()\"\n ></cds-icon>\n <clr-tooltip-content\n class=\"clr-tooltip-fit-content\"\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n >{{ tooltipText() }}</clr-tooltip-content\n >\n</clr-tooltip>\n", styles: [":host,.tooltip{display:flex;align-items:center}.copy-to-clipboard-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)!important}.copy-to-clipboard-icon:hover{color:var(--cds-alias-typography-link-color)!important}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}:host(.hidden-until-hovered){visibility:hidden;opacity:0;transition:opacity .15s ease,visibility .15s ease}:host(.hidden-until-hovered.parent-hovered),:host(.hidden-until-hovered:focus-within){visibility:visible;opacity:1}.copy-to-clipboard-parent{display:flex;flex-direction:row;align-items:center;gap:.25rem}\n"], dependencies: [{ kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "ngmodule", type: ClrTooltipModule }, { kind: "component", type: i1$4.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$4.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$4.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
17267
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: ClrCopyToClipboard, isStandalone: true, selector: "clr-copy-to-clipboard", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, hiddenUntilHovered: { classPropertyName: "hiddenUntilHovered", publicName: "hiddenUntilHovered", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.hidden-until-hovered": "hiddenUntilHovered()", "class.parent-hovered": "parentHovered" } }, ngImport: i0, template: "<clr-tooltip>\n <cds-icon\n clrTooltipTrigger\n class=\"copy-to-clipboard-icon\"\n data-testid=\"copy-to-clipboard-button\"\n [cdkCopyToClipboard]=\"trimmedValue()\"\n (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n [shape]=\"showCopiedIcon ? 'success-standard' : 'copy-to-clipboard'\"\n [ngClass]=\"{ 'attribute-was-copied-color': showCopiedIcon }\"\n (click)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.preventDefault()\"\n ></cds-icon>\n <clr-tooltip-content\n class=\"clr-tooltip-fit-content\"\n data-testid=\"copy-to-clipboard-tooltip\"\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n >{{ tooltipText() }}</clr-tooltip-content\n >\n</clr-tooltip>\n", styles: [":host,.tooltip{display:flex;align-items:center}.copy-to-clipboard-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)!important}.copy-to-clipboard-icon:hover{color:var(--cds-alias-typography-link-color)!important}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}:host(.hidden-until-hovered){visibility:hidden;opacity:0;transition:opacity .15s ease,visibility .15s ease}:host(.hidden-until-hovered.parent-hovered),:host(.hidden-until-hovered:focus-within){visibility:visible;opacity:1}.copy-to-clipboard-parent{display:flex;flex-direction:row;align-items:center;gap:.25rem}\n"], dependencies: [{ kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "ngmodule", type: ClrTooltipModule }, { kind: "component", type: i1$4.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$4.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$4.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
17197
17268
|
}
|
|
17198
17269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrCopyToClipboard, decorators: [{
|
|
17199
17270
|
type: Component,
|
|
17200
17271
|
args: [{ selector: 'clr-copy-to-clipboard', imports: [CdkCopyToClipboard, NgClass, ClrIcon, ClrTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
|
|
17201
17272
|
'[class.hidden-until-hovered]': 'hiddenUntilHovered()',
|
|
17202
17273
|
'[class.parent-hovered]': 'parentHovered',
|
|
17203
|
-
}, template: "<clr-tooltip>\n <cds-icon\n clrTooltipTrigger\n class=\"copy-to-clipboard-icon\"\n [cdkCopyToClipboard]=\"trimmedValue()\"\n (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n [shape]=\"showCopiedIcon ? 'success-standard' : 'copy-to-clipboard'\"\n [ngClass]=\"{ 'attribute-was-copied-color': showCopiedIcon }\"\n (click)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.preventDefault()\"\n ></cds-icon>\n <clr-tooltip-content\n class=\"clr-tooltip-fit-content\"\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n >{{ tooltipText() }}</clr-tooltip-content\n >\n</clr-tooltip>\n", styles: [":host,.tooltip{display:flex;align-items:center}.copy-to-clipboard-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)!important}.copy-to-clipboard-icon:hover{color:var(--cds-alias-typography-link-color)!important}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}:host(.hidden-until-hovered){visibility:hidden;opacity:0;transition:opacity .15s ease,visibility .15s ease}:host(.hidden-until-hovered.parent-hovered),:host(.hidden-until-hovered:focus-within){visibility:visible;opacity:1}.copy-to-clipboard-parent{display:flex;flex-direction:row;align-items:center;gap:.25rem}\n"] }]
|
|
17274
|
+
}, template: "<clr-tooltip>\n <cds-icon\n clrTooltipTrigger\n class=\"copy-to-clipboard-icon\"\n data-testid=\"copy-to-clipboard-button\"\n [cdkCopyToClipboard]=\"trimmedValue()\"\n (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n [shape]=\"showCopiedIcon ? 'success-standard' : 'copy-to-clipboard'\"\n [ngClass]=\"{ 'attribute-was-copied-color': showCopiedIcon }\"\n (click)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.preventDefault()\"\n ></cds-icon>\n <clr-tooltip-content\n class=\"clr-tooltip-fit-content\"\n data-testid=\"copy-to-clipboard-tooltip\"\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n >{{ tooltipText() }}</clr-tooltip-content\n >\n</clr-tooltip>\n", styles: [":host,.tooltip{display:flex;align-items:center}.copy-to-clipboard-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)!important}.copy-to-clipboard-icon:hover{color:var(--cds-alias-typography-link-color)!important}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}:host(.hidden-until-hovered){visibility:hidden;opacity:0;transition:opacity .15s ease,visibility .15s ease}:host(.hidden-until-hovered.parent-hovered),:host(.hidden-until-hovered:focus-within){visibility:visible;opacity:1}.copy-to-clipboard-parent{display:flex;flex-direction:row;align-items:center;gap:.25rem}\n"] }]
|
|
17204
17275
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], hiddenUntilHovered: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenUntilHovered", required: false }] }] } });
|
|
17205
17276
|
|
|
17206
17277
|
/*
|
|
@@ -17449,11 +17520,11 @@ class ClrSummaryItemValue {
|
|
|
17449
17520
|
return false;
|
|
17450
17521
|
}
|
|
17451
17522
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrSummaryItemValue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17452
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrSummaryItemValue, isStandalone: true, selector: "clr-summary-item-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.has-icon": "this.hasIcon", "class.has-text": "this.hasText", "class.hidden": "this.isHidden" } }, providers: [provideAnimations()], viewQueries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }, { propertyName: "valueElement", first: true, predicate: ["valueElement"], descendants: true }], ngImport: i0, template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (href()) { @if (tooltip()) {\n<clr-tooltip>\n <a
|
|
17523
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrSummaryItemValue, isStandalone: true, selector: "clr-summary-item-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.has-icon": "this.hasIcon", "class.has-text": "this.hasText", "class.hidden": "this.isHidden" } }, providers: [provideAnimations()], viewQueries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }, { propertyName: "valueElement", first: true, predicate: ["valueElement"], descendants: true }], ngImport: i0, template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (href()) { @if (tooltip()) {\n<clr-tooltip>\n <a\n clrTooltipTrigger\n class=\"value-icon-link\"\n [href]=\"href()\"\n [attr.target]=\"target() ?? null\"\n (click)=\"handleClick()\"\n data-testid=\"summary-item-value-icon-link\"\n >\n <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n </a>\n <clr-tooltip-content\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n data-testid=\"summary-item-value-icon-link-tooltip\"\n >\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<a\n class=\"value-icon-link\"\n [href]=\"href()\"\n [attr.target]=\"target() ?? null\"\n (click)=\"handleClick()\"\n data-testid=\"summary-item-value-icon-link-plain\"\n>\n <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n</a>\n} } @else if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n <cds-icon\n clrTooltipTrigger\n [shape]=\"icon()\"\n class=\"value-icon value-link\"\n tabindex=\"0\"\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n data-testid=\"summary-item-value-icon-action\"\n ></cds-icon>\n <clr-tooltip-content\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n data-testid=\"summary-item-value-icon-action-tooltip\"\n >\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<cds-icon\n [shape]=\"icon()\"\n class=\"value-icon value-link\"\n tabindex=\"0\"\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n data-testid=\"summary-item-value-icon-action-plain\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n <cds-icon\n clrTooltipTrigger\n [shape]=\"icon()\"\n class=\"value-icon value-icon-neutral\"\n data-testid=\"summary-item-value-icon\"\n ></cds-icon>\n <clr-tooltip-content\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n data-testid=\"summary-item-value-icon-tooltip\"\n >\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<cds-icon [shape]=\"icon()\" class=\"value-icon value-icon-neutral\" data-testid=\"summary-item-value-icon-plain\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (href()) { @if (effectiveTooltip) {\n<clr-tooltip>\n <a\n #valueElement\n class=\"value value-link\"\n clrTooltipTrigger\n [href]=\"href()\"\n [attr.target]=\"target() ?? null\"\n (click)=\"handleClick()\"\n data-testid=\"summary-item-value-link\"\n >\n {{ value() }}\n </a>\n <clr-tooltip-content\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n data-testid=\"summary-item-value-link-tooltip\"\n >\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<a\n #valueElement\n class=\"value value-link\"\n [href]=\"href()\"\n [attr.target]=\"target() ?? null\"\n (click)=\"handleClick()\"\n data-testid=\"summary-item-value-link-plain\"\n>\n {{ value() }}\n</a>\n} } @else if (hasClickHandler) {\n<clr-tooltip>\n <span\n #valueElement\n class=\"value value-link\"\n clrTooltipTrigger\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n data-testid=\"summary-item-value-action\"\n >\n {{ value() }}\n </span>\n @if (effectiveTooltip) {\n <clr-tooltip-content\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n data-testid=\"summary-item-value-action-tooltip\"\n >\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n <span #valueElement class=\"value\" clrTooltipTrigger data-testid=\"summary-item-value\">{{ value() }}</span>\n <clr-tooltip-content\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n data-testid=\"summary-item-value-tooltip\"\n >\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\" data-testid=\"summary-item-value-plain\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent data-testid=\"summary-item-value-projected\">\n <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon-link{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}.value-icon-link cds-icon{color:var(--cds-alias-typography-link-color)}.value-icon-link:hover cds-icon,.value-icon-link:focus cds-icon{color:var(--cds-alias-typography-link-color-hover)}.value-icon-link:visited cds-icon{color:var(--cds-alias-typography-link-color-visited)}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep clr-tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}::ng-deep .tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$4.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$4.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$4.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }] }); }
|
|
17453
17524
|
}
|
|
17454
17525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrSummaryItemValue, decorators: [{
|
|
17455
17526
|
type: Component,
|
|
17456
|
-
args: [{ selector: 'clr-summary-item-value', standalone: true, imports: [RouterModule, ClarityModule, ClrIcon], providers: [provideAnimations()], template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (href()) { @if (tooltip()) {\n<clr-tooltip>\n <a
|
|
17527
|
+
args: [{ selector: 'clr-summary-item-value', standalone: true, imports: [RouterModule, ClarityModule, ClrIcon], providers: [provideAnimations()], template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (href()) { @if (tooltip()) {\n<clr-tooltip>\n <a\n clrTooltipTrigger\n class=\"value-icon-link\"\n [href]=\"href()\"\n [attr.target]=\"target() ?? null\"\n (click)=\"handleClick()\"\n data-testid=\"summary-item-value-icon-link\"\n >\n <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n </a>\n <clr-tooltip-content\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n data-testid=\"summary-item-value-icon-link-tooltip\"\n >\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<a\n class=\"value-icon-link\"\n [href]=\"href()\"\n [attr.target]=\"target() ?? null\"\n (click)=\"handleClick()\"\n data-testid=\"summary-item-value-icon-link-plain\"\n>\n <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n</a>\n} } @else if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n <cds-icon\n clrTooltipTrigger\n [shape]=\"icon()\"\n class=\"value-icon value-link\"\n tabindex=\"0\"\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n data-testid=\"summary-item-value-icon-action\"\n ></cds-icon>\n <clr-tooltip-content\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n data-testid=\"summary-item-value-icon-action-tooltip\"\n >\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<cds-icon\n [shape]=\"icon()\"\n class=\"value-icon value-link\"\n tabindex=\"0\"\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n data-testid=\"summary-item-value-icon-action-plain\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n <cds-icon\n clrTooltipTrigger\n [shape]=\"icon()\"\n class=\"value-icon value-icon-neutral\"\n data-testid=\"summary-item-value-icon\"\n ></cds-icon>\n <clr-tooltip-content\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n data-testid=\"summary-item-value-icon-tooltip\"\n >\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<cds-icon [shape]=\"icon()\" class=\"value-icon value-icon-neutral\" data-testid=\"summary-item-value-icon-plain\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (href()) { @if (effectiveTooltip) {\n<clr-tooltip>\n <a\n #valueElement\n class=\"value value-link\"\n clrTooltipTrigger\n [href]=\"href()\"\n [attr.target]=\"target() ?? null\"\n (click)=\"handleClick()\"\n data-testid=\"summary-item-value-link\"\n >\n {{ value() }}\n </a>\n <clr-tooltip-content\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n data-testid=\"summary-item-value-link-tooltip\"\n >\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<a\n #valueElement\n class=\"value value-link\"\n [href]=\"href()\"\n [attr.target]=\"target() ?? null\"\n (click)=\"handleClick()\"\n data-testid=\"summary-item-value-link-plain\"\n>\n {{ value() }}\n</a>\n} } @else if (hasClickHandler) {\n<clr-tooltip>\n <span\n #valueElement\n class=\"value value-link\"\n clrTooltipTrigger\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n data-testid=\"summary-item-value-action\"\n >\n {{ value() }}\n </span>\n @if (effectiveTooltip) {\n <clr-tooltip-content\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n data-testid=\"summary-item-value-action-tooltip\"\n >\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n <span #valueElement class=\"value\" clrTooltipTrigger data-testid=\"summary-item-value\">{{ value() }}</span>\n <clr-tooltip-content\n [clrSize]=\"tooltipSize\"\n [clrPosition]=\"tooltipPosition\"\n *clrIfOpen\n data-testid=\"summary-item-value-tooltip\"\n >\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\" data-testid=\"summary-item-value-plain\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent data-testid=\"summary-item-value-projected\">\n <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon-link{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}.value-icon-link cds-icon{color:var(--cds-alias-typography-link-color)}.value-icon-link:hover cds-icon,.value-icon-link:focus cds-icon{color:var(--cds-alias-typography-link-color-hover)}.value-icon-link:visited cds-icon{color:var(--cds-alias-typography-link-color-visited)}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep clr-tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}::ng-deep .tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"] }]
|
|
17457
17528
|
}], ctorParameters: () => [], propDecorators: { projectedContent: [{
|
|
17458
17529
|
type: ViewChild,
|
|
17459
17530
|
args: ['projectedContent']
|
|
@@ -17661,11 +17732,11 @@ class ClrSummaryItem {
|
|
|
17661
17732
|
});
|
|
17662
17733
|
}
|
|
17663
17734
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrSummaryItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17664
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrSummaryItem, isStandalone: true, selector: "clr-summary-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, showOnEmptyValue: { classPropertyName: "showOnEmptyValue", publicName: "showOnEmptyValue", isSignal: true, isRequired: false, transformFunction: null }, valueCopyable: { classPropertyName: "valueCopyable", publicName: "valueCopyable", isSignal: true, isRequired: false, transformFunction: null }, copyButtonTooltip: { classPropertyName: "copyButtonTooltip", publicName: "copyButtonTooltip", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "valueChildren", predicate: ClrSummaryItemValue, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "valuesContainer", first: true, predicate: ["valuesContainer"], descendants: true }], ngImport: i0, template: "<ng-template #itemTemplate>\n <div\n class=\"summary-item\"\n [class.hidden]=\"\n !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n \"\n >\n <span class=\"summary-item-label\">{{ label() }}:</span>\n <div class=\"summary-item-values\" #valuesContainer>\n @if (hasLoading) {\n <div class=\"summary-item-loading\">\n <span class=\"spinner spinner-inline\"></span>\n <span>{{ loadingText }}</span>\n </div>\n } @else if (hasError) {\n <clr-summary-item-value
|
|
17735
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrSummaryItem, isStandalone: true, selector: "clr-summary-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, showOnEmptyValue: { classPropertyName: "showOnEmptyValue", publicName: "showOnEmptyValue", isSignal: true, isRequired: false, transformFunction: null }, valueCopyable: { classPropertyName: "valueCopyable", publicName: "valueCopyable", isSignal: true, isRequired: false, transformFunction: null }, copyButtonTooltip: { classPropertyName: "copyButtonTooltip", publicName: "copyButtonTooltip", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "valueChildren", predicate: ClrSummaryItemValue, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "valuesContainer", first: true, predicate: ["valuesContainer"], descendants: true }], ngImport: i0, template: "<ng-template #itemTemplate>\n <div\n class=\"summary-item\"\n [attr.data-testid]=\"'summary-item-' + (label())\"\n [class.hidden]=\"\n !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n \"\n >\n <span class=\"summary-item-label\" [attr.data-testid]=\"'summary-item-label-' + (label())\">{{ label() }}:</span>\n <div class=\"summary-item-values\" #valuesContainer [attr.data-testid]=\"'summary-item-values-' + (label())\">\n @if (hasLoading) {\n <div class=\"summary-item-loading\" [attr.data-testid]=\"'summary-item-loading-' + (label())\">\n <span class=\"spinner spinner-inline\" [attr.data-testid]=\"'summary-item-loading-spinner-' + (label())\"></span>\n <span [attr.data-testid]=\"'summary-item-loading-text-' + (label())\">{{ loadingText }}</span>\n </div>\n } @else if (hasError) {\n <clr-summary-item-value\n icon=\"error-standard\"\n class=\"error\"\n [attr.data-testid]=\"'summary-item-error-icon-' + (label())\"\n ></clr-summary-item-value>\n <clr-summary-item-value\n [value]=\"errorText\"\n [clickable]=\"true\"\n (clicked)=\"errorClick()\"\n class=\"error\"\n [attr.data-testid]=\"'summary-item-error-' + (label())\"\n ></clr-summary-item-value>\n } @else if (hasWarning) {\n <clr-summary-item-value\n icon=\"warning-standard\"\n class=\"warning\"\n [attr.data-testid]=\"'summary-item-warning-icon-' + (label())\"\n ></clr-summary-item-value>\n <clr-summary-item-value\n [value]=\"warningText\"\n [clickable]=\"true\"\n (clicked)=\"warningClick()\"\n class=\"warning\"\n [attr.data-testid]=\"'summary-item-warning-' + (label())\"\n ></clr-summary-item-value>\n } @else {\n <ng-content select=\"clr-summary-item-value\"></ng-content>\n @if (showCopyButton) {\n <clr-copy-to-clipboard\n [value]=\"copyableValue\"\n [tooltipText]=\"copyButtonTooltip()\"\n [attr.data-testid]=\"'summary-item-copy-button-' + (label())\"\n ></clr-copy-to-clipboard>\n }\n <ng-content></ng-content>\n @if (showEditButton) {\n <clr-summary-item-value\n [value]=\"editText\"\n [clickable]=\"true\"\n (clicked)=\"editClick()\"\n [attr.data-testid]=\"'summary-item-edit-' + (label())\"\n ></clr-summary-item-value>\n } @else if (!hasProjectedContent) {\n <span class=\"value value-placeholder\" [attr.data-testid]=\"'summary-item-placeholder-' + (label())\">—</span>\n } }\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%;overflow:hidden}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;max-width:100%;overflow:visible}clr-copy-to-clipboard{flex:0 0 auto}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: ClarityModule }, { kind: "component", type: ClrSummaryItemValue, selector: "clr-summary-item-value", inputs: ["value", "icon", "tooltip", "clickable", "href", "target"], outputs: ["clicked"] }, { kind: "component", type: ClrCopyToClipboard, selector: "clr-copy-to-clipboard", inputs: ["value", "tooltipText", "hiddenUntilHovered"] }] }); }
|
|
17665
17736
|
}
|
|
17666
17737
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrSummaryItem, decorators: [{
|
|
17667
17738
|
type: Component,
|
|
17668
|
-
args: [{ selector: 'clr-summary-item', standalone: true, imports: [ClarityModule, ClrSummaryItemValue, ClrCopyToClipboard], template: "<ng-template #itemTemplate>\n <div\n class=\"summary-item\"\n [class.hidden]=\"\n !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n \"\n >\n <span class=\"summary-item-label\">{{ label() }}:</span>\n <div class=\"summary-item-values\" #valuesContainer>\n @if (hasLoading) {\n <div class=\"summary-item-loading\">\n <span class=\"spinner spinner-inline\"></span>\n <span>{{ loadingText }}</span>\n </div>\n } @else if (hasError) {\n <clr-summary-item-value
|
|
17739
|
+
args: [{ selector: 'clr-summary-item', standalone: true, imports: [ClarityModule, ClrSummaryItemValue, ClrCopyToClipboard], template: "<ng-template #itemTemplate>\n <div\n class=\"summary-item\"\n [attr.data-testid]=\"'summary-item-' + (label())\"\n [class.hidden]=\"\n !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n \"\n >\n <span class=\"summary-item-label\" [attr.data-testid]=\"'summary-item-label-' + (label())\">{{ label() }}:</span>\n <div class=\"summary-item-values\" #valuesContainer [attr.data-testid]=\"'summary-item-values-' + (label())\">\n @if (hasLoading) {\n <div class=\"summary-item-loading\" [attr.data-testid]=\"'summary-item-loading-' + (label())\">\n <span class=\"spinner spinner-inline\" [attr.data-testid]=\"'summary-item-loading-spinner-' + (label())\"></span>\n <span [attr.data-testid]=\"'summary-item-loading-text-' + (label())\">{{ loadingText }}</span>\n </div>\n } @else if (hasError) {\n <clr-summary-item-value\n icon=\"error-standard\"\n class=\"error\"\n [attr.data-testid]=\"'summary-item-error-icon-' + (label())\"\n ></clr-summary-item-value>\n <clr-summary-item-value\n [value]=\"errorText\"\n [clickable]=\"true\"\n (clicked)=\"errorClick()\"\n class=\"error\"\n [attr.data-testid]=\"'summary-item-error-' + (label())\"\n ></clr-summary-item-value>\n } @else if (hasWarning) {\n <clr-summary-item-value\n icon=\"warning-standard\"\n class=\"warning\"\n [attr.data-testid]=\"'summary-item-warning-icon-' + (label())\"\n ></clr-summary-item-value>\n <clr-summary-item-value\n [value]=\"warningText\"\n [clickable]=\"true\"\n (clicked)=\"warningClick()\"\n class=\"warning\"\n [attr.data-testid]=\"'summary-item-warning-' + (label())\"\n ></clr-summary-item-value>\n } @else {\n <ng-content select=\"clr-summary-item-value\"></ng-content>\n @if (showCopyButton) {\n <clr-copy-to-clipboard\n [value]=\"copyableValue\"\n [tooltipText]=\"copyButtonTooltip()\"\n [attr.data-testid]=\"'summary-item-copy-button-' + (label())\"\n ></clr-copy-to-clipboard>\n }\n <ng-content></ng-content>\n @if (showEditButton) {\n <clr-summary-item-value\n [value]=\"editText\"\n [clickable]=\"true\"\n (clicked)=\"editClick()\"\n [attr.data-testid]=\"'summary-item-edit-' + (label())\"\n ></clr-summary-item-value>\n } @else if (!hasProjectedContent) {\n <span class=\"value value-placeholder\" [attr.data-testid]=\"'summary-item-placeholder-' + (label())\">—</span>\n } }\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%;overflow:hidden}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;max-width:100%;overflow:visible}clr-copy-to-clipboard{flex:0 0 auto}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"] }]
|
|
17669
17740
|
}], propDecorators: { template: [{
|
|
17670
17741
|
type: ViewChild,
|
|
17671
17742
|
args: ['itemTemplate', { static: true }]
|
|
@@ -18075,11 +18146,11 @@ class ClrSummaryArea {
|
|
|
18075
18146
|
}
|
|
18076
18147
|
}
|
|
18077
18148
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrSummaryArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18078
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrSummaryArea, isStandalone: true, selector: "clr-summary-area", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "items", predicate: ClrSummaryItem, descendants: true }], viewQueries: [{ propertyName: "panelsRef", first: true, predicate: ["panelsRef"], descendants: true, static: true }], ngImport: i0, template: "<div\n #panelsRef\n class=\"summary-area-panels\"\n [class.is-active]=\"!isCollapsed()\"\n [class.loading-active]=\"hasLoading\"\n [style.height]=\"panelHeight\"\n>\n <div\n class=\"summary-area-panel summary-area-panel--state\"\n [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n [class.is-error]=\"hasError\"\n [class.is-warning]=\"hasWarning\"\n [style.--rows]=\"currentRows()\"\n [attr.aria-hidden]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? 'true' : 'false'\"\n [attr.inert]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? '' : null\"\n >\n <div class=\"summary-area-panel__body\">\n <div\n class=\"summary-area-loading\"\n [class.is-visible]=\"loadingVisible\"\n [attr.aria-hidden]=\"!hasLoading\"\n [style.height]=\"loadingPanelHeight\"\n >\n <clr-spinner [clrMedium]=\"true\"></clr-spinner>\n <span class=\"loading-text\">{{ loadingText }}</span>\n </div>\n @if (hasError) {\n <div class=\"summary-area-alert\">\n <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\">\n <clr-alert-item>\n @if (errorLinkText && errorClick) {\n <span class=\"alert-text\">{{ errorText }}</span>\n <span
|
|
18149
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ClrSummaryArea, isStandalone: true, selector: "clr-summary-area", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "items", predicate: ClrSummaryItem, descendants: true }], viewQueries: [{ propertyName: "panelsRef", first: true, predicate: ["panelsRef"], descendants: true, static: true }], ngImport: i0, template: "<div\n #panelsRef\n class=\"summary-area-panels\"\n data-testid=\"summary-area-panels\"\n [class.is-active]=\"!isCollapsed()\"\n [class.loading-active]=\"hasLoading\"\n [style.height]=\"panelHeight\"\n>\n <div\n class=\"summary-area-panel summary-area-panel--state\"\n data-testid=\"summary-area-state-panel\"\n [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n [class.is-error]=\"hasError\"\n [class.is-warning]=\"hasWarning\"\n [style.--rows]=\"currentRows()\"\n [attr.aria-hidden]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? 'true' : 'false'\"\n [attr.inert]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? '' : null\"\n >\n <div class=\"summary-area-panel__body\">\n <div\n class=\"summary-area-loading\"\n data-testid=\"summary-area-loading\"\n [class.is-visible]=\"loadingVisible\"\n [attr.aria-hidden]=\"!hasLoading\"\n [style.height]=\"loadingPanelHeight\"\n >\n <clr-spinner [clrMedium]=\"true\" data-testid=\"summary-area-loading-spinner\"></clr-spinner>\n <span class=\"loading-text\" data-testid=\"summary-area-loading-text\">{{ loadingText }}</span>\n </div>\n @if (hasError) {\n <div class=\"summary-area-alert\" data-testid=\"summary-area-error-alert\">\n <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\" data-testid=\"summary-area-error\">\n <clr-alert-item>\n @if (errorLinkText && errorClick) {\n <span class=\"alert-text\" data-testid=\"summary-area-error-text\">{{ errorText }}</span>\n <span\n class=\"alert-action\"\n (click)=\"errorClick()\"\n (keydown.enter)=\"errorClick()\"\n data-testid=\"summary-area-error-action\"\n >{{ errorLinkText }}</span\n >\n } @else if (errorClick) {\n <span\n class=\"alert-action\"\n (click)=\"errorClick()\"\n (keydown.enter)=\"errorClick()\"\n data-testid=\"summary-area-error-text-action\"\n >{{ errorText }}</span\n >\n } @else {\n <span class=\"alert-text\" data-testid=\"summary-area-error-text-only\">{{ errorText }}</span>\n }\n </clr-alert-item>\n </clr-alert>\n </div>\n } @else if (hasWarning) {\n <div class=\"summary-area-alert\" data-testid=\"summary-area-warning-alert\">\n <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\" data-testid=\"summary-area-warning\">\n <clr-alert-item>\n @if (warningLinkText && warningClick) {\n <span class=\"alert-text\" data-testid=\"summary-area-warning-text\">{{ warningText }}</span>\n <span\n class=\"alert-action\"\n (click)=\"warningClick()\"\n (keydown.enter)=\"warningClick()\"\n data-testid=\"summary-area-warning-action\"\n >\n {{ warningLinkText }}\n </span>\n } @else if (warningClick) {\n <span\n class=\"alert-action\"\n (click)=\"warningClick()\"\n (keydown.enter)=\"warningClick()\"\n data-testid=\"summary-area-warning-text-action\"\n >{{ warningText }}</span\n >\n } @else {\n <span class=\"alert-text\" data-testid=\"summary-area-warning-text-only\">{{ warningText }}</span>\n }\n </clr-alert-item>\n </clr-alert>\n </div>\n }\n </div>\n </div>\n\n <div\n class=\"summary-area-panel summary-area-panel--grid\"\n data-testid=\"summary-area-grid-panel\"\n [class.is-active]=\"!isCollapsed() && !hasError && !hasWarning && !hasLoading\"\n [attr.aria-hidden]=\"isCollapsed() || hasError || hasWarning || hasLoading ? 'true' : 'false'\"\n [attr.inert]=\"isCollapsed() || hasError || hasWarning || hasLoading ? '' : null\"\n >\n <div class=\"summary-area-panel__body\">\n <div class=\"summary-area-container\">\n <div\n class=\"summary-grid\"\n [style.--columns]=\"currentColumns\"\n [style.--rows]=\"currentRows()\"\n data-testid=\"summary-area-grid\"\n >\n @for (item of visibleItems; track item) {\n <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".summary-area-container,.summary-area-alert{margin:0 24px 9px;max-width:100%;overflow-x:auto}.summary-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,320px));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;max-width:100%;column-gap:36px;row-gap:6px;padding:3px 0}.summary-item{max-width:320px;min-width:0;height:20px;overflow:visible;display:flex;flex-direction:column}clr-alert-item{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}clr-alert-item .alert-text{flex:none;width:auto;white-space:nowrap;align-self:flex-start}clr-alert-item .alert-action{white-space:nowrap}.alert-action{color:var(--cds-alias-typography-link-color)!important;cursor:pointer}.alert-action:visited{color:var(--cds-alias-typography-link-color-visited)}.alert-action:hover,.alert-action:focus{color:var(--cds-alias-typography-link-color-hover)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}.summary-area-panels{position:relative;height:0;opacity:0;transform-origin:top center;pointer-events:none;visibility:hidden;overflow:hidden;margin:0 0 9px;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.is-active{opacity:1;pointer-events:auto;visibility:visible;overflow:visible;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.loading-active{display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s ease-in-out}.summary-area-panel{transform-origin:top center;opacity:0;pointer-events:none;transition:opacity .4s ease-in-out;position:absolute;top:0;left:0;right:0}.summary-area-panel__body{will-change:opacity}.summary-area-panel.is-active{opacity:1;pointer-events:auto;position:relative;transition:opacity .4s ease-in-out}.summary-area-panel.is-active .summary-area-panel__body{overflow:visible}.summary-area-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 24px;padding:3px 0;opacity:0;transition:opacity 0s ease-in-out}.summary-area-loading.is-visible{opacity:1;transition:opacity .4s ease-in-out}.summary-area-loading .loading-text{color:var(--cds-alias-typography-color-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i2$4.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i2$4.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i2$4.ClrAlertText, selector: ".alert-text" }, { kind: "component", type: i2$5.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }] }); }
|
|
18079
18150
|
}
|
|
18080
18151
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrSummaryArea, decorators: [{
|
|
18081
18152
|
type: Component,
|
|
18082
|
-
args: [{ selector: 'clr-summary-area', standalone: true, imports: [CommonModule, ClarityModule], template: "<div\n #panelsRef\n class=\"summary-area-panels\"\n [class.is-active]=\"!isCollapsed()\"\n [class.loading-active]=\"hasLoading\"\n [style.height]=\"panelHeight\"\n>\n <div\n class=\"summary-area-panel summary-area-panel--state\"\n [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n [class.is-error]=\"hasError\"\n [class.is-warning]=\"hasWarning\"\n [style.--rows]=\"currentRows()\"\n [attr.aria-hidden]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? 'true' : 'false'\"\n [attr.inert]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? '' : null\"\n >\n <div class=\"summary-area-panel__body\">\n <div\n class=\"summary-area-loading\"\n [class.is-visible]=\"loadingVisible\"\n [attr.aria-hidden]=\"!hasLoading\"\n [style.height]=\"loadingPanelHeight\"\n >\n <clr-spinner [clrMedium]=\"true\"></clr-spinner>\n <span class=\"loading-text\">{{ loadingText }}</span>\n </div>\n @if (hasError) {\n <div class=\"summary-area-alert\">\n <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\">\n <clr-alert-item>\n @if (errorLinkText && errorClick) {\n <span class=\"alert-text\">{{ errorText }}</span>\n <span
|
|
18153
|
+
args: [{ selector: 'clr-summary-area', standalone: true, imports: [CommonModule, ClarityModule], template: "<div\n #panelsRef\n class=\"summary-area-panels\"\n data-testid=\"summary-area-panels\"\n [class.is-active]=\"!isCollapsed()\"\n [class.loading-active]=\"hasLoading\"\n [style.height]=\"panelHeight\"\n>\n <div\n class=\"summary-area-panel summary-area-panel--state\"\n data-testid=\"summary-area-state-panel\"\n [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n [class.is-error]=\"hasError\"\n [class.is-warning]=\"hasWarning\"\n [style.--rows]=\"currentRows()\"\n [attr.aria-hidden]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? 'true' : 'false'\"\n [attr.inert]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? '' : null\"\n >\n <div class=\"summary-area-panel__body\">\n <div\n class=\"summary-area-loading\"\n data-testid=\"summary-area-loading\"\n [class.is-visible]=\"loadingVisible\"\n [attr.aria-hidden]=\"!hasLoading\"\n [style.height]=\"loadingPanelHeight\"\n >\n <clr-spinner [clrMedium]=\"true\" data-testid=\"summary-area-loading-spinner\"></clr-spinner>\n <span class=\"loading-text\" data-testid=\"summary-area-loading-text\">{{ loadingText }}</span>\n </div>\n @if (hasError) {\n <div class=\"summary-area-alert\" data-testid=\"summary-area-error-alert\">\n <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\" data-testid=\"summary-area-error\">\n <clr-alert-item>\n @if (errorLinkText && errorClick) {\n <span class=\"alert-text\" data-testid=\"summary-area-error-text\">{{ errorText }}</span>\n <span\n class=\"alert-action\"\n (click)=\"errorClick()\"\n (keydown.enter)=\"errorClick()\"\n data-testid=\"summary-area-error-action\"\n >{{ errorLinkText }}</span\n >\n } @else if (errorClick) {\n <span\n class=\"alert-action\"\n (click)=\"errorClick()\"\n (keydown.enter)=\"errorClick()\"\n data-testid=\"summary-area-error-text-action\"\n >{{ errorText }}</span\n >\n } @else {\n <span class=\"alert-text\" data-testid=\"summary-area-error-text-only\">{{ errorText }}</span>\n }\n </clr-alert-item>\n </clr-alert>\n </div>\n } @else if (hasWarning) {\n <div class=\"summary-area-alert\" data-testid=\"summary-area-warning-alert\">\n <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\" data-testid=\"summary-area-warning\">\n <clr-alert-item>\n @if (warningLinkText && warningClick) {\n <span class=\"alert-text\" data-testid=\"summary-area-warning-text\">{{ warningText }}</span>\n <span\n class=\"alert-action\"\n (click)=\"warningClick()\"\n (keydown.enter)=\"warningClick()\"\n data-testid=\"summary-area-warning-action\"\n >\n {{ warningLinkText }}\n </span>\n } @else if (warningClick) {\n <span\n class=\"alert-action\"\n (click)=\"warningClick()\"\n (keydown.enter)=\"warningClick()\"\n data-testid=\"summary-area-warning-text-action\"\n >{{ warningText }}</span\n >\n } @else {\n <span class=\"alert-text\" data-testid=\"summary-area-warning-text-only\">{{ warningText }}</span>\n }\n </clr-alert-item>\n </clr-alert>\n </div>\n }\n </div>\n </div>\n\n <div\n class=\"summary-area-panel summary-area-panel--grid\"\n data-testid=\"summary-area-grid-panel\"\n [class.is-active]=\"!isCollapsed() && !hasError && !hasWarning && !hasLoading\"\n [attr.aria-hidden]=\"isCollapsed() || hasError || hasWarning || hasLoading ? 'true' : 'false'\"\n [attr.inert]=\"isCollapsed() || hasError || hasWarning || hasLoading ? '' : null\"\n >\n <div class=\"summary-area-panel__body\">\n <div class=\"summary-area-container\">\n <div\n class=\"summary-grid\"\n [style.--columns]=\"currentColumns\"\n [style.--rows]=\"currentRows()\"\n data-testid=\"summary-area-grid\"\n >\n @for (item of visibleItems; track item) {\n <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".summary-area-container,.summary-area-alert{margin:0 24px 9px;max-width:100%;overflow-x:auto}.summary-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,320px));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;max-width:100%;column-gap:36px;row-gap:6px;padding:3px 0}.summary-item{max-width:320px;min-width:0;height:20px;overflow:visible;display:flex;flex-direction:column}clr-alert-item{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}clr-alert-item .alert-text{flex:none;width:auto;white-space:nowrap;align-self:flex-start}clr-alert-item .alert-action{white-space:nowrap}.alert-action{color:var(--cds-alias-typography-link-color)!important;cursor:pointer}.alert-action:visited{color:var(--cds-alias-typography-link-color-visited)}.alert-action:hover,.alert-action:focus{color:var(--cds-alias-typography-link-color-hover)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}.summary-area-panels{position:relative;height:0;opacity:0;transform-origin:top center;pointer-events:none;visibility:hidden;overflow:hidden;margin:0 0 9px;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.is-active{opacity:1;pointer-events:auto;visibility:visible;overflow:visible;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.loading-active{display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s ease-in-out}.summary-area-panel{transform-origin:top center;opacity:0;pointer-events:none;transition:opacity .4s ease-in-out;position:absolute;top:0;left:0;right:0}.summary-area-panel__body{will-change:opacity}.summary-area-panel.is-active{opacity:1;pointer-events:auto;position:relative;transition:opacity .4s ease-in-out}.summary-area-panel.is-active .summary-area-panel__body{overflow:visible}.summary-area-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 24px;padding:3px 0;opacity:0;transition:opacity 0s ease-in-out}.summary-area-loading.is-visible{opacity:1;transition:opacity .4s ease-in-out}.summary-area-loading .loading-text{color:var(--cds-alias-typography-color-300)}\n"] }]
|
|
18083
18154
|
}], ctorParameters: () => [], propDecorators: { items: [{
|
|
18084
18155
|
type: ContentChildren,
|
|
18085
18156
|
args: [ClrSummaryItem, { descendants: true }]
|
|
@@ -18124,11 +18195,11 @@ class ClrSummaryAreaToggle {
|
|
|
18124
18195
|
this.summaryToggle.emit();
|
|
18125
18196
|
}
|
|
18126
18197
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrSummaryAreaToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18127
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: ClrSummaryAreaToggle, isStandalone: true, selector: "clr-summary-area-toggle", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { summaryToggle: "summaryToggle" }, host: { listeners: { "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<button\n class=\"summary-area-toggle\"\n type=\"button\"\n [attr.aria-pressed]=\"!collapsed()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleToggle($event)\"\n>\n <cds-icon\n shape=\"angle-double\"\n size=\"20\"\n direction=\"up\"\n class=\"icon-rotate summary-area-icon\"\n [class.icon-rotated]=\"collapsed()\"\n [class.no-animation]=\"suppressAnimation\"\n ></cds-icon>\n</button>\n", styles: [".summary-area-toggle{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.summary-area-icon{margin-left:10px;margin-right:10px;opacity:.7}.icon-rotated{transform:rotate(180deg);transition:all .2s ease-in-out}.icon-rotated.no-animation{transition:none!important}.summary-area-toggle:disabled{cursor:not-allowed;opacity:.4}\n"], dependencies: [{ kind: "component", type: ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "ngmodule", type: ClrTooltipModule }] }); }
|
|
18198
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: ClrSummaryAreaToggle, isStandalone: true, selector: "clr-summary-area-toggle", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { summaryToggle: "summaryToggle" }, host: { listeners: { "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<button\n class=\"summary-area-toggle\"\n data-testid=\"summary-area-toggle\"\n type=\"button\"\n [attr.aria-pressed]=\"!collapsed()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleToggle($event)\"\n>\n <cds-icon\n shape=\"angle-double\"\n size=\"20\"\n direction=\"up\"\n class=\"icon-rotate summary-area-icon\"\n [class.icon-rotated]=\"collapsed()\"\n [class.no-animation]=\"suppressAnimation\"\n ></cds-icon>\n</button>\n", styles: [".summary-area-toggle{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.summary-area-icon{margin-left:10px;margin-right:10px;opacity:.7}.icon-rotated{transform:rotate(180deg);transition:all .2s ease-in-out}.icon-rotated.no-animation{transition:none!important}.summary-area-toggle:disabled{cursor:not-allowed;opacity:.4}\n"], dependencies: [{ kind: "component", type: ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "ngmodule", type: ClrTooltipModule }] }); }
|
|
18128
18199
|
}
|
|
18129
18200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrSummaryAreaToggle, decorators: [{
|
|
18130
18201
|
type: Component,
|
|
18131
|
-
args: [{ selector: 'clr-summary-area-toggle', standalone: true, imports: [ClrIcon, ClrTooltipModule], template: "<button\n class=\"summary-area-toggle\"\n type=\"button\"\n [attr.aria-pressed]=\"!collapsed()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleToggle($event)\"\n>\n <cds-icon\n shape=\"angle-double\"\n size=\"20\"\n direction=\"up\"\n class=\"icon-rotate summary-area-icon\"\n [class.icon-rotated]=\"collapsed()\"\n [class.no-animation]=\"suppressAnimation\"\n ></cds-icon>\n</button>\n", styles: [".summary-area-toggle{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.summary-area-icon{margin-left:10px;margin-right:10px;opacity:.7}.icon-rotated{transform:rotate(180deg);transition:all .2s ease-in-out}.icon-rotated.no-animation{transition:none!important}.summary-area-toggle:disabled{cursor:not-allowed;opacity:.4}\n"] }]
|
|
18202
|
+
args: [{ selector: 'clr-summary-area-toggle', standalone: true, imports: [ClrIcon, ClrTooltipModule], template: "<button\n class=\"summary-area-toggle\"\n data-testid=\"summary-area-toggle\"\n type=\"button\"\n [attr.aria-pressed]=\"!collapsed()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleToggle($event)\"\n>\n <cds-icon\n shape=\"angle-double\"\n size=\"20\"\n direction=\"up\"\n class=\"icon-rotate summary-area-icon\"\n [class.icon-rotated]=\"collapsed()\"\n [class.no-animation]=\"suppressAnimation\"\n ></cds-icon>\n</button>\n", styles: [".summary-area-toggle{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.summary-area-icon{margin-left:10px;margin-right:10px;opacity:.7}.icon-rotated{transform:rotate(180deg);transition:all .2s ease-in-out}.icon-rotated.no-animation{transition:none!important}.summary-area-toggle:disabled{cursor:not-allowed;opacity:.4}\n"] }]
|
|
18132
18203
|
}], propDecorators: { summaryToggle: [{ type: i0.Output, args: ["summaryToggle"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], localStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "localStorageKey", required: false }] }], handleKeydown: [{
|
|
18133
18204
|
type: HostListener,
|
|
18134
18205
|
args: ['keydown', ['$event']]
|