@energycap/components 0.38.8-ECAP-19394-form-branding-updates.20231103-1409 → 0.39.1-ECAP-19153-carbonhub-tours.20231103-1450
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/energycap-components.min.css +1 -1
- package/esm2020/lib/display/tooltip/tooltip.component.mjs +6 -3
- package/esm2020/lib/display/tooltip/tooltip.service.mjs +2 -1
- package/esm2020/lib/display/tour/tour.component.mjs +3 -2
- package/fesm2015/energycap-components.mjs +8 -3
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +8 -3
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/display/tooltip/tooltip.component.d.ts +6 -1
- package/package.json +1 -1
- package/src/styles/_global-variables.scss +2 -0
@@ -4308,13 +4308,16 @@ class TooltipComponent {
|
|
4308
4308
|
}
|
4309
4309
|
}
|
4310
4310
|
TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
4311
|
-
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TooltipComponent, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\r\n <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n </header>\r\n\r\n <ng-container *ngIf=\"customContent; else textTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #textTemplate>\r\n <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n </ng-template>\r\n\r\n <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\"></ec-button>\r\n</article>\r\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2
|
4311
|
+
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TooltipComponent, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor", "style.--ec-tooltip-color-title": "this.titleColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\r\n <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n </header>\r\n\r\n <ng-container *ngIf=\"customContent; else textTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #textTemplate>\r\n <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n </ng-template>\r\n\r\n <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\"></ec-button>\r\n</article>\r\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] });
|
4312
4312
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponent, decorators: [{
|
4313
4313
|
type: Component,
|
4314
|
-
args: [{ selector: 'ec-tooltip', template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\r\n <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n </header>\r\n\r\n <ng-container *ngIf=\"customContent; else textTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #textTemplate>\r\n <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n </ng-template>\r\n\r\n <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\"></ec-button>\r\n</article>\r\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2
|
4314
|
+
args: [{ selector: 'ec-tooltip', template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\r\n <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n </header>\r\n\r\n <ng-container *ngIf=\"customContent; else textTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #textTemplate>\r\n <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n </ng-template>\r\n\r\n <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\"></ec-button>\r\n</article>\r\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"] }]
|
4315
4315
|
}], propDecorators: { backgroundColor: [{
|
4316
4316
|
type: HostBinding,
|
4317
4317
|
args: ['style.--ec-tooltip-background-color']
|
4318
|
+
}], titleColor: [{
|
4319
|
+
type: HostBinding,
|
4320
|
+
args: ['style.--ec-tooltip-color-title']
|
4318
4321
|
}] } });
|
4319
4322
|
|
4320
4323
|
class TooltipService {
|
@@ -4351,6 +4354,7 @@ class TooltipService {
|
|
4351
4354
|
contentViewRef.instance.customContent = options?.customContent;
|
4352
4355
|
contentViewRef.instance.dismissible = options?.dismissible || false;
|
4353
4356
|
contentViewRef.instance.backgroundColor = options?.backgroundColor;
|
4357
|
+
contentViewRef.instance.titleColor = options?.titleColor;
|
4354
4358
|
contentViewRef.instance.hideArrow = options?.hideArrow;
|
4355
4359
|
contentViewRef.instance.overlayRef = overlayRef;
|
4356
4360
|
return contentViewRef.instance;
|
@@ -9382,7 +9386,8 @@ class TourComponent {
|
|
9382
9386
|
dismissible: true,
|
9383
9387
|
maxWidth: this.currentTourStep?.maxWidth,
|
9384
9388
|
width: stepWidth,
|
9385
|
-
backgroundColor: 'var(--ec-background-color-tour)'
|
9389
|
+
backgroundColor: 'var(--ec-background-color-tour)',
|
9390
|
+
titleColor: 'var(--ec-color-tour-title)'
|
9386
9391
|
};
|
9387
9392
|
this.tooltip = this.tooltipService.show(tooltipElement, this.currentTourStep.anchor?.position, options);
|
9388
9393
|
await this.waitForTimeout(this.focusOnNextOrDoneButton.bind(this));
|