diff --git a/README.md b/README.md index e56bd8df..229a1823 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,6 @@ You will need to import the following files to use the tech-carbon-estimator: - main.js - polyfill.js -- styles.css These files can be found under dist/tech-carbon-estimator when developing locally. diff --git a/angular.json b/angular.json index e7211ab8..fb31d1e4 100644 --- a/angular.json +++ b/angular.json @@ -21,8 +21,23 @@ "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "assets": ["src/favicon.ico"], - "styles": ["src/styles.css", "src/sl-styles.css"], - "scripts": [] + "styles": [ + { + "input": "src/tce-global-styles.css", + "bundleName": "tce-global-styles", + "inject": true + }, + { + "input": "src/styles.css", + "bundleName": "styles", + "inject": false + }, + { + "input": "src/sl-styles.css", + "bundleName": "styles", + "inject": false + } + ] }, "configurations": { "production": { @@ -43,7 +58,23 @@ "npm-package": { "index": {"input": "src/package-index.html", "output": "index.html"}, "assets": [], - "styles": ["src/styles.css", "src/package-styles.css"] + "styles": [ + { + "input": "src/tce-global-styles.css", + "bundleName": "tce-global-styles", + "inject": true + }, + { + "input": "src/styles.css", + "bundleName": "styles", + "inject": false + }, + { + "input": "src/package-styles.css", + "bundleName": "styles", + "inject": false + } + ] }, "development": { "optimization": false, diff --git a/src/app/carbon-estimation-treemap/carbon-estimation-treemap.component.html b/src/app/carbon-estimation-treemap/carbon-estimation-treemap.component.html index d6d1a08f..343d401b 100644 --- a/src/app/carbon-estimation-treemap/carbon-estimation-treemap.component.html +++ b/src/app/carbon-estimation-treemap/carbon-estimation-treemap.component.html @@ -2,26 +2,28 @@ Total Emissions Estimate {{ totalEmissions() }} - - - - + @if(shouldShowUnitsSwitch()) { + + + + + }
Estimations

-
+
-
+ @if(isExportMenuOpen) + { +
+ }
\ No newline at end of file diff --git a/src/app/carbon-estimation/carbon-estimation.component.ts b/src/app/carbon-estimation/carbon-estimation.component.ts index 48a16cde..6786e2ba 100644 --- a/src/app/carbon-estimation/carbon-estimation.component.ts +++ b/src/app/carbon-estimation/carbon-estimation.component.ts @@ -152,6 +152,10 @@ export class CarbonEstimationComponent implements OnInit, OnDestroy { // for our purposes monthly estimate is just the annual divided equally // beteween 12 months + if(this.carbonEstimation() == null) { + return undefined; + } + const copy = JSON.parse(JSON.stringify(this.carbonEstimation())); copy.values.totalEmissions = copy.values.totalEmissions/12; diff --git a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html index d8185265..3ac847dd 100644 --- a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html +++ b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html @@ -1,4 +1,4 @@ -
+

Technology Carbon Estimator

diff --git a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts index 752a0125..079144d4 100644 --- a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts +++ b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts @@ -90,8 +90,8 @@ describe('TechCarbonEstimatorComponent', () => { it('should show the form by default', () => { fixture.detectChanges(); - const formElement = fixture.nativeElement.querySelector('carbon-estimator-form'); - const assumptionsElement = fixture.nativeElement.querySelector('assumptions-and-limitation'); + const formElement = fixture.nativeElement.shadowRoot.querySelector('carbon-estimator-form'); + const assumptionsElement = fixture.nativeElement.shadowRoot.querySelector('assumptions-and-limitation'); expect(formElement).toBeTruthy(); expect(assumptionsElement).toBeFalsy(); diff --git a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.ts b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.ts index d38ed560..9b80b85b 100644 --- a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.ts +++ b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from '@angular/core'; +import { ChangeDetectorRef, Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core'; import { CarbonEstimatorFormComponent } from '../carbon-estimator-form/carbon-estimator-form.component'; import { CarbonEstimationComponent } from '../carbon-estimation/carbon-estimation.component'; import { CarbonEstimation, EstimatorValues } from '../types/carbon-estimator'; @@ -24,6 +24,9 @@ import { TabItemComponent } from '../tab/tab-item/tab-item.component'; TabItemComponent, ], templateUrl: './tech-carbon-estimator.component.html', + + // Protect against style interference by the hosting page + encapsulation: ViewEncapsulation.ShadowDom }) export class TechCarbonEstimatorComponent { @Input() public extraHeight?: string; @@ -35,8 +38,34 @@ export class TechCarbonEstimatorComponent { constructor( private estimationService: CarbonEstimationService, - private changeDetector: ChangeDetectorRef - ) {} + private changeDetector: ChangeDetectorRef, + private ref: ElementRef + ) { + this.insertShadowStylesLink() + } + + private insertShadowStylesLink() { + // Reasons for this approach: + // 1. Angular global injection would insert the tag in the page root, so we disabled it. + // 2. Component `styleUrl` wouldn't allow us to vary stylesheets based on build configurations. + + const tailwindShadowDomStylesLink = document.createElement('link'); + tailwindShadowDomStylesLink.rel = 'stylesheet'; + tailwindShadowDomStylesLink.type = 'text/css'; + tailwindShadowDomStylesLink.href = 'tailwind-shadowdom-styles.css'; // This is the `bundleName` of the concatenated styles file + + const stylesLink = document.createElement('link'); + stylesLink.rel = 'stylesheet'; + stylesLink.type = 'text/css'; + stylesLink.href = 'styles.css'; // This is the `bundleName` of the concatenated styles file + + const googleFontsLink = document.createElement('link'); + googleFontsLink.rel = 'stylesheet'; + googleFontsLink.href = 'https://fonts.googleapis.com/icon?family=Material+Icons+Outlined'; + + this.ref.nativeElement.shadowRoot.appendChild(googleFontsLink); + this.ref.nativeElement.shadowRoot.appendChild(stylesLink); + } public handleFormSubmit(formValue: EstimatorValues) { this.formValue = formValue; diff --git a/src/index.html b/src/index.html index fa8541e7..14603119 100644 --- a/src/index.html +++ b/src/index.html @@ -8,9 +8,14 @@ + -
+
diff --git a/src/package-index.html b/src/package-index.html index 1a69dce4..38103677 100644 --- a/src/package-index.html +++ b/src/package-index.html @@ -6,8 +6,13 @@ + - +