fix: fix plural translation

apps/sample/src/app/app.component.html

@@ -2,8 +2,8 @@
 <div i18n="@@translate-content.simple-dom-element-content">Translate content of DOM element</div>
 <div i18n="Provide the meaning or intent of the text within the specific context@@translate-content.dom-element-content-with-meaning">Translate content of DOM element with description</div>
 <div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.dom-element-content-with-meaning-and-description">Translate content of DOM element with meaning and description</div>
-<div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.with-interpolation">Some string with the texte "{{ text }}" interpolated without spaces</div>
-<div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.with-interpolation-and-spaces">Some string with the texte " {{ text }} " interpolated with spaces</div>
+<div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.with-interpolation">Some string with the text "{{ text }}" interpolated without spaces</div>
+<div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.with-interpolation-and-spaces">Some string with the text " {{ text }} " interpolated with spaces</div>
 <div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.with-interpolation-at-the-beginning">{{ text }} is interpolated at the beginning of the sentence</div>
 <div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.with-interpolation-at-the-end">An interpolated text at the end of the sentence is {{ text }}</div>
 <div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.with-twice-the-same-interpolation">The text {{ text }} and {{ text }} are the same</div>

apps/ui/src/app/modules/translations/components/file-list/file-list.component.ts

@@ -1,4 +1,10 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import {
+ Component,
+ Input,
+ OnChanges,
+ SimpleChange,
+ SimpleChanges,
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -25,8 +31,8 @@ export class FileListComponent implements OnChanges {
  );
  }
 
- public ngOnChanges(changes: SimpleChanges): void {
- if (!changes['filePaths']) {
+ public ngOnChanges(changes: { filePaths?: SimpleChange }): void {
+ if (!changes.filePaths) {
  return;
  }
 

apps/ui/src/app/modules/translations/components/translation-language/translation-language.component.ts

@@ -1,5 +1,12 @@
-import { Component, Input, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
+import {
+ Component,
+ EventEmitter,
+ Input,
+ OnChanges,
+ Output,
+ SimpleChange,
+} from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { IXliffFile } from '@vtabary/xliff2js';
 import { ElectronService } from '../../../shared/public-api';
 
@@ -17,22 +24,27 @@ export class TranslationLanguageComponent implements OnChanges {
 
  public group: UntypedFormGroup;
 
- constructor(formBuilder: UntypedFormBuilder, private electron: ElectronService) {
+ constructor(
+ formBuilder: UntypedFormBuilder,
+ private electron: ElectronService
+ ) {
  this.group = formBuilder.group({
  target: '',
  });
  }
 
- public ngOnChanges(changes: SimpleChanges) {
- if (!changes['file']) {
+ public ngOnChanges(changes: { file?: SimpleChange }) {
+ if (!changes.file) {
  return;
  }
 
  if (!this.file) {
  return this.group.controls['target'].setValue(null);
  }
 
- this.group.controls['target'].setValue(this.file.$['target-language'] || null);
+ this.group.controls['target'].setValue(
+ this.file.$['target-language'] || null
+ );
  }
 
  public goToRFC() {

apps/vscode-webview/src/styles.scss

@@ -9,6 +9,10 @@ app-translations,
  width: 100vw;
 }
 
+.sidenav {
+ height: 100vh;
+}
+
 .content-area,
 .sidenav {
  overflow-y: auto;

libs/shared-module/src/lib/components/modal/modal.component.ts

@@ -4,7 +4,7 @@ import {
  Input,
  OnChanges,
  Output,
- SimpleChanges,
+ SimpleChange,
 } from '@angular/core';
 
 @Component({
@@ -25,16 +25,21 @@ export class ModalComponent implements OnChanges {
  public buttonLabel = 'Confirm';
 
  @Output()
- public close = new EventEmitter<boolean>();
+ public closeModal = new EventEmitter<boolean>();
 
- public ngOnChanges(changes: SimpleChanges) {
- if (changes['isOpen'] && changes['isOpen'].currentValue) {
- this.isOpen = changes['isOpen'].currentValue;
+ public ngOnChanges(changes: {
+ isOpen?: SimpleChange;
+ title?: SimpleChange;
+ message?: SimpleChange;
+ buttonLabel?: SimpleChange;
+ }) {
+ if (changes.isOpen?.currentValue) {
+ this.isOpen = changes.isOpen.currentValue;
  }
  }
 
  public onClose(value: boolean): void {
- this.close.emit(value);
+ this.closeModal.emit(value);
  this.isOpen = false;
  }
 }

libs/shared-module/src/lib/components/translation-navigation/translation-navigation.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
 import { IXliffTransUnit } from '@vtabary/xliff2js';
 import {
  ITreeNode,
@@ -26,22 +26,29 @@ export class TranslationNavigationComponent implements OnChanges {
 
  constructor(private treeBuilder: TreeBuilderService) {}
 
- public ngOnChanges(changes: SimpleChanges): void {
- if (changes['toTranslate']) {
+ /**
+ * @internal
+ */
+ public ngOnChanges(changes: {
+ toTranslate: SimpleChange;
+ translated: SimpleChange;
+ duplicated: SimpleChange;
+ }): void {
+ if (changes.toTranslate) {
  this.toTranslateTree = this.treeBuilder.build(
  this.toTranslate.map((item) => item.$.id),
  '.'
  );
  }
 
- if (changes['translated']) {
+ if (changes.translated) {
  this.translatedTree = this.treeBuilder.build(
  this.translated.map((item) => item.$.id),
  '.'
  );
  }
 
- if (changes['duplicated']) {
+ if (changes.duplicated) {
  this.duplicatedTree = this.treeBuilder.build(
  this.duplicated.map((item) => item.$.id),
  '.'

libs/shared-module/src/lib/components/translation-plural/translation-plural.component.html

@@ -1,6 +1,6 @@
 <div class="plural-container">
  <div class="plural" *ngFor="let key of pluralCountersKey">
- <p>{{ key }}</p>
+ <label>{{ key }}</label>
  <div class="plural-item" *ngIf="source?.counters?.[key] as pluralCounter">
  <translatol-translation-plural-item
  *ngFor="let item of pluralCounter; let i = index"

libs/shared-module/src/lib/components/translation-plural/translation-plural.component.scss

@@ -4,15 +4,20 @@
 }
 
 .plural {
- display: flex;
- flex-direction: row;
+ line-height: 1.1;
  margin-top: 5px;
  padding-bottom: 15px;
  border-bottom-width: var(--clr-card-border-width, 0.05rem);
  border-bottom-style: solid;
  border-bottom-color: var(--clr-card-border-color, hsl(198, 0%, 87%));
 
- p {
+ display: grid;
+ grid-template-columns: repeat(2, 30px 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ grid-column-gap: 30px;
+ grid-row-gap: 6px;
+
+ label {
  margin-top: 0;
  min-width: 50px;
  }

libs/shared-module/src/lib/components/translation-plural/translation-plural.component.ts

@@ -1,4 +1,10 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import {
+ Component,
+ Input,
+ OnChanges,
+ SimpleChange,
+ SimpleChanges,
+} from '@angular/core';
 import { IXliffInterpolation, IXliffPlural } from '@vtabary/xliff2js';
 
 @Component({
@@ -24,8 +30,11 @@ export class TranslationPluralComponent implements OnChanges {
  /**
  * @internal
  */
- public ngOnChanges(changes: SimpleChanges) {
- if (changes['plural']) {
+ public ngOnChanges(changes: {
+ source?: SimpleChange;
+ target?: SimpleChange;
+ }) {
+ if (changes.source) {
  this.pluralCountersKey = Object.keys(this.source?.counters ?? {});
  }
  }

libs/shared-module/src/lib/components/translation/translation.component.ts

@@ -4,7 +4,7 @@ import {
  Input,
  OnChanges,
  Output,
- SimpleChanges,
+ SimpleChange,
 } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import {
@@ -64,8 +64,12 @@ export class TranslationComponent implements OnChanges {
  /**
  * @internal
  */
- public ngOnChanges(changes: SimpleChanges): void {
- if (!changes['translation']) {
+ public ngOnChanges(changes: {
+ translation: SimpleChange;
+ sourceLanguage: SimpleChange;
+ targetLanguage: SimpleChange;
+ }): void {
+ if (!changes.translation) {
  return;
  }
 

libs/shared-module/src/lib/components/translations/translations.component.html

@@ -70,5 +70,5 @@ <h2 [title]="resolvedXliff?.file?.path">{{
  i18n-buttonLabel="@@translations.modal-button"
  buttonLabel="Delete"
  [isOpen]="openModalDeleteObsolete"
- (close)="deleteObsoleteKey($event)"
+ (closeModal)="deleteObsoleteKey($event)"
 ></translatol-modal>

package.json

@@ -99,7 +99,7 @@
  "@electron/remote": "^2.0.9",
  "@nrwl/angular": "^16.0.1",
  "@vscode/webview-ui-toolkit": "^1.2.2",
- "@vtabary/xliff2js": "~0.5.2",
+ "@vtabary/xliff2js": "~0.6.0",
  "axios": "^1.0.0",
  "lodash": "^4.17.21",
  "rxjs": "~7.8.0",

yarn.lock

@@ -3428,10 +3428,10 @@
  "@microsoft/fast-foundation" "^2.38.0"
  "@microsoft/fast-react-wrapper" "^0.1.18"
 
-"@vtabary/xliff2js@~0.5.2":
- version "0.5.2"
- resolved "https://artefacts.si.perfect-memory.com/repository/npm-all/@vtabary/xliff2js/-/xliff2js-0.5.2.tgz#f436cc06fa4b2fdfdba942d598a0a8fc30ed538d"
- integrity sha512-Lca9Wp0BKUSpJaw+PJmPKJvfAv75aH3LclrfA5RpCsx/ymJVyVHWR2TT5h0Ub6QICvPRm8MQdEoQPXawgmECog==
+"@vtabary/xliff2js@~0.6.0":
+ version "0.6.0"
+ resolved "https://artefacts.si.perfect-memory.com/repository/npm-all/@vtabary/xliff2js/-/xliff2js-0.6.0.tgz#337146387fe3d22e82ddc3afb5f8ee02bce9bfdd"
+ integrity sha512-nWDZLt/Mo0yJAywCQjxC1V1IMjnzd5nXZ39UA+tzuyM9A+0voGuI/O5j8suJEokvLFt4oU84cLqt52ff+XUS6g==
  dependencies:
  "@formatjs/icu-messageformat-parser" "^2.3.1"
  fast-xml-parser "^4.2.2"