From c54175dc4846d15af1c2f879d70091f58e249466 Mon Sep 17 00:00:00 2001 From: Mark Thompson <2554588+MarkTechson@users.noreply.github.com> Date: Mon, 23 May 2022 08:25:44 -0700 Subject: [PATCH] completed version --- .browserslistrc | 2 - .gitignore | 1 + angular.json | 14 ++++- package-lock.json | 120 +++++++++++++++++++++++++++++++++++++ package.json | 1 + src/app/app.component.html | 24 ++++---- src/app/app.component.ts | 2 +- src/locale/messages.es.xlf | 87 +++++++++++++++++++++++++++ src/locale/messages.xlf | 77 ++++++++++++++++++++++++ src/polyfills.ts | 4 ++ 10 files changed, 316 insertions(+), 16 deletions(-) create mode 100644 src/locale/messages.es.xlf create mode 100644 src/locale/messages.xlf diff --git a/.browserslistrc b/.browserslistrc index 4f9ac26..6e292a4 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -11,6 +11,4 @@ last 1 Chrome version last 1 Firefox version last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions Firefox ESR diff --git a/.gitignore b/.gitignore index 0711527..12d92ec 100644 --- a/.gitignore +++ b/.gitignore @@ -19,6 +19,7 @@ yarn-error.log *.launch .settings/ *.sublime-workspace +.auto-type # Visual Studio Code .vscode/* diff --git a/angular.json b/angular.json index 491b486..ed84b7e 100644 --- a/angular.json +++ b/angular.json @@ -4,6 +4,15 @@ "newProjectRoot": "projects", "projects": { "i18n-receipt-demo": { + "i18n": { + "sourceLocale": "en-US", + "locales": { + "es-PR": { + "translation": "src/locale/messages.es.xlf", + "baseHref": "es-PR/" + } + } + }, "projectType": "application", "schematics": { "@schematics/angular:application": { @@ -17,6 +26,9 @@ "build": { "builder": "@angular-devkit/build-angular:browser", "options": { + "localize": [ + "es-PR" + ], "outputPath": "dist/i18n-receipt-demo", "index": "src/index.html", "main": "src/main.ts", @@ -103,4 +115,4 @@ } }, "defaultProject": "i18n-receipt-demo" -} +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index f48238c..20c0466 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "@angular-devkit/build-angular": "~13.1.3", "@angular/cli": "~13.1.3", "@angular/compiler-cli": "~13.1.0", + "@angular/localize": "^13.1.3", "@types/jasmine": "~3.10.0", "@types/node": "^12.11.1", "jasmine-core": "~3.10.0", @@ -467,6 +468,77 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/localize": { + "version": "13.1.3", + "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-13.1.3.tgz", + "integrity": "sha512-SGKdVtFnMtwQK3BebsOWf9rJjczVDKDbuO+5xXivD9k0gu5zrRy7x7mwLR7cGlWNDEmoiId705ItC+Mm5n+FVQ==", + "dev": true, + "dependencies": { + "@babel/core": "7.8.6", + "glob": "7.2.0", + "yargs": "^17.2.1" + }, + "bin": { + "localize-extract": "tools/bundles/src/extract/cli.js", + "localize-migrate": "tools/bundles/src/migrate/cli.js", + "localize-translate": "tools/bundles/src/translate/cli.js" + }, + "engines": { + "node": "^12.20.0 || ^14.15.0 || >=16.10.0" + }, + "peerDependencies": { + "@angular/compiler": "13.1.3", + "@angular/compiler-cli": "13.1.3" + } + }, + "node_modules/@angular/localize/node_modules/@babel/core": { + "version": "7.8.6", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.6.tgz", + "integrity": "sha512-Sheg7yEJD51YHAvLEV/7Uvw95AeWqYPL3Vk3zGujJKIhJ+8oLw2ALaf3hbucILhKsgSoADOvtKRJuNVdcJkOrg==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.8.3", + "@babel/generator": "^7.8.6", + "@babel/helpers": "^7.8.4", + "@babel/parser": "^7.8.6", + "@babel/template": "^7.8.6", + "@babel/traverse": "^7.8.6", + "@babel/types": "^7.8.6", + "convert-source-map": "^1.7.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.1", + "json5": "^2.1.0", + "lodash": "^4.17.13", + "resolve": "^1.3.2", + "semver": "^5.4.1", + "source-map": "^0.5.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@angular/localize/node_modules/semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true, + "bin": { + "semver": "bin/semver" + } + }, + "node_modules/@angular/localize/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@angular/platform-browser": { "version": "13.1.3", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.1.3.tgz", @@ -11550,6 +11622,54 @@ "tslib": "^2.3.0" } }, + "@angular/localize": { + "version": "13.1.3", + "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-13.1.3.tgz", + "integrity": "sha512-SGKdVtFnMtwQK3BebsOWf9rJjczVDKDbuO+5xXivD9k0gu5zrRy7x7mwLR7cGlWNDEmoiId705ItC+Mm5n+FVQ==", + "dev": true, + "requires": { + "@babel/core": "7.8.6", + "glob": "7.2.0", + "yargs": "^17.2.1" + }, + "dependencies": { + "@babel/core": { + "version": "7.8.6", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.6.tgz", + "integrity": "sha512-Sheg7yEJD51YHAvLEV/7Uvw95AeWqYPL3Vk3zGujJKIhJ+8oLw2ALaf3hbucILhKsgSoADOvtKRJuNVdcJkOrg==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.8.3", + "@babel/generator": "^7.8.6", + "@babel/helpers": "^7.8.4", + "@babel/parser": "^7.8.6", + "@babel/template": "^7.8.6", + "@babel/traverse": "^7.8.6", + "@babel/types": "^7.8.6", + "convert-source-map": "^1.7.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.1", + "json5": "^2.1.0", + "lodash": "^4.17.13", + "resolve": "^1.3.2", + "semver": "^5.4.1", + "source-map": "^0.5.0" + } + }, + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + } + } + }, "@angular/platform-browser": { "version": "13.1.3", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.1.3.tgz", diff --git a/package.json b/package.json index f9dd1c9..c8709d6 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@angular-devkit/build-angular": "~13.1.3", "@angular/cli": "~13.1.3", "@angular/compiler-cli": "~13.1.0", + "@angular/localize": "^13.1.3", "@types/jasmine": "~3.10.0", "@types/node": "^12.11.1", "jasmine-core": "~3.10.0", diff --git a/src/app/app.component.html b/src/app/app.component.html index 4d00a2a..0234bcb 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,34 +1,34 @@
- + hero image
-

+

Your order is on its way! - + shipping icon

-

+

Thank you for shopping with us and your order has been processed.

- - - - + + + + - - + + - - + +
ItemQtyDateAmountItemQtyDateAmount
Big box item 105/01/2022$129{{"05/01/2022" | date}}{{129 | currency}}
Total Amount$129Total Amount{{129 | currency}}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 405c22c..b3f1b80 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -10,7 +10,7 @@ export class AppComponent { title = 'Your Receipt'; constructor(private titleService: Title) { - this.titleService.setTitle(this.title); + this.titleService.setTitle($localize`${this.title}`); } } diff --git a/src/locale/messages.es.xlf b/src/locale/messages.es.xlf new file mode 100644 index 0000000..8a4c410 --- /dev/null +++ b/src/locale/messages.es.xlf @@ -0,0 +1,87 @@ + + + + + + hero image + imagen de héroe + + src/app/app.component.html + 3 + + + + Your order is on its way! + ¡Su pedido está en camino! + + src/app/app.component.html + 6,8 + + + + shipping icon + icono de envío + + src/app/app.component.html + 8 + + + + Thank you for shopping with us and your order has been processed. + Gracias por comprar con nosotros y su pedido ha sido procesado. + + src/app/app.component.html + 10,13 + + + + Item + Articulo + + src/app/app.component.html + 16 + + + + Qty + Cant. + + src/app/app.component.html + 17 + + + + Date + Fecha + + src/app/app.component.html + 18 + + + + Amount + La suma + + src/app/app.component.html + 19 + + + + Total Amount + cantidad total + + src/app/app.component.html + 30 + + + + + Recibo + + src/app/app.component.ts + 13 + + + + + diff --git a/src/locale/messages.xlf b/src/locale/messages.xlf new file mode 100644 index 0000000..dbd6500 --- /dev/null +++ b/src/locale/messages.xlf @@ -0,0 +1,77 @@ + + + + + + hero image + + src/app/app.component.html + 3 + + + + Your order is on its way! + + src/app/app.component.html + 6,8 + + + + shipping icon + + src/app/app.component.html + 8 + + + + Thank you for shopping with us and your order has been processed. + + src/app/app.component.html + 10,13 + + + + Item + + src/app/app.component.html + 16 + + + + Qty + + src/app/app.component.html + 17 + + + + Date + + src/app/app.component.html + 18 + + + + Amount + + src/app/app.component.html + 19 + + + + Total Amount + + src/app/app.component.html + 30 + + + + + + src/app/app.component.ts + 13 + + + + + diff --git a/src/polyfills.ts b/src/polyfills.ts index 429bb9e..9194e82 100644 --- a/src/polyfills.ts +++ b/src/polyfills.ts @@ -1,3 +1,7 @@ +/*************************************************************************************************** + * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates. + */ +import '@angular/localize/init'; /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file.