@pod-os/elements 0.0.1

package/dist/collection/components/pos-resource/pos-resource.js

@@ -0,0 +1,148 @@
+import { Component, Event, h, Prop, State, Watch, Listen, Method } from '@stencil/core';
+export class PosResource {
+  constructor() {
+    this.consumers = [];
+    this.lazy = false;
+    this.loading = true;
+    this.setOs = async (os) => {
+      this.os = os;
+    };
+  }
+  componentWillLoad() {
+    this.consumeOsEmitter.emit(this.setOs);
+  }
+  async provideResource(event) {
+    event.stopPropagation();
+    if (this.resource) {
+      event.detail(this.resource);
+    }
+    this.consumers.push(event);
+  }
+  async loadResource() {
+    await this.getResource(!this.lazy);
+  }
+  async fetch() {
+    await this.getResource(true);
+  }
+  async getResource(fetch = false) {
+    try {
+      if (fetch) {
+        this.loading = true;
+        await this.os.fetch(this.uri);
+      }
+      this.resource = this.os.store.get(this.uri);
+      this.consumers.forEach(consumer => {
+        consumer.detail(this.resource);
+      });
+    }
+    catch (err) {
+      this.error = err;
+    }
+    finally {
+      this.loading = false;
+    }
+  }
+  render() {
+    if (this.loading) {
+      return h("ion-progress-bar", { type: "indeterminate" });
+    }
+    if (this.error) {
+      return h("div", null, this.error.message);
+    }
+    return h("slot", null);
+  }
+  static get is() { return "pos-resource"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "uri": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "uri",
+      "reflect": false
+    },
+    "lazy": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "lazy",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "os": {},
+    "resource": {},
+    "consumers": {},
+    "error": {},
+    "loading": {}
+  }; }
+  static get events() { return [{
+      "method": "consumeOsEmitter",
+      "name": "consumeOs",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "fetch": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get watchers() { return [{
+      "propName": "os",
+      "methodName": "loadResource"
+    }, {
+      "propName": "uri",
+      "methodName": "loadResource"
+    }]; }
+  static get listeners() { return [{
+      "name": "pod-os:resource",
+      "method": "provideResource",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/pos-rich-link/pos-rich-link.js

@@ -0,0 +1,55 @@
+import { Component, Event, h, Prop } from '@stencil/core';
+export class PosLabel {
+  render() {
+    return (h("pos-resource", { lazy: true, uri: this.uri },
+      h("ion-item", { href: this.uri, onClick: e => {
+          e.preventDefault();
+          this.linkEmitter.emit(this.uri);
+        } },
+        h("ion-label", null,
+          h("h2", null,
+            h("pos-label", null)),
+          h("p", null,
+            h("ion-label", { style: { maxWidth: '50rem' } },
+              h("pos-description", null))),
+          h("p", null,
+            h("a", { href: this.uri }, this.uri))))));
+  }
+  static get is() { return "pos-rich-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "uri": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "uri",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "linkEmitter",
+      "name": "pod-os:link",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/global.js

@@ -0,0 +1 @@
+import '@ionic/core';

package/dist/collection/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/pod-os.js

@@ -0,0 +1,4 @@
+export const createPodOS = () => {
+  // @ts-ignore
+  return window.PodOS ? new window.PodOS.PodOS() : new Error('PodOS missing');
+};

package/dist/collection/store/getIdpUrl.js

@@ -0,0 +1 @@
+export const getIdpUrl = () => prompt('Please enter your Identity Provider URL', 'http://localhost:3000');

package/dist/collection/store/session.js

@@ -0,0 +1,8 @@
+import { createStore } from '@stencil/store';
+import { getIdpUrl } from './getIdpUrl';
+const { state } = createStore({
+  getIdpUrl,
+  isLoggedIn: false,
+  webId: '',
+});
+export default state;

package/dist/collection/test/mockPodOS.js

@@ -0,0 +1,14 @@
+jest.mock('../pod-os');
+import { createPodOS } from '../pod-os';
+export function mockPodOS() {
+  const os = {
+    fetch: jest.fn(),
+    store: {
+      get: jest.fn(),
+    },
+    trackSession: jest.fn(),
+    handleIncomingRedirect: jest.fn(),
+  };
+  createPodOS.mockReturnValue(os);
+  return os;
+}

package/dist/collection/window.js

@@ -0,0 +1,2 @@
+// @ts-ignore
+export const PodOS = window.PodOS ? new window.PodOS.PodOS() : null;

package/dist/custom-elements/focus-visible.js

@@ -0,0 +1,43 @@
+const ION_FOCUSED = 'ion-focused';
+const ION_FOCUSABLE = 'ion-focusable';
+const FOCUS_KEYS = ['Tab', 'ArrowDown', 'Space', 'Escape', ' ', 'Shift', 'Enter', 'ArrowLeft', 'ArrowRight', 'ArrowUp'];
+const startFocusVisible = () => {
+  let currentFocus = [];
+  let keyboardMode = true;
+  const doc = document;
+  const setFocus = (elements) => {
+    currentFocus.forEach(el => el.classList.remove(ION_FOCUSED));
+    elements.forEach(el => el.classList.add(ION_FOCUSED));
+    currentFocus = elements;
+  };
+  const pointerDown = () => {
+    keyboardMode = false;
+    setFocus([]);
+  };
+  doc.addEventListener('keydown', ev => {
+    keyboardMode = FOCUS_KEYS.includes(ev.key);
+    if (!keyboardMode) {
+      setFocus([]);
+    }
+  });
+  doc.addEventListener('focusin', ev => {
+    if (keyboardMode && ev.composedPath) {
+      const toFocus = ev.composedPath().filter((el) => {
+        if (el.classList) {
+          return el.classList.contains(ION_FOCUSABLE);
+        }
+        return false;
+      });
+      setFocus(toFocus);
+    }
+  });
+  doc.addEventListener('focusout', () => {
+    if (doc.activeElement === doc.body) {
+      setFocus([]);
+    }
+  });
+  doc.addEventListener('touchstart', pointerDown);
+  doc.addEventListener('mousedown', pointerDown);
+};
+
+export { startFocusVisible };

package/dist/custom-elements/index.d.ts

@@ -0,0 +1,93 @@
+/* elements custom elements bundle */
+
+import type { Components, JSX } from "../types/components";
+
+interface PosApp extends Components.PosApp, HTMLElement {}
+export const PosApp: {
+  prototype: PosApp;
+  new (): PosApp;
+};
+
+interface PosDemoApp extends Components.PosDemoApp, HTMLElement {}
+export const PosDemoApp: {
+  prototype: PosDemoApp;
+  new (): PosDemoApp;
+};
+
+interface PosDescription extends Components.PosDescription, HTMLElement {}
+export const PosDescription: {
+  prototype: PosDescription;
+  new (): PosDescription;
+};
+
+interface PosLabel extends Components.PosLabel, HTMLElement {}
+export const PosLabel: {
+  prototype: PosLabel;
+  new (): PosLabel;
+};
+
+interface PosLiterals extends Components.PosLiterals, HTMLElement {}
+export const PosLiterals: {
+  prototype: PosLiterals;
+  new (): PosLiterals;
+};
+
+interface PosLogin extends Components.PosLogin, HTMLElement {}
+export const PosLogin: {
+  prototype: PosLogin;
+  new (): PosLogin;
+};
+
+interface PosRelations extends Components.PosRelations, HTMLElement {}
+export const PosRelations: {
+  prototype: PosRelations;
+  new (): PosRelations;
+};
+
+interface PosResource extends Components.PosResource, HTMLElement {}
+export const PosResource: {
+  prototype: PosResource;
+  new (): PosResource;
+};
+
+interface PosRichLink extends Components.PosRichLink, HTMLElement {}
+export const PosRichLink: {
+  prototype: PosRichLink;
+  new (): PosRichLink;
+};
+
+/**
+ * Utility to define all custom elements within this package using the tag name provided in the component's source. 
+ * When defining each custom element, it will also check it's safe to define by:
+ *
+ * 1. Ensuring the "customElements" registry is available in the global context (window).
+ * 2. The component tag name is not already defined.
+ *
+ * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) 
+ * method instead to define custom elements individually, or to provide a different tag name.
+ */
+export declare const defineCustomElements: (opts?: any) => void;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  ce?: (eventName: string, opts?: any) => CustomEvent;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';