@pod-os/elements 0.21.1-aba77d3.0 → 0.22.1

package/dist/cjs/ion-card_30.cjs.entry.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-84f24f31.js');
+const index = require('./index-df9f178c.js');
 const helpers = require('./helpers-95c22e6d.js');
 const theme = require('./theme-187bbc7d.js');
-const ionicGlobal = require('./ionic-global-c0341cea.js');
+const ionicGlobal = require('./ionic-global-d1c24b81.js');
 const dir = require('./dir-e6b438e6.js');
 const index$1 = require('./index-3129b55a.js');
-const BrokenFile = require('./BrokenFile-218eee3c.js');
+const BrokenFile = require('./BrokenFile-769cb073.js');
 const index$2 = require('./index-933ad1f6.js');
 const ResourceAware = require('./ResourceAware-7b6501ae.js');
 require('./gesture-controller-85b9b0a5.js');
-const overlays = require('./overlays-71da6168.js');
+const overlays = require('./overlays-c1b43779.js');
 const PodOsAware = require('./PodOsAware-a16ddb44.js');
 require('./index-957a289d.js');
-require('./hardware-back-button-5dc20979.js');
+require('./hardware-back-button-a38cd954.js');
 require('./framework-delegate-a257df68.js');
 require('./index-5fa17650.js');
 
@@ -1061,7 +1061,6 @@ const PosAddNewThingStyle0 = posAddNewThingCss;
 const PosAddNewThing = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.referenceUri = undefined;
     }
     openDialog() {
         this.dialog.showModal();
@@ -1999,9 +1998,8 @@ const PosApp = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.sessionRestoredEmitter = index.createEvent(this, "pod-os:session-restored", 7);
-        this.disconnected$ = new Subject();
-        this.os = undefined;
         this.restorePreviousSession = false;
+        this.disconnected$ = new Subject();
     }
     componentWillLoad() {
         this.os = createPodOS();
@@ -2044,13 +2042,19 @@ const PosApp = class {
     }
 };
 
-const posAppBrowserCss = "pos-router{margin:0;padding:0;display:flex;flex-direction:column;height:100vh}pos-navigation-bar{max-width:var(--width-lg);margin:0}pos-add-new-thing,pos-login{flex:0 1 auto;}header,footer{display:flex;gap:var(--size-1);height:auto;justify-content:center;align-items:center;padding:var(--size-1)}footer svg{width:var(--size-5);height:var(--size-5)}footer{font-size:var(--scale-fluid-000)}header{flex-wrap:wrap;padding:0 var(--size-8)}main{flex:1;max-height:100vh;overflow:auto}@media (max-width: 640px){header{padding:0 var(--size-1) var(--size-1);justify-content:space-between}pos-navigation-bar{flex-basis:100%;order:0}pos-add-new-thing,pos-login{order:1}}";
+const posAppBrowserCss = "pos-router{margin:0;padding:0;display:flex;flex-direction:column;height:100%}pos-navigation-bar{max-width:var(--width-lg);margin:0}pos-add-new-thing,pos-login{flex:0 1 auto;}header,footer{display:flex;gap:var(--size-1);height:auto;justify-content:center;align-items:center;padding:var(--size-1)}footer svg{width:var(--size-5);height:var(--size-5)}footer{font-size:var(--scale-fluid-000)}header{flex-wrap:wrap;padding:0 var(--size-8)}main{flex:1;max-height:100vh;overflow:auto}@media (max-width: 640px){header{padding:0 var(--size-1) var(--size-1);justify-content:space-between}pos-navigation-bar{flex-basis:100%;order:0}pos-add-new-thing,pos-login{order:1}}";
 const PosAppBrowserStyle0 = posAppBrowserCss;
 
 const PosAppBrowser = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.restorePreviousSession = false;
+        /**
+         * The mode the app is running in:
+         *
+         * - standalone:  use this when you deploy it as a standalone web application
+         * - pod: use this when you host this app as a default interface for you pod
+         */
         this.mode = 'standalone';
         this.uri = '';
     }
@@ -2095,7 +2099,6 @@ const PosDescription = class {
         this.receiveResource = (resource) => {
             this.resource = resource;
         };
-        this.resource = undefined;
     }
     componentWillLoad() {
         ResourceAware.subscribeResource(this);
@@ -2190,18 +2193,14 @@ const PosImage = class {
         index.registerInstance(this, hostRef);
         this.initializeOsEmitter = index.createEvent(this, "pod-os:init", 7);
         this.resourceLoadedEmitter = index.createEvent(this, "pod-os:resource-loaded", 7);
+        /**
+         * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.
+         */
+        this.blurredBackground = false;
+        this.loading = true;
         this.setOs = async (os) => {
             this.os = os;
         };
-        this.src = undefined;
-        this.alt = undefined;
-        this.blurredBackground = false;
-        this.os = undefined;
-        this.dataUri = undefined;
-        this.brokenFile = undefined;
-        this.networkError = undefined;
-        this.imageError = undefined;
-        this.loading = true;
     }
     componentWillLoad() {
         BrokenFile.store.onChange('isLoggedIn', () => this.fetchBlob());
@@ -2277,7 +2276,6 @@ const PosLabel = class {
         this.receiveResource = (resource) => {
             this.resource = resource;
         };
-        this.resource = undefined;
     }
     componentWillLoad() {
         ResourceAware.subscribeResource(this);
@@ -2297,7 +2295,6 @@ const PosLogin = class {
         this.setOs = async (os) => {
             this.os = os;
         };
-        this.os = undefined;
     }
     componentWillLoad() {
         this.initializeOsEmitter.emit(this.setOs);
@@ -2356,15 +2353,14 @@ const PosNavigationBar = class {
         index.registerInstance(this, hostRef);
         this.subscribePodOs = index.createEvent(this, "pod-os:init", 7);
         this.linkEmitter = index.createEvent(this, "pod-os:link", 7);
-        this.receivePodOs = async (os) => {
-            this.os = os;
-        };
-        this.os = undefined;
         this.uri = '';
         this.value = this.uri;
         this.searchIndex = undefined;
         this.suggestions = [];
         this.selectedIndex = -1;
+        this.receivePodOs = async (os) => {
+            this.os = os;
+        };
     }
     componentWillLoad() {
         PodOsAware.subscribePodOs(this);
@@ -2434,15 +2430,10 @@ const PosNewThingForm = class {
         this.linkEmitter = index.createEvent(this, "pod-os:link", 7);
         this.errorEmitter = index.createEvent(this, "pod-os:error", 7);
         this.subscribePodOs = index.createEvent(this, "pod-os:init", 7);
+        this.canSubmit = false;
         this.receivePodOs = async (os) => {
             this.os = os;
         };
-        this.referenceUri = undefined;
-        this.os = undefined;
-        this.newUri = undefined;
-        this.name = undefined;
-        this.selectedTypeUri = undefined;
-        this.canSubmit = false;
     }
     validate() {
         this.canSubmit = Boolean(this.name && this.selectedTypeUri);
@@ -2491,11 +2482,13 @@ const PosPicture = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.subscribeResource = index.createEvent(this, "pod-os:resource", 7);
+        /**
+         * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.
+         */
+        this.blurredBackground = false;
         this.receiveResource = (resource) => {
             this.resource = resource;
         };
-        this.blurredBackground = false;
-        this.resource = undefined;
     }
     componentWillLoad() {
         ResourceAware.subscribeResource(this);
@@ -2514,16 +2507,12 @@ const PosResource = class {
         index.registerInstance(this, hostRef);
         this.subscribePodOs = index.createEvent(this, "pod-os:init", 7);
         this.resourceLoadedEmitter = index.createEvent(this, "pod-os:resource-loaded", 7);
-        this.receivePodOs = async (os) => {
-            this.os = os;
-        };
-        this.os = undefined;
-        this.resource = undefined;
         this.consumers = [];
-        this.uri = undefined;
         this.lazy = false;
-        this.error = undefined;
         this.loading = true;
+        this.receivePodOs = async (os) => {
+            this.os = os;
+        };
     }
     componentWillLoad() {
         BrokenFile.store.onChange('isLoggedIn', () => this.loadResource());
@@ -2579,14 +2568,13 @@ const PosResource = class {
     }; }
 };
 
-const posRichLinkCss = ":host {\n  --background-color: inherit;\n  --label-color: var(--color-grey-900);\n  --description-color: var(--color-grey-900);\n  --uri-color: var(--color-grey-600);\n  --font-family: var(--font-sans);\n}\n\np.content {\n  background-color: var(--background-color);\n  line-height: var(--line-xs);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: baseline;\n  gap: var(--size-1);\n\n  .url {\n    font-size: var(--scale-000);\n    color: var(--color-grey-500);\n  }\n}\n\na {\n  color: var(--label-color);\n  max-width: var(--prose-lg);\n  text-decoration: underline;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n  color: var(--label-color);\n  font-size: var(--scale-fluid-0);\n  margin-bottom: var(--size-1);\n}\n\npos-description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-weight: var(--weight-light);\n  color: var(--description-color);\n  font-size: var(--scale-fluid-0);\n}\n";
+const posRichLinkCss = ":host {\n  --background-color: inherit;\n  --label-color: var(--color-grey-900);\n  --description-color: var(--color-grey-900);\n  --uri-color: var(--color-grey-600);\n  --font-family: var(--font-sans);\n}\n\np.content {\n  background-color: var(--background-color);\n  line-height: var(--line-xs);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: baseline;\n  gap: var(--size-1);\n\n  .url {\n    font-size: var(--scale-fluid-1);\n    color: var(--color-grey-500);\n  }\n}\n\na {\n  color: var(--label-color);\n  max-width: var(--prose-lg);\n  text-decoration: underline;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n  color: var(--label-color);\n  font-size: var(--scale-fluid-2);\n  margin-bottom: var(--size-1);\n}\n\npos-description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-weight: var(--weight-light);\n  color: var(--description-color);\n  font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n  pos-label {\n    font-size: var(--scale-fluid-0);\n  }\n  pos-description {\n    font-size: var(--scale-fluid-1);\n  }\n\n  p.content {\n    .url {\n      font-size: var(--scale-fluid-000);\n    }\n  }\n}\n";
 const PosRichLinkStyle0 = posRichLinkCss;
 
 const PosRichLink = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.linkEmitter = index.createEvent(this, "pod-os:link", 7);
-        this.uri = undefined;
     }
     render() {
         return (index.h("pos-resource", { key: 'f9ee2a2e6403733db429593ccc0900efa39efc9f', lazy: true, uri: this.uri }, index.h("p", { key: '8d8d575619fb66ee28a357c0a1fbcd7e25fd23c3', class: "content" }, index.h("a", { key: '3c517a107acbbd56865172f90a226f77bcfd052c', href: this.uri, onClick: e => {
@@ -2893,8 +2881,13 @@ const PosRouter = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.routeChanged = index.createEvent(this, "pod-os:route-changed", 7);
+        /**
+         * The mode defines what default URI will be used, if no URI param is given
+         *
+         * - standalone: reroute to pod-os:dashboard
+         * - pod: reroute to the URI that is shown in the actual browser
+         */
         this.mode = 'standalone';
-        this.uri = undefined;
     }
     linkClicked(e) {
         this.navigate(e.detail);
@@ -2931,13 +2924,12 @@ const PosSelectTerm = class {
         index.registerInstance(this, hostRef);
         this.subscribePodOs = index.createEvent(this, "pod-os:init", 7);
         this.termSelected = index.createEvent(this, "pod-os:term-selected", 7);
-        this.receivePodOs = async (os) => {
-            this.os = os;
-        };
-        this.os = undefined;
         this.placeholder = 'Type to search...';
         this.value = '';
         this.terms = [];
+        this.receivePodOs = async (os) => {
+            this.os = os;
+        };
     }
     componentWillLoad() {
         PodOsAware.subscribePodOs(this);
@@ -2998,7 +2990,6 @@ const PosTypeRouter = class {
         this.receiveResource = (resource) => {
             this.types = resource.types();
         };
-        this.types = undefined;
     }
     componentWillLoad() {
         ResourceAware.subscribeResource(this);