${this.program}
+ This is your barcode
+
+ ${unsafeSVG(QR)}
+
+
+
+ ${this.hostingOrganization ? html`${unsafeSVG(Open)}
+ More information
` : ``}
+ Credentials
+ Your credentials
+
+ ${unsafeSVG(Image)}
+
+
+ ${this.credentials.map((credential) => html`
+
+
+
+ `)}
+
+ ${credential.type}
+
+
+ Download
+
+ Documents
+ These are your documents
+
+ ${unsafeSVG(Document)}
+
+
+ ${this.documents.map((document) => html`
+
+
+
+
+
+ `)}
+
+ ${unsafeSVG(Document)}
+
+
+
+ ${document.fileName}
+ ${unsafeSVG(Arrow)}
+ 
diff --git a/packages/semcom-components/lib/components/input.component.ts b/packages/semcom-components/lib/components/input.component.ts
index 2ea0ce27..92a75efc 100644
--- a/packages/semcom-components/lib/components/input.component.ts
+++ b/packages/semcom-components/lib/components/input.component.ts
@@ -1,4 +1,4 @@
-import { css, html, query, state } from 'lit-element';
+import { css, CSSResult, html, query, state, TemplateResult } from 'lit-element';
import { ComponentResponseEvent } from '@digita-ai/semcom-sdk';
import { Literal, NamedNode, Quad } from 'n3';
import { ComponentDataTypes } from '@digita-ai/semcom-core';
@@ -63,7 +63,7 @@ export class InputComponent extends BaseComponent {
}
- static get styles() {
+ static get styles(): CSSResult[] {
return [
css`
@@ -145,7 +145,7 @@ export class InputComponent extends BaseComponent {
/**
* Writes data when the user clicks the submit button.
*/
- handleClickSubmit() {
+ handleClickSubmit(): void {
if (!this.fileName) {
@@ -174,7 +174,7 @@ export class InputComponent extends BaseComponent {
}
- render() {
+ render(): TemplateResult {
return html`
diff --git a/packages/semcom-components/lib/components/payslip.component.ts b/packages/semcom-components/lib/components/payslip.component.ts
index 98eaf464..2c6f272c 100644
--- a/packages/semcom-components/lib/components/payslip.component.ts
+++ b/packages/semcom-components/lib/components/payslip.component.ts
@@ -1,6 +1,6 @@
/* eslint-disable no-console -- is a web component */
import { NamedNode, Store } from 'n3';
-import { css, html, property, PropertyValues } from 'lit-element';
+import { css, CSSResult, html, property, PropertyValues, TemplateResult } from 'lit-element';
import { ComponentResponseEvent } from '@digita-ai/semcom-sdk';
import { ComponentDataTypes } from '@digita-ai/semcom-core';
import { BaseComponent } from './base.component';
@@ -65,7 +65,7 @@ export class PayslipComponent extends BaseComponent {
}
- static get styles() {
+ static get styles(): CSSResult[] {
return [
css`
@@ -100,7 +100,7 @@ export class PayslipComponent extends BaseComponent {
}
- render() {
+ render(): TemplateResult{
return html`
diff --git a/packages/semcom-components/lib/components/profile-contact.component.ts b/packages/semcom-components/lib/components/profile-contact.component.ts
new file mode 100644
index 00000000..eeef8b65
--- /dev/null
+++ b/packages/semcom-components/lib/components/profile-contact.component.ts
@@ -0,0 +1,185 @@
+import { NamedNode, Store } from 'n3';
+import { css, CSSResult, html, property, PropertyValues, TemplateResult, unsafeCSS } from 'lit-element';
+import { ComponentResponseEvent } from '@digita-ai/semcom-sdk';
+import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
+import { Image, Theme } from '@digita-ai/dgt-theme';
+import { from, Observable, of } from 'rxjs';
+import { interpret, Interpreter } from 'xstate';
+import { map } from 'rxjs/operators';
+import { NotImplementedError } from '@digita-ai/dgt-utils';
+import { ComponentDataTypes } from '@digita-ai/semcom-core';
+import { FormCleanlinessStates, FormContext, formMachine, FormRootStates, FormSubmissionStates, FormValidationStates, FormValidatorResult } from '@digita-ai/dgt-components';
+import { BaseComponent } from './base.component';
+
+export interface ProfileContactComponentForm {
+ email: string;
+ phone: string;
+}
+
+export class ProfileContactComponent extends BaseComponent {
+
+ readonly foaf = 'http://xmlns.com/foaf/0.1/';
+ readonly n = 'http://www.w3.org/2006/vcard/ns#';
+
+ @property() formActor?: Interpreter>;
+ @property() canSave = false;
+
+ /**
+ * Is executed when a property value is updated.
+ *
+ * @param changed Map of changes properties.
+ */
+ update(changed: PropertyValues): void {
+
+ super.update(changed);
+
+ if (changed.has('entry') && this.entry) {
+
+ this.readData(this.entry, 'quads');
+
+ }
+
+ if(changed.has('formActor') && this.formActor){
+
+ this.subscribe('canSave', from(this.formActor as any).pipe(
+ map((state: any) => state.matches({
+ [FormSubmissionStates.NOT_SUBMITTED]:{
+ [FormRootStates.CLEANLINESS]: FormCleanlinessStates.DIRTY,
+ [FormRootStates.VALIDATION]: FormValidationStates.VALID,
+ },
+ })),
+ ));
+
+ }
+
+ }
+
+ /**
+ * Handles a response event. Can be used to update the component's properties based on the data in the response.
+ *
+ * @param event The response event to handle.
+ */
+ handleResponse(event: ComponentResponseEvent): void {
+
+ if (!event || !event.detail || !event.detail.data) {
+
+ throw new Error('Argument event || !event.detail || !event.detail.quads should be set.');
+
+ }
+
+ const store = new Store(event.detail.data);
+
+ const phones: string[] = [];
+ const emails: string[] = [];
+
+ store.getQuads(null, new NamedNode(`${this.n}hasTelephone`), null, null).map((tele) => {
+
+ if(tele.object?.value.startsWith('tel:')) {
+
+ phones.push(tele.object?.value.split(':')[1]);
+
+ } else {
+
+ phones.push(store.getQuads(new NamedNode(tele.object.value), new NamedNode(`${this.n}value`), null, null)[0]?.object.value.split(':')[1]);
+
+ }
+
+ });
+
+ store.getQuads(null, new NamedNode(`${this.n}hasEmail`), null, null).map((mail) => {
+
+ if(mail.object?.value.startsWith('mailto:')) {
+
+ emails.push(mail.object?.value.split(':')[1]);
+
+ } else {
+
+ emails.push(store.getQuads(new NamedNode(mail.object.value), new NamedNode(`${this.n}value`), null, null)[0]?.object.value.split(':')[1]);
+
+ }
+
+ });
+
+ this.formActor = interpret(formMachine(
+ /**
+ * Validates the form.
+ */
+ (formContext): Observable => of([
+ ...formContext?.data?.email ? [] : [ { field: 'email', message: 'Field is required' } as FormValidatorResult ],
+ ...formContext?.data?.phone ? [] : [ { field: 'phone', message: 'Field is required' } as FormValidatorResult ],
+ ]),
+ )
+ .withContext({
+ data: { phone: phones[0], email: emails[0] },
+ original: { phone: phones[0], email: emails[0] },
+ }) as any);
+
+ this.formActor?.start();
+
+ }
+
+ static get styles(): CSSResult[] {
+
+ return [
+ unsafeCSS(Theme),
+ css`
+ div[slot="content"] {
+ display: flex;
+ flex-direction: column;
+ }
+
+ div[slot="content"] > * {
+ margin-bottom: var(--gap-large);
+ }
+ `,
+ ];
+
+ }
+
+ private handleSave() {
+
+ throw new NotImplementedError();
+
+ // this.formActor.send(FormEvents.FORM_SUBMITTED);
+ // this.writeData(this.entry, [
+ // new Quad(new NamedNode(this.entry), new NamedNode(`${this.foaf}name`), new Literal(this.formActor.state.context.data.fullName)),
+ // new Quad(new NamedNode(this.entry), new NamedNode(`${this.foaf}nick`), new Literal(this.formActor.state.context.data.nick)),
+ // new Quad(new NamedNode(this.entry), new NamedNode(`${this.n}honorific-prefix`), new Literal(this.formActor.state.context.data.honorific)),
+ // new Quad(new NamedNode(this.entry), new NamedNode(`${this.n}hasPhoto`), new Literal(this.formActor.state.context.data.image)),
+ // ])
+
+ }
+
+ render(): TemplateResult {
+
+ return this.formActor ? html`
+
+
+
+ ` : html``;
+
+ }
+
+}
+
+export default ProfileContactComponent;
diff --git a/packages/semcom-components/lib/components/profile-name.component.ts b/packages/semcom-components/lib/components/profile-name.component.ts
new file mode 100644
index 00000000..112bbc2e
--- /dev/null
+++ b/packages/semcom-components/lib/components/profile-name.component.ts
@@ -0,0 +1,191 @@
+import { NamedNode, Store, DataFactory } from 'n3';
+import { css, CSSResult, html, property, PropertyValues, TemplateResult, unsafeCSS } from 'lit-element';
+import { ComponentResponseEvent } from '@digita-ai/semcom-sdk';
+import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
+import { Image, Theme } from '@digita-ai/dgt-theme';
+import { from, Observable, of } from 'rxjs';
+import { interpret, Interpreter } from 'xstate';
+import { map } from 'rxjs/operators';
+import { ComponentDataTypes } from '@digita-ai/semcom-core';
+import { FormCleanlinessStates, FormContext, formMachine, FormRootStates, FormSubmissionStates, FormValidationStates, FormValidatorResult, FormEvents } from '@digita-ai/dgt-components';
+import { BaseComponent } from './base.component';
+
+export interface ProfileNameComponentForm {
+ image: string;
+ fullName: string;
+ nick: string;
+ honorific: string;
+}
+
+export class ProfileNameComponent extends BaseComponent {
+
+ readonly foaf = 'http://xmlns.com/foaf/0.1/';
+ readonly n = 'http://www.w3.org/2006/vcard/ns#';
+
+ @property() image?: URL;
+ @property() formActor?: Interpreter>;
+ @property() canSave = false;
+
+ /**
+ * Is executed when a property value is updated.
+ *
+ * @param changed Map of changes properties.
+ */
+ update(changed: PropertyValues): void {
+
+ super.update(changed);
+
+ if (changed.has('entry') && this.entry) {
+
+ this.readData(this.entry, 'quads');
+
+ }
+
+ if(changed.has('formActor') && this.formActor){
+
+ this.subscribe('canSave', from(this.formActor as any).pipe(
+ map((state: any) => state.matches({
+ [FormSubmissionStates.NOT_SUBMITTED]:{
+ [FormRootStates.CLEANLINESS]: FormCleanlinessStates.DIRTY,
+ [FormRootStates.VALIDATION]: FormValidationStates.VALID,
+ },
+ })),
+ ));
+
+ }
+
+ }
+
+ /**
+ * Handles a response event. Can be used to update the component's properties based on the data in the response.
+ *
+ * @param event The response event to handle.
+ */
+ handleResponse(event: ComponentResponseEvent): void {
+
+ if (!event || !event.detail || !event.detail.data) {
+
+ throw new Error('Argument event || !event.detail || !event.detail.quads should be set.');
+
+ }
+
+ const store = new Store(event.detail.data);
+
+ const fullName = store.getQuads(null, new NamedNode(`${this.foaf}name`), null, null)[0]?.object.value;
+ const nick = store.getQuads(null, new NamedNode(`${this.foaf}nick`), null, null)[0]?.object.value;
+ const honorific = store.getQuads(null, new NamedNode(`${this.n}honorific-prefix`), null, null)[0]?.object.value;
+ const image = store.getQuads(null, new NamedNode(`${this.n}hasPhoto`), null, null)[0]?.object.value;
+
+ this.image = undefined;
+
+ try {
+
+ this.image = new URL(image);
+
+ } catch {
+ // Do nothing
+ }
+
+ this.formActor = interpret(formMachine(
+ /**
+ * Validates the form.
+ */
+ (formContext): Observable => of([
+ ...formContext?.data?.fullName ? [] : [ { field: 'fullName', message: 'Field is required' } as FormValidatorResult ],
+ ...formContext?.data?.image ? [] : [ { field: 'image', message: 'Field is required' } as FormValidatorResult ],
+ ...formContext?.data?.nick ? [] : [ { field: 'nick', message: 'Field is required' } as FormValidatorResult ],
+ ...formContext?.data?.honorific ? [] : [ { field: 'honorific', message: 'Field is required' } as FormValidatorResult ],
+ ]),
+ )
+ .withContext({
+ data: { image, fullName, nick, honorific },
+ original: { image, fullName, nick, honorific },
+ })as any);
+
+ this.formActor?.start();
+
+ }
+
+ static get styles(): CSSResult[] {
+
+ return [
+ unsafeCSS(Theme),
+ css`
+ div[slot="content"] {
+ display: flex;
+ flex-direction: column;
+ }
+
+ div[slot="content"] > * {
+ margin-bottom: var(--gap-large);
+ }
+ `,
+ ];
+
+ }
+
+ private handleSave() {
+
+ this.formActor?.send(FormEvents.FORM_SUBMITTED);
+
+ const { namedNode, literal, quad } = DataFactory;
+
+ if(this.entry && this.formActor?.state.context.data) {
+
+ this.writeData(this.entry, [
+ quad(namedNode(this.entry), namedNode(`${this.foaf}name`), literal(this.formActor.state.context.data.fullName)),
+ quad(namedNode(this.entry), namedNode(`${this.foaf}nick`), literal(this.formActor.state.context.data.nick)),
+ quad(namedNode(this.entry), namedNode(`${this.n}honorific-prefix`), literal(this.formActor.state.context.data.honorific)),
+ quad(namedNode(this.entry), namedNode(`${this.n}hasPhoto`), namedNode(this.formActor.state.context.data.image)),
+ ], 'quads');
+
+ }
+
+ }
+
+ render(): TemplateResult {
+
+ return this.formActor ? html`
+
+
+ })
` : ''}
+
+ ` : html``;
+
+ }
+
+}
+
+export default ProfileNameComponent;
diff --git a/packages/semcom-components/lib/components/profile-payslip.component.ts b/packages/semcom-components/lib/components/profile-payslip.component.ts
new file mode 100644
index 00000000..03cc0577
--- /dev/null
+++ b/packages/semcom-components/lib/components/profile-payslip.component.ts
@@ -0,0 +1,143 @@
+import { NamedNode, Store } from 'n3';
+import { css, CSSResult, html, property, PropertyValues, TemplateResult, unsafeCSS } from 'lit-element';
+import { ComponentResponseEvent } from '@digita-ai/semcom-sdk';
+import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
+import { Image, Theme } from '@digita-ai/dgt-theme';
+import { ComponentDataTypes } from '@digita-ai/semcom-core';
+import { BaseComponent } from './base.component';
+
+export interface ProfilePayslip {
+ employer: string;
+ amount: string;
+ from: string;
+}
+
+export class ProfilePayslipComponent extends BaseComponent {
+
+ readonly foaf = 'http://xmlns.com/foaf/0.1/';
+ readonly n = 'http://www.w3.org/2006/vcard/ns#';
+ readonly pay = 'http://digita.ai/voc/payslip#';
+
+ @property() payslips?: ProfilePayslip[] = [];
+ @property() canSave = false;
+
+ /**
+ * Is executed when a property value is updated.
+ *
+ * @param changed Map of changes properties.
+ */
+ update(changed: PropertyValues): void {
+
+ super.update(changed);
+
+ if (changed.has('entry') && this.entry) {
+
+ this.readData(this.entry, 'quads');
+
+ }
+
+ }
+
+ /**
+ * Handles a response event. Can be used to update the component's properties based on the data in the response.
+ *
+ * @param event The response event to handle.
+ */
+ handleResponse(event: ComponentResponseEvent): void {
+
+ if (!event || !event.detail || !event.detail.data) {
+
+ throw new Error('Argument event || !event.detail || !event.detail.quads should be set.');
+
+ }
+
+ const store = new Store(event.detail.data);
+ const tempPayslips: ProfilePayslip[] = [];
+
+ store.getQuads(null, null, new NamedNode(`${this.pay}payslip`), null).map((payslip) => {
+
+ const employer = store.getQuads(new NamedNode(payslip.subject.value), new NamedNode(`${this.pay}employer`), null, null)[0]?.object.value;
+ const amount = store.getQuads(new NamedNode(payslip.subject.value), new NamedNode(`${this.pay}netAmount`), null, null)[0]?.object.value;
+ const from = store.getQuads(new NamedNode(payslip.subject.value), new NamedNode(`${this.pay}from`), null, null)[0]?.object.value;
+
+ const date = new Date(+from * 1000);
+
+ tempPayslips.push({
+ employer,
+ amount,
+ from: `${date.getDay()}/${date.getMonth()}/${date.getFullYear()}`,
+ });
+
+ });
+
+ this.payslips = tempPayslips;
+
+ }
+
+ static get styles(): CSSResult[] {
+
+ return [
+ unsafeCSS(Theme),
+ css`
+ div[slot="content"] {
+ display: flex;
+ flex-direction: column;
+ }
+
+ div[slot="content"] > * {
+ margin-bottom: var(--gap-small);
+ }
+
+ .payslip {
+ display: flex;
+ flex-direction: row;
+ background-color: #eee;
+ padding: 10px;
+ }
+
+ .payslip .employer {
+ margin-left: 20px;
+ margin-right: 0px;
+ flex: 1 1;
+ }
+ .payslip .amount {
+ font-weight: bold;
+ }
+ `,
+ ];
+
+ }
+
+ render(): TemplateResult {
+
+ return this.payslips && this.payslips.length > 0 ? html`
+
+
+
+ ` : html``;
+
+ }
+
+}
+
+export default ProfilePayslipComponent;
diff --git a/packages/semcom-components/lib/components/profile.component.ts b/packages/semcom-components/lib/components/profile.component.ts
index 70c941c4..6b8f03dc 100644
--- a/packages/semcom-components/lib/components/profile.component.ts
+++ b/packages/semcom-components/lib/components/profile.component.ts
@@ -1,5 +1,5 @@
import { NamedNode, Store } from 'n3';
-import { css, html, property, PropertyValues } from 'lit-element';
+import { css, CSSResult, html, property, PropertyValues, TemplateResult } from 'lit-element';
import { ComponentResponseEvent } from '@digita-ai/semcom-sdk';
import { ComponentDataTypes } from '@digita-ai/semcom-core';
import { BaseComponent } from './base.component';
@@ -75,7 +75,7 @@ export class ProfileComponent extends BaseComponent {
}
- static get styles() {
+ static get styles(): CSSResult[] {
return [
css`
@@ -145,7 +145,7 @@ export class ProfileComponent extends BaseComponent {
}
- render() {
+ render(): TemplateResult {
return html`
Contact information
+ Your email address and phone number
+
+ ${unsafeSVG(Image)}
+
+
+
+
+
+
+
+
+
+
+
+
+ Names
+ Your names
+
+ ${unsafeSVG(Image)}
+
+ ${this.image ? html `` : ''}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Payslips
+ Your payslips
+
+ ${unsafeSVG(Image)}
+
+
+ ${this.payslips.map((payslip) => html`
+
+
+
+ `)}
+
+ ${payslip.from}
+
+
+ ${payslip.employer}
+
+
+ €${payslip.amount}
+
+
diff --git a/packages/semcom-components/lib/demo.css b/packages/semcom-components/lib/demo.css
new file mode 100644
index 00000000..092a9cfd
--- /dev/null
+++ b/packages/semcom-components/lib/demo.css
@@ -0,0 +1,32 @@
+@import '../node_modules/@digita-ai/dgt-theme/dist/style.css';
+
+html {
+ height: 100%;
+ background-color: #ddd;
+ padding: 0;
+ margin: 0;
+}
+
+body {
+ margin: auto;
+ width: 550px;
+ height: 100%;
+ background-color: var(--colors-background-normal);
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ max-width: 1200px;
+ background-color: #eee;
+ margin: 0 auto;
+ box-shadow: 8px 0 10px -4px rgba(100, 100, 100, 0.3), -8px 0 8px -4px rgba(100, 100, 100, 0.3);
+}
+
+body > * {
+ margin-bottom: var(--gap-large);
+ max-width: 600px;
+}
+
+:global(.content) {
+ flex: 1 0;
+ padding: 80px;
+}
diff --git a/packages/semcom-components/lib/demo.ts b/packages/semcom-components/lib/demo.ts
index fc410063..d1dd0818 100644
--- a/packages/semcom-components/lib/demo.ts
+++ b/packages/semcom-components/lib/demo.ts
@@ -1,14 +1,33 @@
import { Parser } from 'n3';
-import { addListener, ComponentEventType, ComponentEventTypes, ComponentReadEvent, ComponentResponseEvent, ComponentWriteEvent } from '@digita-ai/semcom-sdk';
-import ProfileComponent from './components/profile.component';
-import PayslipComponent from './components/payslip.component';
-import InputComponent from './components/input.component';
-import GenderComponent from './components/gender.component';
+import { addListener, ComponentEventTypes, ComponentReadEvent, ComponentResponseEvent, ComponentWriteEvent } from '@digita-ai/semcom-sdk';
+import { CardComponent, ContentHeaderComponent, FormElementComponent, SidebarItemComponent, SidebarListComponent, SidebarListItemComponent } from '@digita-ai/dgt-components';
+import { ProfileComponent } from '../lib/components/profile.component';
+import { DocumentComponent } from '../lib/components/document.component';
+import { PayslipComponent } from '../lib/components/payslip.component';
+import { InputComponent } from '../lib/components/input.component';
+import { GenderComponent } from '../lib/components/gender.component';
+import { BarcodeComponent } from '../lib/components/barcode.component';
+import { CredentialComponent } from '../lib/components/credential.component';
+import { ProfileContactComponent } from '../lib/components/profile-contact.component';
+import { ProfileNameComponent } from '../lib/components/profile-name.component';
+import { ProfilePayslipComponent } from '../lib/components/profile-payslip.component';
customElements.define('profile-component', ProfileComponent);
customElements.define('payslip-component', PayslipComponent);
customElements.define('input-component', InputComponent);
customElements.define('gender-component', GenderComponent);
+customElements.define('document-component', DocumentComponent);
+customElements.define('barcode-component', BarcodeComponent);
+customElements.define('credential-component', CredentialComponent);
+customElements.define('profile-contact-component', ProfileContactComponent);
+customElements.define('profile-name-component', ProfileNameComponent);
+customElements.define('profile-payslip-component', ProfilePayslipComponent);
+customElements.define('nde-form-element', FormElementComponent);
+customElements.define('nde-card', CardComponent);
+customElements.define('card-header', ContentHeaderComponent);
+customElements.define('nde-sidebar-list-item', SidebarListItemComponent);
+customElements.define('nde-sidebar-list', SidebarListComponent);
+customElements.define('nde-sidebar-item', SidebarItemComponent);
const parser = new Parser();
diff --git a/packages/semcom-components/lib/demo/barcodes.ttl b/packages/semcom-components/lib/demo/barcodes.ttl
new file mode 100644
index 00000000..c079c540
--- /dev/null
+++ b/packages/semcom-components/lib/demo/barcodes.ttl
@@ -0,0 +1,22 @@
+@prefix : <#>.
+@prefix solid: .
+@prefix foaf: .
+@prefix schema: ;
+ schema:membershipNumber "121345687789" ;
+ schema:programName "UiTPAS" .
+
+:barcode-mock-1
+ schema:member ;
+ schema:membershipNumber "9876543210" ;
+ schema:programName "UiTPAS" .
+
+:barcode-mock-2
+ schema:hostingOrganization ;
+ schema:membershipNumber "012345543210" ;
+ schema:programName "UiTPAS" .
\ No newline at end of file
diff --git a/packages/semcom-components/lib/testdata/payslips.txt b/packages/semcom-components/lib/demo/payslips.ttl
similarity index 100%
rename from packages/semcom-components/lib/testdata/payslips.txt
rename to packages/semcom-components/lib/demo/payslips.ttl
diff --git a/packages/semcom-components/lib/demo/profile-2.ttl b/packages/semcom-components/lib/demo/profile-2.ttl
new file mode 100644
index 00000000..0e580480
--- /dev/null
+++ b/packages/semcom-components/lib/demo/profile-2.ttl
@@ -0,0 +1,244 @@
+@prefix : <#>.
+@prefix solid: .
+@prefix foaf: .
+@prefix schema: .
+@prefix c0: .
+@prefix c1: .
+@prefix prof: <./>.
+@prefix n3: .
+@prefix in: .
+@prefix n4: .
+@prefix c: .
+@prefix n: .
+@prefix pay: .
+
+prof:card a foaf:PersonalProfileDocument; foaf:maker :me; foaf:primaryTopic :me.
+
+:id1601909945358
+ n:country-name "Belgium";
+ n:locality "Brussels";
+ n:postal-code "1000";
+ n:region "Brusssels";
+ n:street-address "Country Road 69".
+
+:id1589374025993 a n:Work; n:value .
+:id1589374027282 a n:Home; n:value .
+
+:id1601214413622 a n:Work; n:value .
+:id1601214413645 a n:Home; n:value .
+
+:me
+ a schema:Person, foaf:Person;
+ n:note "I enjoy nettle soup!";
+ n:organization-name "Cynalco Medics";
+ n:role "Janitor & Maintenance";
+ solid:privateTypeIndex ;
+ solid:publicTypeIndex ;
+ n:hasEmail :id1589374025993, :id1589374027282;
+ n:hasAddress :id1601909945358;
+ n:hasTelephone :id1601214413622, :id1601214413645;
+ foaf:nick "tonyp";
+ n:honorific-prefix "Mr.";
+ foaf:name "Tony Paillard".
+
+:payslip-jan-2021-w1
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1609459200";
+ pay:until "1612051200";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "2600";
+ pay:taxableAmount "2200";
+ pay:netAmount "1500".
+
+
+:payslip-feb-2021-w1
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1612137600";
+ pay:until "1614470400";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "2600";
+ pay:taxableAmount "2200";
+ pay:netAmount "1500".
+
+
+:payslip-mar-2021-w1
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1614556800";
+ pay:until "1617148800";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "2600";
+ pay:taxableAmount "2200";
+ pay:netAmount "1500".
+
+
+:payslip-apr-2021-w1
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1616976000";
+ pay:until "1617494400";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "750";
+ pay:taxableAmount "650";
+ pay:netAmount "550".
+
+:payslip-apr-2021-w2
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1617580800";
+ pay:until "1618099200";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "750";
+ pay:taxableAmount "650";
+ pay:netAmount "550".
+
+:payslip-apr-2021-w3
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1618185600";
+ pay:until "1618704000";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "750";
+ pay:taxableAmount "650";
+ pay:netAmount "550".
+
+:payslip-apr-2021-w4
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1618790400";
+ pay:until "1619308800";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "750";
+ pay:taxableAmount "650";
+ pay:netAmount "550".
+
+
+:payslip-may-2021-w1
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1620000000";
+ pay:until "1620518400";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "750";
+ pay:taxableAmount "650";
+ pay:netAmount "550".
+
+:payslip-may-2021-w2
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1620604800";
+ pay:until "1621123200";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "750";
+ pay:taxableAmount "650";
+ pay:netAmount "550".
+
+:payslip-may-2021-w3
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1621209600";
+ pay:until "1621728000";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "750";
+ pay:taxableAmount "650";
+ pay:netAmount "550".
+
+:payslip-may-2021-w4
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1621814400";
+ pay:until "1622332800";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "750";
+ pay:taxableAmount "650";
+ pay:netAmount "550".
+
+
+:payslip-jun-2021-w1
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1622419200";
+ pay:until "1622937600";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "750";
+ pay:taxableAmount "650";
+ pay:netAmount "550".
+
+:payslip-jun-2021-w2
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1623024000";
+ pay:until "1623542400";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "750";
+ pay:taxableAmount "650";
+ pay:netAmount "550".
+
+:payslip-jun-2021-w3
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1623628800";
+ pay:until "1624147200";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "750";
+ pay:taxableAmount "650";
+ pay:netAmount "550".
+
+:payslip-jun-2021-w4
+ a pay:payslip;
+ pay:employer ;
+ pay:employee ;
+ pay:from "1624233600";
+ pay:until "1624752000";
+ pay:stature "White Collar";
+ pay:dependent "1";
+ pay:wageUnit ;
+ pay:grossAmount "750";
+ pay:taxableAmount "650";
+ pay:netAmount "550".
diff --git a/packages/semcom-components/lib/testdata/profile.txt b/packages/semcom-components/lib/demo/profile.ttl
similarity index 100%
rename from packages/semcom-components/lib/testdata/profile.txt
rename to packages/semcom-components/lib/demo/profile.ttl
diff --git a/packages/semcom-components/lib/testdata/singlePayslip.txt b/packages/semcom-components/lib/demo/singlePayslip.ttl
similarity index 100%
rename from packages/semcom-components/lib/testdata/singlePayslip.txt
rename to packages/semcom-components/lib/demo/singlePayslip.ttl
diff --git a/packages/semcom-components/lib/index.html b/packages/semcom-components/lib/index.html
index b54a98d9..96b6e11a 100644
--- a/packages/semcom-components/lib/index.html
+++ b/packages/semcom-components/lib/index.html
@@ -4,7 +4,7 @@
SemCom Components