@pod-os/elements 0.0.1 → 0.0.2

package/dist/cjs/{ion-app_32.cjs.entry.js → ion-app_33.cjs.entry.js}

@@ -293,27 +293,6 @@ CardHeader.style = {
   md: cardHeaderMdCss
 };
 
-const cardSubtitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, #666666);margin-left:0;margin-right:0;margin-top:0;margin-bottom:4px;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:12px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase}";
-
-const cardSubtitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-550, #737373);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:14px;font-weight:500}";
-
-const CardSubtitle = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    const mode = ionicGlobal.getIonMode(this);
-    return (index.h(index.Host, { role: "heading", "aria-level": "3", class: theme.createColorClasses(this.color, {
-        'ion-inherit-color': true,
-        [mode]: true
-      }) }, index.h("slot", null)));
-  }
-};
-CardSubtitle.style = {
-  ios: cardSubtitleIosCss,
-  md: cardSubtitleMdCss
-};
-
 const cardTitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-text-color, #000);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:28px;font-weight:700;line-height:1.2}";
 
 const cardTitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-850, #262626);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:20px;font-weight:500;line-height:1.2}";
@@ -2150,7 +2129,7 @@ const createStore = (defaultState, shouldUpdate) => {
 
 const getIdpUrl = () => prompt('Please enter your Identity Provider URL', 'http://localhost:3000');
 
-const { state } = createStore({
+const store = createStore({
   getIdpUrl,
   isLoggedIn: false,
   webId: '',
@@ -2169,11 +2148,11 @@ const PosApp = class {
     this.os = createPodOS();
     this.os.handleIncomingRedirect();
     this.os.trackSession(sessionInfo => {
-      state.isLoggedIn = sessionInfo.isLoggedIn;
-      state.webId = sessionInfo.webId;
+      store.state.isLoggedIn = sessionInfo.isLoggedIn;
+      store.state.webId = sessionInfo.webId;
     });
   }
-  async consumeOs(event) {
+  async initializeOs(event) {
     event.stopPropagation();
     event.detail(this.os);
   }
@@ -2182,16 +2161,21 @@ const PosApp = class {
   }
 };
 
-const PosDemoApp = class {
+const PosAppGeneric = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.url = 'http://localhost:3000/alice/games/minecraft#it';
   }
-  linkClicked(e) {
-    this.url = e.detail;
+  render() {
+    return (index.h("ion-grid", null, index.h("ion-row", null, index.h("ion-col", { size: "12", "size-sm": true }, index.h("ion-card", null, index.h("ion-card-header", null, index.h("img", { src: "https://dummyimage.com/250/ffffff/000000" }), index.h("ion-card-title", null, index.h("pos-label", null))), index.h("ion-card-content", null, index.h("pos-description", null)))), index.h("ion-col", { size: "12", "size-sm": true }, index.h("pos-literals", null)), index.h("ion-col", { size: "12", "size-sm": true }, index.h("pos-relations", null)))));
+  }
+};
+
+const PosDemoApp = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h("pos-app", null, index.h("ion-header", null, index.h("ion-toolbar", null, index.h("ion-title", { slot: "start" }, "pod os"), index.h("pos-login", null))), index.h("ion-content", { class: "ion-padding" }, index.h("pos-resource", { uri: this.url }, index.h("ion-grid", null, index.h("ion-row", null, index.h("ion-col", { size: "12", "size-sm": true }, index.h("ion-card", null, index.h("ion-card-header", null, index.h("img", { src: "https://upload.wikimedia.org/wikipedia/de/5/57/Minecraft_logo-SVG.svg" }), index.h("ion-card-subtitle", null, "VideoGame"), index.h("ion-card-title", null, index.h("pos-label", null))), index.h("ion-card-content", null, index.h("pos-description", null)))), index.h("ion-col", { size: "12", "size-sm": true }, index.h("pos-literals", null)), index.h("ion-col", { size: "12", "size-sm": true }, index.h("pos-relations", null)))))), index.h("ion-footer", null, index.h("ion-toolbar", null, index.h("ion-title", null, "Footer")))));
+    return (index.h("pos-app", null, index.h("ion-header", null, index.h("ion-toolbar", null, index.h("ion-title", { slot: "start" }, "pod os"), index.h("pos-login", null))), index.h("ion-content", null, index.h("pos-router", null)), index.h("ion-footer", null, index.h("ion-toolbar", null, index.h("ion-title", null, "Footer")))));
   }
 };
 
@@ -2211,7 +2195,7 @@ const PosDescription = class {
   }
 };
 
-const PosLabel$1 = class {
+const PosLabel = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.getResource = index.createEvent(this, "pod-os:resource", 7);
@@ -2248,23 +2232,23 @@ const PosLiterals = class {
 const PosLogin = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.consumeOsEmitter = index.createEvent(this, "consumeOs", 7);
+    this.initializeOsEmitter = index.createEvent(this, "pod-os:init", 7);
     this.setOs = async (os) => {
       this.os = os;
     };
   }
   componentWillLoad() {
-    this.consumeOsEmitter.emit(this.setOs);
+    this.initializeOsEmitter.emit(this.setOs);
   }
   login() {
-    const idp = state.getIdpUrl();
+    const idp = store.state.getIdpUrl();
     this.os.login(idp);
   }
   logout() {
     this.os.logout();
   }
   render() {
-    return (index.h(index.Host, null, state.isLoggedIn ? (index.h("pos-resource", { uri: state.webId }, index.h("pos-label", null))) : (''), !state.isLoggedIn && index.h("ion-button", { onClick: () => this.login() }, "Login"), state.isLoggedIn && index.h("ion-button", { onClick: () => this.logout() }, "Logout")));
+    return (index.h(index.Host, null, store.state.isLoggedIn ? (index.h("pos-resource", { uri: store.state.webId }, index.h("pos-label", null))) : (''), !store.state.isLoggedIn && index.h("ion-button", { onClick: () => this.login() }, "Login"), store.state.isLoggedIn && index.h("ion-button", { onClick: () => this.logout() }, "Logout")));
   }
 };
 
@@ -2289,7 +2273,7 @@ const PosRelations = class {
 const PosResource = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.consumeOsEmitter = index.createEvent(this, "consumeOs", 7);
+    this.initializeOsEmitter = index.createEvent(this, "pod-os:init", 7);
     this.consumers = [];
     this.lazy = false;
     this.loading = true;
@@ -2298,7 +2282,8 @@ const PosResource = class {
     };
   }
   componentWillLoad() {
-    this.consumeOsEmitter.emit(this.setOs);
+    store.onChange('isLoggedIn', () => this.loadResource());
+    this.initializeOsEmitter.emit(this.setOs);
   }
   async provideResource(event) {
     event.stopPropagation();
@@ -2320,6 +2305,7 @@ const PosResource = class {
         await this.os.fetch(this.uri);
       }
       this.resource = this.os.store.get(this.uri);
+      this.error = null;
       this.consumers.forEach(consumer => {
         consumer.detail(this.resource);
       });
@@ -2346,7 +2332,7 @@ const PosResource = class {
   }; }
 };
 
-const PosLabel = class {
+const PosRichLink = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.linkEmitter = index.createEvent(this, "pod-os:link", 7);
@@ -2359,12 +2345,407 @@ const PosLabel = class {
   }
 };
 
+const createRouter = (opts) => {
+    var _a;
+    const win = window;
+    const url = new URL(win.location.href);
+    const parseURL = (_a = opts === null || opts === void 0 ? void 0 : opts.parseURL) !== null && _a !== void 0 ? _a : DEFAULT_PARSE_URL;
+    const { state, onChange, dispose } = createStore({
+        url,
+        activePath: parseURL(url)
+    }, (newV, oldV, prop) => {
+        if (prop === 'url') {
+            return newV.href !== oldV.href;
+        }
+        return newV !== oldV;
+    });
+    const push = (href) => {
+        history.pushState(null, null, href);
+        const url = new URL(href, document.baseURI);
+        state.url = url;
+        state.activePath = parseURL(url);
+    };
+    const match = (routes) => {
+        const { activePath } = state;
+        for (let route of routes) {
+            const params = matchPath(activePath, route.path);
+            if (params) {
+                if (route.to != null) {
+                    const to = (typeof route.to === 'string')
+                        ? route.to
+                        : route.to(activePath);
+                    push(to);
+                    return match(routes);
+                }
+                else {
+                    return { params, route };
+                }
+            }
+        }
+        return undefined;
+    };
+    const navigationChanged = () => {
+        const url = new URL(win.location.href);
+        state.url = url;
+        state.activePath = parseURL(url);
+    };
+    const Switch = (_, childrenRoutes) => {
+        const result = match(childrenRoutes);
+        if (result) {
+            if (typeof result.route.jsx === 'function') {
+                return result.route.jsx(result.params);
+            }
+            else {
+                return result.route.jsx;
+            }
+        }
+    };
+    const disposeRouter = () => {
+        win.removeEventListener('popstate', navigationChanged);
+        dispose();
+    };
+    const router = {
+        Switch,
+        get url() {
+            return state.url;
+        },
+        get activePath() {
+            return state.activePath;
+        },
+        push,
+        onChange: onChange,
+        dispose: disposeRouter,
+    };
+    // Initial update
+    navigationChanged();
+    // Listen URL changes
+    win.addEventListener('popstate', navigationChanged);
+    return router;
+};
+const Route = (props, children) => {
+    var _a;
+    if ('to' in props) {
+        return {
+            path: props.path,
+            to: props.to,
+        };
+    }
+    return {
+        path: props.path,
+        id: props.id,
+        jsx: (_a = props.render) !== null && _a !== void 0 ? _a : children,
+    };
+};
+const matchPath = (pathname, path) => {
+    if (typeof path === 'string') {
+        if (path === pathname) {
+            return {};
+        }
+    }
+    else if (typeof path === 'function') {
+        const params = path(pathname);
+        if (params) {
+            return params === true
+                ? {}
+                : { ...params };
+        }
+    }
+    else {
+        const results = path.exec(pathname);
+        if (results) {
+            path.lastIndex = 0;
+            return { ...results };
+        }
+    }
+    return undefined;
+};
+const DEFAULT_PARSE_URL = (url) => {
+    return url.pathname.toLowerCase();
+};
+
+/**
+ * TS adaption of https://github.com/pillarjs/path-to-regexp/blob/master/index.js
+ */
+/**
+ * Default configs.
+ */
+const DEFAULT_DELIMITER = '/';
+const DEFAULT_DELIMITERS = './';
+/**
+ * The main path matching regexp utility.
+ */
+const PATH_REGEXP = new RegExp([
+    // Match escaped characters that would otherwise appear in future matches.
+    // This allows the user to escape special characters that won't transform.
+    '(\\\\.)',
+    // Match Express-style parameters and un-named parameters with a prefix
+    // and optional suffixes. Matches appear as:
+    //
+    // "/:test(\\d+)?" => ["/", "test", "\d+", undefined, "?"]
+    // "/route(\\d+)"  => [undefined, undefined, undefined, "\d+", undefined]
+    '(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?'
+].join('|'), 'g');
+/**
+ * Parse a string for the raw tokens.
+ */
+const parse = (str, options) => {
+    var tokens = [];
+    var key = 0;
+    var index = 0;
+    var path = '';
+    var defaultDelimiter = (options && options.delimiter) || DEFAULT_DELIMITER;
+    var delimiters = (options && options.delimiters) || DEFAULT_DELIMITERS;
+    var pathEscaped = false;
+    var res;
+    while ((res = PATH_REGEXP.exec(str)) !== null) {
+        var m = res[0];
+        var escaped = res[1];
+        var offset = res.index;
+        path += str.slice(index, offset);
+        index = offset + m.length;
+        // Ignore already escaped sequences.
+        if (escaped) {
+            path += escaped[1];
+            pathEscaped = true;
+            continue;
+        }
+        var prev = '';
+        var next = str[index];
+        var name = res[2];
+        var capture = res[3];
+        var group = res[4];
+        var modifier = res[5];
+        if (!pathEscaped && path.length) {
+            var k = path.length - 1;
+            if (delimiters.indexOf(path[k]) > -1) {
+                prev = path[k];
+                path = path.slice(0, k);
+            }
+        }
+        // Push the current path onto the tokens.
+        if (path) {
+            tokens.push(path);
+            path = '';
+            pathEscaped = false;
+        }
+        var partial = prev !== '' && next !== undefined && next !== prev;
+        var repeat = modifier === '+' || modifier === '*';
+        var optional = modifier === '?' || modifier === '*';
+        var delimiter = prev || defaultDelimiter;
+        var pattern = capture || group;
+        tokens.push({
+            name: name || key++,
+            prefix: prev,
+            delimiter: delimiter,
+            optional: optional,
+            repeat: repeat,
+            partial: partial,
+            pattern: pattern ? escapeGroup(pattern) : '[^' + escapeString(delimiter) + ']+?'
+        });
+    }
+    // Push any remaining characters.
+    if (path || index < str.length) {
+        tokens.push(path + str.substr(index));
+    }
+    return tokens;
+};
+/**
+ * Escape a regular expression string.
+ */
+const escapeString = (str) => {
+    return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, '\\$1');
+};
+/**
+ * Escape the capturing group by escaping special characters and meaning.
+ */
+const escapeGroup = (group) => {
+    return group.replace(/([=!:$/()])/g, '\\$1');
+};
+/**
+ * Get the flags for a regexp from the options.
+ */
+const flags = (options) => {
+    return options && options.sensitive ? '' : 'i';
+};
+/**
+ * Pull out keys from a regexp.
+ */
+const regexpToRegexp = (path, keys) => {
+    if (!keys)
+        return path;
+    // Use a negative lookahead to match only capturing groups.
+    var groups = path.source.match(/\((?!\?)/g);
+    if (groups) {
+        for (var i = 0; i < groups.length; i++) {
+            keys.push({
+                name: i,
+                prefix: null,
+                delimiter: null,
+                optional: false,
+                repeat: false,
+                partial: false,
+                pattern: null
+            });
+        }
+    }
+    return path;
+};
+/**
+ * Transform an array into a regexp.
+ */
+const arrayToRegexp = (path, keys, options) => {
+    var parts = [];
+    for (var i = 0; i < path.length; i++) {
+        parts.push(pathToRegexp(path[i], keys, options).source);
+    }
+    return new RegExp('(?:' + parts.join('|') + ')', flags(options));
+};
+/**
+ * Create a path regexp from string input.
+ */
+const stringToRegexp = (path, keys, options) => {
+    return tokensToRegExp(parse(path, options), keys, options);
+};
+/**
+ * Expose a function for taking tokens and returning a RegExp.
+ */
+const tokensToRegExp = (tokens, keys, options) => {
+    options = options || {};
+    var strict = options.strict;
+    var end = options.end !== false;
+    var delimiter = escapeString(options.delimiter || DEFAULT_DELIMITER);
+    var delimiters = options.delimiters || DEFAULT_DELIMITERS;
+    var endsWith = [].concat(options.endsWith || []).map(escapeString).concat('$').join('|');
+    var route = '';
+    var isEndDelimited = false;
+    // Iterate over the tokens and create our regexp string.
+    for (var i = 0; i < tokens.length; i++) {
+        var token = tokens[i];
+        if (typeof token === 'string') {
+            route += escapeString(token);
+            isEndDelimited = i === tokens.length - 1 && delimiters.indexOf(token[token.length - 1]) > -1;
+        }
+        else {
+            var prefix = escapeString(token.prefix || '');
+            var capture = token.repeat
+                ? '(?:' + token.pattern + ')(?:' + prefix + '(?:' + token.pattern + '))*'
+                : token.pattern;
+            if (keys)
+                keys.push(token);
+            if (token.optional) {
+                if (token.partial) {
+                    route += prefix + '(' + capture + ')?';
+                }
+                else {
+                    route += '(?:' + prefix + '(' + capture + '))?';
+                }
+            }
+            else {
+                route += prefix + '(' + capture + ')';
+            }
+        }
+    }
+    if (end) {
+        if (!strict)
+            route += '(?:' + delimiter + ')?';
+        route += endsWith === '$' ? '$' : '(?=' + endsWith + ')';
+    }
+    else {
+        if (!strict)
+            route += '(?:' + delimiter + '(?=' + endsWith + '))?';
+        if (!isEndDelimited)
+            route += '(?=' + delimiter + '|' + endsWith + ')';
+    }
+    return new RegExp('^' + route, flags(options));
+};
+/**
+ * Normalize the given path string, returning a regular expression.
+ *
+ * An empty array can be passed in for the keys, which will hold the
+ * placeholder key descriptions. For example, using `/user/:id`, `keys` will
+ * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`.
+ */
+const pathToRegexp = (path, keys, options) => {
+    if (path instanceof RegExp) {
+        return regexpToRegexp(path, keys);
+    }
+    if (Array.isArray(path)) {
+        return arrayToRegexp(path, keys, options);
+    }
+    return stringToRegexp(path, keys, options);
+};
+
+let cacheCount = 0;
+const patternCache = {};
+const cacheLimit = 10000;
+// Memoized function for creating the path match regex
+const compilePath = (pattern, options) => {
+    const cacheKey = `${options.end}${options.strict}`;
+    const cache = patternCache[cacheKey] || (patternCache[cacheKey] = {});
+    const cachePattern = JSON.stringify(pattern);
+    if (cache[cachePattern]) {
+        return cache[cachePattern];
+    }
+    const keys = [];
+    const re = pathToRegexp(pattern, keys, options);
+    const compiledPattern = { re, keys };
+    if (cacheCount < cacheLimit) {
+        cache[cachePattern] = compiledPattern;
+        cacheCount += 1;
+    }
+    return compiledPattern;
+};
+const match = (pathname, options = {}) => {
+    const { exact = false, strict = false } = options;
+    const { re, keys } = compilePath(pathname, { end: exact, strict });
+    return (path) => {
+        const match = re.exec(path);
+        if (!match) {
+            return undefined;
+        }
+        const [url, ...values] = match;
+        const isExact = path === url;
+        if (exact && !isExact) {
+            return undefined;
+        }
+        return keys.reduce((memo, key, index) => {
+            memo[key.name] = values[index];
+            return memo;
+        }, {});
+    };
+};
+
+const Router = createRouter();
+const PosRouter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  linkClicked(e) {
+    this.navigate(e.detail);
+  }
+  componentWillLoad() {
+    this.updateUri();
+    Router.onChange('url', () => {
+      this.updateUri();
+    });
+  }
+  navigate(uri) {
+    Router.push('?uri=' + encodeURIComponent(uri));
+  }
+  updateUri() {
+    this.uri = new URLSearchParams(window.location.search).get('uri') || window.location.href;
+  }
+  render() {
+    console.log('render router', this.uri);
+    return (index.h(Router.Switch, null, index.h(Route, { path: match('', { exact: false }) }, index.h("pos-resource", { key: this.uri, uri: this.uri }, index.h("pos-app-generic", null)))));
+  }
+};
+
 exports.ion_app = App;
 exports.ion_button = Button;
 exports.ion_card = Card;
 exports.ion_card_content = CardContent;
 exports.ion_card_header = CardHeader;
-exports.ion_card_subtitle = CardSubtitle;
 exports.ion_card_title = CardTitle;
 exports.ion_col = Col;
 exports.ion_content = Content;
@@ -2383,11 +2764,13 @@ exports.ion_row = Row;
 exports.ion_title = ToolbarTitle;
 exports.ion_toolbar = Toolbar;
 exports.pos_app = PosApp;
+exports.pos_app_generic = PosAppGeneric;
 exports.pos_demo_app = PosDemoApp;
 exports.pos_description = PosDescription;
-exports.pos_label = PosLabel$1;
+exports.pos_label = PosLabel;
 exports.pos_literals = PosLiterals;
 exports.pos_login = PosLogin;
 exports.pos_relations = PosRelations;
 exports.pos_resource = PosResource;
-exports.pos_rich_link = PosLabel;
+exports.pos_rich_link = PosRichLink;
+exports.pos_router = PosRouter;

package/dist/cjs/ion-card-subtitle.cjs.entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6bf2cd3d.js');
+const ionicGlobal = require('./ionic-global-167e590d.js');
+const theme = require('./theme-98ccfc24.js');
+
+const cardSubtitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, #666666);margin-left:0;margin-right:0;margin-top:0;margin-bottom:4px;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:12px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase}";
+
+const cardSubtitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-550, #737373);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:14px;font-weight:500}";
+
+const CardSubtitle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { role: "heading", "aria-level": "3", class: theme.createColorClasses(this.color, {
+        'ion-inherit-color': true,
+        [mode]: true
+      }) }, index.h("slot", null)));
+  }
+};
+CardSubtitle.style = {
+  ios: cardSubtitleIosCss,
+  md: cardSubtitleMdCss
+};
+
+exports.ion_card_subtitle = CardSubtitle;