cps-ui-kit 21.13.0 → 21.15.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/cps-ui-kit.mjs +354 -66
- package/fesm2022/cps-ui-kit.mjs.map +1 -1
- package/package.json +1 -1
- package/types/cps-ui-kit.d.ts +131 -32
package/fesm2022/cps-ui-kit.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i2 from '@angular/common';
|
|
2
2
|
import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { InjectionToken, inject, Input, Inject, Component, EventEmitter, Output, input, computed, ElementRef, PLATFORM_ID, SecurityContext, Directive, Pipe, signal, Injectable, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Self, Optional, HostBinding, booleanAttribute, ChangeDetectorRef, ViewChildren, TemplateRef, ContentChildren, Host, HostListener, ContentChild, RendererStyleFlags2, createComponent, createEnvironmentInjector, SkipSelf } from '@angular/core';
|
|
4
|
+
import { InjectionToken, inject, Input, Inject, Component, EventEmitter, Output, input, computed, ElementRef, PLATFORM_ID, SecurityContext, Directive, Pipe, signal, Injectable, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Self, Optional, HostBinding, booleanAttribute, ChangeDetectorRef, ViewChildren, TemplateRef, viewChildren, afterRenderEffect, ContentChildren, Host, HostListener, ContentChild, RendererStyleFlags2, createComponent, createEnvironmentInjector, SkipSelf } from '@angular/core';
|
|
5
5
|
import * as i1$2 from '@angular/forms';
|
|
6
6
|
import { Validators, FormsModule, FormBuilder, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import { Subject, takeUntil, debounceTime, distinctUntilChanged, take, catchError, of, Subscription, fromEvent } from 'rxjs';
|
|
@@ -1033,6 +1033,17 @@ class CpsFocusService {
|
|
|
1033
1033
|
isKeyboard() {
|
|
1034
1034
|
return this.lastInput() === 'keyboard';
|
|
1035
1035
|
}
|
|
1036
|
+
/**
|
|
1037
|
+
* Suppresses the focus-visible ring on `el` for its next focus event.
|
|
1038
|
+
*
|
|
1039
|
+
* Adds `suppress-focus-visible` to the element and removes it automatically
|
|
1040
|
+
* on the next `blur`. Call from a `mousedown` handler to prevent the ring
|
|
1041
|
+
* from appearing when the browser moves focus to the element via pointer.
|
|
1042
|
+
*/
|
|
1043
|
+
suppressNextFocusRing(el) {
|
|
1044
|
+
el.classList.add('suppress-focus-visible');
|
|
1045
|
+
el.addEventListener('blur', () => el.classList.remove('suppress-focus-visible'), { once: true });
|
|
1046
|
+
}
|
|
1036
1047
|
/**
|
|
1037
1048
|
* Focuses `el`, conditionally suppressing the focus-visible ring.
|
|
1038
1049
|
*
|
|
@@ -1042,8 +1053,7 @@ class CpsFocusService {
|
|
|
1042
1053
|
*/
|
|
1043
1054
|
focusElement(el, showFocusRing) {
|
|
1044
1055
|
if (!showFocusRing) {
|
|
1045
|
-
|
|
1046
|
-
el.addEventListener('blur', () => el.classList.remove('suppress-focus-visible'), { once: true });
|
|
1056
|
+
this.suppressNextFocusRing(el);
|
|
1047
1057
|
}
|
|
1048
1058
|
el.focus();
|
|
1049
1059
|
}
|
|
@@ -2175,7 +2185,7 @@ class CpsAutocompleteComponent {
|
|
|
2175
2185
|
this._options = [];
|
|
2176
2186
|
this._optionIds = new WeakMap();
|
|
2177
2187
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
2178
|
-
this.onChange = (
|
|
2188
|
+
this.onChange = (_event) => { };
|
|
2179
2189
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
2180
2190
|
this.onTouched = () => { };
|
|
2181
2191
|
if (this._control) {
|
|
@@ -2227,8 +2237,10 @@ class CpsAutocompleteComponent {
|
|
|
2227
2237
|
loadChanges.previousValue) {
|
|
2228
2238
|
this._toggleOptions(true);
|
|
2229
2239
|
}
|
|
2230
|
-
if (
|
|
2231
|
-
|
|
2240
|
+
if (changes.label || changes.ariaLabel) {
|
|
2241
|
+
if (!this.label?.trim() && !this.ariaLabel?.trim()) {
|
|
2242
|
+
console.error('CpsAutocompleteComponent: unlabeled autocomplete component must have an ariaLabel for accessibility.');
|
|
2243
|
+
}
|
|
2232
2244
|
}
|
|
2233
2245
|
}
|
|
2234
2246
|
ngAfterViewInit() {
|
|
@@ -2365,7 +2377,7 @@ class CpsAutocompleteComponent {
|
|
|
2365
2377
|
}, 0);
|
|
2366
2378
|
}
|
|
2367
2379
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
2368
|
-
setDisabledState(
|
|
2380
|
+
setDisabledState(_disabled) { }
|
|
2369
2381
|
onBlur() {
|
|
2370
2382
|
this.isActive = false;
|
|
2371
2383
|
this._confirmInput(this.inputText || '', false);
|
|
@@ -3034,7 +3046,7 @@ class CpsButtonToggleComponent {
|
|
|
3034
3046
|
this.largestButtonWidthRem = 0;
|
|
3035
3047
|
this._rootFontSizePx = 16;
|
|
3036
3048
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3037
|
-
this.onChange = (
|
|
3049
|
+
this.onChange = (_event) => { };
|
|
3038
3050
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3039
3051
|
this.onTouched = () => { };
|
|
3040
3052
|
if (this._control) {
|
|
@@ -3058,17 +3070,21 @@ class CpsButtonToggleComponent {
|
|
|
3058
3070
|
this._setEqualWidths();
|
|
3059
3071
|
}
|
|
3060
3072
|
}
|
|
3061
|
-
ngOnChanges() {
|
|
3062
|
-
if (
|
|
3063
|
-
|
|
3073
|
+
ngOnChanges(changes) {
|
|
3074
|
+
if (changes.label || changes.ariaLabel) {
|
|
3075
|
+
if (!this.label?.trim() && !this.ariaLabel?.trim()) {
|
|
3076
|
+
console.error('CpsButtonToggleComponent: unlabeled button toggle component must have an ariaLabel for accessibility.');
|
|
3077
|
+
}
|
|
3064
3078
|
}
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
|
|
3079
|
+
if (changes.options) {
|
|
3080
|
+
const hasInaccessibleOption = this.options.some((opt) => !opt.label?.trim() && !opt.ariaLabel?.trim());
|
|
3081
|
+
if (hasInaccessibleOption) {
|
|
3082
|
+
console.error('CpsButtonToggleComponent: each unlabeled option must have an ariaLabel for accessibility.');
|
|
3083
|
+
}
|
|
3068
3084
|
}
|
|
3069
3085
|
}
|
|
3070
3086
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3071
|
-
setDisabledState(
|
|
3087
|
+
setDisabledState(_disabled) { }
|
|
3072
3088
|
registerOnChange(fn) {
|
|
3073
3089
|
this.onChange = fn;
|
|
3074
3090
|
}
|
|
@@ -3285,7 +3301,7 @@ class CpsButtonComponent {
|
|
|
3285
3301
|
this.classesList = [];
|
|
3286
3302
|
this.enterActive = false;
|
|
3287
3303
|
}
|
|
3288
|
-
ngOnChanges() {
|
|
3304
|
+
ngOnChanges(changes) {
|
|
3289
3305
|
this.buttonColor = getCSSColor(this.color, this.document);
|
|
3290
3306
|
this.borderRadius = convertSize(this.borderRadius);
|
|
3291
3307
|
this.textColor =
|
|
@@ -3295,8 +3311,10 @@ class CpsButtonComponent {
|
|
|
3295
3311
|
if (this.disabled || this.loading) {
|
|
3296
3312
|
this.enterActive = false;
|
|
3297
3313
|
}
|
|
3298
|
-
if (
|
|
3299
|
-
|
|
3314
|
+
if (changes.label || changes.ariaLabel) {
|
|
3315
|
+
if (!this.label?.trim() && !this.ariaLabel?.trim()) {
|
|
3316
|
+
console.error('CpsButtonComponent: icon-only or unlabeled button must have an ariaLabel for accessibility.');
|
|
3317
|
+
}
|
|
3300
3318
|
}
|
|
3301
3319
|
this.setClasses();
|
|
3302
3320
|
}
|
|
@@ -3502,7 +3520,7 @@ class CpsCheckboxComponent {
|
|
|
3502
3520
|
this.valueChanged = new EventEmitter();
|
|
3503
3521
|
this._value = false;
|
|
3504
3522
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3505
|
-
this.onChange = (
|
|
3523
|
+
this.onChange = (_event) => { };
|
|
3506
3524
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3507
3525
|
this.onTouched = () => { };
|
|
3508
3526
|
if (this._control) {
|
|
@@ -3512,9 +3530,11 @@ class CpsCheckboxComponent {
|
|
|
3512
3530
|
ngOnInit() {
|
|
3513
3531
|
this.iconColor = getCSSColor(this.iconColor, this.document);
|
|
3514
3532
|
}
|
|
3515
|
-
ngOnChanges() {
|
|
3516
|
-
if (
|
|
3517
|
-
|
|
3533
|
+
ngOnChanges(changes) {
|
|
3534
|
+
if (changes.label || changes.ariaLabel) {
|
|
3535
|
+
if (!this.label?.trim() && !this.ariaLabel?.trim()) {
|
|
3536
|
+
console.error('CpsCheckboxComponent: icon-only or unlabeled checkbox must have an ariaLabel for accessibility.');
|
|
3537
|
+
}
|
|
3518
3538
|
}
|
|
3519
3539
|
}
|
|
3520
3540
|
registerOnChange(fn) {
|
|
@@ -3538,7 +3558,7 @@ class CpsCheckboxComponent {
|
|
|
3538
3558
|
this.valueChanged.emit(value);
|
|
3539
3559
|
}
|
|
3540
3560
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3541
|
-
setDisabledState(
|
|
3561
|
+
setDisabledState(_disabled) { }
|
|
3542
3562
|
focus() {
|
|
3543
3563
|
this._elementRef?.nativeElement?.querySelector('input')?.focus();
|
|
3544
3564
|
}
|
|
@@ -3760,7 +3780,7 @@ class CpsInputComponent {
|
|
|
3760
3780
|
this.cvtWidth = '';
|
|
3761
3781
|
this._value = '';
|
|
3762
3782
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3763
|
-
this.onChange = (
|
|
3783
|
+
this.onChange = (_event) => { };
|
|
3764
3784
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3765
3785
|
this.onTouched = () => { };
|
|
3766
3786
|
if (this._control) {
|
|
@@ -3860,7 +3880,7 @@ class CpsInputComponent {
|
|
|
3860
3880
|
this.currentType = this.currentType === 'password' ? 'text' : 'password';
|
|
3861
3881
|
}
|
|
3862
3882
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3863
|
-
setDisabledState(
|
|
3883
|
+
setDisabledState(_disabled) { }
|
|
3864
3884
|
onClickPrefixIcon() {
|
|
3865
3885
|
if (!this.prefixIconClickable || this.readonly || this.disabled)
|
|
3866
3886
|
return;
|
|
@@ -4069,7 +4089,7 @@ class CpsDatepickerComponent {
|
|
|
4069
4089
|
this.cvtWidth = '';
|
|
4070
4090
|
this._value = null;
|
|
4071
4091
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
4072
|
-
this.onChange = (
|
|
4092
|
+
this.onChange = (_event) => { };
|
|
4073
4093
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
4074
4094
|
this.onTouched = () => { };
|
|
4075
4095
|
if (this._control) {
|
|
@@ -5166,7 +5186,7 @@ class CpsSelectComponent {
|
|
|
5166
5186
|
this.virtualScrollItemSize = 44;
|
|
5167
5187
|
this.selectBoxWidth = 0;
|
|
5168
5188
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
5169
|
-
this.onChange = (
|
|
5189
|
+
this.onChange = (_event) => { };
|
|
5170
5190
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
5171
5191
|
this.onTouched = () => { };
|
|
5172
5192
|
if (this._control) {
|
|
@@ -5451,7 +5471,7 @@ class CpsSelectComponent {
|
|
|
5451
5471
|
this._dehighlightOption();
|
|
5452
5472
|
}
|
|
5453
5473
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
5454
|
-
setDisabledState(
|
|
5474
|
+
setDisabledState(_disabled) { }
|
|
5455
5475
|
onBlur() {
|
|
5456
5476
|
this._checkErrors();
|
|
5457
5477
|
this.blurred.emit();
|
|
@@ -5765,9 +5785,11 @@ class CpsRadioButtonComponent {
|
|
|
5765
5785
|
this.focused = new EventEmitter();
|
|
5766
5786
|
this.inputId = generateUniqueId('cps-radio-button-input');
|
|
5767
5787
|
}
|
|
5768
|
-
ngOnChanges() {
|
|
5769
|
-
if (
|
|
5770
|
-
|
|
5788
|
+
ngOnChanges(changes) {
|
|
5789
|
+
if (changes.option) {
|
|
5790
|
+
if (!this.option.label?.trim() && !this.option.ariaLabel?.trim()) {
|
|
5791
|
+
console.error('CpsRadioButtonComponent: unlabeled radio button component must have an ariaLabel for accessibility.');
|
|
5792
|
+
}
|
|
5771
5793
|
}
|
|
5772
5794
|
}
|
|
5773
5795
|
updateValue(event) {
|
|
@@ -5906,7 +5928,7 @@ class CpsRadioGroupComponent {
|
|
|
5906
5928
|
this._value = undefined;
|
|
5907
5929
|
this.error = '';
|
|
5908
5930
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
5909
|
-
this.onChange = (
|
|
5931
|
+
this.onChange = (_event) => { };
|
|
5910
5932
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
5911
5933
|
this.onTouched = () => { };
|
|
5912
5934
|
if (this._control) {
|
|
@@ -5918,9 +5940,11 @@ class CpsRadioGroupComponent {
|
|
|
5918
5940
|
this._checkErrors();
|
|
5919
5941
|
});
|
|
5920
5942
|
}
|
|
5921
|
-
ngOnChanges() {
|
|
5922
|
-
if (
|
|
5923
|
-
|
|
5943
|
+
ngOnChanges(changes) {
|
|
5944
|
+
if (changes.groupLabel || changes.ariaLabel) {
|
|
5945
|
+
if (!this.groupLabel?.trim() && !this.ariaLabel?.trim()) {
|
|
5946
|
+
console.error('CpsRadioGroupComponent: unlabeled radio group component must have an ariaLabel for accessibility.');
|
|
5947
|
+
}
|
|
5924
5948
|
}
|
|
5925
5949
|
}
|
|
5926
5950
|
ngOnDestroy() {
|
|
@@ -5946,7 +5970,7 @@ class CpsRadioGroupComponent {
|
|
|
5946
5970
|
this.valueChanged.emit(value);
|
|
5947
5971
|
}
|
|
5948
5972
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
5949
|
-
setDisabledState(
|
|
5973
|
+
setDisabledState(_disabled) { }
|
|
5950
5974
|
onBlur() {
|
|
5951
5975
|
this._checkErrors();
|
|
5952
5976
|
this.blurred.emit();
|
|
@@ -6619,7 +6643,7 @@ class CpsTimepickerComponent {
|
|
|
6619
6643
|
this.secondsError = '';
|
|
6620
6644
|
this._value = undefined;
|
|
6621
6645
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
6622
|
-
this.onChange = (
|
|
6646
|
+
this.onChange = (_event) => { };
|
|
6623
6647
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
6624
6648
|
this.onTouched = () => { };
|
|
6625
6649
|
if (this._control) {
|
|
@@ -6656,7 +6680,7 @@ class CpsTimepickerComponent {
|
|
|
6656
6680
|
this.onTouched = fn;
|
|
6657
6681
|
}
|
|
6658
6682
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
6659
|
-
setDisabledState(
|
|
6683
|
+
setDisabledState(_disabled) { }
|
|
6660
6684
|
writeValue(value) {
|
|
6661
6685
|
this.value = value;
|
|
6662
6686
|
}
|
|
@@ -8256,7 +8280,7 @@ class CpsSidebarMenuComponent {
|
|
|
8256
8280
|
this.isExpanded = !this.isExpanded;
|
|
8257
8281
|
}
|
|
8258
8282
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CpsSidebarMenuComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CpsSidebarMenuComponent, isStandalone: true, selector: "cps-sidebar-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: false, isRequired: false, transformFunction: null }, exactRoutes: { classPropertyName: "exactRoutes", publicName: "exactRoutes", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "allMenus", predicate: ["popupMenu"], descendants: true }], ngImport: i0, template: "<div\n class=\"cps-sidebar-menu\"\n [style.height]=\"cvtHeight()\"\n [class.cps-sidebar-menu-collapsed]=\"!isExpanded\">\n <nav\n class=\"cps-sidebar-menubar\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-description]=\"`Sidebar ${isExpanded ? 'expanded' : 'collapsed'}`\">\n @for (item of items; track item) {\n @if (item.url) {\n <a\n class=\"cps-sidebar-menu-item\"\n tabindex=\"0\"\n [routerLink]=\"item.disabled ? null : [item.url]\"\n routerLinkActive=\"active\"\n ariaCurrentWhenActive=\"page\"\n [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n [class.disabled]=\"item.disabled\"\n [attr.aria-disabled]=\"item.disabled || null\"\n [attr.aria-label]=\"item.title\">\n <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n </cps-icon>\n <span\n class=\"cps-sidebar-menu-item-label\"\n [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n {{ item.title }}\n </span>\n </a>\n }\n @if (!item.url) {\n <cps-menu\n #popupMenu\n [items]=\"item.items || []\"\n [header]=\"item.title\"\n [focusOnShow]=\"false\"\n showTransitionOptions=\"0s\"\n hideTransitionOptions=\"0s\"\n [withArrow]=\"false\"\n (containerMouseLeave)=\"leaveMenu($event, popupMenu)\">\n </cps-menu>\n <button\n type=\"button\"\n (mouseenter)=\"showMenu($event, popupMenu)\"\n (mouseleave)=\"leaveMenu($event, popupMenu)\"\n (focusin)=\"showMenu($event, popupMenu, item)\"\n (focusout)=\"leaveMenu($event, popupMenu)\"\n (click)=\"toggleMenu($event, popupMenu, item)\"\n class=\"cps-sidebar-menu-item menu-trigger\"\n [class.active]=\"isActive(item)\"\n [class.menu-open]=\"popupMenu.isVisible()\"\n [class.disabled]=\"item.disabled\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"\n focusedItemWithMenu === item ? popupMenu.isVisible() : null\n \"\n [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled || null\"\n [attr.aria-label]=\"item.title\">\n <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n </cps-icon>\n <span\n class=\"cps-sidebar-menu-item-label\"\n [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n {{ item.title }}\n </span>\n </button>\n }\n }\n </nav>\n <button\n type=\"button\"\n class=\"expand-area\"\n (click)=\"toggleSidebar()\"\n [attr.aria-label]=\"isExpanded ? 'Collapse sidebar' : 'Expand sidebar'\"\n [attr.aria-expanded]=\"isExpanded\">\n <cps-icon icon=\"menu-shrink\" size=\"normal\" aria-hidden=\"true\"> </cps-icon>\n </button>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 3.75rem #0000001a;width:5rem;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .cps-sidebar-menubar{width:100%}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:1.5rem;position:absolute;bottom:5%;background:none;border:none;padding:0;font:inherit;color:inherit}:host .cps-sidebar-menu .expand-area cps-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}:host .cps-sidebar-menu .expand-area:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .expand-area:focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .expand-area:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .expand-area:focus-visible:after{inset:.
|
|
8283
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CpsSidebarMenuComponent, isStandalone: true, selector: "cps-sidebar-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: false, isRequired: false, transformFunction: null }, exactRoutes: { classPropertyName: "exactRoutes", publicName: "exactRoutes", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "allMenus", predicate: ["popupMenu"], descendants: true }], ngImport: i0, template: "<div\n class=\"cps-sidebar-menu\"\n [style.height]=\"cvtHeight()\"\n [class.cps-sidebar-menu-collapsed]=\"!isExpanded\">\n <nav\n class=\"cps-sidebar-menubar\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-description]=\"`Sidebar ${isExpanded ? 'expanded' : 'collapsed'}`\">\n @for (item of items; track item) {\n @if (item.url) {\n <a\n class=\"cps-sidebar-menu-item\"\n tabindex=\"0\"\n [routerLink]=\"item.disabled ? null : [item.url]\"\n routerLinkActive=\"active\"\n ariaCurrentWhenActive=\"page\"\n [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n [class.disabled]=\"item.disabled\"\n [attr.aria-disabled]=\"item.disabled || null\"\n [attr.aria-label]=\"item.title\">\n <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n </cps-icon>\n <span\n class=\"cps-sidebar-menu-item-label\"\n [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n {{ item.title }}\n </span>\n </a>\n }\n @if (!item.url) {\n <cps-menu\n #popupMenu\n [items]=\"item.items || []\"\n [header]=\"item.title\"\n [focusOnShow]=\"false\"\n showTransitionOptions=\"0s\"\n hideTransitionOptions=\"0s\"\n [withArrow]=\"false\"\n (containerMouseLeave)=\"leaveMenu($event, popupMenu)\">\n </cps-menu>\n <button\n type=\"button\"\n (mouseenter)=\"showMenu($event, popupMenu)\"\n (mouseleave)=\"leaveMenu($event, popupMenu)\"\n (focusin)=\"showMenu($event, popupMenu, item)\"\n (focusout)=\"leaveMenu($event, popupMenu)\"\n (click)=\"toggleMenu($event, popupMenu, item)\"\n class=\"cps-sidebar-menu-item menu-trigger\"\n [class.active]=\"isActive(item)\"\n [class.menu-open]=\"popupMenu.isVisible()\"\n [class.disabled]=\"item.disabled\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"\n focusedItemWithMenu === item ? popupMenu.isVisible() : null\n \"\n [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled || null\"\n [attr.aria-label]=\"item.title\">\n <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n </cps-icon>\n <span\n class=\"cps-sidebar-menu-item-label\"\n [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n {{ item.title }}\n </span>\n </button>\n }\n }\n </nav>\n <button\n type=\"button\"\n class=\"expand-area\"\n (click)=\"toggleSidebar()\"\n [attr.aria-label]=\"isExpanded ? 'Collapse sidebar' : 'Expand sidebar'\"\n [attr.aria-expanded]=\"isExpanded\">\n <cps-icon icon=\"menu-shrink\" size=\"normal\" aria-hidden=\"true\"> </cps-icon>\n </button>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 3.75rem #0000001a;width:5rem;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .cps-sidebar-menubar{width:100%}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:1.5rem;position:absolute;bottom:5%;background:none;border:none;padding:0;font:inherit;color:inherit}:host .cps-sidebar-menu .expand-area cps-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}:host .cps-sidebar-menu .expand-area:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .expand-area:focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .expand-area:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .expand-area:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .expand-area:focus-visible{position:absolute}:host .cps-sidebar-menu .expand-area:hover,:host .cps-sidebar-menu .expand-area:focus-visible{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:5rem;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:.0625rem solid var(--cps-color-line-mid);-webkit-user-select:none;user-select:none;background:none;border-left:none;border-right:none;border-top:none;padding:0;font:inherit}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:.6875rem;line-height:.8125rem;width:5rem;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active):not(.disabled){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-mild)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:2.5rem}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area cps-icon{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], animations: [
|
|
8260
8284
|
trigger('onExpand', [
|
|
8261
8285
|
state('collapsed', style({
|
|
8262
8286
|
marginTop: '0',
|
|
@@ -8292,7 +8316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
8292
8316
|
animate('0.2s cubic-bezier(0.4, 0, 0.2, 1)')
|
|
8293
8317
|
])
|
|
8294
8318
|
])
|
|
8295
|
-
], template: "<div\n class=\"cps-sidebar-menu\"\n [style.height]=\"cvtHeight()\"\n [class.cps-sidebar-menu-collapsed]=\"!isExpanded\">\n <nav\n class=\"cps-sidebar-menubar\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-description]=\"`Sidebar ${isExpanded ? 'expanded' : 'collapsed'}`\">\n @for (item of items; track item) {\n @if (item.url) {\n <a\n class=\"cps-sidebar-menu-item\"\n tabindex=\"0\"\n [routerLink]=\"item.disabled ? null : [item.url]\"\n routerLinkActive=\"active\"\n ariaCurrentWhenActive=\"page\"\n [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n [class.disabled]=\"item.disabled\"\n [attr.aria-disabled]=\"item.disabled || null\"\n [attr.aria-label]=\"item.title\">\n <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n </cps-icon>\n <span\n class=\"cps-sidebar-menu-item-label\"\n [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n {{ item.title }}\n </span>\n </a>\n }\n @if (!item.url) {\n <cps-menu\n #popupMenu\n [items]=\"item.items || []\"\n [header]=\"item.title\"\n [focusOnShow]=\"false\"\n showTransitionOptions=\"0s\"\n hideTransitionOptions=\"0s\"\n [withArrow]=\"false\"\n (containerMouseLeave)=\"leaveMenu($event, popupMenu)\">\n </cps-menu>\n <button\n type=\"button\"\n (mouseenter)=\"showMenu($event, popupMenu)\"\n (mouseleave)=\"leaveMenu($event, popupMenu)\"\n (focusin)=\"showMenu($event, popupMenu, item)\"\n (focusout)=\"leaveMenu($event, popupMenu)\"\n (click)=\"toggleMenu($event, popupMenu, item)\"\n class=\"cps-sidebar-menu-item menu-trigger\"\n [class.active]=\"isActive(item)\"\n [class.menu-open]=\"popupMenu.isVisible()\"\n [class.disabled]=\"item.disabled\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"\n focusedItemWithMenu === item ? popupMenu.isVisible() : null\n \"\n [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled || null\"\n [attr.aria-label]=\"item.title\">\n <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n </cps-icon>\n <span\n class=\"cps-sidebar-menu-item-label\"\n [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n {{ item.title }}\n </span>\n </button>\n }\n }\n </nav>\n <button\n type=\"button\"\n class=\"expand-area\"\n (click)=\"toggleSidebar()\"\n [attr.aria-label]=\"isExpanded ? 'Collapse sidebar' : 'Expand sidebar'\"\n [attr.aria-expanded]=\"isExpanded\">\n <cps-icon icon=\"menu-shrink\" size=\"normal\" aria-hidden=\"true\"> </cps-icon>\n </button>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 3.75rem #0000001a;width:5rem;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .cps-sidebar-menubar{width:100%}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:1.5rem;position:absolute;bottom:5%;background:none;border:none;padding:0;font:inherit;color:inherit}:host .cps-sidebar-menu .expand-area cps-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}:host .cps-sidebar-menu .expand-area:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .expand-area:focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .expand-area:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .expand-area:focus-visible:after{inset:.
|
|
8319
|
+
], template: "<div\n class=\"cps-sidebar-menu\"\n [style.height]=\"cvtHeight()\"\n [class.cps-sidebar-menu-collapsed]=\"!isExpanded\">\n <nav\n class=\"cps-sidebar-menubar\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-description]=\"`Sidebar ${isExpanded ? 'expanded' : 'collapsed'}`\">\n @for (item of items; track item) {\n @if (item.url) {\n <a\n class=\"cps-sidebar-menu-item\"\n tabindex=\"0\"\n [routerLink]=\"item.disabled ? null : [item.url]\"\n routerLinkActive=\"active\"\n ariaCurrentWhenActive=\"page\"\n [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n [class.disabled]=\"item.disabled\"\n [attr.aria-disabled]=\"item.disabled || null\"\n [attr.aria-label]=\"item.title\">\n <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n </cps-icon>\n <span\n class=\"cps-sidebar-menu-item-label\"\n [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n {{ item.title }}\n </span>\n </a>\n }\n @if (!item.url) {\n <cps-menu\n #popupMenu\n [items]=\"item.items || []\"\n [header]=\"item.title\"\n [focusOnShow]=\"false\"\n showTransitionOptions=\"0s\"\n hideTransitionOptions=\"0s\"\n [withArrow]=\"false\"\n (containerMouseLeave)=\"leaveMenu($event, popupMenu)\">\n </cps-menu>\n <button\n type=\"button\"\n (mouseenter)=\"showMenu($event, popupMenu)\"\n (mouseleave)=\"leaveMenu($event, popupMenu)\"\n (focusin)=\"showMenu($event, popupMenu, item)\"\n (focusout)=\"leaveMenu($event, popupMenu)\"\n (click)=\"toggleMenu($event, popupMenu, item)\"\n class=\"cps-sidebar-menu-item menu-trigger\"\n [class.active]=\"isActive(item)\"\n [class.menu-open]=\"popupMenu.isVisible()\"\n [class.disabled]=\"item.disabled\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"\n focusedItemWithMenu === item ? popupMenu.isVisible() : null\n \"\n [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled || null\"\n [attr.aria-label]=\"item.title\">\n <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n </cps-icon>\n <span\n class=\"cps-sidebar-menu-item-label\"\n [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n {{ item.title }}\n </span>\n </button>\n }\n }\n </nav>\n <button\n type=\"button\"\n class=\"expand-area\"\n (click)=\"toggleSidebar()\"\n [attr.aria-label]=\"isExpanded ? 'Collapse sidebar' : 'Expand sidebar'\"\n [attr.aria-expanded]=\"isExpanded\">\n <cps-icon icon=\"menu-shrink\" size=\"normal\" aria-hidden=\"true\"> </cps-icon>\n </button>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 3.75rem #0000001a;width:5rem;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .cps-sidebar-menubar{width:100%}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:1.5rem;position:absolute;bottom:5%;background:none;border:none;padding:0;font:inherit;color:inherit}:host .cps-sidebar-menu .expand-area cps-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}:host .cps-sidebar-menu .expand-area:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .expand-area:focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .expand-area:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .expand-area:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .expand-area:focus-visible{position:absolute}:host .cps-sidebar-menu .expand-area:hover,:host .cps-sidebar-menu .expand-area:focus-visible{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:5rem;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:.0625rem solid var(--cps-color-line-mid);-webkit-user-select:none;user-select:none;background:none;border-left:none;border-right:none;border-top:none;padding:0;font:inherit}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:.6875rem;line-height:.8125rem;width:5rem;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active):not(.disabled){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-mild)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:2.5rem}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area cps-icon{transform:rotate(180deg)}\n"] }]
|
|
8296
8320
|
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { items: [{
|
|
8297
8321
|
type: Input
|
|
8298
8322
|
}], isExpanded: [{
|
|
@@ -8369,7 +8393,7 @@ class CpsSwitchComponent {
|
|
|
8369
8393
|
this.valueChanged = new EventEmitter();
|
|
8370
8394
|
this._value = false;
|
|
8371
8395
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
8372
|
-
this.onChange = (
|
|
8396
|
+
this.onChange = (_event) => { };
|
|
8373
8397
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
8374
8398
|
this.onTouched = () => { };
|
|
8375
8399
|
if (this._control) {
|
|
@@ -8397,7 +8421,7 @@ class CpsSwitchComponent {
|
|
|
8397
8421
|
this.valueChanged.emit(value);
|
|
8398
8422
|
}
|
|
8399
8423
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
8400
|
-
setDisabledState(
|
|
8424
|
+
setDisabledState(_disabled) { }
|
|
8401
8425
|
focus() {
|
|
8402
8426
|
this._elementRef?.nativeElement?.querySelector('input')?.focus();
|
|
8403
8427
|
}
|
|
@@ -8442,6 +8466,11 @@ class CpsTabComponent {
|
|
|
8442
8466
|
* @group Props
|
|
8443
8467
|
*/
|
|
8444
8468
|
this.label = '';
|
|
8469
|
+
/**
|
|
8470
|
+
* Aria label for the tab component, used for accessibility, it takes precedence over label.
|
|
8471
|
+
* @group Props
|
|
8472
|
+
*/
|
|
8473
|
+
this.ariaLabel = '';
|
|
8445
8474
|
/**
|
|
8446
8475
|
* Icon before the label.
|
|
8447
8476
|
* @group Props
|
|
@@ -8484,14 +8513,23 @@ class CpsTabComponent {
|
|
|
8484
8513
|
this.badgeTooltip = '';
|
|
8485
8514
|
this.active = false;
|
|
8486
8515
|
}
|
|
8516
|
+
ngOnChanges(changes) {
|
|
8517
|
+
if (changes.label || changes.ariaLabel) {
|
|
8518
|
+
if (!this.label?.trim() && !this.ariaLabel?.trim()) {
|
|
8519
|
+
console.error('CpsTabComponent: unlabeled tab component must have an ariaLabel for accessibility.');
|
|
8520
|
+
}
|
|
8521
|
+
}
|
|
8522
|
+
}
|
|
8487
8523
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CpsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8488
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", icon: "icon", disabled: "disabled", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent", badgeValue: "badgeValue", badgeTooltip: "badgeTooltip" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n",
|
|
8524
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", ariaLabel: "ariaLabel", icon: "icon", disabled: "disabled", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent", badgeValue: "badgeValue", badgeTooltip: "badgeTooltip" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8489
8525
|
}
|
|
8490
8526
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CpsTabComponent, decorators: [{
|
|
8491
8527
|
type: Component,
|
|
8492
|
-
args: [{ imports: [CommonModule], selector: 'cps-tab', template: "<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n" }]
|
|
8528
|
+
args: [{ imports: [CommonModule], selector: 'cps-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n" }]
|
|
8493
8529
|
}], propDecorators: { label: [{
|
|
8494
8530
|
type: Input
|
|
8531
|
+
}], ariaLabel: [{
|
|
8532
|
+
type: Input
|
|
8495
8533
|
}], icon: [{
|
|
8496
8534
|
type: Input
|
|
8497
8535
|
}], disabled: [{
|
|
@@ -8544,6 +8582,12 @@ class CpsTabGroupComponent {
|
|
|
8544
8582
|
* @group Props
|
|
8545
8583
|
*/
|
|
8546
8584
|
this.alignment = 'left';
|
|
8585
|
+
/**
|
|
8586
|
+
* When true, tabs activate automatically as focus moves between them via arrow keys.
|
|
8587
|
+
* When false, arrow keys only move focus; press Enter or Space to activate the focused tab.
|
|
8588
|
+
* @group Props
|
|
8589
|
+
*/
|
|
8590
|
+
this.autoActivation = true;
|
|
8547
8591
|
/**
|
|
8548
8592
|
* Class to apply to the tab content wrapper.
|
|
8549
8593
|
* @group Props
|
|
@@ -8589,10 +8633,18 @@ class CpsTabGroupComponent {
|
|
|
8589
8633
|
this.backBtnVisible = false;
|
|
8590
8634
|
this.forwardBtnVisible = false;
|
|
8591
8635
|
this.animationState = 'fadeIn';
|
|
8636
|
+
this.tabGroupId = generateUniqueId('cps-tab-group');
|
|
8592
8637
|
this.windowResize$ = Subscription.EMPTY;
|
|
8593
8638
|
this.listScroll$ = Subscription.EMPTY;
|
|
8639
|
+
this._tabPanelEls = viewChildren('tabPanel', ...(ngDevMode ? [{ debugName: "_tabPanelEls" }] : /* istanbul ignore next */ []));
|
|
8640
|
+
this.panelTabindex = signal(0, ...(ngDevMode ? [{ debugName: "panelTabindex" }] : /* istanbul ignore next */ []));
|
|
8594
8641
|
this._currentTabIndex = 0;
|
|
8595
8642
|
this._previousTabIndex = 0;
|
|
8643
|
+
this._focusService = inject(CpsFocusService);
|
|
8644
|
+
afterRenderEffect(() => {
|
|
8645
|
+
const activeEl = this._tabPanelEls()[this._currentTabIndex]?.nativeElement;
|
|
8646
|
+
this.panelTabindex.set(activeEl && this._hasFocusableIn(activeEl) ? -1 : 0);
|
|
8647
|
+
});
|
|
8596
8648
|
}
|
|
8597
8649
|
ngOnInit() {
|
|
8598
8650
|
this.tabsBackground = getCSSColor(this.tabsBackground, this.document);
|
|
@@ -8623,16 +8675,141 @@ class CpsTabGroupComponent {
|
|
|
8623
8675
|
get selectedTab() {
|
|
8624
8676
|
return this.tabs.find((t) => t.active);
|
|
8625
8677
|
}
|
|
8678
|
+
getTabId(index) {
|
|
8679
|
+
return `${this.tabGroupId}-tab-${index}`;
|
|
8680
|
+
}
|
|
8681
|
+
getPanelId(index) {
|
|
8682
|
+
return `${this.tabGroupId}-panel-${index}`;
|
|
8683
|
+
}
|
|
8684
|
+
getTabFocusOrderTabIndex(tabIndex) {
|
|
8685
|
+
const _tabs = this.tabs.toArray();
|
|
8686
|
+
const activeTab = _tabs[this._currentTabIndex];
|
|
8687
|
+
if (!activeTab?.disabled) {
|
|
8688
|
+
return tabIndex === this._currentTabIndex ? 0 : -1;
|
|
8689
|
+
}
|
|
8690
|
+
// Edge case: active tab is disabled - move focus to the first non-disabled tab
|
|
8691
|
+
const firstEnabled = _tabs.findIndex((t) => !t.disabled);
|
|
8692
|
+
return tabIndex === firstEnabled ? 0 : -1;
|
|
8693
|
+
}
|
|
8694
|
+
getTabAriaLabel(tab) {
|
|
8695
|
+
const label = tab.ariaLabel || tab.label;
|
|
8696
|
+
const badgeValue = tab.badgeValue.trim();
|
|
8697
|
+
if (!badgeValue) {
|
|
8698
|
+
return label || null;
|
|
8699
|
+
}
|
|
8700
|
+
const badgeTooltip = tab.badgeTooltip.trim();
|
|
8701
|
+
return `${label}, Badge: ${badgeValue}${badgeTooltip ? `, ${badgeTooltip}` : ''}`;
|
|
8702
|
+
}
|
|
8626
8703
|
onTabClick(index) {
|
|
8704
|
+
if (index === this.selectedIndex)
|
|
8705
|
+
return;
|
|
8627
8706
|
this.selectedIndex = index;
|
|
8628
8707
|
this.selectTab();
|
|
8629
8708
|
}
|
|
8709
|
+
onMouseDown(event) {
|
|
8710
|
+
this._focusService.suppressNextFocusRing(event.currentTarget);
|
|
8711
|
+
}
|
|
8712
|
+
onTabKeydown(event, index) {
|
|
8713
|
+
const _tabs = this.tabs.toArray();
|
|
8714
|
+
let targetIndex = null;
|
|
8715
|
+
switch (event.key) {
|
|
8716
|
+
case 'ArrowRight':
|
|
8717
|
+
targetIndex = this._nextEnabledTab(index, 1, _tabs);
|
|
8718
|
+
break;
|
|
8719
|
+
case 'ArrowLeft':
|
|
8720
|
+
targetIndex = this._nextEnabledTab(index, -1, _tabs);
|
|
8721
|
+
break;
|
|
8722
|
+
case 'Home': {
|
|
8723
|
+
const first = _tabs.findIndex((t) => !t.disabled);
|
|
8724
|
+
targetIndex = first !== -1 ? first : null;
|
|
8725
|
+
break;
|
|
8726
|
+
}
|
|
8727
|
+
case 'End': {
|
|
8728
|
+
const last = _tabs.map((t) => !t.disabled).lastIndexOf(true);
|
|
8729
|
+
targetIndex = last !== -1 ? last : null;
|
|
8730
|
+
break;
|
|
8731
|
+
}
|
|
8732
|
+
case 'Enter':
|
|
8733
|
+
case ' ':
|
|
8734
|
+
if (!_tabs[index]?.disabled) {
|
|
8735
|
+
event.preventDefault();
|
|
8736
|
+
this.onTabClick(index);
|
|
8737
|
+
}
|
|
8738
|
+
return;
|
|
8739
|
+
default:
|
|
8740
|
+
return;
|
|
8741
|
+
}
|
|
8742
|
+
if (targetIndex == null)
|
|
8743
|
+
return;
|
|
8744
|
+
event.preventDefault();
|
|
8745
|
+
if (this.autoActivation) {
|
|
8746
|
+
this.onTabClick(targetIndex);
|
|
8747
|
+
}
|
|
8748
|
+
const tabEls = Array.from(this.tabsList.nativeElement.querySelectorAll('[role="tab"]'));
|
|
8749
|
+
const targetEl = tabEls[targetIndex];
|
|
8750
|
+
if (targetEl) {
|
|
8751
|
+
this._scrollTabIntoView(targetEl);
|
|
8752
|
+
targetEl.focus({ preventScroll: true });
|
|
8753
|
+
}
|
|
8754
|
+
}
|
|
8755
|
+
_scrollTabIntoView(tabEl) {
|
|
8756
|
+
const list = this.tabsList.nativeElement;
|
|
8757
|
+
const backW = this.backBtn?.nativeElement?.offsetWidth ?? 0;
|
|
8758
|
+
const fwdW = this.forwardBtn?.nativeElement?.offsetWidth ?? 0;
|
|
8759
|
+
const tabStart = tabEl.offsetLeft;
|
|
8760
|
+
const tabEnd = tabStart + tabEl.offsetWidth;
|
|
8761
|
+
const viewStart = list.scrollLeft + backW;
|
|
8762
|
+
const viewEnd = list.scrollLeft + list.clientWidth - fwdW;
|
|
8763
|
+
if (tabStart < viewStart) {
|
|
8764
|
+
list.scrollLeft = tabStart - backW;
|
|
8765
|
+
}
|
|
8766
|
+
else if (tabEnd > viewEnd) {
|
|
8767
|
+
list.scrollLeft = tabEnd + fwdW - list.clientWidth;
|
|
8768
|
+
}
|
|
8769
|
+
}
|
|
8770
|
+
_hasFocusableIn(container) {
|
|
8771
|
+
const walker = this.document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
|
|
8772
|
+
while (walker.nextNode()) {
|
|
8773
|
+
const el = walker.currentNode;
|
|
8774
|
+
if (el.tabIndex >= 0 && !el.disabled)
|
|
8775
|
+
return true;
|
|
8776
|
+
}
|
|
8777
|
+
return false;
|
|
8778
|
+
}
|
|
8779
|
+
_nextEnabledTab(from, direction, tabs) {
|
|
8780
|
+
const len = tabs.length;
|
|
8781
|
+
if (direction === 1) {
|
|
8782
|
+
for (let i = from + 1; i < len; i++) {
|
|
8783
|
+
if (!tabs[i].disabled)
|
|
8784
|
+
return i;
|
|
8785
|
+
}
|
|
8786
|
+
for (let i = 0; i < from; i++) {
|
|
8787
|
+
if (!tabs[i].disabled)
|
|
8788
|
+
return i;
|
|
8789
|
+
}
|
|
8790
|
+
}
|
|
8791
|
+
else {
|
|
8792
|
+
for (let i = from - 1; i >= 0; i--) {
|
|
8793
|
+
if (!tabs[i].disabled)
|
|
8794
|
+
return i;
|
|
8795
|
+
}
|
|
8796
|
+
for (let i = len - 1; i > from; i--) {
|
|
8797
|
+
if (!tabs[i].disabled)
|
|
8798
|
+
return i;
|
|
8799
|
+
}
|
|
8800
|
+
}
|
|
8801
|
+
return null;
|
|
8802
|
+
}
|
|
8630
8803
|
selectTab(silent = false) {
|
|
8631
8804
|
const _tabs = this.tabs.toArray();
|
|
8632
|
-
const currentSelectedTab = _tabs
|
|
8633
|
-
|
|
8634
|
-
|
|
8635
|
-
|
|
8805
|
+
const currentSelectedTab = _tabs[this._previousTabIndex];
|
|
8806
|
+
if (currentSelectedTab) {
|
|
8807
|
+
currentSelectedTab.active = false;
|
|
8808
|
+
}
|
|
8809
|
+
const newSelectedTab = _tabs[this._currentTabIndex];
|
|
8810
|
+
if (newSelectedTab) {
|
|
8811
|
+
newSelectedTab.active = true;
|
|
8812
|
+
}
|
|
8636
8813
|
if (this._currentTabIndex === this._previousTabIndex) {
|
|
8637
8814
|
return;
|
|
8638
8815
|
}
|
|
@@ -8710,7 +8887,7 @@ class CpsTabGroupComponent {
|
|
|
8710
8887
|
return width;
|
|
8711
8888
|
}
|
|
8712
8889
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CpsTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8713
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CpsTabGroupComponent, isStandalone: true, selector: "cps-tab-group", inputs: { selectedIndex: "selectedIndex", isSubTabs: "isSubTabs", alignment: "alignment", contentWrapClass: "contentWrapClass", headerClass: "headerClass", stretched: "stretched", animationType: "animationType", navButtonsBackground: "navButtonsBackground", tabsBackground: "tabsBackground" }, outputs: { beforeTabChanged: "beforeTabChanged", afterTabChanged: "afterTabChanged" }, queries: [{ propertyName: "tabs", predicate: CpsTabComponent }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "backBtn", first: true, predicate: ["backBtn"], descendants: true }, { propertyName: "forwardBtn", first: true, predicate: ["forwardBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"cps-tabs\"\n [class]=\"headerClass\"\n [ngClass]=\"{\n 'cps-tabs-subtabs': isSubTabs,\n 'cps-tabs-center-aligned': alignment === 'center',\n 'cps-tabs-right-aligned': alignment === 'right',\n 'cps-tabs-stretched': stretched\n }\"\n [ngStyle]=\"{ 'background-color': tabsBackground }\">\n @if (!backBtnVisible) {\n <div\n class=\"nav-btn nav-btn-back\"\n [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n #backBtn\n (click)=\"navBackward()\">\n <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n </div>\n }\n <ul #tabsList class=\"cps-tabs-list\">\n @for (tab of tabs; track tab; let tabIndex = $index) {\n @if (tab.tooltipText) {\n <li\n class=\"cps-tab\"\n (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\"\n [cpsTooltip]=\"tab.tooltipText\"\n tooltipOpenDelay=\"1000\"\n tooltipCloseDelay=\"0\"\n tooltipPosition=\"bottom\"\n [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n [tooltipPersistent]=\"tab.tooltipPersistent\"\n [tooltipContentClass]=\"tab.tooltipContentClass\">\n <ng-container\n *ngTemplateOutlet=\"\n tabHeaderTemplate;\n context: {\n tab: tab\n }\n \"></ng-container>\n </li>\n }\n @if (!tab.tooltipText) {\n <li\n class=\"cps-tab\"\n (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\">\n <ng-container\n *ngTemplateOutlet=\"\n tabHeaderTemplate;\n context: {\n tab: tab\n }\n \"></ng-container>\n </li>\n }\n }\n </ul>\n @if (!forwardBtnVisible) {\n <div\n class=\"nav-btn nav-btn-forward\"\n [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n #forwardBtn\n (click)=\"navForward()\">\n <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n </div>\n }\n</div>\n<div\n class=\"cps-tab-content-wrap\"\n [class]=\"contentWrapClass\"\n [ngClass]=\"{\n 'cps-tab-content-wrap-subtabs': isSubTabs\n }\">\n @for (tab of tabs; track tab) {\n @if (tab.active) {\n <div class=\"cps-tab-content\">\n @if (animationType === 'slide') {\n <div [@slideInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n }\n @if (animationType === 'fade') {\n <div [@fadeInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n }\n </div>\n }\n }\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n @if (tab.icon) {\n <cps-icon class=\"cps-tab-icon\" [icon]=\"tab.icon\"> </cps-icon>\n }\n <a class=\"cps-tab-link\">{{ tab.label }}</a>\n @if (tab.badgeValue) {\n @if (tab.badgeTooltip) {\n <div class=\"cps-tab-badge\" [cpsTooltip]=\"tab.badgeTooltip\">\n <span>{{ tab.badgeValue }}</span>\n </div>\n }\n @if (!tab.badgeTooltip) {\n <div class=\"cps-tab-badge\">\n <span>{{ tab.badgeValue }}</span>\n </div>\n }\n }\n</ng-template>\n", styles: [":host{background-color:inherit;margin:0!important;display:flex;flex-direction:column;max-width:100%}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:32px;cursor:pointer;position:absolute;height:100%}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:10px;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:20px;padding:0 3px;height:20px;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:3px solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled,.active){border-bottom:3px solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content-wrap{display:flex;position:relative;min-height:100px;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }], animations: [
|
|
8890
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CpsTabGroupComponent, isStandalone: true, selector: "cps-tab-group", inputs: { selectedIndex: "selectedIndex", isSubTabs: "isSubTabs", alignment: "alignment", autoActivation: "autoActivation", contentWrapClass: "contentWrapClass", headerClass: "headerClass", stretched: "stretched", animationType: "animationType", navButtonsBackground: "navButtonsBackground", tabsBackground: "tabsBackground" }, outputs: { beforeTabChanged: "beforeTabChanged", afterTabChanged: "afterTabChanged" }, queries: [{ propertyName: "tabs", predicate: CpsTabComponent }], viewQueries: [{ propertyName: "_tabPanelEls", predicate: ["tabPanel"], descendants: true, isSignal: true }, { propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "backBtn", first: true, predicate: ["backBtn"], descendants: true }, { propertyName: "forwardBtn", first: true, predicate: ["forwardBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"cps-tabs\"\n [class]=\"headerClass\"\n [ngClass]=\"{\n 'cps-tabs-subtabs': isSubTabs,\n 'cps-tabs-center-aligned': alignment === 'center',\n 'cps-tabs-right-aligned': alignment === 'right',\n 'cps-tabs-stretched': stretched\n }\"\n [ngStyle]=\"{ 'background-color': tabsBackground }\">\n @if (!backBtnVisible) {\n <button\n type=\"button\"\n class=\"nav-btn nav-btn-back\"\n [style.background-color]=\"navButtonsBackground\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n #backBtn\n (click)=\"navBackward()\">\n <cps-icon\n icon=\"chevron-down\"\n color=\"text-dark\"\n aria-hidden=\"true\"></cps-icon>\n </button>\n }\n <ul #tabsList class=\"cps-tabs-list\" role=\"tablist\" tabindex=\"-1\">\n @for (tab of tabs; track tab; let tabIndex = $index) {\n @if (tab.tooltipText) {\n <li\n class=\"cps-tab\"\n role=\"tab\"\n [id]=\"getTabId(tabIndex)\"\n [attr.aria-label]=\"getTabAriaLabel(tab)\"\n [attr.aria-selected]=\"tab.active\"\n [attr.aria-disabled]=\"tab.disabled ? true : null\"\n [attr.tabindex]=\"getTabFocusOrderTabIndex(tabIndex)\"\n [attr.aria-controls]=\"getPanelId(tabIndex)\"\n (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n (mousedown)=\"onMouseDown($event)\"\n (keydown)=\"onTabKeydown($event, tabIndex)\"\n [class.active]=\"tab.active\"\n [class.disabled]=\"tab.disabled\"\n [cpsTooltip]=\"tab.tooltipText\"\n tooltipOpenDelay=\"1000\"\n tooltipCloseDelay=\"0\"\n tooltipPosition=\"bottom\"\n [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n [tooltipPersistent]=\"tab.tooltipPersistent\"\n [tooltipContentClass]=\"tab.tooltipContentClass\">\n <ng-container\n *ngTemplateOutlet=\"\n tabHeaderTemplate;\n context: {\n tab: tab\n }\n \"></ng-container>\n </li>\n } @else {\n <li\n class=\"cps-tab\"\n role=\"tab\"\n [id]=\"getTabId(tabIndex)\"\n [attr.aria-label]=\"getTabAriaLabel(tab)\"\n [attr.aria-selected]=\"tab.active\"\n [attr.aria-disabled]=\"tab.disabled ? true : null\"\n [attr.tabindex]=\"getTabFocusOrderTabIndex(tabIndex)\"\n [attr.aria-controls]=\"getPanelId(tabIndex)\"\n (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n (mousedown)=\"onMouseDown($event)\"\n (keydown)=\"onTabKeydown($event, tabIndex)\"\n [class.active]=\"tab.active\"\n [class.disabled]=\"tab.disabled\">\n <ng-container\n *ngTemplateOutlet=\"\n tabHeaderTemplate;\n context: {\n tab: tab\n }\n \"></ng-container>\n </li>\n }\n }\n </ul>\n @if (!forwardBtnVisible) {\n <button\n type=\"button\"\n class=\"nav-btn nav-btn-forward\"\n [style.background-color]=\"navButtonsBackground\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n #forwardBtn\n (click)=\"navForward()\">\n <cps-icon\n icon=\"chevron-down\"\n color=\"text-dark\"\n aria-hidden=\"true\"></cps-icon>\n </button>\n }\n</div>\n<div\n class=\"cps-tab-content-wrap\"\n [class]=\"contentWrapClass\"\n [ngClass]=\"{\n 'cps-tab-content-wrap-subtabs': isSubTabs\n }\">\n @for (tab of tabs; track tab; let panelIndex = $index) {\n <div\n #tabPanel\n class=\"cps-tab-content\"\n role=\"tabpanel\"\n [id]=\"getPanelId(panelIndex)\"\n [attr.aria-labelledby]=\"getTabId(panelIndex)\"\n [attr.tabindex]=\"tab.active ? panelTabindex() : null\"\n [hidden]=\"!tab.active\"\n (mousedown)=\"onMouseDown($event)\">\n @if (tab.active) {\n @if (animationType === 'slide') {\n <div [@slideInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n }\n @if (animationType === 'fade') {\n <div [@fadeInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n }\n }\n </div>\n }\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n @if (tab.icon) {\n <cps-icon class=\"cps-tab-icon\" [icon]=\"tab.icon\" aria-hidden=\"true\">\n </cps-icon>\n }\n <span class=\"cps-tab-link\">{{ tab.label }}</span>\n @if (tab.badgeValue) {\n @if (tab.badgeTooltip) {\n <div\n class=\"cps-tab-badge\"\n [cpsTooltip]=\"tab.badgeTooltip\"\n aria-hidden=\"true\">\n <span>{{ tab.badgeValue }}</span>\n </div>\n } @else {\n <div class=\"cps-tab-badge\" aria-hidden=\"true\">\n <span>{{ tab.badgeValue }}</span>\n </div>\n }\n }\n</ng-template>\n", styles: [":host{background-color:inherit;margin:0!important;display:flex;flex-direction:column;max-width:100%}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:2rem;cursor:pointer;position:absolute;height:100%;border:none;padding:0;background:transparent;z-index:1}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:.125rem 0 .125rem -.0625rem #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-.125rem 0 .125rem -.0625rem #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:9.375rem;padding:0 1.5rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:.9375rem;line-height:1.25rem;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:.1875rem solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-mild)}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible{outline:none;position:relative}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:before{inset:.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible.suppress-focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible.suppress-focus-visible:after{display:none}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:.625rem;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:1.25rem;padding:0 .1875rem;height:1.25rem;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:.75rem;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible{outline:none;position:relative}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible.suppress-focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible.suppress-focus-visible:after{display:none}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:.0625rem solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:.1875rem solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:.1875rem solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled),:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:focus-visible:not(:active,.active,.disabled){border-bottom:.1875rem solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled,.active){border-bottom:.1875rem solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:2.0625rem;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled),:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:focus-visible:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content-wrap{display:flex;position:relative;min-height:6.25rem;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content[hidden]{display:none!important}:host .cps-tab-content-wrap .cps-tab-content:focus-visible{outline:none;position:relative}:host .cps-tab-content-wrap .cps-tab-content:focus-visible:before,:host .cps-tab-content-wrap .cps-tab-content:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-tab-content-wrap .cps-tab-content:focus-visible:before{inset:.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-tab-content-wrap .cps-tab-content:focus-visible:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-tab-content-wrap .cps-tab-content:focus-visible.suppress-focus-visible:before,:host .cps-tab-content-wrap .cps-tab-content:focus-visible.suppress-focus-visible:after{display:none}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }], animations: [
|
|
8714
8891
|
trigger('slideInOut', [
|
|
8715
8892
|
state('slideLeft', style({ transform: 'translateX(0)' })),
|
|
8716
8893
|
state('slideRight', style({ transform: 'translateX(0)' })),
|
|
@@ -8766,7 +8943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
8766
8943
|
]),
|
|
8767
8944
|
transition('void => *', animate(0))
|
|
8768
8945
|
])
|
|
8769
|
-
], template: "<div\n class=\"cps-tabs\"\n [class]=\"headerClass\"\n [ngClass]=\"{\n 'cps-tabs-subtabs': isSubTabs,\n 'cps-tabs-center-aligned': alignment === 'center',\n 'cps-tabs-right-aligned': alignment === 'right',\n 'cps-tabs-stretched': stretched\n }\"\n [ngStyle]=\"{ 'background-color': tabsBackground }\">\n @if (!backBtnVisible) {\n <div\n class=\"nav-btn nav-btn-back\"\n [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n #backBtn\n (click)=\"navBackward()\">\n <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n </div>\n }\n <ul #tabsList class=\"cps-tabs-list\">\n @for (tab of tabs; track tab; let tabIndex = $index) {\n @if (tab.tooltipText) {\n <li\n class=\"cps-tab\"\n (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\"\n [cpsTooltip]=\"tab.tooltipText\"\n tooltipOpenDelay=\"1000\"\n tooltipCloseDelay=\"0\"\n tooltipPosition=\"bottom\"\n [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n [tooltipPersistent]=\"tab.tooltipPersistent\"\n [tooltipContentClass]=\"tab.tooltipContentClass\">\n <ng-container\n *ngTemplateOutlet=\"\n tabHeaderTemplate;\n context: {\n tab: tab\n }\n \"></ng-container>\n </li>\n }\n @if (!tab.tooltipText) {\n <li\n class=\"cps-tab\"\n (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\">\n <ng-container\n *ngTemplateOutlet=\"\n tabHeaderTemplate;\n context: {\n tab: tab\n }\n \"></ng-container>\n </li>\n }\n }\n </ul>\n @if (!forwardBtnVisible) {\n <div\n class=\"nav-btn nav-btn-forward\"\n [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n #forwardBtn\n (click)=\"navForward()\">\n <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n </div>\n }\n</div>\n<div\n class=\"cps-tab-content-wrap\"\n [class]=\"contentWrapClass\"\n [ngClass]=\"{\n 'cps-tab-content-wrap-subtabs': isSubTabs\n }\">\n @for (tab of tabs; track tab) {\n @if (tab.active) {\n <div class=\"cps-tab-content\">\n @if (animationType === 'slide') {\n <div [@slideInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n }\n @if (animationType === 'fade') {\n <div [@fadeInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n }\n </div>\n }\n }\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n @if (tab.icon) {\n <cps-icon class=\"cps-tab-icon\" [icon]=\"tab.icon\"> </cps-icon>\n }\n <a class=\"cps-tab-link\">{{ tab.label }}</a>\n @if (tab.badgeValue) {\n @if (tab.badgeTooltip) {\n <div class=\"cps-tab-badge\" [cpsTooltip]=\"tab.badgeTooltip\">\n <span>{{ tab.badgeValue }}</span>\n </div>\n }\n @if (!tab.badgeTooltip) {\n <div class=\"cps-tab-badge\">\n <span>{{ tab.badgeValue }}</span>\n </div>\n }\n }\n</ng-template>\n", styles: [":host{background-color:inherit;margin:0!important;display:flex;flex-direction:column;max-width:100%}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:32px;cursor:pointer;position:absolute;height:100%}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:10px;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:20px;padding:0 3px;height:20px;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:3px solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled,.active){border-bottom:3px solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content-wrap{display:flex;position:relative;min-height:100px;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\n"] }]
|
|
8946
|
+
], template: "<div\n class=\"cps-tabs\"\n [class]=\"headerClass\"\n [ngClass]=\"{\n 'cps-tabs-subtabs': isSubTabs,\n 'cps-tabs-center-aligned': alignment === 'center',\n 'cps-tabs-right-aligned': alignment === 'right',\n 'cps-tabs-stretched': stretched\n }\"\n [ngStyle]=\"{ 'background-color': tabsBackground }\">\n @if (!backBtnVisible) {\n <button\n type=\"button\"\n class=\"nav-btn nav-btn-back\"\n [style.background-color]=\"navButtonsBackground\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n #backBtn\n (click)=\"navBackward()\">\n <cps-icon\n icon=\"chevron-down\"\n color=\"text-dark\"\n aria-hidden=\"true\"></cps-icon>\n </button>\n }\n <ul #tabsList class=\"cps-tabs-list\" role=\"tablist\" tabindex=\"-1\">\n @for (tab of tabs; track tab; let tabIndex = $index) {\n @if (tab.tooltipText) {\n <li\n class=\"cps-tab\"\n role=\"tab\"\n [id]=\"getTabId(tabIndex)\"\n [attr.aria-label]=\"getTabAriaLabel(tab)\"\n [attr.aria-selected]=\"tab.active\"\n [attr.aria-disabled]=\"tab.disabled ? true : null\"\n [attr.tabindex]=\"getTabFocusOrderTabIndex(tabIndex)\"\n [attr.aria-controls]=\"getPanelId(tabIndex)\"\n (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n (mousedown)=\"onMouseDown($event)\"\n (keydown)=\"onTabKeydown($event, tabIndex)\"\n [class.active]=\"tab.active\"\n [class.disabled]=\"tab.disabled\"\n [cpsTooltip]=\"tab.tooltipText\"\n tooltipOpenDelay=\"1000\"\n tooltipCloseDelay=\"0\"\n tooltipPosition=\"bottom\"\n [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n [tooltipPersistent]=\"tab.tooltipPersistent\"\n [tooltipContentClass]=\"tab.tooltipContentClass\">\n <ng-container\n *ngTemplateOutlet=\"\n tabHeaderTemplate;\n context: {\n tab: tab\n }\n \"></ng-container>\n </li>\n } @else {\n <li\n class=\"cps-tab\"\n role=\"tab\"\n [id]=\"getTabId(tabIndex)\"\n [attr.aria-label]=\"getTabAriaLabel(tab)\"\n [attr.aria-selected]=\"tab.active\"\n [attr.aria-disabled]=\"tab.disabled ? true : null\"\n [attr.tabindex]=\"getTabFocusOrderTabIndex(tabIndex)\"\n [attr.aria-controls]=\"getPanelId(tabIndex)\"\n (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n (mousedown)=\"onMouseDown($event)\"\n (keydown)=\"onTabKeydown($event, tabIndex)\"\n [class.active]=\"tab.active\"\n [class.disabled]=\"tab.disabled\">\n <ng-container\n *ngTemplateOutlet=\"\n tabHeaderTemplate;\n context: {\n tab: tab\n }\n \"></ng-container>\n </li>\n }\n }\n </ul>\n @if (!forwardBtnVisible) {\n <button\n type=\"button\"\n class=\"nav-btn nav-btn-forward\"\n [style.background-color]=\"navButtonsBackground\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n #forwardBtn\n (click)=\"navForward()\">\n <cps-icon\n icon=\"chevron-down\"\n color=\"text-dark\"\n aria-hidden=\"true\"></cps-icon>\n </button>\n }\n</div>\n<div\n class=\"cps-tab-content-wrap\"\n [class]=\"contentWrapClass\"\n [ngClass]=\"{\n 'cps-tab-content-wrap-subtabs': isSubTabs\n }\">\n @for (tab of tabs; track tab; let panelIndex = $index) {\n <div\n #tabPanel\n class=\"cps-tab-content\"\n role=\"tabpanel\"\n [id]=\"getPanelId(panelIndex)\"\n [attr.aria-labelledby]=\"getTabId(panelIndex)\"\n [attr.tabindex]=\"tab.active ? panelTabindex() : null\"\n [hidden]=\"!tab.active\"\n (mousedown)=\"onMouseDown($event)\">\n @if (tab.active) {\n @if (animationType === 'slide') {\n <div [@slideInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n }\n @if (animationType === 'fade') {\n <div [@fadeInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n }\n }\n </div>\n }\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n @if (tab.icon) {\n <cps-icon class=\"cps-tab-icon\" [icon]=\"tab.icon\" aria-hidden=\"true\">\n </cps-icon>\n }\n <span class=\"cps-tab-link\">{{ tab.label }}</span>\n @if (tab.badgeValue) {\n @if (tab.badgeTooltip) {\n <div\n class=\"cps-tab-badge\"\n [cpsTooltip]=\"tab.badgeTooltip\"\n aria-hidden=\"true\">\n <span>{{ tab.badgeValue }}</span>\n </div>\n } @else {\n <div class=\"cps-tab-badge\" aria-hidden=\"true\">\n <span>{{ tab.badgeValue }}</span>\n </div>\n }\n }\n</ng-template>\n", styles: [":host{background-color:inherit;margin:0!important;display:flex;flex-direction:column;max-width:100%}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:2rem;cursor:pointer;position:absolute;height:100%;border:none;padding:0;background:transparent;z-index:1}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:.125rem 0 .125rem -.0625rem #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-.125rem 0 .125rem -.0625rem #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:9.375rem;padding:0 1.5rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:.9375rem;line-height:1.25rem;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:.1875rem solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-mild)}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible{outline:none;position:relative}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:before{inset:.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible.suppress-focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible.suppress-focus-visible:after{display:none}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:.625rem;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:1.25rem;padding:0 .1875rem;height:1.25rem;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:.75rem;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible{outline:none;position:relative}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible.suppress-focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible.suppress-focus-visible:after{display:none}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:.0625rem solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:.1875rem solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:.1875rem solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled),:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:focus-visible:not(:active,.active,.disabled){border-bottom:.1875rem solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled,.active){border-bottom:.1875rem solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:2.0625rem;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled),:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:focus-visible:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content-wrap{display:flex;position:relative;min-height:6.25rem;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content[hidden]{display:none!important}:host .cps-tab-content-wrap .cps-tab-content:focus-visible{outline:none;position:relative}:host .cps-tab-content-wrap .cps-tab-content:focus-visible:before,:host .cps-tab-content-wrap .cps-tab-content:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-tab-content-wrap .cps-tab-content:focus-visible:before{inset:.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-tab-content-wrap .cps-tab-content:focus-visible:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-tab-content-wrap .cps-tab-content:focus-visible.suppress-focus-visible:before,:host .cps-tab-content-wrap .cps-tab-content:focus-visible.suppress-focus-visible:after{display:none}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\n"] }]
|
|
8770
8947
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
8771
8948
|
type: Inject,
|
|
8772
8949
|
args: [DOCUMENT]
|
|
@@ -8776,6 +8953,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
8776
8953
|
type: Input
|
|
8777
8954
|
}], alignment: [{
|
|
8778
8955
|
type: Input
|
|
8956
|
+
}], autoActivation: [{
|
|
8957
|
+
type: Input
|
|
8779
8958
|
}], contentWrapClass: [{
|
|
8780
8959
|
type: Input
|
|
8781
8960
|
}], headerClass: [{
|
|
@@ -8804,7 +8983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
8804
8983
|
}], tabs: [{
|
|
8805
8984
|
type: ContentChildren,
|
|
8806
8985
|
args: [CpsTabComponent]
|
|
8807
|
-
}] } });
|
|
8986
|
+
}], _tabPanelEls: [{ type: i0.ViewChildren, args: ['tabPanel', { isSignal: true }] }] } });
|
|
8808
8987
|
|
|
8809
8988
|
/* eslint-disable no-unused-vars */
|
|
8810
8989
|
/**
|
|
@@ -11103,7 +11282,7 @@ class CpsTagComponent {
|
|
|
11103
11282
|
this.classesList = [];
|
|
11104
11283
|
this._value = false;
|
|
11105
11284
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
11106
|
-
this.onChange = (
|
|
11285
|
+
this.onChange = (_event) => { };
|
|
11107
11286
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
11108
11287
|
this.onTouched = () => { };
|
|
11109
11288
|
if (this._control) {
|
|
@@ -11308,7 +11487,7 @@ class CpsTextareaComponent {
|
|
|
11308
11487
|
this._value = '';
|
|
11309
11488
|
this.cvtWidth = '';
|
|
11310
11489
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
11311
|
-
this.onChange = (
|
|
11490
|
+
this.onChange = (_event) => { };
|
|
11312
11491
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
11313
11492
|
this.onTouched = () => { };
|
|
11314
11493
|
if (this._control) {
|
|
@@ -11381,7 +11560,7 @@ class CpsTextareaComponent {
|
|
|
11381
11560
|
this._updateValue('');
|
|
11382
11561
|
}
|
|
11383
11562
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
11384
|
-
setDisabledState(
|
|
11563
|
+
setDisabledState(_disabled) { }
|
|
11385
11564
|
onBlur() {
|
|
11386
11565
|
this._checkErrors();
|
|
11387
11566
|
this.blurred.emit();
|
|
@@ -11636,7 +11815,7 @@ class CpsBaseTreeDropdownComponent {
|
|
|
11636
11815
|
this.isAutocomplete = false;
|
|
11637
11816
|
this.boxWidth = 0;
|
|
11638
11817
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
11639
|
-
this.onChange = (
|
|
11818
|
+
this.onChange = (_event) => { };
|
|
11640
11819
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
11641
11820
|
this.onTouched = () => { };
|
|
11642
11821
|
if (this.control) {
|
|
@@ -11705,7 +11884,7 @@ class CpsBaseTreeDropdownComponent {
|
|
|
11705
11884
|
}
|
|
11706
11885
|
}
|
|
11707
11886
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
11708
|
-
setDisabledState(
|
|
11887
|
+
setDisabledState(_disabled) { }
|
|
11709
11888
|
onBlur() {
|
|
11710
11889
|
this._checkErrors();
|
|
11711
11890
|
this.blurred.emit();
|
|
@@ -12315,7 +12494,7 @@ class CpsTreeAutocompleteComponent extends CpsBaseTreeDropdownComponent {
|
|
|
12315
12494
|
return;
|
|
12316
12495
|
if (this.treeSelection?.length) {
|
|
12317
12496
|
if (this.backspaceClickedOnce) {
|
|
12318
|
-
this.treeSelection = this.treeSelection.filter((
|
|
12497
|
+
this.treeSelection = this.treeSelection.filter((_v, index) => index !== this.treeSelection.length - 1);
|
|
12319
12498
|
this.updateValue(this.treeSelectionToValue(this.treeSelection));
|
|
12320
12499
|
this.backspaceClickedOnce = false;
|
|
12321
12500
|
}
|
|
@@ -15786,6 +15965,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
15786
15965
|
args: [DOCUMENT]
|
|
15787
15966
|
}] }] });
|
|
15788
15967
|
|
|
15968
|
+
/**
|
|
15969
|
+
* CpsRootFontSizeService tracks the application's current root font size.
|
|
15970
|
+
*
|
|
15971
|
+
* The service uses a ResizeObserver strategy to reliably detect root font-size changes:
|
|
15972
|
+
*
|
|
15973
|
+
* **Sentinel element** (`<div style="width:1rem;height:0">`) — its pixel width
|
|
15974
|
+
* mirrors `1rem`. Any root font-size change — caused by CSS class toggles,
|
|
15975
|
+
* stylesheet rules, direct JS assignment, or viewport resize (e.g.
|
|
15976
|
+
* `font-size: 1.5vw`) — changes the sentinel's computed width, firing the
|
|
15977
|
+
* observer.
|
|
15978
|
+
* The cached value is stored in a signal and is only updated when the actual
|
|
15979
|
+
* font-size value changes, preventing spurious updates.
|
|
15980
|
+
*
|
|
15981
|
+
* In microfrontend environments the sentinel element is keyed by a known DOM
|
|
15982
|
+
* attribute (`data-cps-root-font-size-sentinel`) and reused if already present,
|
|
15983
|
+
* so only one sentinel node exists per document regardless of how many
|
|
15984
|
+
* instances of this service are created. The sentinel is intentionally never
|
|
15985
|
+
* removed from the DOM — it is a lightweight, invisible element and removing it
|
|
15986
|
+
* could silently break any other live service instance still observing it.
|
|
15987
|
+
*
|
|
15988
|
+
* Only active in browser environments. Under SSR the `fontSize` signal is
|
|
15989
|
+
* initialized to `16` (the standard browser default) and no DOM observers are created.
|
|
15990
|
+
*
|
|
15991
|
+
* Prefer injecting {@link CPS_ROOT_FONT_SIZE_SERVICE} over this class directly
|
|
15992
|
+
* to allow consumer applications to override the behavior.
|
|
15993
|
+
*
|
|
15994
|
+
* @example
|
|
15995
|
+
* ```typescript
|
|
15996
|
+
* class MyComponent {
|
|
15997
|
+
* private fontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
|
|
15998
|
+
* readonly fontSize = this.fontSizeService?.fontSize;
|
|
15999
|
+
* }
|
|
16000
|
+
* ```
|
|
16001
|
+
*/
|
|
16002
|
+
class CpsRootFontSizeService {
|
|
16003
|
+
static { this._SENTINEL_ATTR = 'data-cps-root-font-size-sentinel'; }
|
|
16004
|
+
constructor() {
|
|
16005
|
+
this._document = inject(DOCUMENT);
|
|
16006
|
+
this._platformId = inject(PLATFORM_ID);
|
|
16007
|
+
this._fontSize = signal(isPlatformBrowser(this._platformId) ? this._readRootFontSize() : 16, ...(ngDevMode ? [{ debugName: "_fontSize" }] : /* istanbul ignore next */ []));
|
|
16008
|
+
this._sentinelObserver = null;
|
|
16009
|
+
/** Reactive signal containing the current root font size in pixels. */
|
|
16010
|
+
this.fontSize = this._fontSize.asReadonly();
|
|
16011
|
+
if (!isPlatformBrowser(this._platformId))
|
|
16012
|
+
return;
|
|
16013
|
+
this._setupObservers();
|
|
16014
|
+
}
|
|
16015
|
+
ngOnDestroy() {
|
|
16016
|
+
this._sentinelObserver?.disconnect();
|
|
16017
|
+
this._sentinelObserver = null;
|
|
16018
|
+
}
|
|
16019
|
+
_setupObservers() {
|
|
16020
|
+
// Reuse an existing sentinel if another service instance already created one.
|
|
16021
|
+
let sentinel = this._document.querySelector(`[${CpsRootFontSizeService._SENTINEL_ATTR}]`);
|
|
16022
|
+
if (!sentinel) {
|
|
16023
|
+
sentinel = this._document.createElement('div');
|
|
16024
|
+
sentinel.setAttribute(CpsRootFontSizeService._SENTINEL_ATTR, '');
|
|
16025
|
+
Object.assign(sentinel.style, {
|
|
16026
|
+
position: 'absolute',
|
|
16027
|
+
width: '1rem',
|
|
16028
|
+
height: '0',
|
|
16029
|
+
visibility: 'hidden',
|
|
16030
|
+
pointerEvents: 'none',
|
|
16031
|
+
userSelect: 'none',
|
|
16032
|
+
top: '0',
|
|
16033
|
+
left: '0'
|
|
16034
|
+
});
|
|
16035
|
+
this._document.documentElement.appendChild(sentinel);
|
|
16036
|
+
}
|
|
16037
|
+
this._sentinelObserver = new ResizeObserver(() => this._refresh());
|
|
16038
|
+
this._sentinelObserver.observe(sentinel);
|
|
16039
|
+
}
|
|
16040
|
+
_refresh() {
|
|
16041
|
+
const newSize = this._readRootFontSize();
|
|
16042
|
+
if (newSize !== this._fontSize()) {
|
|
16043
|
+
this._fontSize.set(newSize);
|
|
16044
|
+
}
|
|
16045
|
+
}
|
|
16046
|
+
_readRootFontSize() {
|
|
16047
|
+
return parseFloat(getComputedStyle(this._document.documentElement).fontSize);
|
|
16048
|
+
}
|
|
16049
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CpsRootFontSizeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
16050
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CpsRootFontSizeService, providedIn: 'root' }); }
|
|
16051
|
+
}
|
|
16052
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CpsRootFontSizeService, decorators: [{
|
|
16053
|
+
type: Injectable,
|
|
16054
|
+
args: [{
|
|
16055
|
+
providedIn: 'root'
|
|
16056
|
+
}]
|
|
16057
|
+
}], ctorParameters: () => [] });
|
|
16058
|
+
/**
|
|
16059
|
+
* Injection token for the root font size service.
|
|
16060
|
+
*
|
|
16061
|
+
* By default it resolves to the singleton {@link CpsRootFontSizeService}.
|
|
16062
|
+
* Consumer applications can override it to:
|
|
16063
|
+
* - Supply a custom subclass
|
|
16064
|
+
* - Provide `null` to disable dynamic tracking entirely
|
|
16065
|
+
*
|
|
16066
|
+
* @example Disable dynamic tracking:
|
|
16067
|
+
* ```typescript
|
|
16068
|
+
* providers: [
|
|
16069
|
+
* { provide: CPS_ROOT_FONT_SIZE_SERVICE, useValue: null }
|
|
16070
|
+
* ]
|
|
16071
|
+
* ```
|
|
16072
|
+
*/
|
|
16073
|
+
const CPS_ROOT_FONT_SIZE_SERVICE = new InjectionToken('CpsRootFontSizeService', {
|
|
16074
|
+
providedIn: 'root',
|
|
16075
|
+
factory: () => inject(CpsRootFontSizeService)
|
|
16076
|
+
});
|
|
16077
|
+
|
|
15789
16078
|
/**
|
|
15790
16079
|
* CpsThemeService manages application theming including dark mode support.
|
|
15791
16080
|
*
|
|
@@ -15983,14 +16272,13 @@ class CpsThemeService {
|
|
|
15983
16272
|
return 'compact';
|
|
15984
16273
|
}
|
|
15985
16274
|
// TODO: Use as fallback in getInitialTheme() once dark mode is fully supported across all components.
|
|
15986
|
-
getSystemTheme() {
|
|
15987
|
-
|
|
15988
|
-
|
|
15989
|
-
|
|
15990
|
-
|
|
15991
|
-
|
|
15992
|
-
|
|
15993
|
-
}
|
|
16275
|
+
// private getSystemTheme(): CpsTheme {
|
|
16276
|
+
// const win = this.document.defaultView;
|
|
16277
|
+
// if (!win?.matchMedia) return 'light';
|
|
16278
|
+
// return win.matchMedia('(prefers-color-scheme: dark)').matches
|
|
16279
|
+
// ? 'dark'
|
|
16280
|
+
// : 'light';
|
|
16281
|
+
// }
|
|
15994
16282
|
// TODO: Enable system preference fallback once dark mode is fully supported across all components.
|
|
15995
16283
|
watchSystemTheme() {
|
|
15996
16284
|
const win = this.document.defaultView;
|
|
@@ -16034,5 +16322,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
16034
16322
|
* Generated bundle index. Do not edit.
|
|
16035
16323
|
*/
|
|
16036
16324
|
|
|
16037
|
-
export { CPS_CRON_VALIDATION_SERVICE, CPS_FOCUS_SERVICE, CPS_RADIO_GROUP, CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsColumnFilterMatchMode, CpsCronValidationService, CpsDatepickerComponent, CpsDialogConfig, CpsDialogRef, CpsDialogService, CpsDividerComponent, CpsExpansionPanelComponent, CpsFileUploadComponent, CpsFocusService, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsMenuComponent, CpsMenuHideReason, CpsNotificationAppearance, CpsNotificationPosition, CpsNotificationService, CpsPaginatePipe, CpsPaginatorComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsRadioGroupComponent, CpsSchedulerComponent, CpsSelectComponent, CpsSidebarMenuComponent, CpsSwitchComponent, CpsTabComponent, CpsTabGroupComponent, CpsTableColumnFilterDirective, CpsTableColumnResizableDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTableDetectFilterTypePipe, CpsTableHeaderSelectableDirective, CpsTableRowSelectableDirective, CpsTagComponent, CpsTextareaComponent, CpsThemeService, CpsTimepickerComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, CpsTreeTableColumnFilterDirective, CpsTreeTableColumnResizableDirective, CpsTreeTableColumnSortableDirective, CpsTreeTableComponent, CpsTreeTableDetectFilterTypePipe, CpsTreeTableHeaderSelectableDirective, CpsTreeTableRowSelectableDirective, CpsTreetableRowTogglerDirective, ICONS_PATH, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory, treeTableFactory };
|
|
16325
|
+
export { CPS_CRON_VALIDATION_SERVICE, CPS_FOCUS_SERVICE, CPS_RADIO_GROUP, CPS_ROOT_FONT_SIZE_SERVICE, CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsColumnFilterMatchMode, CpsCronValidationService, CpsDatepickerComponent, CpsDialogConfig, CpsDialogRef, CpsDialogService, CpsDividerComponent, CpsExpansionPanelComponent, CpsFileUploadComponent, CpsFocusService, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsMenuComponent, CpsMenuHideReason, CpsNotificationAppearance, CpsNotificationPosition, CpsNotificationService, CpsPaginatePipe, CpsPaginatorComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsRadioGroupComponent, CpsRootFontSizeService, CpsSchedulerComponent, CpsSelectComponent, CpsSidebarMenuComponent, CpsSwitchComponent, CpsTabComponent, CpsTabGroupComponent, CpsTableColumnFilterDirective, CpsTableColumnResizableDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTableDetectFilterTypePipe, CpsTableHeaderSelectableDirective, CpsTableRowSelectableDirective, CpsTagComponent, CpsTextareaComponent, CpsThemeService, CpsTimepickerComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, CpsTreeTableColumnFilterDirective, CpsTreeTableColumnResizableDirective, CpsTreeTableColumnSortableDirective, CpsTreeTableComponent, CpsTreeTableDetectFilterTypePipe, CpsTreeTableHeaderSelectableDirective, CpsTreeTableRowSelectableDirective, CpsTreetableRowTogglerDirective, ICONS_PATH, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory, treeTableFactory };
|
|
16038
16326
|
//# sourceMappingURL=cps-ui-kit.mjs.map
|