@duetds/cli 2.6.13 → 2.7.0

package/templates/angular/12.2.16/src/app/index-page/index-page.component.html

@@ -0,0 +1,49 @@
+<duet-layout center>
+  <div slot="top" role="region">
+    <duet-spacer breakpoint="large" size="x-large"></duet-spacer>
+    <duet-heading level="h1" visual-level="h2">Pääotsikko</duet-heading>
+    <duet-spacer></duet-spacer>
+  </div>
+  <div slot="main">
+    <form [formGroup]="form" (ngSubmit)="handleSubmit($event)">
+      <duet-stepper [selected]="currentStep" (duetStepChange)="handleStepChange($event)">
+        <duet-step heading="Perustiedot" formGroupName="investmentAmount">
+          <duet-paragraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore etdolore
+            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
+          </duet-paragraph>
+          <app-investment-amount
+            [form]="form.get('investmentAmount')"
+            [agreements]="agreements"
+          ></app-investment-amount>
+          <duet-spacer></duet-spacer>
+          <duet-button margin="none" variation="primary" (click)="handleNextClick($event)" [disabled]="form.invalid"
+             id="step1">Seuraava</duet-button
+          >
+        </duet-step>
+
+        <duet-step heading="Tarkemmat tiedot" formGroupName="investmentOrigin">
+          <duet-paragraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore etdolore
+            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
+          </duet-paragraph>
+          <app-investment-origin [form]="form.get('investmentOrigin')"></app-investment-origin>
+          <duet-spacer></duet-spacer>
+          <duet-button margin="none" variation="primary" (click)="handleNextClick($event)" [disabled]="form.invalid" id="step2">
+            Seuraava
+          </duet-button>
+        </duet-step>
+
+        <duet-step heading="Yhteenveto">
+          <duet-spacer></duet-spacer>
+          <app-summary [agreement]="selectedAgreement"></app-summary>
+          <duet-spacer></duet-spacer>
+          <duet-button submit margin="none" variation="primary" expand [disabled]="form.invalid" id="step3"> Lähetä </duet-button>
+        </duet-step>
+      </duet-stepper>
+    </form>
+  </div>
+</duet-layout>
+<duet-modal [active]="completed" heading="You entered the following data:">
+  <pre><code>{{ form.value | json }}</code></pre>
+</duet-modal>

package/templates/angular/12.2.16/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]
+  }
+
+  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/12.2.16/src/app/investment-amount/investment-amount.component.html

@@ -0,0 +1,87 @@
+<ng-container [formGroup]="form">
+  <duet-select
+    formControlName="agreement"
+    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
+      formControlName="additionalInvestment"
+      numeric-keyboard
+      expand
+      label="Syötä summa"
+      placeholder="50"
+      icon="form-money"
+      type="number"
+    ></duet-input>
+  </duet-card>
+</ng-container>

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

@@ -0,0 +1,31 @@
+import { Component, OnInit, Input } 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) {}
+
+  ngOnInit(): void {}
+
+  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/12.2.16/src/app/investment-origin/investment-origin.component.html

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

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

@@ -0,0 +1,24 @@
+import { Component, OnInit, Input } 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
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  handleExtrasChange(event: CustomEvent) {
+    this.hasExtras = event.detail.checked
+
+    if (!event.detail.checked) {
+      this.form.get("extras").setValue(null)
+    }
+  }
+}

package/templates/angular/12.2.16/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/12.2.16/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/{src → 12.2.16/src}/environments/environment.prod.ts

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

package/templates/angular/{src → 12.2.16/src}/environments/environment.ts

@@ -3,7 +3,7 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
+  production: false
 }
 
 /*

package/templates/angular/{src → 12.2.16/src}/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="fi" class="duet-sticky-footer">
+<html lang="fi" class="duet-sticky-footer duet-bg-gradient">
   <head>
     <meta charset="utf-8" />
     <base href="/" />

package/templates/angular/12.2.16/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/12.2.16/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 13.2.4 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_13.2.4_1.png");
+
+
+  // Select 2
+  await page.locator('select').selectOption('2');
+  await page.waitForLoadState("networkidle")
+  expect(await page.screenshot()).toMatchSnapshot("angular_13.2.4_2.png");
+
+
+  // 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_13.2.4_3.png");
+
+
+  // summary loading
+  await page.locator('#step2').click();
+  await page.waitForLoadState("networkidle")
+  expect(await page.screenshot()).toMatchSnapshot("angular_13.2.4_4.png");
+
+
+  // summary displaying
+  await page.locator('#step3').click();
+  await page.waitForLoadState("networkidle") // This resolves after 'networkidle'
+  expect(await page.screenshot()).toMatchSnapshot("angular_13.2.4_5.png");
+
+
+
+  // Click code, store json
+  await page.locator('code').click();
+  expect(await page.textContent('code')).toMatchSnapshot('code.json');
+
+});

package/templates/angular/12.2.16/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/12.2.16/src/utils/string.utils.ts

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

package/templates/angular/{tsconfig.app.json → 12.2.16/tsconfig.app.json}

@@ -1,4 +1,3 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.base.json",
   "compilerOptions": {

package/templates/angular/{tsconfig.base.json → 12.2.16/tsconfig.base.json}

@@ -1,7 +1,7 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "esModuleInterop":true,
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,

package/templates/angular/12.2.16/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

package/templates/angular/12.2.16/tsconfig.spec.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": ["jest","jest-image-snapshot","node"],
+    "esModuleInterop": true,
+    "emitDecoratorMetadata": true 
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx"]
+}

package/templates/angular/13.2.4/.browserlistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+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

package/templates/angular/13.2.4/.depcheckrc

@@ -0,0 +1,2 @@
+ignores: ["eslint*", "@angular-eslint/*","ngx-toastr","@types/*","husky","prettier", " @typescript-eslint/*"]
+skip-missing: true

package/templates/angular/13.2.4/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/templates/angular/13.2.4/.eslintrc.json

@@ -0,0 +1,51 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/no-empty-lifecycle-method": "off"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}