@testgorilla/tgo-ui 2.26.11 → 2.26.13
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/components/card/card.component.d.ts +7 -2
- package/components/universal-skills-spider-charts/universal-skills-spider-charts.component.d.ts +8 -1
- package/esm2022/components/card/card.component.mjs +16 -4
- package/esm2022/components/spider-chart/spider-chart.component.mjs +2 -2
- package/esm2022/components/universal-skills-spider-charts/universal-skills-spider-charts.component.mjs +12 -3
- package/fesm2022/testgorilla-tgo-ui.mjs +27 -6
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -5948,6 +5948,10 @@ class CardComponent {
|
|
|
5948
5948
|
* @memberof CardComponent
|
|
5949
5949
|
*/
|
|
5950
5950
|
this.selected = false;
|
|
5951
|
+
/**
|
|
5952
|
+
* Emits when card is being selected
|
|
5953
|
+
*/
|
|
5954
|
+
this.cardSelected = new EventEmitter();
|
|
5951
5955
|
this.classes = '';
|
|
5952
5956
|
if (defaultAppTheme) {
|
|
5953
5957
|
this.applicationTheme = defaultAppTheme;
|
|
@@ -5966,12 +5970,18 @@ class CardComponent {
|
|
|
5966
5970
|
// educative, premium, ai, actionDriver and neutral variants shouldn't have any selected/interactive states
|
|
5967
5971
|
return this.selected && this.variant !== 'educative' && this.variant !== 'premium' && this.variant !== 'ai' && this.variant !== 'actionDriver' && this.variant !== 'neutral';
|
|
5968
5972
|
}
|
|
5973
|
+
selectCard() {
|
|
5974
|
+
if (this.variant !== 'educative' && this.variant !== 'premium' && this.variant !== 'ai' && this.variant !== 'actionDriver' && this.variant !== 'neutral') {
|
|
5975
|
+
this.selected = true;
|
|
5976
|
+
this.cardSelected.emit(this.selected);
|
|
5977
|
+
}
|
|
5978
|
+
}
|
|
5969
5979
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5970
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardComponent, selector: "ui-card", inputs: { size: "size", variant: "variant", applicationTheme: "applicationTheme", errors: "errors", selected: "selected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card-container\" [ngClass]=\"[classes, isSelected ? 'selected' : '']\" [attr.theme]=\"applicationTheme\" tabindex=\"0\" >\n <ng-content></ng-content>\n</div>\n<div class=\"errors\" *ngIf=\"safeErrors?.length\">\n <div class=\"error\" *ngFor=\"let error of safeErrors\">\n <ui-icon [size]=\"'24'\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.card-container{border:2px solid #E0E0E0;background:#fff;position:relative;transition:box-shadow .25s ease}.card-container.card-size-medium{padding:24px}.card-container.card-size-large{padding:80px}.card-container.card-size-small{padding:16px}.card-container[theme=dark],.card-container[theme=light]{border-color:#d3d3d3;border-radius:10px;border-width:2px}.card-container[theme=dark].shadow,.card-container[theme=light].shadow{box-shadow:0 4px 100px #2424240a}.card-container[theme=dark].error,.card-container[theme=light].error{border-width:2px;border-color:#e02800}.card-container[theme=dark].ai,.card-container[theme=light].ai{border-color:transparent}.card-container[theme=dark].ai:before,.card-container[theme=light].ai:before{z-index:-1;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-4px;left:-4px;position:absolute;background:#0165fc;background:linear-gradient(129deg,#0165fc 12%,#d410aa 88%);border-radius:11px}.card-container[theme=dark].educative,.card-container[theme=light].educative{background:#d9e8ff;border-color:#1a47aa}.card-container[theme=dark].premium,.card-container[theme=light].premium{background:#fff5e6;border-color:#d07d00}.card-container[theme=dark].actionDriver,.card-container[theme=light].actionDriver{background:#242424}.card-container[theme=dark].neutral,.card-container[theme=light].neutral{background:#f4f4f4;border:none}.card-container[theme=dark].state,.card-container[theme=light].state{cursor:pointer}.card-container[theme=dark].state:hover,.card-container[theme=dark].state:hover:focus,.card-container[theme=light].state:hover,.card-container[theme=light].state:hover:focus{
|
|
5980
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardComponent, selector: "ui-card", inputs: { size: "size", variant: "variant", applicationTheme: "applicationTheme", errors: "errors", selected: "selected" }, outputs: { cardSelected: "cardSelected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card-container\" (keydown.enter)=\"selectCard()\" (keydown.space)=\"selectCard()\" (click)=\"selectCard()\" [ngClass]=\"[classes, isSelected ? 'selected' : '']\" [attr.theme]=\"applicationTheme\" tabindex=\"0\" >\n <ng-content></ng-content>\n</div>\n<div class=\"errors\" *ngIf=\"safeErrors?.length\">\n <div class=\"error\" *ngFor=\"let error of safeErrors\">\n <ui-icon [size]=\"'24'\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.card-container{border:2px solid #E0E0E0;background:#fff;position:relative;transition:box-shadow .25s ease}.card-container.card-size-medium{padding:24px}.card-container.card-size-large{padding:80px}.card-container.card-size-small{padding:16px}.card-container[theme=dark],.card-container[theme=light]{border-color:#d3d3d3;border-radius:10px;border-width:2px}.card-container[theme=dark].shadow,.card-container[theme=light].shadow{box-shadow:0 4px 100px #2424240a}.card-container[theme=dark].error,.card-container[theme=light].error{border-width:2px;border-color:#e02800}.card-container[theme=dark].ai,.card-container[theme=light].ai{border-color:transparent}.card-container[theme=dark].ai:before,.card-container[theme=light].ai:before{z-index:-1;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-4px;left:-4px;position:absolute;background:#0165fc;background:linear-gradient(129deg,#0165fc 12%,#d410aa 88%);border-radius:11px}.card-container[theme=dark].educative,.card-container[theme=light].educative{background:#d9e8ff;border-color:#1a47aa}.card-container[theme=dark].premium,.card-container[theme=light].premium{background:#fff5e6;border-color:#d07d00}.card-container[theme=dark].actionDriver,.card-container[theme=light].actionDriver{background:#242424}.card-container[theme=dark].neutral,.card-container[theme=light].neutral{background:#f4f4f4;border:none}.card-container[theme=dark].state,.card-container[theme=light].state{cursor:pointer}.card-container[theme=dark].state:hover,.card-container[theme=dark].state:hover:focus,.card-container[theme=light].state:hover,.card-container[theme=light].state:hover:focus{border-color:#242424}.card-container[theme=dark].state:focus:not(:focus-visible),.card-container[theme=light].state:focus:not(:focus-visible){border-color:#242424}.card-container[theme=dark].selected,.card-container[theme=light].selected{border-color:#242424;outline:none}.card-container[theme=dark]:focus-visible:not(.selected),.card-container[theme=light]:focus-visible:not(.selected){outline-offset:4px;outline:2px solid #242424;box-shadow:unset;animation:focus-ring-animation-main .4s forwards;border:2px solid #E0E0E0}.card-container[theme=dark]:focus-visible:not(.selected):before,.card-container[theme=light]:focus-visible:not(.selected):before{display:none}.card-container[theme=dark]:focus-visible:is(.selected),.card-container[theme=light]:focus-visible:is(.selected){outline-offset:4px;outline:2px solid #242424;animation:focus-ring-animation-main .4s forwards}.card-container[theme=dark]:focus-visible:is(.selected):before,.card-container[theme=light]:focus-visible:is(.selected):before{display:none}.card-container[theme=dark].default,.card-container[theme=light].default{border-color:#d3d3d3}.card-size-brand.card-size-medium{padding:23px}.card-size-brand.card-size-large{padding:79px}.card-size-brand.card-size-small{padding:15px}.errors{margin-top:8px}.errors .error{font-size:14px;display:flex;flex-direction:row;align-items:center;color:#e02800}.errors .error ui-icon{margin-right:8px}.errors .error ui-icon ::ng-deep svg{color:#e02800}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5971
5981
|
}
|
|
5972
5982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, decorators: [{
|
|
5973
5983
|
type: Component,
|
|
5974
|
-
args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card-container\" [ngClass]=\"[classes, isSelected ? 'selected' : '']\" [attr.theme]=\"applicationTheme\" tabindex=\"0\" >\n <ng-content></ng-content>\n</div>\n<div class=\"errors\" *ngIf=\"safeErrors?.length\">\n <div class=\"error\" *ngFor=\"let error of safeErrors\">\n <ui-icon [size]=\"'24'\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.card-container{border:2px solid #E0E0E0;background:#fff;position:relative;transition:box-shadow .25s ease}.card-container.card-size-medium{padding:24px}.card-container.card-size-large{padding:80px}.card-container.card-size-small{padding:16px}.card-container[theme=dark],.card-container[theme=light]{border-color:#d3d3d3;border-radius:10px;border-width:2px}.card-container[theme=dark].shadow,.card-container[theme=light].shadow{box-shadow:0 4px 100px #2424240a}.card-container[theme=dark].error,.card-container[theme=light].error{border-width:2px;border-color:#e02800}.card-container[theme=dark].ai,.card-container[theme=light].ai{border-color:transparent}.card-container[theme=dark].ai:before,.card-container[theme=light].ai:before{z-index:-1;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-4px;left:-4px;position:absolute;background:#0165fc;background:linear-gradient(129deg,#0165fc 12%,#d410aa 88%);border-radius:11px}.card-container[theme=dark].educative,.card-container[theme=light].educative{background:#d9e8ff;border-color:#1a47aa}.card-container[theme=dark].premium,.card-container[theme=light].premium{background:#fff5e6;border-color:#d07d00}.card-container[theme=dark].actionDriver,.card-container[theme=light].actionDriver{background:#242424}.card-container[theme=dark].neutral,.card-container[theme=light].neutral{background:#f4f4f4;border:none}.card-container[theme=dark].state,.card-container[theme=light].state{cursor:pointer}.card-container[theme=dark].state:hover,.card-container[theme=dark].state:hover:focus,.card-container[theme=light].state:hover,.card-container[theme=light].state:hover:focus{
|
|
5984
|
+
args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card-container\" (keydown.enter)=\"selectCard()\" (keydown.space)=\"selectCard()\" (click)=\"selectCard()\" [ngClass]=\"[classes, isSelected ? 'selected' : '']\" [attr.theme]=\"applicationTheme\" tabindex=\"0\" >\n <ng-content></ng-content>\n</div>\n<div class=\"errors\" *ngIf=\"safeErrors?.length\">\n <div class=\"error\" *ngFor=\"let error of safeErrors\">\n <ui-icon [size]=\"'24'\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.card-container{border:2px solid #E0E0E0;background:#fff;position:relative;transition:box-shadow .25s ease}.card-container.card-size-medium{padding:24px}.card-container.card-size-large{padding:80px}.card-container.card-size-small{padding:16px}.card-container[theme=dark],.card-container[theme=light]{border-color:#d3d3d3;border-radius:10px;border-width:2px}.card-container[theme=dark].shadow,.card-container[theme=light].shadow{box-shadow:0 4px 100px #2424240a}.card-container[theme=dark].error,.card-container[theme=light].error{border-width:2px;border-color:#e02800}.card-container[theme=dark].ai,.card-container[theme=light].ai{border-color:transparent}.card-container[theme=dark].ai:before,.card-container[theme=light].ai:before{z-index:-1;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-4px;left:-4px;position:absolute;background:#0165fc;background:linear-gradient(129deg,#0165fc 12%,#d410aa 88%);border-radius:11px}.card-container[theme=dark].educative,.card-container[theme=light].educative{background:#d9e8ff;border-color:#1a47aa}.card-container[theme=dark].premium,.card-container[theme=light].premium{background:#fff5e6;border-color:#d07d00}.card-container[theme=dark].actionDriver,.card-container[theme=light].actionDriver{background:#242424}.card-container[theme=dark].neutral,.card-container[theme=light].neutral{background:#f4f4f4;border:none}.card-container[theme=dark].state,.card-container[theme=light].state{cursor:pointer}.card-container[theme=dark].state:hover,.card-container[theme=dark].state:hover:focus,.card-container[theme=light].state:hover,.card-container[theme=light].state:hover:focus{border-color:#242424}.card-container[theme=dark].state:focus:not(:focus-visible),.card-container[theme=light].state:focus:not(:focus-visible){border-color:#242424}.card-container[theme=dark].selected,.card-container[theme=light].selected{border-color:#242424;outline:none}.card-container[theme=dark]:focus-visible:not(.selected),.card-container[theme=light]:focus-visible:not(.selected){outline-offset:4px;outline:2px solid #242424;box-shadow:unset;animation:focus-ring-animation-main .4s forwards;border:2px solid #E0E0E0}.card-container[theme=dark]:focus-visible:not(.selected):before,.card-container[theme=light]:focus-visible:not(.selected):before{display:none}.card-container[theme=dark]:focus-visible:is(.selected),.card-container[theme=light]:focus-visible:is(.selected){outline-offset:4px;outline:2px solid #242424;animation:focus-ring-animation-main .4s forwards}.card-container[theme=dark]:focus-visible:is(.selected):before,.card-container[theme=light]:focus-visible:is(.selected):before{display:none}.card-container[theme=dark].default,.card-container[theme=light].default{border-color:#d3d3d3}.card-size-brand.card-size-medium{padding:23px}.card-size-brand.card-size-large{padding:79px}.card-size-brand.card-size-small{padding:15px}.errors{margin-top:8px}.errors .error{font-size:14px;display:flex;flex-direction:row;align-items:center;color:#e02800}.errors .error ui-icon{margin-right:8px}.errors .error ui-icon ::ng-deep svg{color:#e02800}\n"] }]
|
|
5975
5985
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5976
5986
|
type: Optional
|
|
5977
5987
|
}, {
|
|
@@ -5987,6 +5997,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
5987
5997
|
type: Input
|
|
5988
5998
|
}], selected: [{
|
|
5989
5999
|
type: Input
|
|
6000
|
+
}], cardSelected: [{
|
|
6001
|
+
type: Output
|
|
5990
6002
|
}] } });
|
|
5991
6003
|
|
|
5992
6004
|
class CardComponentModule {
|
|
@@ -16348,11 +16360,11 @@ class SpiderChartComponent {
|
|
|
16348
16360
|
return label.substring(firstLine.length).trim();
|
|
16349
16361
|
}
|
|
16350
16362
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpiderChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16351
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SpiderChartComponent, selector: "ui-spider-chart", inputs: { size: "size", spiderChartData: "spiderChartData", stepSize: "stepSize", ariaLabel: "ariaLabel", loading: "loading", applicationTheme: "applicationTheme" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }, { propertyName: "labelContainers", predicate: ["labelContainer"], descendants: true }, { propertyName: "fakeDataPoints", predicate: ["fakeDataPoints"], descendants: true }, { propertyName: "fakeDataPointsSecondary", predicate: ["fakeDataPointsSecondary"], descendants: true }, { propertyName: "legendItems", predicate: ["legendItem"], descendants: true }], ngImport: i0, template: "<div class=\"spider-chart-container\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\">\n <div class=\"spacing-container\"\n [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n <div class=\"chart-container\"\n [style.width]=\"size === 'large' ? '280px' : '200px'\"\n [style.height]=\"size === 'large' ? '280px' : '200px'\">\n @if (!loading) {\n <canvas\n baseChart\n [data]=\"radarChartData\"\n [options]=\"radarChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n } @else {\n <canvas\n baseChart\n [data]=\"loadingChartData\"\n [options]=\"loadingChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n <ui-spinner></ui-spinner>\n }\n\n @if (labelPositionsVisible) {\n <div class=\"overlay-container\">\n @for (label of spiderChartData.labels; track label) {\n <div class=\"label-container\" #labelContainer\n [matTooltip]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n (keydown)=\"onLabelKeyDown($event, $index)\"\n [attr.aria-label]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label }}\n </div>\n } @else {\n <div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getFirstLine }}</div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getSecondLine : this }}</div>\n </div>\n }\n <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n </div>\n <span class=\"fake-data-points\" #fakeDataPoints\n [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index)\">\n </span>\n @if (radarChartData.datasets.length > 1) {\n <span class=\"fake-data-points-secondary\" #fakeDataPointsSecondary\n [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\">\n </span>\n }\n }\n </div>\n }\n </div>\n </div>\n @if (radarChartData.datasets.length > 0) {\n <div class=\"legend-container\">\n @for (dataset of radarChartData.datasets; track dataset.label) {\n <div class=\"legend-item\"\n (click)=\"toggleDatasetVisibility($index)\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n role=\"button\"\n [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n [attr.aria-label]=\"isDatasetVisible($index) ?\n ((translationContext + 'DATASET_VISIBLE') | uiTranslate : { dataset: dataset.label } | async) :\n ((translationContext + 'DATASET_HIDDEN') | uiTranslate : { dataset: dataset.label } | async)\"\n (keydown)=\"onLegendItemKeyDown($event, $index)\"\n #legendItem>\n <span class=\"legend-line\" [ngClass]=\"{'solid-line': $index === 0, 'dashed-line': $index === 1}\"></span>\n <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n {{ dataset.label }}\n </span>\n </div>\n }\n </div>\n }\n</div>\n\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #D3D3D3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$b.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "applicationTheme"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
|
|
16363
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SpiderChartComponent, selector: "ui-spider-chart", inputs: { size: "size", spiderChartData: "spiderChartData", stepSize: "stepSize", ariaLabel: "ariaLabel", loading: "loading", applicationTheme: "applicationTheme" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }, { propertyName: "labelContainers", predicate: ["labelContainer"], descendants: true }, { propertyName: "fakeDataPoints", predicate: ["fakeDataPoints"], descendants: true }, { propertyName: "fakeDataPointsSecondary", predicate: ["fakeDataPointsSecondary"], descendants: true }, { propertyName: "legendItems", predicate: ["legendItem"], descendants: true }], ngImport: i0, template: "<div class=\"spider-chart-container\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\">\n <div class=\"spacing-container\"\n [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n <div class=\"chart-container\"\n [style.width]=\"size === 'large' ? '280px' : '200px'\"\n [style.height]=\"size === 'large' ? '280px' : '200px'\">\n @if (!loading) {\n <canvas\n baseChart\n [data]=\"radarChartData\"\n [options]=\"radarChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n } @else {\n <canvas\n baseChart\n [data]=\"loadingChartData\"\n [options]=\"loadingChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n <ui-spinner></ui-spinner>\n }\n\n @if (labelPositionsVisible) {\n <div class=\"overlay-container\">\n @for (label of spiderChartData.labels; track label) {\n <div class=\"label-container\" #labelContainer\n [matTooltip]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n (keydown)=\"onLabelKeyDown($event, $index)\"\n [attr.aria-label]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label }}\n </div>\n } @else {\n <div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getFirstLine }}</div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getSecondLine : this }}</div>\n </div>\n }\n <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n </div>\n <span class=\"fake-data-points\" #fakeDataPoints\n [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index)\">\n </span>\n @if (radarChartData.datasets.length > 1) {\n <span class=\"fake-data-points-secondary\" #fakeDataPointsSecondary\n [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\">\n </span>\n }\n }\n </div>\n }\n </div>\n </div>\n @if (radarChartData.datasets.length > 0) {\n <div class=\"legend-container\">\n @for (dataset of radarChartData.datasets; track dataset.label) {\n <div class=\"legend-item\"\n (click)=\"toggleDatasetVisibility($index)\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n role=\"button\"\n [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n [attr.aria-label]=\"isDatasetVisible($index) ?\n ((translationContext + 'DATASET_VISIBLE') | uiTranslate : { dataset: dataset.label } | async) :\n ((translationContext + 'DATASET_HIDDEN') | uiTranslate : { dataset: dataset.label } | async)\"\n (keydown)=\"onLegendItemKeyDown($event, $index)\"\n #legendItem>\n <span class=\"legend-line\" [ngClass]=\"{'solid-line': $index === 0, 'dashed-line': $index === 1}\"></span>\n <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n {{ dataset.label }}\n </span>\n </div>\n }\n </div>\n }\n</div>\n\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #D3D3D3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$b.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "applicationTheme"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
|
|
16352
16364
|
}
|
|
16353
16365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpiderChartComponent, decorators: [{
|
|
16354
16366
|
type: Component,
|
|
16355
|
-
args: [{ selector: 'ui-spider-chart', template: "<div class=\"spider-chart-container\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\">\n <div class=\"spacing-container\"\n [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n <div class=\"chart-container\"\n [style.width]=\"size === 'large' ? '280px' : '200px'\"\n [style.height]=\"size === 'large' ? '280px' : '200px'\">\n @if (!loading) {\n <canvas\n baseChart\n [data]=\"radarChartData\"\n [options]=\"radarChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n } @else {\n <canvas\n baseChart\n [data]=\"loadingChartData\"\n [options]=\"loadingChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n <ui-spinner></ui-spinner>\n }\n\n @if (labelPositionsVisible) {\n <div class=\"overlay-container\">\n @for (label of spiderChartData.labels; track label) {\n <div class=\"label-container\" #labelContainer\n [matTooltip]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n (keydown)=\"onLabelKeyDown($event, $index)\"\n [attr.aria-label]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label }}\n </div>\n } @else {\n <div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getFirstLine }}</div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getSecondLine : this }}</div>\n </div>\n }\n <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n </div>\n <span class=\"fake-data-points\" #fakeDataPoints\n [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index)\">\n </span>\n @if (radarChartData.datasets.length > 1) {\n <span class=\"fake-data-points-secondary\" #fakeDataPointsSecondary\n [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\">\n </span>\n }\n }\n </div>\n }\n </div>\n </div>\n @if (radarChartData.datasets.length > 0) {\n <div class=\"legend-container\">\n @for (dataset of radarChartData.datasets; track dataset.label) {\n <div class=\"legend-item\"\n (click)=\"toggleDatasetVisibility($index)\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n role=\"button\"\n [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n [attr.aria-label]=\"isDatasetVisible($index) ?\n ((translationContext + 'DATASET_VISIBLE') | uiTranslate : { dataset: dataset.label } | async) :\n ((translationContext + 'DATASET_HIDDEN') | uiTranslate : { dataset: dataset.label } | async)\"\n (keydown)=\"onLegendItemKeyDown($event, $index)\"\n #legendItem>\n <span class=\"legend-line\" [ngClass]=\"{'solid-line': $index === 0, 'dashed-line': $index === 1}\"></span>\n <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n {{ dataset.label }}\n </span>\n </div>\n }\n </div>\n }\n</div>\n\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #D3D3D3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}\n"] }]
|
|
16367
|
+
args: [{ selector: 'ui-spider-chart', template: "<div class=\"spider-chart-container\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\">\n <div class=\"spacing-container\"\n [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n <div class=\"chart-container\"\n [style.width]=\"size === 'large' ? '280px' : '200px'\"\n [style.height]=\"size === 'large' ? '280px' : '200px'\">\n @if (!loading) {\n <canvas\n baseChart\n [data]=\"radarChartData\"\n [options]=\"radarChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n } @else {\n <canvas\n baseChart\n [data]=\"loadingChartData\"\n [options]=\"loadingChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n <ui-spinner></ui-spinner>\n }\n\n @if (labelPositionsVisible) {\n <div class=\"overlay-container\">\n @for (label of spiderChartData.labels; track label) {\n <div class=\"label-container\" #labelContainer\n [matTooltip]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n (keydown)=\"onLabelKeyDown($event, $index)\"\n [attr.aria-label]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label }}\n </div>\n } @else {\n <div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getFirstLine }}</div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getSecondLine : this }}</div>\n </div>\n }\n <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n </div>\n <span class=\"fake-data-points\" #fakeDataPoints\n [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index)\">\n </span>\n @if (radarChartData.datasets.length > 1) {\n <span class=\"fake-data-points-secondary\" #fakeDataPointsSecondary\n [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\">\n </span>\n }\n }\n </div>\n }\n </div>\n </div>\n @if (radarChartData.datasets.length > 0) {\n <div class=\"legend-container\">\n @for (dataset of radarChartData.datasets; track dataset.label) {\n <div class=\"legend-item\"\n (click)=\"toggleDatasetVisibility($index)\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n role=\"button\"\n [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n [attr.aria-label]=\"isDatasetVisible($index) ?\n ((translationContext + 'DATASET_VISIBLE') | uiTranslate : { dataset: dataset.label } | async) :\n ((translationContext + 'DATASET_HIDDEN') | uiTranslate : { dataset: dataset.label } | async)\"\n (keydown)=\"onLegendItemKeyDown($event, $index)\"\n #legendItem>\n <span class=\"legend-line\" [ngClass]=\"{'solid-line': $index === 0, 'dashed-line': $index === 1}\"></span>\n <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n {{ dataset.label }}\n </span>\n </div>\n }\n </div>\n }\n</div>\n\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #D3D3D3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"] }]
|
|
16356
16368
|
}], propDecorators: { size: [{
|
|
16357
16369
|
type: Input
|
|
16358
16370
|
}], spiderChartData: [{
|
|
@@ -16873,6 +16885,13 @@ class UniversalSkillsSpiderChartsComponent {
|
|
|
16873
16885
|
* @memberof UniversalSkillsSpiderChartsComponent
|
|
16874
16886
|
*/
|
|
16875
16887
|
this.loading = false;
|
|
16888
|
+
/**
|
|
16889
|
+
* Defines the size of the spider chart
|
|
16890
|
+
* @property size
|
|
16891
|
+
* @type {'small' | 'large'}
|
|
16892
|
+
* @memberof UniversalSkillsSpiderChartsComponent
|
|
16893
|
+
*/
|
|
16894
|
+
this.size = 'large';
|
|
16876
16895
|
this.translationContext = 'UNIVERSAL_SKILLS_REPORT.';
|
|
16877
16896
|
this.skillAreaSpiderChartData = [];
|
|
16878
16897
|
if (defaultAppTheme) {
|
|
@@ -16927,11 +16946,11 @@ class UniversalSkillsSpiderChartsComponent {
|
|
|
16927
16946
|
});
|
|
16928
16947
|
}
|
|
16929
16948
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UniversalSkillsSpiderChartsComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: UniversalSkillsService }, { token: UiTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16930
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: UniversalSkillsSpiderChartsComponent, selector: "ui-universal-skills-spider-charts", inputs: { applicationTheme: "applicationTheme", skillAreaDataList: "skillAreaDataList", loading: "loading" }, ngImport: i0, template: "@for (spiderChartData of skillAreaSpiderChartData; track spiderChartData) {\n <ui-accordion class=\"universal-skills-spider-charts\" [label]=\"(spiderChartData.title | uiTranslate | async) || ''\" variant=\"filter\">\n <ui-spider-chart [spiderChartData]=\"spiderChartData.spiderChartData\" [loading]=\"loading\"></ui-spider-chart>\n </ui-accordion>\n @if ($index < skillAreaSpiderChartData.length - 1) {\n <ui-divider class=\"universal-skills-spider-charts-divider\" size=\"small\"></ui-divider>\n }\n}\n", styles: [".universal-skills-spider-charts ::ng-deep .accordion-wrapper[theme=light] .mat-expansion-panel .mat-expansion-panel-header .accordion-label{font-weight:700}.universal-skills-spider-charts-divider ::ng-deep .ui-divider-wrapper{margin-top:8px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: AccordionComponent, selector: "ui-accordion", inputs: ["label", "open", "disabled", "showPremiumIcon", "premiumTooltipText", "applicationTheme", "labelIcon", "variant", "allowCustomHeader", "noBackgroundColor", "toggleIconPosition"], outputs: ["closed", "opened"] }, { kind: "component", type: SpiderChartComponent, selector: "ui-spider-chart", inputs: ["size", "spiderChartData", "stepSize", "ariaLabel", "loading", "applicationTheme"] }, { kind: "component", type: DividerComponent, selector: "ui-divider", inputs: ["size", "companyColor", "applicationTheme", "label"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16949
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: UniversalSkillsSpiderChartsComponent, selector: "ui-universal-skills-spider-charts", inputs: { applicationTheme: "applicationTheme", skillAreaDataList: "skillAreaDataList", loading: "loading", size: "size" }, ngImport: i0, template: "@for (spiderChartData of skillAreaSpiderChartData; track spiderChartData) {\n <ui-accordion class=\"universal-skills-spider-charts\" [label]=\"(spiderChartData.title | uiTranslate | async) || ''\" variant=\"filter\">\n <ui-spider-chart [spiderChartData]=\"spiderChartData.spiderChartData\" [loading]=\"loading\" [size]=\"size\"></ui-spider-chart>\n </ui-accordion>\n @if ($index < skillAreaSpiderChartData.length - 1) {\n <ui-divider class=\"universal-skills-spider-charts-divider\" size=\"small\"></ui-divider>\n }\n}\n", styles: [".universal-skills-spider-charts ::ng-deep .accordion-wrapper[theme=light] .mat-expansion-panel .mat-expansion-panel-header .accordion-label{font-weight:700}.universal-skills-spider-charts-divider ::ng-deep .ui-divider-wrapper{margin-top:8px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: AccordionComponent, selector: "ui-accordion", inputs: ["label", "open", "disabled", "showPremiumIcon", "premiumTooltipText", "applicationTheme", "labelIcon", "variant", "allowCustomHeader", "noBackgroundColor", "toggleIconPosition"], outputs: ["closed", "opened"] }, { kind: "component", type: SpiderChartComponent, selector: "ui-spider-chart", inputs: ["size", "spiderChartData", "stepSize", "ariaLabel", "loading", "applicationTheme"] }, { kind: "component", type: DividerComponent, selector: "ui-divider", inputs: ["size", "companyColor", "applicationTheme", "label"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16931
16950
|
}
|
|
16932
16951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UniversalSkillsSpiderChartsComponent, decorators: [{
|
|
16933
16952
|
type: Component,
|
|
16934
|
-
args: [{ selector: 'ui-universal-skills-spider-charts', changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (spiderChartData of skillAreaSpiderChartData; track spiderChartData) {\n <ui-accordion class=\"universal-skills-spider-charts\" [label]=\"(spiderChartData.title | uiTranslate | async) || ''\" variant=\"filter\">\n <ui-spider-chart [spiderChartData]=\"spiderChartData.spiderChartData\" [loading]=\"loading\"></ui-spider-chart>\n </ui-accordion>\n @if ($index < skillAreaSpiderChartData.length - 1) {\n <ui-divider class=\"universal-skills-spider-charts-divider\" size=\"small\"></ui-divider>\n }\n}\n", styles: [".universal-skills-spider-charts ::ng-deep .accordion-wrapper[theme=light] .mat-expansion-panel .mat-expansion-panel-header .accordion-label{font-weight:700}.universal-skills-spider-charts-divider ::ng-deep .ui-divider-wrapper{margin-top:8px;margin-bottom:8px}\n"] }]
|
|
16953
|
+
args: [{ selector: 'ui-universal-skills-spider-charts', changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (spiderChartData of skillAreaSpiderChartData; track spiderChartData) {\n <ui-accordion class=\"universal-skills-spider-charts\" [label]=\"(spiderChartData.title | uiTranslate | async) || ''\" variant=\"filter\">\n <ui-spider-chart [spiderChartData]=\"spiderChartData.spiderChartData\" [loading]=\"loading\" [size]=\"size\"></ui-spider-chart>\n </ui-accordion>\n @if ($index < skillAreaSpiderChartData.length - 1) {\n <ui-divider class=\"universal-skills-spider-charts-divider\" size=\"small\"></ui-divider>\n }\n}\n", styles: [".universal-skills-spider-charts ::ng-deep .accordion-wrapper[theme=light] .mat-expansion-panel .mat-expansion-panel-header .accordion-label{font-weight:700}.universal-skills-spider-charts-divider ::ng-deep .ui-divider-wrapper{margin-top:8px;margin-bottom:8px}\n"] }]
|
|
16935
16954
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
16936
16955
|
type: Optional
|
|
16937
16956
|
}, {
|
|
@@ -16943,6 +16962,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
16943
16962
|
type: Input
|
|
16944
16963
|
}], loading: [{
|
|
16945
16964
|
type: Input
|
|
16965
|
+
}], size: [{
|
|
16966
|
+
type: Input
|
|
16946
16967
|
}] } });
|
|
16947
16968
|
|
|
16948
16969
|
class UniversalSkillsSpiderChartsComponentModule {
|