@pod-os/contacts 0.0.2-rc.40ff2aa.0

package/dist/collection/collection-manifest.json

@@ -0,0 +1,84 @@
+{
+  "entries": [
+    "components/app.js",
+    "components/address-book-page/address-book-page.js",
+    "components/contact-details/contact-details.js",
+    "components/contact-details/email-addresses/email-addresses.js",
+    "components/contact-details/group-details/group-details.js",
+    "components/contact-details/phone-numbers/phone-numbers.js",
+    "components/contact-list/contact-list.js",
+    "components/create-new-contact/create-new-contact.js",
+    "components/create-new-contact-form/create-new-contact-form.js",
+    "components/group-list/group-list.js",
+    "components/list-address-books/list-address-books.js",
+    "components/loading-spinner/loading-spinner.js",
+    "components/open-address-book/open-address-book.js",
+    "components/router/router.js",
+    "components/welcome-page/welcome-page.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.40.1",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [
+    {
+      "name": "@pod-os/elements",
+      "tags": [
+        "pos-add-literal-value",
+        "pos-add-new-thing",
+        "pos-app",
+        "pos-app-browser",
+        "pos-app-dashboard",
+        "pos-app-document-viewer",
+        "pos-app-generic",
+        "pos-app-image-viewer",
+        "pos-app-ldp-container",
+        "pos-app-rdf-document",
+        "pos-app-settings",
+        "pos-attachments",
+        "pos-container-contents",
+        "pos-container-item",
+        "pos-container-toolbar",
+        "pos-create-new-container-item",
+        "pos-description",
+        "pos-dialog",
+        "pos-document",
+        "pos-error-toast",
+        "pos-example-resources",
+        "pos-getting-started",
+        "pos-image",
+        "pos-internal-router",
+        "pos-label",
+        "pos-list",
+        "pos-literals",
+        "pos-login",
+        "pos-login-form",
+        "pos-make-findable",
+        "pos-markdown-document",
+        "pos-navigation",
+        "pos-navigation-bar",
+        "pos-new-thing-form",
+        "pos-picture",
+        "pos-predicate",
+        "pos-relations",
+        "pos-resource",
+        "pos-reverse-relations",
+        "pos-rich-link",
+        "pos-router",
+        "pos-select-term",
+        "pos-setting-offline-cache",
+        "pos-subjects",
+        "pos-tool-attachments",
+        "pos-tool-select",
+        "pos-type-badges",
+        "pos-type-index-entries",
+        "pos-type-router",
+        "pos-upload",
+        "pos-user-menu",
+        "pos-value"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/address-book-page/address-book-page.css

@@ -0,0 +1,142 @@
+:host {
+  --header-height: var(--size-14);
+  --content-height: calc(100vh - var(--header-height) - var(--size-10));
+  --color-primary: var(--color-blue-700);
+  display: grid;
+  grid-template-columns: var(--size-80) auto;
+  grid-template-rows: var(--header-height) auto;
+  height: 100%;
+  grid-template-areas: 'header header' 'menu main';
+}
+
+button.menu {
+  display: none;
+}
+
+@media only screen and (max-width: 600px) {
+  :host {
+    grid-template-areas: 'header header' 'main main';
+  }
+
+  button.menu {
+    border: none;
+    cursor: pointer;
+    background: none;
+    border-radius: var(--radius-sm);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--color-primary);
+    padding: var(--size-2);
+    font-size: var(--scale-3);
+  }
+
+  button.menu:hover {
+    background: var(--color-grey-100);
+  }
+
+  nav {
+    transition: width 100ms linear;
+    position: absolute;
+    background-color: var(--color-grey-50);
+    box-shadow: var(--shadow-lg);
+    width: 0;
+    border: 1px solid var(--color-grey-100);
+    border-radius: var(--radius-lg);
+  }
+
+  nav.active {
+    width: var(--size-64);
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-end;
+    gap: 1rem;
+    padding: 1rem;
+    z-index: var(--layer-top);
+  }
+}
+
+header {
+  display: flex;
+  flex-direction: row;
+  grid-area: header;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--size-4);
+  max-width: 100vw;
+
+  hgroup {
+    min-width: 0;
+    h1 {
+      font-size: var(--scale-fluid-3);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+nav {
+  grid-area: menu;
+  height: var(--content-height);
+  overflow: auto;
+}
+
+main {
+  grid-area: main;
+  height: var(--content-height);
+  overflow: auto;
+  background-color: white;
+  border-radius: var(--radius-xl);
+}
+
+main.error,
+main.loading {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+main.loading {
+  pos-contacts-loading-spinner {
+    --spinner-size: var(--size-36);
+  }
+}
+
+main.error {
+  flex-direction: column;
+  background: var(--color-red-700);
+  color: white;
+  p {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--size-2);
+  }
+  button.retry {
+    display: flex;
+    align-items: center;
+    gap: var(--size-2);
+    color: black;
+    font-size: var(--scale-1);
+    border-radius: var(--radius-lg);
+    font-weight: var(--weight-bold);
+    padding: var(--size-1);
+    background-color: var(--color-grey-200);
+    border: 1px dotted var(--color-grey-800);
+    box-shadow: var(--shadow-md);
+  }
+  button.retry:hover {
+    cursor: pointer;
+    filter: brightness(110%);
+  }
+  pre {
+    border-radius: var(--radius-md);
+    border: var(--size-1) solid var(--color-grey-500);
+    padding: var(--size-4);
+    background: var(--color-grey-800);
+  }
+}

package/dist/collection/components/address-book-page/address-book-page.js

@@ -0,0 +1,140 @@
+import { h, Host } from "@stencil/core";
+import { Subject, takeUntil, tap } from "rxjs";
+import { usePodOS } from "../../events/usePodOS";
+// noinspection ES6PreferShortImport needs to be mocked
+import { debounceTime } from "../../utils/debounceTime";
+import "@shoelace-style/shoelace/dist/components/icon/icon.js";
+import { useContactsModule } from "../../events/useContactsModule";
+export class AddressBookPage {
+    constructor() {
+        this.menuOpen = false;
+        this.disconnected$ = new Subject();
+    }
+    async componentWillLoad() {
+        const os = await usePodOS(this.el);
+        this.contactsModule = await useContactsModule(this.el);
+        os.observeSession()
+            .pipe(takeUntil(this.disconnected$), debounceTime(300), // make sure the session state has "settled" after redirect
+        tap(() => {
+            this.loadAddressBook();
+        }))
+            .subscribe();
+    }
+    async onContactSelected(event) {
+        this.selectedContact = event.detail;
+    }
+    async onGroupSelected(event) {
+        this.selectedContact = null;
+        this.selectedGroup = event.detail;
+    }
+    async onContactCreated(event) {
+        const contact = event.detail;
+        this.addressBook.contacts.push(contact);
+        this.selectedContact = contact;
+    }
+    async loadAddressBook() {
+        try {
+            this.addressBook = null;
+            this.error = null;
+            this.addressBook = await this.contactsModule.readAddressBook(this.uri);
+        }
+        catch (e) {
+            console.log(e);
+            this.error = e;
+        }
+    }
+    render() {
+        if (this.error) {
+            return (h("main", { class: "error" }, h("h2", null, "Loading the address book failed."), h("pos-login", null), h("p", null, "You might need to log in and then", h("button", { class: "retry", onClick: () => this.retry() }, h("sl-icon", { name: "arrow-clockwise" }), "retry"))));
+        }
+        if (!this.addressBook) {
+            return (h("main", { class: "loading" }, h("pos-contacts-loading-spinner", null)));
+        }
+        return (h(Host, null, h("header", null, h("button", { class: "menu", "aria-label": "open side navigation", onClick: () => this.openMenu() }, h("sl-icon", { "aria-hidden": "true", name: "list" })), h("hgroup", null, h("h1", null, this.addressBook.title)), h("pos-login", null)), h("nav", { class: this.menuOpen ? 'active' : '' }, h("button", { class: "menu", "aria-label": "close side navigation", onClick: () => this.closeMenu() }, h("sl-icon", { "aria-hidden": "true", name: "x" })), h("pos-contacts-create-new-contact", { addressBookUri: this.uri }), h("pos-contacts-group-list", { groups: this.addressBook.groups })), h("main", null, this.selectedContact ? (h("pos-contacts-contact-details", { "onPod-os-contacts:contact-closed": () => this.closeContact(), uri: this.selectedContact.uri })) : this.selectedGroup ? (h("pos-contacts-group-details", { uri: this.selectedGroup.uri })) : (h("pos-contacts-contact-list", { contacts: this.addressBook.contacts })))));
+    }
+    openMenu() {
+        this.menuOpen = true;
+    }
+    closeMenu() {
+        this.menuOpen = false;
+    }
+    closeContact() {
+        this.selectedContact = null;
+    }
+    async retry() {
+        await this.loadAddressBook();
+    }
+    static get is() { return "pos-contacts-address-book-page"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./address-book-page.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["address-book-page.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "uri": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "uri"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "contactsModule": {},
+            "addressBook": {},
+            "selectedContact": {},
+            "selectedGroup": {},
+            "error": {},
+            "menuOpen": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "uri",
+                "methodName": "loadAddressBook"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pod-os-contacts:contact-selected",
+                "method": "onContactSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pod-os-contacts:group-selected",
+                "method": "onGroupSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pod-os-contacts:contact-created",
+                "method": "onContactCreated",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/app.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+import "@pod-os/elements";
+export class App {
+    render() {
+        return (h("pos-app", { key: 'ce9869713b4c7da7eb030719875669fca19b2fc6', "restore-previous-session": true }, h("pos-contacts-router", { key: '4b901b7317c6c99d9b2d3da3a00e3f45d19b1c87' })));
+    }
+    static get is() { return "pos-contacts-app"; }
+}

package/dist/collection/components/contact-details/contact-details.css

@@ -0,0 +1,75 @@
+@media only screen and (max-width: 600px) {
+  header {
+    .overview {
+      flex-direction: column;
+      align-items: center;
+      gap: 0;
+    }
+  }
+}
+
+@media only screen and (min-width: 600px) {
+  header {
+    .overview {
+      flex-direction: row;
+      align-items: flex-start;
+      gap: var(--size-4);
+    }
+  }
+}
+
+header {
+  display: flex;
+  flex-direction: column;
+  padding: var(--size-4);
+  align-items: flex-start;
+  .overview {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    .avatar {
+      width: var(--size-56);
+      height: var(--size-56);
+      opacity: 5%;
+    }
+
+    h2 {
+      font-size: var(--scale-fluid-4);
+    }
+  }
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  padding: var(--size-6);
+  gap: var(--size-6);
+}
+
+button.back {
+  border: none;
+  cursor: pointer;
+  background: none;
+  border-radius: var(--radius-sm);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--color-grey-800);
+  padding: var(--size-2);
+  font-size: var(--scale-2);
+}
+
+button.back:hover {
+  background: var(--color-grey-100);
+}
+
+.loading {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  pos-contacts-loading-spinner {
+    --spinner-size: var(--size-36);
+  }
+}

package/dist/collection/components/contact-details/contact-details.js

@@ -0,0 +1,84 @@
+import { h, Host } from "@stencil/core";
+import "@shoelace-style/shoelace/dist/components/icon/icon.js";
+import { useContactsModule } from "../../events/useContactsModule";
+export class ContactDetails {
+    async componentWillLoad() {
+        this.contactsModule = await useContactsModule(this.el);
+        await this.loadContact();
+    }
+    async loadContact() {
+        this.contact = await this.contactsModule.readContact(this.uri);
+    }
+    render() {
+        if (!this.contact) {
+            return (h("div", { class: "loading" }, h("pos-contacts-loading-spinner", null)));
+        }
+        return (h(Host, null, h("header", null, h("button", { class: "back", "aria-label": "Back to address book", onClick: () => this.closeContact.emit() }, h("sl-icon", { "aria-hidden": "true", name: "arrow-left-short" })), h("div", { class: "overview" }, h("sl-icon", { class: "avatar", name: "person-circle" }), h("h2", null, this.contact.name))), h("section", null, h("pos-contacts-phone-numbers", { phoneNumbers: this.contact.phoneNumbers }), h("pos-contacts-email-addresses", { emailAddresses: this.contact.emails }))));
+    }
+    static get is() { return "pos-contacts-contact-details"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./contact-details.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["contact-details.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "uri": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "uri"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "contact": {},
+            "contactsModule": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeContact",
+                "name": "pod-os-contacts:contact-closed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "uri",
+                "methodName": "loadContact"
+            }];
+    }
+}

package/dist/collection/components/contact-details/email-addresses/email-addresses.css

@@ -0,0 +1,13 @@
+ul {
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-4);
+  margin: 0;
+}
+
+section {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}

package/dist/collection/components/contact-details/email-addresses/email-addresses.js

@@ -0,0 +1,49 @@
+import { h } from "@stencil/core";
+import "@shoelace-style/shoelace/dist/components/icon/icon.js";
+export class EmailAddresses {
+    render() {
+        if (this.emailAddresses.length == 0) {
+            return null;
+        }
+        return (h("section", { "aria-label": "e-mail addresses" }, h("sl-icon", { "aria-hidden": "true", size: "large", name: "envelope-at" }), h("ul", null, this.emailAddresses.map(email => (h("li", null, h("a", { href: `mailto:${email.value}` }, email.value)))))));
+    }
+    static get is() { return "pos-contacts-email-addresses"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./email-addresses.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["email-addresses.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "emailAddresses": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Email[]",
+                    "resolved": "Email[]",
+                    "references": {
+                        "Email": {
+                            "location": "import",
+                            "path": "@solid-data-modules/contacts-rdflib",
+                            "id": "../node_modules/@solid-data-modules/contacts-rdflib/dist/index.d.ts::Email"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}

package/dist/collection/components/contact-details/group-details/group-details.js

@@ -0,0 +1,30 @@
+import { h, Host } from "@stencil/core";
+export class GroupDetails {
+    render() {
+        return h(Host, { key: 'bbd50db5fc480d9590785d4892e87e20bc7e5734' }, this.uri);
+    }
+    static get is() { return "pos-contacts-group-details"; }
+    static get properties() {
+        return {
+            "uri": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "uri"
+            }
+        };
+    }
+}

package/dist/collection/components/contact-details/phone-numbers/phone-numbers.css

@@ -0,0 +1,13 @@
+ul {
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-4);
+  margin: 0;
+}
+
+section {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}

package/dist/collection/components/contact-details/phone-numbers/phone-numbers.js

@@ -0,0 +1,49 @@
+import { h } from "@stencil/core";
+import "@shoelace-style/shoelace/dist/components/icon/icon.js";
+export class PhoneNumbers {
+    render() {
+        if (this.phoneNumbers.length == 0) {
+            return null;
+        }
+        return (h("section", { "aria-label": "phone numbers" }, h("sl-icon", { "aria-hidden": "true", size: "large", name: "telephone" }), h("ul", null, this.phoneNumbers.map(phoneNumber => (h("li", null, h("a", { href: `tel:${phoneNumber.value}` }, phoneNumber.value)))))));
+    }
+    static get is() { return "pos-contacts-phone-numbers"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./phone-numbers.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["phone-numbers.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "phoneNumbers": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PhoneNumber[]",
+                    "resolved": "PhoneNumber[]",
+                    "references": {
+                        "PhoneNumber": {
+                            "location": "import",
+                            "path": "@solid-data-modules/contacts-rdflib",
+                            "id": "../node_modules/@solid-data-modules/contacts-rdflib/dist/index.d.ts::PhoneNumber"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}