@pod-os/elements 0.8.0 → 0.9.0

package/dist/types/components.d.ts

@@ -10,16 +10,20 @@ export namespace Components {
     }
     interface PosAppBrowser {
     }
+    interface PosAppDocumentViewer {
+    }
     interface PosAppGeneric {
     }
     interface PosAppImageViewer {
     }
-    interface PosAppPdfViewer {
-    }
     interface PosAppRdfDocument {
     }
     interface PosDescription {
     }
+    interface PosDocument {
+        "alt": string;
+        "src": string;
+    }
     interface PosImage {
         "alt": string;
         "src": string;
@@ -33,10 +37,6 @@ export namespace Components {
     interface PosNavigationBar {
         "uri": string;
     }
-    interface PosPdf {
-        "alt": string;
-        "src": string;
-    }
     interface PosPicture {
     }
     interface PosRelations {
@@ -60,18 +60,22 @@ export namespace Components {
     interface PosTypeRouter {
     }
 }
-export interface PosAppImageViewerCustomEvent<T> extends CustomEvent<T> {
+export interface PosAppDocumentViewerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLPosAppImageViewerElement;
+    target: HTMLPosAppDocumentViewerElement;
 }
-export interface PosAppPdfViewerCustomEvent<T> extends CustomEvent<T> {
+export interface PosAppImageViewerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLPosAppPdfViewerElement;
+    target: HTMLPosAppImageViewerElement;
 }
 export interface PosDescriptionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPosDescriptionElement;
 }
+export interface PosDocumentCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPosDocumentElement;
+}
 export interface PosImageCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPosImageElement;
@@ -92,10 +96,6 @@ export interface PosNavigationBarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPosNavigationBarElement;
 }
-export interface PosPdfCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPosPdfElement;
-}
 export interface PosPictureCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPosPictureElement;
@@ -141,6 +141,12 @@ declare global {
         prototype: HTMLPosAppBrowserElement;
         new (): HTMLPosAppBrowserElement;
     };
+    interface HTMLPosAppDocumentViewerElement extends Components.PosAppDocumentViewer, HTMLStencilElement {
+    }
+    var HTMLPosAppDocumentViewerElement: {
+        prototype: HTMLPosAppDocumentViewerElement;
+        new (): HTMLPosAppDocumentViewerElement;
+    };
     interface HTMLPosAppGenericElement extends Components.PosAppGeneric, HTMLStencilElement {
     }
     var HTMLPosAppGenericElement: {
@@ -153,12 +159,6 @@ declare global {
         prototype: HTMLPosAppImageViewerElement;
         new (): HTMLPosAppImageViewerElement;
     };
-    interface HTMLPosAppPdfViewerElement extends Components.PosAppPdfViewer, HTMLStencilElement {
-    }
-    var HTMLPosAppPdfViewerElement: {
-        prototype: HTMLPosAppPdfViewerElement;
-        new (): HTMLPosAppPdfViewerElement;
-    };
     interface HTMLPosAppRdfDocumentElement extends Components.PosAppRdfDocument, HTMLStencilElement {
     }
     var HTMLPosAppRdfDocumentElement: {
@@ -171,6 +171,12 @@ declare global {
         prototype: HTMLPosDescriptionElement;
         new (): HTMLPosDescriptionElement;
     };
+    interface HTMLPosDocumentElement extends Components.PosDocument, HTMLStencilElement {
+    }
+    var HTMLPosDocumentElement: {
+        prototype: HTMLPosDocumentElement;
+        new (): HTMLPosDocumentElement;
+    };
     interface HTMLPosImageElement extends Components.PosImage, HTMLStencilElement {
     }
     var HTMLPosImageElement: {
@@ -201,12 +207,6 @@ declare global {
         prototype: HTMLPosNavigationBarElement;
         new (): HTMLPosNavigationBarElement;
     };
-    interface HTMLPosPdfElement extends Components.PosPdf, HTMLStencilElement {
-    }
-    var HTMLPosPdfElement: {
-        prototype: HTMLPosPdfElement;
-        new (): HTMLPosPdfElement;
-    };
     interface HTMLPosPictureElement extends Components.PosPicture, HTMLStencilElement {
     }
     var HTMLPosPictureElement: {
@@ -264,17 +264,17 @@ declare global {
     interface HTMLElementTagNameMap {
         "pos-app": HTMLPosAppElement;
         "pos-app-browser": HTMLPosAppBrowserElement;
+        "pos-app-document-viewer": HTMLPosAppDocumentViewerElement;
         "pos-app-generic": HTMLPosAppGenericElement;
         "pos-app-image-viewer": HTMLPosAppImageViewerElement;
-        "pos-app-pdf-viewer": HTMLPosAppPdfViewerElement;
         "pos-app-rdf-document": HTMLPosAppRdfDocumentElement;
         "pos-description": HTMLPosDescriptionElement;
+        "pos-document": HTMLPosDocumentElement;
         "pos-image": HTMLPosImageElement;
         "pos-label": HTMLPosLabelElement;
         "pos-literals": HTMLPosLiteralsElement;
         "pos-login": HTMLPosLoginElement;
         "pos-navigation-bar": HTMLPosNavigationBarElement;
-        "pos-pdf": HTMLPosPdfElement;
         "pos-picture": HTMLPosPictureElement;
         "pos-relations": HTMLPosRelationsElement;
         "pos-resource": HTMLPosResourceElement;
@@ -291,19 +291,24 @@ declare namespace LocalJSX {
     }
     interface PosAppBrowser {
     }
+    interface PosAppDocumentViewer {
+        "onPod-os:resource"?: (event: PosAppDocumentViewerCustomEvent<any>) => void;
+    }
     interface PosAppGeneric {
     }
     interface PosAppImageViewer {
         "onPod-os:resource"?: (event: PosAppImageViewerCustomEvent<any>) => void;
     }
-    interface PosAppPdfViewer {
-        "onPod-os:resource"?: (event: PosAppPdfViewerCustomEvent<any>) => void;
-    }
     interface PosAppRdfDocument {
     }
     interface PosDescription {
         "onPod-os:resource"?: (event: PosDescriptionCustomEvent<any>) => void;
     }
+    interface PosDocument {
+        "alt"?: string;
+        "onPod-os:init"?: (event: PosDocumentCustomEvent<any>) => void;
+        "src"?: string;
+    }
     interface PosImage {
         "alt"?: string;
         "onPod-os:init"?: (event: PosImageCustomEvent<any>) => void;
@@ -322,11 +327,6 @@ declare namespace LocalJSX {
         "onPod-os:link"?: (event: PosNavigationBarCustomEvent<any>) => void;
         "uri"?: string;
     }
-    interface PosPdf {
-        "alt"?: string;
-        "onPod-os:init"?: (event: PosPdfCustomEvent<any>) => void;
-        "src"?: string;
-    }
     interface PosPicture {
         "onPod-os:resource"?: (event: PosPictureCustomEvent<any>) => void;
     }
@@ -359,17 +359,17 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "pos-app": PosApp;
         "pos-app-browser": PosAppBrowser;
+        "pos-app-document-viewer": PosAppDocumentViewer;
         "pos-app-generic": PosAppGeneric;
         "pos-app-image-viewer": PosAppImageViewer;
-        "pos-app-pdf-viewer": PosAppPdfViewer;
         "pos-app-rdf-document": PosAppRdfDocument;
         "pos-description": PosDescription;
+        "pos-document": PosDocument;
         "pos-image": PosImage;
         "pos-label": PosLabel;
         "pos-literals": PosLiterals;
         "pos-login": PosLogin;
         "pos-navigation-bar": PosNavigationBar;
-        "pos-pdf": PosPdf;
         "pos-picture": PosPicture;
         "pos-relations": PosRelations;
         "pos-resource": PosResource;
@@ -387,17 +387,17 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "pos-app": LocalJSX.PosApp & JSXBase.HTMLAttributes<HTMLPosAppElement>;
             "pos-app-browser": LocalJSX.PosAppBrowser & JSXBase.HTMLAttributes<HTMLPosAppBrowserElement>;
+            "pos-app-document-viewer": LocalJSX.PosAppDocumentViewer & JSXBase.HTMLAttributes<HTMLPosAppDocumentViewerElement>;
             "pos-app-generic": LocalJSX.PosAppGeneric & JSXBase.HTMLAttributes<HTMLPosAppGenericElement>;
             "pos-app-image-viewer": LocalJSX.PosAppImageViewer & JSXBase.HTMLAttributes<HTMLPosAppImageViewerElement>;
-            "pos-app-pdf-viewer": LocalJSX.PosAppPdfViewer & JSXBase.HTMLAttributes<HTMLPosAppPdfViewerElement>;
             "pos-app-rdf-document": LocalJSX.PosAppRdfDocument & JSXBase.HTMLAttributes<HTMLPosAppRdfDocumentElement>;
             "pos-description": LocalJSX.PosDescription & JSXBase.HTMLAttributes<HTMLPosDescriptionElement>;
+            "pos-document": LocalJSX.PosDocument & JSXBase.HTMLAttributes<HTMLPosDocumentElement>;
             "pos-image": LocalJSX.PosImage & JSXBase.HTMLAttributes<HTMLPosImageElement>;
             "pos-label": LocalJSX.PosLabel & JSXBase.HTMLAttributes<HTMLPosLabelElement>;
             "pos-literals": LocalJSX.PosLiterals & JSXBase.HTMLAttributes<HTMLPosLiteralsElement>;
             "pos-login": LocalJSX.PosLogin & JSXBase.HTMLAttributes<HTMLPosLoginElement>;
             "pos-navigation-bar": LocalJSX.PosNavigationBar & JSXBase.HTMLAttributes<HTMLPosNavigationBarElement>;
-            "pos-pdf": LocalJSX.PosPdf & JSXBase.HTMLAttributes<HTMLPosPdfElement>;
             "pos-picture": LocalJSX.PosPicture & JSXBase.HTMLAttributes<HTMLPosPictureElement>;
             "pos-relations": LocalJSX.PosRelations & JSXBase.HTMLAttributes<HTMLPosRelationsElement>;
             "pos-resource": LocalJSX.PosResource & JSXBase.HTMLAttributes<HTMLPosResourceElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pod-os/elements",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Custom elements for usage with Solid Pods",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/components/pos-app-generic2.js

@@ -1,194 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$s } from './badge.js';
-import { d as defineCustomElement$r } from './card.js';
-import { d as defineCustomElement$q } from './card-content.js';
-import { d as defineCustomElement$p } from './card-header.js';
-import { d as defineCustomElement$o } from './card-title.js';
-import { d as defineCustomElement$n } from './col.js';
-import { d as defineCustomElement$m } from './grid.js';
-import { d as defineCustomElement$l } from './icon.js';
-import { d as defineCustomElement$k } from './item.js';
-import { d as defineCustomElement$j } from './item-divider.js';
-import { d as defineCustomElement$i } from './item-group.js';
-import { d as defineCustomElement$h } from './label.js';
-import { d as defineCustomElement$g } from './list.js';
-import { d as defineCustomElement$f } from './note.js';
-import { d as defineCustomElement$e } from './progress-bar.js';
-import { d as defineCustomElement$d } from './ripple-effect.js';
-import { d as defineCustomElement$c } from './row.js';
-import { d as defineCustomElement$b } from './skeleton-text.js';
-import { d as defineCustomElement$a } from './pos-description2.js';
-import { d as defineCustomElement$9 } from './pos-image2.js';
-import { d as defineCustomElement$8 } from './pos-label2.js';
-import { d as defineCustomElement$7 } from './pos-literals2.js';
-import { d as defineCustomElement$6 } from './pos-picture2.js';
-import { d as defineCustomElement$5 } from './pos-relations2.js';
-import { d as defineCustomElement$4 } from './pos-resource2.js';
-import { d as defineCustomElement$3 } from './pos-reverse-relations2.js';
-import { d as defineCustomElement$2 } from './pos-rich-link2.js';
-import { d as defineCustomElement$1 } from './pos-type-badges2.js';
-
-const PosAppGeneric = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-  }
-  render() {
-    return (h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "12", "size-sm": true }, h("ion-card", null, h("ion-card-header", null, h("pos-type-badges", null), h("pos-picture", null), h("ion-card-title", null, h("pos-label", null))), h("ion-card-content", null, h("pos-description", null)))), h("ion-col", { size: "12", "size-sm": true }, h("pos-literals", null)), h("ion-col", { size: "12", "size-sm": true }, h("pos-relations", null), h("pos-reverse-relations", null)))));
-  }
-}, [0, "pos-app-generic"]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["pos-app-generic", "ion-badge", "ion-card", "ion-card-content", "ion-card-header", "ion-card-title", "ion-col", "ion-grid", "ion-icon", "ion-item", "ion-item-divider", "ion-item-group", "ion-label", "ion-list", "ion-note", "ion-progress-bar", "ion-ripple-effect", "ion-row", "ion-skeleton-text", "pos-description", "pos-image", "pos-label", "pos-literals", "pos-picture", "pos-relations", "pos-resource", "pos-reverse-relations", "pos-rich-link", "pos-type-badges"];
-  components.forEach(tagName => { switch (tagName) {
-    case "pos-app-generic":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PosAppGeneric);
-      }
-      break;
-    case "ion-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$s();
-      }
-      break;
-    case "ion-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$r();
-      }
-      break;
-    case "ion-card-content":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$q();
-      }
-      break;
-    case "ion-card-header":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$p();
-      }
-      break;
-    case "ion-card-title":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$o();
-      }
-      break;
-    case "ion-col":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$n();
-      }
-      break;
-    case "ion-grid":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$m();
-      }
-      break;
-    case "ion-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$l();
-      }
-      break;
-    case "ion-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$k();
-      }
-      break;
-    case "ion-item-divider":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$j();
-      }
-      break;
-    case "ion-item-group":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$i();
-      }
-      break;
-    case "ion-label":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$h();
-      }
-      break;
-    case "ion-list":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$g();
-      }
-      break;
-    case "ion-note":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$f();
-      }
-      break;
-    case "ion-progress-bar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$e();
-      }
-      break;
-    case "ion-ripple-effect":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$d();
-      }
-      break;
-    case "ion-row":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "ion-skeleton-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "pos-description":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "pos-image":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "pos-label":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "pos-literals":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "pos-picture":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "pos-relations":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "pos-resource":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "pos-reverse-relations":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "pos-rich-link":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "pos-type-badges":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { PosAppGeneric as P, defineCustomElement as d };

package/dist/components/pos-app-image-viewer2.js

@@ -1,162 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$k } from './badge.js';
-import { d as defineCustomElement$j } from './card.js';
-import { d as defineCustomElement$i } from './card-header.js';
-import { d as defineCustomElement$h } from './card-title.js';
-import { d as defineCustomElement$g } from './col.js';
-import { d as defineCustomElement$f } from './grid.js';
-import { d as defineCustomElement$e } from './icon.js';
-import { d as defineCustomElement$d } from './item.js';
-import { d as defineCustomElement$c } from './item-divider.js';
-import { d as defineCustomElement$b } from './item-group.js';
-import { d as defineCustomElement$a } from './label.js';
-import { d as defineCustomElement$9 } from './list.js';
-import { d as defineCustomElement$8 } from './note.js';
-import { d as defineCustomElement$7 } from './ripple-effect.js';
-import { d as defineCustomElement$6 } from './row.js';
-import { d as defineCustomElement$5 } from './skeleton-text.js';
-import { d as defineCustomElement$4 } from './pos-image2.js';
-import { d as defineCustomElement$3 } from './pos-label2.js';
-import { d as defineCustomElement$2 } from './pos-literals2.js';
-import { d as defineCustomElement$1 } from './pos-type-badges2.js';
-
-const PosAppImageViewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.subscribeResource = createEvent(this, "pod-os:resource", 7);
-    this.receiveResource = (resource) => {
-      this.resource = resource;
-    };
-    this.resource = undefined;
-  }
-  componentWillLoad() {
-    subscribeResource(this);
-  }
-  render() {
-    if (!this.resource) {
-      return null;
-    }
-    return (h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "12", "size-sm": true }, h("pos-image", { src: this.resource.uri })), h("ion-col", { size: "12", "size-sm": true }, h("ion-card", null, h("ion-card-header", null, h("ion-card-title", null, h("pos-label", null), h("pos-type-badges", null)), h("pos-literals", null)))))));
-  }
-  static get style() { return "pos-image {\n          --max-width: 100%;\n        }"; }
-}, [1, "pos-app-image-viewer", {
-    "resource": [32]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["pos-app-image-viewer", "ion-badge", "ion-card", "ion-card-header", "ion-card-title", "ion-col", "ion-grid", "ion-icon", "ion-item", "ion-item-divider", "ion-item-group", "ion-label", "ion-list", "ion-note", "ion-ripple-effect", "ion-row", "ion-skeleton-text", "pos-image", "pos-label", "pos-literals", "pos-type-badges"];
-  components.forEach(tagName => { switch (tagName) {
-    case "pos-app-image-viewer":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PosAppImageViewer);
-      }
-      break;
-    case "ion-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$k();
-      }
-      break;
-    case "ion-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$j();
-      }
-      break;
-    case "ion-card-header":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$i();
-      }
-      break;
-    case "ion-card-title":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$h();
-      }
-      break;
-    case "ion-col":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$g();
-      }
-      break;
-    case "ion-grid":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$f();
-      }
-      break;
-    case "ion-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$e();
-      }
-      break;
-    case "ion-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$d();
-      }
-      break;
-    case "ion-item-divider":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "ion-item-group":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "ion-label":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "ion-list":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "ion-note":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "ion-ripple-effect":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "ion-row":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ion-skeleton-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "pos-image":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "pos-label":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "pos-literals":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "pos-type-badges":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { PosAppImageViewer as P, defineCustomElement as d };

package/dist/components/pos-app-pdf-viewer.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface PosAppPdfViewer extends Components.PosAppPdfViewer, HTMLElement {}
-export const PosAppPdfViewer: {
-  prototype: PosAppPdfViewer;
-  new (): PosAppPdfViewer;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/pos-app-pdf-viewer.js

@@ -1,6 +0,0 @@
-import { P as PosAppPdfViewer$1, d as defineCustomElement$1 } from './pos-app-pdf-viewer2.js';
-
-const PosAppPdfViewer = PosAppPdfViewer$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PosAppPdfViewer, defineCustomElement };