completed version

MarkTechson · May 23, 2022 · c54175d · c54175d
1 parent d9d6571
commit c54175d
Show file tree

Hide file tree

Showing 10 changed files with 316 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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"
-}
+}
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -1,34 +1,34 @@
 <main>
   <section class="image-container">
-    <img class="hero-image" src="../assets/undraw_order_confirmed_re_g0if.svg">
+    <img alt="hero image" i18n-alt class="hero-image" src="assets/undraw_order_confirmed_re_g0if.svg">
   </section>
   <section class="shipping-details">
-    <h2>
+    <h2 i18n>
       Your order is on its way!
-      <img class="shipping-icon" src="../assets/noun-shipping-4326216-63D1FF.png">
+      <img alt="shipping icon" i18n-alt class="shipping-icon" src="assets/noun-shipping-4326216-63D1FF.png">
     </h2>
-    <p>
+    <p i18n>
       Thank you for shopping with us and your order
       has been processed.
     </p>
     <table>
       <tr>
-        <th>Item</th>
-        <th>Qty</th>
-        <th>Date</th>
-        <th>Amount</th>
+        <th i18n>Item</th>
+        <th i18n>Qty</th>
+        <th i18n>Date</th>
+        <th i18n>Amount</th>
       </tr>
       <tr>
         <td>Big box item</td>
         <td>1</td>
-        <td>05/01/2022</td>
-        <td>$129</td>
+        <td>{{"05/01/2022" | date}}</td>
+        <td>{{129 | currency}}</td>
       </tr>
       <tr>
         <td></td>
         <td></td>
-        <td class="total-amount-label">Total Amount</td>
-        <td class="total-amount">$129</td>
+        <td i18n class="total-amount-label">Total Amount</td>
+        <td class="total-amount">{{129 | currency}}</td>
       </tr>
     </table>
   </section>

diff --git 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
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en-US" datatype="plaintext" original="ng2.template">
+    <body>
+      <trans-unit id="3277059772153279197" datatype="html">
+        <source>hero image</source>
+        <target>imagen de héroe</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">3</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="4963770382876927129" datatype="html">
+        <source> Your order is on its way! <x id="TAG_IMG" ctype="image" equiv-text="&lt;img alt=&quot;shipping icon&quot; i18n-alt class=&quot;shipping-icon&quot; src=&quot;../assets/noun-shipping-4326216-63D1FF.png&quot;&gt;"/></source>
+        <target> ¡Su pedido está en camino! <x id="TAG_IMG" ctype="image" equiv-text="&lt;img alt=&quot;shipping icon&quot; i18n-alt class=&quot;shipping-icon&quot; src=&quot;../assets/noun-shipping-4326216-63D1FF.png&quot;&gt;"/></target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">6,8</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="183871222561584409" datatype="html">
+        <source>shipping icon</source>
+        <target>icono de envío</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">8</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="686693237118040455" datatype="html">
+        <source> Thank you for shopping with us and your order has been processed. </source>
+        <target> Gracias por comprar con nosotros y su pedido ha sido procesado. </target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">10,13</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="8075168556531069883" datatype="html">
+        <source>Item</source>
+        <target>Articulo</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">16</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="7826783489111304264" datatype="html">
+        <source>Qty</source>
+        <target>Cant.</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">17</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="3973931101896534797" datatype="html">
+        <source>Date</source>
+        <target>Fecha</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">18</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="6533918067030990396" datatype="html">
+        <source>Amount</source>
+        <target>La suma</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">19</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="112783260724635106" datatype="html">
+        <source>Total Amount</source>
+        <target>cantidad total</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="1737753151350322492" datatype="html">
+        <source><x id="PH" equiv-text="this.title"/></source>
+        <target>Recibo</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.ts</context>
+          <context context-type="linenumber">13</context>
+        </context-group>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>