@vandeurenglenn/lite-elements 0.3.40 → 0.3.42

package/exports/selector/selector.d.ts

@@ -1,5 +1,5 @@
 import { SelectorBase } from '../mixins/selector-mixin.js';
 export declare class CustomSelector extends SelectorBase {
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/simple-hash-router.js

@@ -0,0 +1,111 @@
+/**
+ * @description
+ * A hash based router meant to work together with custom-pages, custom-select etc
+ *
+ * @example
+ * new HashRouter({
+ *   host: document.querySelector('app-shell'),
+ *   fallback: {route: 'home' params: {...}},
+ *   routes: [{
+ *     'home': {
+ *       import: 'views/home.js'
+ *     }
+ *   }]
+ * })
+ *
+ */
+class SimpleHashRouter {
+    routes;
+    constructor({ host, fallback, routes }) {
+        this.host = host;
+        this.routes = routes;
+        globalThis.onhashchange = this.#onhashchange;
+        if (!location.hash && fallback?.route) {
+            location.hash = HashRouter.bang(fallback.params ? `${fallback.route}?${HashRouter.queryIt(fallback.params)}` : fallback.route);
+        }
+        else
+            this.#onhashchange();
+    }
+    static queryIt(params) {
+        return Object.entries(params)
+            .map(([key, value]) => `${key}=${value}`)
+            .join('&');
+    }
+    static dequeryIt(query) {
+        const params = {};
+        if (!query)
+            return params;
+        for (const item of query.split('&')) {
+            const [key, value] = item.split('=');
+            params[key] = value;
+        }
+        return;
+    }
+    static bang(route) {
+        return `#!/${route}`;
+    }
+    static debang(route) {
+        return route.split('#!/')[1];
+    }
+    static parseHash(hash) {
+        const afterBang = HashRouter.debang(hash);
+        const splitted = afterBang.split('?');
+        const routes = splitted[0].split('/');
+        const route = routes[0];
+        const subRoutes = routes.slice(1, -1);
+        const params = HashRouter.dequeryIt(splitted[1]);
+        return { route, routes, subRoutes, params, url: splitted[0] };
+    }
+    #handleSubRoutes = async (routing, routeInfo) => {
+        const { params, subRoutes } = routing;
+        let selected = this.host.pages.querySelector('.custom-selected');
+        if (routing.subRoutes?.length > 0) {
+            for (const route of routing.subRoutes) {
+                const subRouteInfo = routeInfo.subRoutes[route];
+                if (subRouteInfo) {
+                    if (!customElements.get(`./${subRouteInfo.tagName}`))
+                        await import(`./${subRouteInfo.import}.js`);
+                }
+                else {
+                    if (!customElements.get(`./${route}`))
+                        await import(`./${route}.js`);
+                    console.warn(`handling undefined subroute for ${routing.route} falling back to default behavior.`);
+                }
+                selected.select({ route, params, subRoutes });
+                selected = selected.pages.querySelector('.custom-selected');
+            }
+        }
+        if (params) {
+            for (const [key, value] of Object.entries(params)) {
+                selected[key] = value;
+            }
+        }
+    };
+    #onhashchange = async () => {
+        const routing = HashRouter.parseHash(location.hash);
+        const routeInfo = this.routes[routing.url];
+        // todo allow to set loading
+        if (routeInfo) {
+            if (!customElements.get(`./${routeInfo.tagName}`))
+                await import(`./${routeInfo.import}.js`);
+        }
+        else {
+            if (!customElements.get(`./${routing.route}`))
+                await import(`./${routing.route}.js`);
+        }
+        this.host.select(routing);
+        // when a custom-pages element (or sortlike) is defined loop trough subroutes and make devlife easier
+        if (this.host.pages) {
+            this.#handleSubRoutes(routing, routeInfo);
+        }
+        document.dispatchEvent(new CustomEvent('route-change', {
+            detail: {
+                routing,
+                routeInfo
+            }
+        }));
+    };
+    go(route, params) { }
+}
+
+export { SimpleHashRouter as default };

package/exports/summary/summary.d.ts

@@ -1,5 +1,5 @@
 import { LiteElement } from '@vandeurenglenn/lite';
 export declare class CustomSummary extends LiteElement {
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/supporting-pane.js

@@ -6,6 +6,7 @@ import './icon-button.js';
 import './button.js';
 import './icon.js';
 import '@vandeurenglenn/little-pubsub';
+import '@vandeurenglenn/custom-shared-styles/pane.css';
 
 let CustomSupportingPane = (() => {
     let _classDecorators = [customElement('custom-supporting-pane')];

package/exports/text-field/text-field.d.ts

@@ -6,6 +6,6 @@ export declare class TextField extends LiteElement {
     accessor hasLeadingIcon: any;
     accessor hasTrailingIcon: any;
     connectedCallback(): void;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/time-picker/input.d.ts

@@ -1,5 +1,5 @@
 import { LiteElement } from '@vandeurenglenn/lite';
 export declare class TimePickerInput extends LiteElement {
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/time-picker/minute-field.d.ts

@@ -1,5 +1,5 @@
 import { LiteElement } from '@vandeurenglenn/lite';
 export declare class TimePickerMinuteField extends LiteElement {
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/time-picker/time-picker.d.ts

@@ -1,6 +1,6 @@
 import { LiteElement } from '@vandeurenglenn/lite';
 import './input.js';
 export declare class CustomTimePicker extends LiteElement {
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/toggle/toggle.d.ts

@@ -7,6 +7,6 @@ export declare class CustomToggle extends LiteElement {
     onChange(propertyKey: any, value: any): void;
     next(): Promise<void>;
     previous(): void;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/types2.js

@@ -0,0 +1 @@
+

package/exports/typography/typography.d.ts

@@ -2,6 +2,6 @@ import { LiteElement } from '@vandeurenglenn/lite';
 export declare class CustomTypography extends LiteElement {
     accessor type: 'label' | 'title' | 'headline' | 'display' | 'body';
     accessor size: 'small' | 'medium' | 'large';
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/upload/upload-file.d.ts

@@ -1,6 +1,6 @@
 import { LiteElement } from '@vandeurenglenn/lite';
 export declare class CustomUploadFile extends LiteElement {
     accessor multiple: any;
-    static get styles(): import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static get styles(): import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/upload/upload-image.d.ts

@@ -357,7 +357,7 @@ declare const CustomUploadImage_base: {
         focus(options?: FocusOptions): void;
     };
     readonly observedAttributes: any;
-    styles?: import("@vandeurenglenn/lite/element").StyleList;
+    styles?: import("lit").CSSResultGroup;
 };
 export declare class CustomUploadImage extends CustomUploadImage_base {
     #private;
@@ -369,7 +369,7 @@ export declare class CustomUploadImage extends CustomUploadImage_base {
     accessor frontCameraDisabled: boolean;
     accessor rearCameraDisabled: boolean;
     accessor hasLibrary: boolean;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     onChange(propertyKey: any, value: any): void;
     select(value: any): void;
     show(): void;