@duetds/cli 4.0.21 → 4.0.23

package/templates/angular/17.0.0/src/app/index-page/index-page.component.ts

@@ -0,0 +1,61 @@
+import { Component } from "@angular/core"
+import { FormBuilder, Validators } from "@angular/forms"
+import { Agreement } from "../agreement.model"
+
+import { currencyFormatFI } from "../../utils/string.utils"
+
+@Component({
+  selector: "app-index-page",
+  templateUrl: "./index-page.component.html",
+  styleUrls: ["./index-page.component.scss"]
+})
+export class IndexPageComponent {
+  constructor(private formBuilder: FormBuilder) {}
+
+  currentStep = 0
+  completed = false
+
+  form = this.formBuilder.group({
+    investmentAmount: this.formBuilder.group({
+      agreement: [null, [Validators.required]],
+      additionalInvestment: 50
+    }),
+    investmentOrigin: this.formBuilder.group({
+      salary: false,
+      gift: false,
+      heritage: false,
+      entrepreneurialIncome: false,
+      assets: false,
+      otherIncome: false,
+      investment: false,
+      extras: null
+    })
+  })
+
+  agreements: Record<number, Agreement> = {
+    1: new Agreement("Vakuutus 1", 2500),
+    2: new Agreement("Vakuutus 2", 1000)
+  }
+
+  get selectedAgreement() {
+    return this.agreements[this.form.value.investmentAmount.agreement ?? 1]
+  }
+
+  formatNumber(value: number) {
+    return currencyFormatFI.format(value)
+  }
+
+  handleStepChange(event: CustomEvent) {
+    this.currentStep = event.detail.toStep
+  }
+
+  handleNextClick(event: Event) {
+    event.preventDefault()
+    this.currentStep++
+  }
+
+  handleSubmit(event: Event) {
+    event.preventDefault()
+    this.completed = true
+  }
+}

package/templates/angular/17.0.0/src/app/investment-amount/investment-amount.component.html

@@ -0,0 +1,85 @@
+<ng-container [formGroup]="form">
+  <duet-select
+    expand
+    label="Valitse sopimus"
+    placeholder="Valitse…"
+    [items]="agreementOptions"
+  >
+  </duet-select>
+  <duet-table variation="plain" *ngIf="selectedAgreement">
+    <table>
+      <thead>
+        <tr>
+          <th>Sijoituskohde</th>
+          <th class="duet-text-right">Osuus</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <duet-button
+              variation="plain"
+              margin="none"
+              padding="none"
+              url="https://www.duetds.com/assets/downloads/localtapiola-brand-guidelines.pdf"
+              external
+            >
+              Kohde 1<duet-spacer size="xx-small" direction="horizontal"></duet-spacer>
+              <duet-visually-hidden>, avautuu uuteen ikkunaan</duet-visually-hidden>
+            </duet-button>
+          </td>
+          <td class="duet-text-right">25%</td>
+        </tr>
+        <tr>
+          <td>
+            <duet-button
+              variation="plain"
+              margin="none"
+              padding="none"
+              url="https://www.duetds.com/assets/downloads/localtapiola-brand-guidelines.pdf"
+              external
+            >
+              Kohde 2<duet-spacer size="xx-small" direction="horizontal"></duet-spacer>
+              <duet-visually-hidden>, avautuu uuteen ikkunaan</duet-visually-hidden>
+            </duet-button>
+          </td>
+          <td class="duet-text-right">25%</td>
+        </tr>
+        <tr>
+          <td>
+            <duet-button
+              variation="plain"
+              margin="none"
+              padding="none"
+              url="https://www.duetds.com/assets/downloads/localtapiola-brand-guidelines.pdf"
+              external
+            >
+              Kohde 3<duet-spacer size="xx-small" direction="horizontal"></duet-spacer>
+              <duet-visually-hidden>, avautuu uuteen ikkunaan</duet-visually-hidden>
+            </duet-button>
+          </td>
+          <td class="duet-text-right">50%</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <td class="duet-font-weight-semi-bold">Yhteisarvo</td>
+          <td class="duet-text-right duet-font-weight-semi-bold duet-font-size-large">
+            {{ formatter.format(selectedAgreement.price) }}
+          </td>
+        </tr>
+      </tfoot>
+    </table>
+  </duet-table>
+  <duet-spacer></duet-spacer>
+  <duet-card variation="plain" background="gray-lighter">
+    <duet-input
+      numeric-keyboard
+      expand
+      label="Syötä summa"
+      placeholder="50"
+      icon="form-money"
+      type="number"
+    ></duet-input>
+  </duet-card>
+</ng-container>

package/templates/angular/17.0.0/src/app/investment-amount/investment-amount.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit, Input, ElementRef } from "@angular/core"
+import { FormGroup } from "@angular/forms"
+import { Agreement } from "../agreement.model"
+import { CurrencyFormatterService } from "../currency-formatter.service"
+
+@Component({
+  selector: "app-investment-amount",
+  templateUrl: "./investment-amount.component.html",
+  styleUrls: ["./investment-amount.component.scss"]
+})
+export class InvestmentAmountComponent implements OnInit {
+  @Input() agreements: Record<number, Agreement>
+  @Input() form: FormGroup
+
+  constructor(public formatter: CurrencyFormatterService, private myElement: ElementRef) {}
+
+  ngOnInit(): void {
+    const element = this.myElement.nativeElement as Element
+    const select = element.querySelector("duet-select") as HTMLDuetSelectElement
+    const input = element.querySelector("duet-input") as HTMLDuetInputElement
+    select.addEventListener("duetChange", (e: CustomEvent<{value: number}>) => {
+      this.form.controls['agreement'].setValue(e.detail.value)
+    })
+    input.addEventListener("duetChange", (e: CustomEvent<{value: string}>) => {
+      this.form.controls['additionalInvestment'].setValue(Number(e.detail.value))
+    })
+  }
+
+  get selectedAgreement() {
+    return this.agreements[this.form.value.agreement]
+  }
+
+  get agreementOptions() {
+    return Object.entries(this.agreements).map(([value, { label, price }]) => {
+      return {
+        value,
+        label: `${label} - ${this.formatter.format(price)}`
+      }
+    })
+  }
+}

package/templates/angular/17.0.0/src/app/investment-origin/investment-origin.component.html

@@ -0,0 +1,12 @@
+<ng-container [formGroup]="form">
+  <duet-checkbox label="Valinta 1"></duet-checkbox>
+  <duet-checkbox label="Valinta 2"></duet-checkbox>
+  <duet-checkbox label="Valinta 3"></duet-checkbox>
+  <duet-checkbox label="Valinta 4"></duet-checkbox>
+  <duet-checkbox label="Valinta 5"></duet-checkbox>
+  <duet-checkbox label="Valinta 6"></duet-checkbox>
+  <duet-checkbox label="Muu, mikä?" (duetChange)="handleExtrasChange($event)"></duet-checkbox>
+  <div *ngIf="hasExtras">
+    <duet-input label="Kerro sijoitettavien varojen muu alkuperä" label-hidden (duetChange)="handleExtrasValueChange($event)"></duet-input>
+  </div>
+</ng-container>

package/templates/angular/17.0.0/src/app/investment-origin/investment-origin.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit, Input, ElementRef } from "@angular/core"
+import { FormGroup } from "@angular/forms"
+
+@Component({
+  selector: "app-investment-origin",
+  templateUrl: "./investment-origin.component.html",
+  styleUrls: ["./investment-origin.component.scss"]
+})
+export class InvestmentOriginComponent implements OnInit {
+  @Input() form: FormGroup
+  hasExtras = false
+  extrasValue = ""
+
+  constructor(private myElement: ElementRef) {}
+
+  ngOnInit(): void {
+    const element = this.myElement.nativeElement as Element
+    function listenCheckboxEvents(form: FormGroup, selector: string, control: string) {
+      const checkbox = element.querySelector(`duet-checkbox[label='${selector}']`) as HTMLDuetSelectElement
+      checkbox.addEventListener("duetChange", (e: CustomEvent<{checked: boolean}>) => {
+        form.controls[control].setValue(e.detail.checked)
+      })
+    }
+    listenCheckboxEvents(this.form, 'Valinta 1', 'salary')
+    listenCheckboxEvents(this.form, 'Valinta 2', 'gift')
+    listenCheckboxEvents(this.form, 'Valinta 3', 'heritage')
+    listenCheckboxEvents(this.form, 'Valinta 4', 'entrepreneurialIncome')
+    listenCheckboxEvents(this.form, 'Valinta 5', 'assets')
+    listenCheckboxEvents(this.form, 'Valinta 6', 'otherIncome')
+  }
+
+  handleExtrasChange(event: CustomEvent) {
+    this.hasExtras = event.detail.checked
+
+    if (!event.detail.checked) {
+      this.form.get("extras").setValue(null)
+    }
+  }
+
+  handleExtrasValueChange(event: CustomEvent) {
+    this.extrasValue = event.detail.value
+    this.form.get("extras").setValue(this.extrasValue)
+  }
+}

package/templates/angular/17.0.0/src/app/summary/summary.component.html

@@ -0,0 +1,74 @@
+<ng-container *ngIf="agreement">
+  <duet-input expand disabled label="Sopimus" [value]="agreement.label"></duet-input>
+  <duet-spacer></duet-spacer>
+  <duet-paragraph>Valitsemasi vaihtoehto jakautuu seuraavasti:</duet-paragraph>
+  <duet-table variation="plain">
+    <table>
+      <thead>
+        <tr>
+          <th>Sijoituskohde</th>
+          <th>Osuus</th>
+          <th class="duet-text-right">Summa</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <duet-button
+              variation="plain"
+              margin="none"
+              padding="none"
+              url="https://www.duetds.com/assets/downloads/localtapiola-brand-guidelines.pdf"
+              external
+            >
+              Kohde 1<duet-spacer size="xx-small" direction="horizontal"></duet-spacer>
+              <duet-visually-hidden>, avautuu uuteen ikkunaan</duet-visually-hidden>
+            </duet-button>
+          </td>
+          <td>25%</td>
+          <td class="duet-text-right">{{ formatter.format(agreement.price * 0.25) }}</td>
+        </tr>
+        <tr>
+          <td>
+            <duet-button
+              variation="plain"
+              margin="none"
+              padding="none"
+              url="https://www.duetds.com/assets/downloads/localtapiola-brand-guidelines.pdf"
+              external
+            >
+              Kohde 2<duet-spacer size="xx-small" direction="horizontal"></duet-spacer>
+              <duet-visually-hidden>, avautuu uuteen ikkunaan</duet-visually-hidden>
+            </duet-button>
+          </td>
+          <td>25%</td>
+          <td class="duet-text-right">{{ formatter.format(agreement.price * 0.25) }}</td>
+        </tr>
+        <tr>
+          <td>
+            <duet-button
+              variation="plain"
+              margin="none"
+              padding="none"
+              url="https://www.duetds.com/assets/downloads/localtapiola-brand-guidelines.pdf"
+              external
+            >
+              Kohde 3<duet-spacer size="xx-small" direction="horizontal"></duet-spacer>
+              <duet-visually-hidden>, avautuu uuteen ikkunaan</duet-visually-hidden>
+            </duet-button>
+          </td>
+          <td>50%</td>
+          <td class="duet-text-right">{{ formatter.format(agreement.price * 0.5) }}</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <td colspan="2" class="duet-font-weight-semi-bold">Sijoitettava summa</td>
+          <td class="duet-text-right duet-font-weight-semi-bold duet-font-size-large">
+            {{ formatter.format(agreement.price) }}
+          </td>
+        </tr>
+      </tfoot>
+    </table>
+  </duet-table>
+</ng-container>

package/templates/angular/17.0.0/src/app/summary/summary.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, Input } from "@angular/core"
+import { Agreement } from "../agreement.model"
+import { CurrencyFormatterService } from "../currency-formatter.service"
+
+@Component({
+  selector: "app-summary",
+  templateUrl: "./summary.component.html",
+  styleUrls: ["./summary.component.scss"]
+})
+export class SummaryComponent implements OnInit {
+  @Input() agreement: Agreement
+
+  constructor(public formatter: CurrencyFormatterService) {}
+
+  ngOnInit(): void {}
+}

package/templates/angular/17.0.0/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+}

package/templates/angular/17.0.0/src/environments/environment.ts

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+}
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

package/templates/angular/17.0.0/src/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="fi" class="duet-sticky-footer duet-bg-gradient">
+  <head>
+    <meta charset="utf-8" />
+    <base href="/" />
+    <title>LähiTapiola</title>
+    <meta name="author" content="LähiTapiola" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="robots" content="noindex,nofollow" />
+    <link rel="apple-touch-icon" href="assets/img/apple-touch-icon-180x180.png" />
+    <link rel="manifest" href="manifest.json" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.duetds.com/api/fonts/1.3.12/lib/localtapiola.css"
+      integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq"
+      crossorigin="anonymous"
+    />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root class="duet-sticky-body"></app-root>
+  </body>
+</html>

package/templates/angular/17.0.0/src/main.ts

@@ -0,0 +1,19 @@
+import { enableProdMode } from "@angular/core"
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
+import { applyPolyfills, defineCustomElements } from '@duetds/components/lib/loader'
+
+import { AppModule } from "./app/app.module"
+import { environment } from "./environments/environment"
+
+if (environment.production) {
+  enableProdMode()
+}
+
+// Register Duet’s custom elements
+applyPolyfills().then(() => {
+  defineCustomElements(window)
+})
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch(err => console.error(err))

package/templates/angular/17.0.0/src/manifest.json

@@ -0,0 +1,19 @@
+{
+  "icons": [
+    {
+      "src": "assets/img/apple-touch-icon-180x180.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/img/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/img/splash-screen-icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

package/templates/angular/17.0.0/src/polyfills.ts

@@ -0,0 +1,62 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import "zone.js" // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

package/templates/angular/17.0.0/src/styles.scss

@@ -0,0 +1,3 @@
+/* You can add global styles to this file, and also import other style files */
+@import "@duetds/css/lib/duet.min";
+@import "@duetds/tokens/lib/tokens.scss";

package/templates/angular/17.0.0/src/tests/app.test.ts

@@ -0,0 +1,13 @@
+import {currencyFormatFI} from "../utils/string.utils"
+
+describe('Example test of the jest setup running', () => {
+  test('formatter should format correctly', () => {
+    console.log(currencyFormatFI)
+    const formatStub = currencyFormatFI.format(12.90)
+    expect(formatStub).toBe("12,90 €")
+  });
+
+  test('Should do another thing', () => {
+    // do something...
+  });
+});

package/templates/angular/17.0.0/src/tests/playwright/playwright.test.ts

@@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test';
+
+ test.use({
+      viewport: { width: 1800, height: 2500 },
+      bypassCSP: true,
+      deviceScaleFactor: 1,
+    })
+
+
+test('angular test', async ({ page }, testInfo) => {
+  await page.waitForLoadState("networkidle") // This resolves after 'networkidle'
+  await page.waitForTimeout(1000 * testInfo.retry + 1)
+  await page.setViewportSize({ width: 1600, height: 1200 })
+
+
+  // initial loading
+  await page.goto("http://localhost:4200/");
+  await page.goto("http://localhost:4200/#/");
+  await page.locator('select');
+  expect(await page.screenshot()).toMatchSnapshot("angular_1.png", {maxDiffPixelRatio: 0.01});
+
+
+  // Select 2
+  await page.locator('select').selectOption('2');
+  await page.waitForLoadState("networkidle")
+  expect(await page.screenshot()).toMatchSnapshot("angular_2.png", {maxDiffPixelRatio: 0.01});
+
+
+  // Click input[type="number"]
+  await page.locator('input[type="number"]').click();
+  await page.locator('input[type="number"]').fill('500');
+  await page.locator('#step1').click();
+  await page.waitForLoadState("networkidle")
+  expect(await page.screenshot()).toMatchSnapshot("angular_3.png", {maxDiffPixelRatio: 0.01});
+
+
+  // summary loading
+  await page.locator('#step2').click();
+  await page.waitForLoadState("networkidle")
+  expect(await page.screenshot()).toMatchSnapshot("angular_4.png", {maxDiffPixelRatio: 0.01});
+
+
+  // summary displaying
+  await page.locator('#step3').click();
+  await page.waitForLoadState("networkidle") // This resolves after 'networkidle'
+  expect(await page.screenshot()).toMatchSnapshot("angular_5.png", {maxDiffPixelRatio: 0.01});
+
+
+
+  // Click code, store json
+  await page.locator('code').click();
+  expect(await page.textContent('code')).toMatchSnapshot('code.json');
+
+});

package/templates/angular/17.0.0/src/tests/playwright/playwright.test.ts-snapshots/code-chromium-darwin.json

@@ -0,0 +1,16 @@
+{
+  "investmentAmount": {
+    "agreement": "2",
+    "additionalInvestment": 500
+  },
+  "investmentOrigin": {
+    "salary": false,
+    "gift": false,
+    "heritage": false,
+    "entrepreneurialIncome": false,
+    "assets": false,
+    "otherIncome": false,
+    "investment": false,
+    "extras": null
+  }
+}

package/templates/angular/17.0.0/src/utils/string.utils.ts

@@ -0,0 +1 @@
+export const currencyFormatFI = new Intl.NumberFormat("fi-FI", { style: "currency", currency: "EUR" })

package/templates/angular/17.0.0/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
+}

package/templates/angular/17.0.0/tsconfig.base.json

@@ -0,0 +1,17 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "esModuleInterop":true,
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "es2020",
+    "lib": ["es2018", "dom"]
+  }
+}

package/templates/angular/17.0.0/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts", "src/**/*.ts"]
+}