@duetds/cli 3.0.18 → 3.0.19

package/templates/angular/15.0.4/angular.json

@@ -0,0 +1,133 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "duet-angular-template": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss",
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:module": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/duet-angular-template",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
+            "assets": ["src/favicon.ico", "src/assets", "src/manifest.json"],
+            "styles": ["src/styles.scss"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "duet-angular-template:build",
+            "port": 4200
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "duet-angular-template:build:production"
+            },
+            "development": {
+              "browserTarget": "duet-angular-template:build:development"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "duet-angular-template:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
+        },
+        "test": {
+          "builder": "@angular-builders/jest:run",
+          "options": {
+            "tsConfig": "tsconfig.spec.json",
+            "configPath" : "config/jest.base.ts",
+            "globalMocks": ["getComputedStyle", "doctype", "styleTransform", "matchMedia"]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "duet-angular-template"
+}

package/templates/angular/15.0.4/config/jest.base.ts

@@ -0,0 +1,17 @@
+const { pathsToModuleNameMapper } = require('ts-jest');
+const { compilerOptions } = require('../tsconfig.spec.json');
+
+module.exports = {
+  preset: 'jest-preset-angular',
+  roots: ['<rootDir>/src/'],
+  setupFilesAfterEnv: ["<rootDir>/config/jest.setup.ts"],
+  collectCoverage: true,
+  coverageReporters: ['html'],
+  coverageDirectory: 'coverage/my-app',
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
+    prefix: '<rootDir>/'
+  }),
+   testPathIgnorePatterns : [
+      "<rootDir>/src/tests/playwright/" 
+    ]
+};

package/templates/angular/15.0.4/config/jest.setup.ts

@@ -0,0 +1,24 @@
+import 'jest-preset-angular/setup-jest';
+
+
+Object.defineProperty(window, 'CSS', {value: null});
+Object.defineProperty(window, 'getComputedStyle', {
+  value: () => {
+    return {
+      display: 'none',
+      appearance: ['-webkit-appearance']
+    };
+  }
+});
+
+Object.defineProperty(document, 'doctype', {
+  value: '<!DOCTYPE html>'
+});
+Object.defineProperty(document.body.style, 'transform', {
+  value: () => {
+    return {
+      enumerable: true,
+      configurable: true
+    };
+  }
+});

package/templates/angular/15.0.4/package.file

@@ -0,0 +1,59 @@
+{
+  "name": "duet-angular-template",
+  "version": "15.0.4",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng lint; npm run serve",
+    "serve": "ng serve --host=0.0.0.0 --poll 500 -c development",
+    "serve:daemon": "ng serve --host=0.0.0.0 --poll 500 &",
+    "build": "ng build",
+    "test": "ng test --watch=true",
+    "test:ci": "DEBUG=pw:webserver npx playwright test",
+    "lint": "ng lint"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "15.0.4",
+    "@angular/common": "15.0.4",
+    "@angular/compiler": "15.0.4",
+    "@angular/core": "15.0.4",
+    "@angular/forms": "15.0.4",
+    "@angular/platform-browser": "15.0.4",
+    "@angular/platform-browser-dynamic": "15.0.4",
+    "@angular/router": "15.0.4",
+    "@duetds/components": "latest",
+    "@duetds/css": "latest",
+    "@duetds/icons": "latest",
+    "@duetds/tokens": "latest",
+    "rxjs": "7.5.7",
+    "tslib": "2.4.1",
+    "zone.js": "0.12.0"
+  },
+  "devDependencies": {
+    "@angular-builders/jest": "15.0.0-beta.2",
+    "@angular-devkit/build-angular": "15.0.4",
+    "@angular-eslint/builder": "15.1.0",
+    "@angular-eslint/eslint-plugin": "15.1.0",
+    "@angular-eslint/eslint-plugin-template": "15.1.0",
+    "@angular-eslint/schematics": "15.1.0",
+    "@angular-eslint/template-parser": "15.1.0",
+    "@angular/cli": "15.0.4",
+    "@angular/compiler-cli": "15.0.4",
+    "@playwright/test": "1.28.0",
+    "@types/jest": "29.2.3",
+    "@types/node": "18.11.9",
+    "@typescript-eslint/eslint-plugin": "5.44.0",
+    "@typescript-eslint/parser": "5.44.0",
+    "angular-eslint": "0.0.1-alpha.0",
+    "codelyzer": "6.0.2",
+    "eslint": "8.28.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-prefer-arrow": "1.2.3",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-unused-imports": "2.0.0",
+    "jest": "29.3.1",
+    "ts-node": "10.9.0",
+    "typescript": "4.8.4"
+  }
+}

package/templates/angular/15.0.4/playwright.config.ts

@@ -0,0 +1,26 @@
+// playwright.config.ts
+import { PlaywrightTestConfig, devices } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir:"src/tests/playwright",
+  retries: process.env.CI ? 2 : 0,
+  use: {
+    trace: 'on-first-retry',
+    viewport: { width: 2080, height: 2020 },
+    ignoreHTTPSErrors: true,    
+    video: 'on-first-retry'
+  },
+  webServer: {
+    command: 'npx ng serve',
+    url:"http://localhost:4200/#/",
+    timeout: 120 * 1000,
+    reuseExistingServer: false
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    }
+  ],
+};
+export default config;

package/templates/angular/15.0.4/src/app/agreement.model.ts

@@ -0,0 +1,3 @@
+export class Agreement {
+  constructor(public readonly label: string, public readonly price: number) {}
+}

package/templates/angular/15.0.4/src/app/app-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from "@angular/core"
+import { Routes, RouterModule } from "@angular/router"
+import { IndexPageComponent } from "./index-page/index-page.component"
+
+const routes: Routes = [{ path: "", component: IndexPageComponent }]
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: "enabled", useHash: true })],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

package/templates/angular/15.0.4/src/app/app.component.html

@@ -0,0 +1,5 @@
+<app-header></app-header>
+<div class="duet-sticky-content">
+  <router-outlet></router-outlet>
+</div>
+<app-footer></app-footer>

package/templates/angular/15.0.4/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from "@angular/core"
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"]
+})
+export class AppComponent {
+  constructor() {}
+}

package/templates/angular/15.0.4/src/app/app.module.ts

@@ -0,0 +1,21 @@
+import { BrowserModule } from "@angular/platform-browser"
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core"
+
+import { AppRoutingModule } from "./app-routing.module"
+import { AppComponent } from "./app.component"
+import { FormsModule, ReactiveFormsModule } from "@angular/forms"
+import { IndexPageComponent } from "./index-page/index-page.component"
+import { HeaderComponent } from "./header/header.component"
+import { FooterComponent } from "./footer/footer.component"
+import { InvestmentAmountComponent } from './investment-amount/investment-amount.component';
+import { InvestmentOriginComponent } from './investment-origin/investment-origin.component';
+import { SummaryComponent } from './summary/summary.component'
+
+@NgModule({
+  declarations: [AppComponent, IndexPageComponent, HeaderComponent, FooterComponent, InvestmentAmountComponent, InvestmentOriginComponent, SummaryComponent],
+  imports: [BrowserModule, FormsModule, ReactiveFormsModule, AppRoutingModule],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule {}

package/templates/angular/15.0.4/src/app/currency-formatter.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from "@angular/core"
+import { currencyFormatFI } from "../utils/string.utils"
+
+@Injectable({
+  providedIn: "root"
+})
+export class CurrencyFormatterService {
+
+  format(value: number) {
+    return currencyFormatFI.format(value)
+  }
+}

package/templates/angular/15.0.4/src/app/footer/footer.component.html

@@ -0,0 +1,22 @@
+<duet-footer
+  variation="simple"
+  language="fi"
+  [menu]="[
+    {
+      label: 'Turvallisuus ja käyttöehdot',
+      href: '#',
+      external: 'true'
+    },
+    {
+      label: 'Evästeet',
+      href: '#',
+      external: 'true'
+    },
+    {
+      label: 'Henkilötietojen käsittely',
+      href: '#',
+      external: 'true'
+    }
+  ]"
+>
+</duet-footer>

package/templates/angular/15.0.4/src/app/footer/footer.component.ts

@@ -0,0 +1,10 @@
+import { Component } from "@angular/core"
+
+@Component({
+  selector: "app-footer",
+  templateUrl: "./footer.component.html",
+  styleUrls: ["./footer.component.scss"]
+})
+export class FooterComponent {
+  constructor() {}
+}

package/templates/angular/15.0.4/src/app/header/header.component.html

@@ -0,0 +1 @@
+<duet-header logo-href="" [back]="{ label: 'Takaisin', href: '/' }"></duet-header>

package/templates/angular/15.0.4/src/app/header/header.component.ts

@@ -0,0 +1,10 @@
+import { Component } from "@angular/core"
+
+@Component({
+  selector: "app-header",
+  templateUrl: "./header.component.html",
+  styleUrls: ["./header.component.scss"]
+})
+export class HeaderComponent {
+  constructor() {}
+}

package/templates/angular/15.0.4/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/15.0.4/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/15.0.4/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/15.0.4/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/15.0.4/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>