@duetds/cli 4.1.4 → 4.1.6

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

@@ -0,0 +1,74 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"
+import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms"
+import { Agreement } from "../agreement.model"
+
+import { currencyFormatFI } from "../../utils/string.utils"
+import { JsonPipe } from "@angular/common"
+import { InvestmentAmountComponent } from "../investment-amount/investment-amount.component"
+import { InvestmentOriginComponent } from "../investment-origin/investment-origin.component"
+import { SummaryComponent } from "../summary/summary.component"
+
+@Component({
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: "app-index-page",
+  templateUrl: "./index-page.component.html",
+  imports: [
+    JsonPipe,
+    ReactiveFormsModule,
+    InvestmentAmountComponent,
+    InvestmentOriginComponent,
+    SummaryComponent
+  ],
+  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/18.1.0-standalone/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/18.1.0-standalone/src/app/investment-amount/investment-amount.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit, Input, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"
+import { FormGroup, ReactiveFormsModule } from "@angular/forms"
+import { Agreement } from "../agreement.model"
+import { CurrencyFormatterService } from "../currency-formatter.service"
+import { NumericValueAccessorDirective, SelectValueAccessorDirective } from "../value-accessors"
+import { NgIf } from "@angular/common"
+
+@Component({
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: "app-investment-amount",
+  templateUrl: "./investment-amount.component.html",
+  imports: [
+    ReactiveFormsModule,
+    SelectValueAccessorDirective,
+    NumericValueAccessorDirective,
+    NgIf
+  ],
+  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/18.1.0-standalone/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/18.1.0-standalone/src/app/investment-origin/investment-origin.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"
+import { FormGroup, ReactiveFormsModule } from "@angular/forms"
+import { BooleanValueAccessorDirective, TextValueAccessorDirective } from "../value-accessors"
+import { NgIf } from "@angular/common"
+
+@Component({
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: "app-investment-origin",
+  templateUrl: "./investment-origin.component.html",
+  imports: [
+    ReactiveFormsModule,
+    BooleanValueAccessorDirective,
+    TextValueAccessorDirective,
+    NgIf
+  ],
+  styleUrls: ["./investment-origin.component.scss"]
+})
+export class InvestmentOriginComponent implements OnInit {
+  @Input() form: FormGroup
+  hasExtras = false
+  extrasValue = ""
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  handleExtrasChange(event: CustomEvent) {
+    this.hasExtras = event.detail.checked
+
+    if (!event.detail.checked) {
+      this.form.get("extras").setValue(null)
+    }
+  }
+}

package/templates/angular/18.1.0-standalone/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/18.1.0-standalone/src/app/summary/summary.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit, Input, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"
+import { Agreement } from "../agreement.model"
+import { CurrencyFormatterService } from "../currency-formatter.service"
+import { TextValueAccessorDirective } from "../value-accessors"
+import { NgIf } from "@angular/common"
+
+@Component({
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    TextValueAccessorDirective,
+    NgIf
+  ],
+  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/18.1.0-standalone/src/app/value-accessors.ts

@@ -0,0 +1,156 @@
+/* eslint-disable @angular-eslint/directive-selector, @angular-eslint/no-host-metadata-property */
+
+import { Directive, ElementRef, EventEmitter, HostListener, Input, Output } from "@angular/core"
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+
+@Directive({
+  standalone: true,
+})
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export class ValueAccessor implements ControlValueAccessor {
+  private onChange: (value: any) => void = () => {};
+  private onTouched: () => void = () => {};
+  protected lastValue: any;
+
+  constructor(protected el: ElementRef) {}
+
+  writeValue(value: any) {
+    this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
+  }
+
+  handleChangeEvent(value: any) {
+    if (value !== this.lastValue) {
+      this.lastValue = value;
+      this.onChange(value);
+    }
+  }
+
+  @HostListener('focusout')
+  _handleBlurEvent() {
+    this.onTouched();
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(disabled: boolean) {
+    this.el.nativeElement.disabled = disabled;
+  }
+}
+
+@Directive({
+  selector: "duet-input:not([type=number]), duet-textarea, duet-date-picker",
+  host: {
+    "(duetChange)": "handleChangeEvent($event.target.value)"
+  },
+  standalone: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TextValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class TextValueAccessorDirective extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: "duet-range-slider, duet-select, duet-radio-group, duet-choice-group",
+  host: {
+    "(duetChange)": "handleChangeEvent($event.target.value)"
+  },
+  standalone: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: SelectValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class SelectValueAccessorDirective extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'duet-radio, duet-choice[type=radio]',
+  host: {
+    '(duetSelect)': 'handleChangeEvent($event.target.checked)'
+  },
+  standalone: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: RadioValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class RadioValueAccessorDirective extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: "duet-input[type=number], duet-number-input",
+  host: {
+    "(duetChange)": "handleChangeEvent($event.target.value)"
+  },
+  standalone: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: NumericValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class NumericValueAccessorDirective extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+  registerOnChange(fn: (_: number | null) => void) {
+    super.registerOnChange(value => {
+      fn(value === '' ? null : parseFloat(value));
+    });
+  }
+}
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: "duet-checkbox, duet-toggle, duet-choice[type=checkbox]",
+  host: {
+    "(duetChange)": "handleChangeEvent($event.target.checked)"
+  },
+  standalone: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: BooleanValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class BooleanValueAccessorDirective extends ValueAccessor {
+  @Output() duetChange = new EventEmitter<CustomEvent<any>>()
+  constructor(el: ElementRef) {
+    super(el);
+  }
+  writeValue(value: any) {
+    this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
+  }
+}

package/templates/angular/18.1.0-standalone/src/environments/environment.prod.ts

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

package/templates/angular/18.1.0-standalone/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/18.1.0-standalone/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/18.1.0-standalone/src/main.ts

@@ -0,0 +1,35 @@
+import { enableProdMode, NgZone } from "@angular/core"
+import { applyPolyfills, defineCustomElements } from '@duetds/components/lib/loader'
+
+import { environment } from "./environments/environment"
+import { createApplication } from "@angular/platform-browser"
+import { AppComponent } from "./app/app.component"
+import { PreloadAllModules, provideRouter, withDebugTracing, withPreloading } from "@angular/router"
+import { routes } from "./app/app-routing.module"
+
+(async () => {
+
+  const app = await createApplication({
+    providers: [
+      provideRouter(routes,
+        withPreloading(PreloadAllModules),
+        withDebugTracing(),
+      ),
+    ],
+  });
+
+  if (environment.production) {
+    enableProdMode()
+  }
+
+// Register Duet’s custom elements
+  applyPolyfills().then(() => {
+    defineCustomElements(window)
+  })
+
+  app.injector.get(NgZone).run(() => {
+    app.bootstrap(AppComponent);
+  });
+
+})();
+

package/templates/angular/18.1.0-standalone/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"
+    }
+  ]
+}