Merge branch 'develop' into docs/create-authenticate-login-page-67514…

…5293

.vscode/snippets.code-snippets

@@ -0,0 +1,31 @@
+{
+	// Place your browser workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	// Example:
+
+	"Test arguments": {
+		"scope": "typescript",
+		"prefix": "dta",
+		"body": [
+			"if (!${2:element}) {",
+			"\tthrow new ArgumentError('Argument ${2:element} should be set.', ${2:element});",
+			"}"
+		],
+		"description": "Test if arguments are set, and throw error if not"
+	},
+
+	"Test arguments in Observable": {
+		"scope": "typescript",
+		"prefix": "dto",
+		"body": [
+			"if (!${2:element}) {",
+			"\treturn throwError(new ArgumentError('Argument ${2:element} should be set.', ${2:element}));",
+			"}"
+		],
+		"description": "Test if arguments are set, and throw error if not"
+	},
+}

packages/nde-erfgoed-components/jest.config.ts

@@ -5,7 +5,7 @@ const config: Config.InitialOptions = {
   testEnvironment: 'jest-environment-jsdom-sixteen',
   setupFiles: ['<rootDir>/tests/setup.ts'],
   testMatch: ['**/+(*.)+(spec).+(ts)'],
-  transformIgnorePatterns: ['node_modules/(?!(lit-element|lit-html)/)'],
+  transformIgnorePatterns: ['node_modules/(?!(lit-element|lit-html|rx-lit)/)'],
   moduleNameMapper: {
     '~(.*)': '<rootDir>/lib/$1',
   },

packages/nde-erfgoed-components/lib/collections/collection.component.spec.ts

@@ -1,4 +1,4 @@
-import CollectionComponent from './collection.component';
+import {CollectionComponent} from './collection.component';
 
 describe('CollectionComponent', () => {
   const component = new CollectionComponent();

packages/nde-erfgoed-components/lib/collections/collection.component.ts

@@ -1,11 +1,24 @@
-import { LitElement, css, html, property } from 'lit-element';
+import { css, html, property } from 'lit-element';
 import type { Component } from '@digita-ai/semcom-core';
-import { Collection } from '@digita-ai/nde-erfgoed-core';
+import { Collection, Logger, Translator } from '@digita-ai/nde-erfgoed-core';
+import { RxLitElement } from 'rx-lit';
 
 /**
  * A component which shows the details of a single collection.
  */
-export class CollectionComponent extends LitElement implements Component {
+export class CollectionComponent extends RxLitElement implements Component {
+
+  /**
+   * The component's logger.
+   */
+  @property({type: Logger})
+  public logger: Logger;
+
+  /**
+   * The component's translator.
+   */
+  @property({type: Translator})
+  public translator: Translator;
 
   /**
    * The collection which will be rendered by the component.
@@ -52,7 +65,6 @@ export class CollectionComponent extends LitElement implements Component {
     <link href="./dist/bundles/styles.css" rel="stylesheet">
     <div class="collection">
       <div>${this.collection ? this.collection.name : 'Unknown'}</div>
-      <!--<button>Save</button>-->
     </div>
   `;
   }

packages/nde-erfgoed-components/lib/collections/collections.component.ts

@@ -1,11 +1,24 @@
-import { LitElement, css, html, property } from 'lit-element';
+import { css, html, property } from 'lit-element';
 import type { Component } from '@digita-ai/semcom-core';
-import { Collection } from '@digita-ai/nde-erfgoed-core';
+import { Collection, Logger, Translator } from '@digita-ai/nde-erfgoed-core';
+import { RxLitElement } from 'rx-lit';
 
 /**
  * A component which shows an summary of multiple collections.
  */
-export class CollectionsComponent extends LitElement implements Component {
+export class CollectionsComponent extends RxLitElement implements Component {
+
+  /**
+   * The component's logger.
+   */
+  @property({type: Logger})
+  public logger: Logger;
+
+  /**
+   * The component's translator.
+   */
+  @property({type: Translator})
+  public translator: Translator;
 
   /**
    * The collections which will be summarized by the component.
@@ -51,7 +64,7 @@ export class CollectionsComponent extends LitElement implements Component {
     return html`
     <link href="./dist/bundles/styles.css" rel="stylesheet">
     <div class="collections">
-    ${this.collections.map((collection) => html`<nde-collection collection='${JSON.stringify(collection)}'></nde-collection>`)}
+    ${this.collections?.map((collection) => html`<nde-collection .collection='${collection}' .logger='${this.logger}' .translator='${this.translator}'></nde-collection>`)}
     </div>
   `;
   }

packages/nde-erfgoed-components/lib/demo.ts

@@ -1,5 +1,5 @@
-import CollectionComponent from './collections/collection.component';
-import CollectionsComponent from './collections/collections.component';
+import {CollectionComponent} from './collections/collection.component';
+import {CollectionsComponent} from './collections/collections.component';
 
 /**
  * Register tags for components.