@duetds/cli 4.0.51 → 4.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/cli",
-  "version": "4.0.51",
+  "version": "4.1.1",
   "description": "This package includes Duet Design System CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "LocalTapiola Services Ltd <duetdesignsystem@lahitapiola.fi>",
@@ -33,5 +33,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cb52b4d9fcf70d2289749fa3087b39ac1bb75df3"
+  "gitHead": "45d1ef810b411d30818cdfdd5ae84674f8027641"
 }

package/templates/angular/16.2.0/package.file

@@ -54,6 +54,6 @@
     "eslint-plugin-unused-imports": "2.0.0",
     "jest": "^29.5.0",
     "ts-node": "10.9.0",
-    "typescript": "^5.1.0"
+    "typescript": "5.1.3"
   }
 }

package/templates/angular/17.0.0/package.file

@@ -1,6 +1,6 @@
 {
   "name": "duet-angular-template",
-  "version": "16.2.0",
+  "version": "17.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng lint; npm run serve",
@@ -54,6 +54,6 @@
     "eslint-plugin-unused-imports": "3.0.0",
     "jest": "^29.5.0",
     "ts-node": "10.9.0",
-    "typescript": "^5.2.2"
+    "typescript": "5.2.2"
   }
 }

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

@@ -10,9 +10,18 @@ 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'
+import {
+  BooleanValueAccessorDirective, NumericValueAccessorDirective,
+  SelectValueAccessorDirective, TextValueAccessorDirective
+} from "./value-accessors"
 
 @NgModule({
-  declarations: [AppComponent, IndexPageComponent, HeaderComponent, FooterComponent, InvestmentAmountComponent, InvestmentOriginComponent, SummaryComponent],
+  declarations: [
+    AppComponent, IndexPageComponent, HeaderComponent, FooterComponent,
+    InvestmentAmountComponent, InvestmentOriginComponent, SummaryComponent,
+    BooleanValueAccessorDirective, NumericValueAccessorDirective,
+    SelectValueAccessorDirective, TextValueAccessorDirective,
+  ],
   imports: [BrowserModule, FormsModule, ReactiveFormsModule, AppRoutingModule],
   providers: [],
   bootstrap: [AppComponent],

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

@@ -1,5 +1,6 @@
 <ng-container [formGroup]="form">
   <duet-select
+    formControlName="agreement"
     expand
     label="Valitse sopimus"
     placeholder="Valitse…"
@@ -74,6 +75,7 @@
   <duet-spacer></duet-spacer>
   <duet-card variation="plain" background="gray-lighter">
     <duet-input
+      formControlName="additionalInvestment"
       numeric-keyboard
       expand
       label="Syötä summa"

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

@@ -12,19 +12,9 @@ export class InvestmentAmountComponent implements OnInit {
   @Input() agreements: Record<number, Agreement>
   @Input() form: FormGroup
 
-  constructor(public formatter: CurrencyFormatterService, private myElement: ElementRef) {}
+  constructor(public formatter: CurrencyFormatterService) {}
 
-  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))
-    })
-  }
+  ngOnInit(): void {}
 
   get selectedAgreement() {
     return this.agreements[this.form.value.agreement]

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

@@ -1,12 +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 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 label="Kerro sijoitettavien varojen muu alkuperä" label-hidden (duetChange)="handleExtrasValueChange($event)"></duet-input>
+    <duet-input formControlName="extras" label="Kerro sijoitettavien varojen muu alkuperä" label-hidden></duet-input>
   </div>
-</ng-container>
+</ng-container>

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

@@ -11,23 +11,9 @@ export class InvestmentOriginComponent implements OnInit {
   hasExtras = false
   extrasValue = ""
 
-  constructor(private myElement: ElementRef) {}
+  constructor() {}
 
-  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')
-  }
+  ngOnInit(): void {}
 
   handleExtrasChange(event: CustomEvent) {
     this.hasExtras = event.detail.checked
@@ -36,9 +22,4 @@ export class InvestmentOriginComponent implements OnInit {
       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/value-accessors.ts

@@ -0,0 +1,147 @@
+/* eslint-disable @angular-eslint/directive-selector, @angular-eslint/no-host-metadata-property */
+
+import { Directive, ElementRef, HostListener } from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+
+@Directive({})
+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)'
+  },
+  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)'
+  },
+  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)'
+  },
+  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)'
+  },
+  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)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: BooleanValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class BooleanValueAccessorDirective extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+  writeValue(value: any) {
+    this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
+  }
+}

package/templates/angular/{12.2.16 → 18.1.0}/.eslintrc.json

@@ -9,8 +9,9 @@
         "*.ts"
       ],
       "parserOptions": {
+        "parser": "@typescript-eslint/parser",
         "project": [
-          "tsconfig.json"
+          "./tsconfig.json"
         ],
         "createDefaultProgram": true
       },
@@ -48,4 +49,4 @@
       "rules": {}
     }
   ]
-}
+}

package/templates/angular/{12.2.16 → 18.1.0}/angular.json

@@ -2,6 +2,11 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
+  "cli": {
+    "cache": {
+      "enabled": false
+    }
+  },
   "projects": {
     "duet-angular-template": {
       "projectType": "application",
@@ -77,6 +82,14 @@
                   "maximumError": "10kb"
                 }
               ]
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
           }
         },
@@ -89,6 +102,9 @@
           "configurations": {
             "production": {
               "browserTarget": "duet-angular-template:build:production"
+            },
+            "development": {
+              "browserTarget": "duet-angular-template:build:development"
             }
           }
         },

package/templates/angular/18.1.0/package.file

@@ -0,0 +1,59 @@
+{
+  "name": "duet-angular-template",
+  "version": "18.1.0",
+  "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": "^18.1.0",
+    "@angular/common": "^18.1.0",
+    "@angular/compiler": "^18.1.0",
+    "@angular/core": "^18.1.0",
+    "@angular/forms": "^18.1.0",
+    "@angular/platform-browser": "^18.1.0",
+    "@angular/platform-browser-dynamic": "^18.1.0",
+    "@angular/router": "^18.1.0",
+    "@duetds/components": "latest",
+    "@duetds/css": "latest",
+    "@duetds/icons": "latest",
+    "@duetds/tokens": "latest",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.2"
+  },
+  "devDependencies": {
+    "@angular-builders/jest": "18.0.0",
+    "@angular-devkit/build-angular": "^18.1.0",
+    "@angular-eslint/builder": "^18.1.0",
+    "@angular-eslint/eslint-plugin": "^18.1.0",
+    "@angular-eslint/eslint-plugin-template": "^18.1.0",
+    "@angular-eslint/schematics": "^18.1.0",
+    "@angular-eslint/template-parser": "^18.1.0",
+    "@angular/cli": "^18.1.0",
+    "@angular/compiler-cli": "^18.1.0",
+    "@playwright/test": "1.25.0",
+    "@types/jest": "^29.5.0",
+    "@types/node": "18.11.9",
+    "@typescript-eslint/eslint-plugin": "6.13.2",
+    "@typescript-eslint/parser": "6.13.2",
+    "angular-eslint": "0.0.1-alpha.0",
+    "codelyzer": "6.0.2",
+    "eslint": "8.57.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": "3.0.0",
+    "jest": "^29.5.0",
+    "ts-node": "10.9.0",
+    "typescript": "5.5.4"
+  }
+}

package/templates/angular/{12.2.16 → 18.1.0}/src/app/app.component.html

@@ -2,4 +2,4 @@
 <div class="duet-sticky-content">
   <router-outlet></router-outlet>
 </div>
-<app-footer></app-footer>
+<app-footer></app-footer>

package/templates/angular/{12.2.16 → 18.1.0}/src/app/app.module.ts

@@ -1,6 +1,5 @@
 import { BrowserModule } from "@angular/platform-browser"
-import { NgModule } from "@angular/core"
-import { DuetComponents } from "@duetds/angular"
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core"
 
 import { AppRoutingModule } from "./app-routing.module"
 import { AppComponent } from "./app.component"
@@ -11,11 +10,21 @@ 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'
+import {
+  BooleanValueAccessorDirective, NumericValueAccessorDirective,
+  SelectValueAccessorDirective, TextValueAccessorDirective
+} from "./value-accessors"
 
 @NgModule({
-  declarations: [AppComponent, IndexPageComponent, HeaderComponent, FooterComponent, InvestmentAmountComponent, InvestmentOriginComponent, SummaryComponent],
-  imports: [BrowserModule, FormsModule, ReactiveFormsModule, DuetComponents, AppRoutingModule],
+  declarations: [
+    AppComponent, IndexPageComponent, HeaderComponent, FooterComponent,
+    InvestmentAmountComponent, InvestmentOriginComponent, SummaryComponent,
+    BooleanValueAccessorDirective, NumericValueAccessorDirective,
+    SelectValueAccessorDirective, TextValueAccessorDirective,
+  ],
+  imports: [BrowserModule, FormsModule, ReactiveFormsModule, AppRoutingModule],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class AppModule {}

package/templates/angular/{12.2.16 → 18.1.0}/src/app/index-page/index-page.component.ts

@@ -38,7 +38,7 @@ export class IndexPageComponent {
   }
 
   get selectedAgreement() {
-    return this.agreements[this.form.value.investmentAmount.agreement]
+    return this.agreements[this.form.value.investmentAmount.agreement ?? 1]
   }
 
   formatNumber(value: number) {

package/templates/angular/{12.2.16 → 18.1.0}/src/app/investment-amount/investment-amount.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from "@angular/core"
+import { Component, OnInit, Input, ElementRef } from "@angular/core"
 import { FormGroup } from "@angular/forms"
 import { Agreement } from "../agreement.model"
 import { CurrencyFormatterService } from "../currency-formatter.service"

package/templates/angular/{12.2.16 → 18.1.0}/src/app/investment-origin/investment-origin.component.html

@@ -9,4 +9,4 @@
   <div *ngIf="hasExtras">
     <duet-input formControlName="extras" label="Kerro sijoitettavien varojen muu alkuperä" label-hidden></duet-input>
   </div>
-</ng-container>
+</ng-container>

package/templates/angular/{12.2.16 → 18.1.0}/src/app/investment-origin/investment-origin.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from "@angular/core"
+import { Component, OnInit, Input, ElementRef } from "@angular/core"
 import { FormGroup } from "@angular/forms"
 
 @Component({
@@ -9,6 +9,7 @@ import { FormGroup } from "@angular/forms"
 export class InvestmentOriginComponent implements OnInit {
   @Input() form: FormGroup
   hasExtras = false
+  extrasValue = ""
 
   constructor() {}
 

package/templates/angular/18.1.0/src/app/value-accessors.ts

@@ -0,0 +1,147 @@
+/* eslint-disable @angular-eslint/directive-selector, @angular-eslint/no-host-metadata-property */
+
+import { Directive, ElementRef, HostListener } from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+
+@Directive({})
+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)'
+  },
+  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)'
+  },
+  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)'
+  },
+  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)'
+  },
+  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)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: BooleanValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class BooleanValueAccessorDirective extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+  writeValue(value: any) {
+    this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
+  }
+}