@vandeurenglenn/lite-elements 0.3.41 → 0.3.43

package/exports/button/button.d.ts

@@ -6,7 +6,7 @@ export declare class CustomButton extends LiteElement {
     accessor hasLabel: boolean;
     accessor type: 'elevated' | 'filled' | 'text' | 'tonal' | 'outlined';
     accessor label: any;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     connectedCallback(): void;
     onChange(propertyKey: any, value: any): void;
     render(): import("lit-html").TemplateResult<1>;

package/exports/button/icon-button.d.ts

@@ -3,6 +3,6 @@ import './button.js';
 import './../icon/icon.js';
 export declare class CustomIconButton extends LiteElement {
     accessor icon: string;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/demo/code.d.ts

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

package/exports/demo/demo-icons.d.ts

@@ -1,6 +1,6 @@
 import { LiteElement } from '@vandeurenglenn/lite';
 import './../icon/icon-set.js';
 export declare class DemoIcons 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/demo/demo-shell.d.ts

@@ -5,6 +5,6 @@ export declare class DemoShell extends LiteElement {
     accessor selector: any;
     accessor pages: 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/demo/demo.d.ts

@@ -2,7 +2,7 @@ import { LiteElement } from '@vandeurenglenn/lite';
 export declare class DemoShell extends LiteElement {
     accessor selector: any;
     accessor pages: any;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     connectedCallback(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/demo/section.d.ts

@@ -3,6 +3,6 @@ import '../section/section.js';
 import './code.js';
 export declare class DemoSection extends LiteElement {
     connectedCallback(): Promise<void>;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/demo-shell.js

@@ -38,10 +38,12 @@ import './elevation.js';
 import '@vandeurenglenn/flex-elements/it.js';
 import './selector-mixin.js';
 import './select-mixin.js';
+import '@vandeurenglenn/custom-shared-styles/drawer.css';
 import './scroll-mixin.js';
 import '@vandeurenglenn/flex-elements/column.js';
 import '@vandeurenglenn/flex-elements/row.js';
 import '@vandeurenglenn/little-pubsub';
+import '@vandeurenglenn/custom-shared-styles/pane.css';
 import './tab.js';
 import './input.js';
 import 'lit';

package/exports/dialog/dialog.d.ts

@@ -11,6 +11,6 @@ export declare class CustomDialog extends LiteElement {
     connectedCallback(): void;
     onChange(propertyKey: any, value: any): void;
     _close(event: Event): void;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/drawer/drawer-button.d.ts

@@ -5,6 +5,6 @@ export declare class CustomDrawerButton extends LiteElement {
     accessor drawerOpen: boolean;
     accessor id: string;
     openPane(): void;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/drawer/drawer-item.d.ts

@@ -1,5 +1,5 @@
 import { LiteElement } from '@vandeurenglenn/lite';
 export declare class CustomDrawerItem 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/drawer/drawer.d.ts

@@ -9,5 +9,6 @@ export declare class CustomDrawer extends LiteElement {
     accessor right: boolean;
     accessor id: string;
     connectedCallback(): void;
+    static styles?: import("lit").CSSResultOrNative[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/drawer-layout.js

@@ -11,6 +11,8 @@ import './pane.js';
 import './icon-button.js';
 import './icon.js';
 import '@vandeurenglenn/little-pubsub';
+import '@vandeurenglenn/custom-shared-styles/pane.css';
+import '@vandeurenglenn/custom-shared-styles/drawer.css';
 import '@vandeurenglenn/flex-elements/it.js';
 import '@vandeurenglenn/flex-elements/row.js';
 

package/exports/drawer.js

@@ -3,9 +3,11 @@ import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite
 import './elevation.js';
 import './button.js';
 import './pane.js';
+import style from '@vandeurenglenn/custom-shared-styles/drawer.css';
 import './icon-button.js';
 import './icon.js';
 import '@vandeurenglenn/little-pubsub';
+import '@vandeurenglenn/custom-shared-styles/pane.css';
 
 let CustomDrawer = (() => {
     let _classDecorators = [customElement('custom-drawer')];
@@ -45,7 +47,6 @@ let CustomDrawer = (() => {
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
         }
         #open_accessor_storage = __runInitializers(this, _open_initializers, void 0);
         get open() { return this.#open_accessor_storage; }
@@ -72,70 +73,24 @@ let CustomDrawer = (() => {
                     this.open = true;
             });
         }
+        static styles = [style];
         render() {
-            return html `<style>
-        :host {
-          display: contents;
-        }
-
-        custom-pane {
-          box-sizing: border-box;
-          padding: 12px 24px;
-          height: 100%;
-          --custom-pane-width: var(--custom-drawer-with, 320px);
-        }
-
-        slot[name='headline']::slotted(*) {
-          color: var(--md-sys-color-on-surface-variant);
-          font-family: var(--md-sys-typescale-title-small-font-family-name);
-          font-style: var(--md-sys-typescale-title-small-font-family-style);
-          font-weight: var(--md-sys-typescale-title-small-font-weight);
-          font-size: var(--md-sys-typescale-title-small-font-size);
-          letter-spacing: var(--md-sys-typescale-title-small-tracking);
-          line-height: var(--md-sys-typescale-title-small-height);
-          text-transform: var(--md-sys-typescale-title-small-text-transform);
-          text-decoration: var(--md-sys-typescale-title-small-text-decoration);
-          text-transform: capitalize;
-          margin: 0;
-        }
-
-        ::slotted([slot='footer']) {
-          display: block;
-          box-sizing: border-box;
-          min-height: 48px;
-          border-top: 1px solid rgba(0, 0, 0, 0.14);
-        }
-
-        ::slotted([slot='content']) {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          width: 100%;
-          overflow-y: auto;
-        }
-
-        ::slotted(*) {
-          pointer-events: none;
-        }
-
-        aside {
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-        }
-      </style>
-
+            return html `
       <custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type} .id=${this.id}>
         <slot name="headline" slot="headline"></slot>
         <slot name="menu-button" slot="menu-button"></slot>
         <slot name="content" slot="content"></slot>
         <slot name="footer" slot="footer"></slot>
-      </custom-pane> `;
+      </custom-pane>
+    `;
         }
         constructor() {
             super(...arguments);
             __runInitializers(this, _id_extraInitializers);
         }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
     });
     return _classThis;
 })();

package/exports/dropdown/dropdown-menu.d.ts

@@ -15,6 +15,6 @@ export declare class CustomDropdownMenu extends LiteElement {
     accessor _dropdown: CustomDropdown;
     private _onselected;
     private _scrimClick;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/dropdown/dropdown.d.ts

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

package/exports/elements.js

@@ -35,10 +35,12 @@ import './elevation.js';
 import '@vandeurenglenn/flex-elements/it.js';
 import './selector-mixin.js';
 import './select-mixin.js';
+import '@vandeurenglenn/custom-shared-styles/drawer.css';
 import './scroll-mixin.js';
 import '@vandeurenglenn/flex-elements/column.js';
 import '@vandeurenglenn/flex-elements/row.js';
 import '@vandeurenglenn/little-pubsub';
+import '@vandeurenglenn/custom-shared-styles/pane.css';
 import './tab.js';
 import './input.js';
 import 'lit';

package/exports/fab/fab.d.ts

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

package/exports/hash-router.js

@@ -0,0 +1,97 @@
+var _a;
+class HashRouter {
+    host;
+    routes;
+    constructor({ host, fallback, routes }) {
+        this.host = host;
+        this.routes = routes;
+        globalThis.onhashchange = this.#onhashchange;
+        if (!location.hash && fallback?.route) {
+            location.hash = _a.bang(fallback.params ? `${fallback.route}?${_a.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 = _a.debang(hash);
+        const splitted = afterBang.split('?');
+        const routes = splitted[0].split('/');
+        const route = routes[0];
+        const subRoutes = routes.slice(1, -1);
+        const params = _a.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 = _a.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
+            }
+        }));
+    };
+}
+_a = HashRouter;
+
+export { HashRouter as default };

package/exports/icon/icon-set.d.ts

@@ -1,7 +1,7 @@
 import { LiteElement } from '@vandeurenglenn/lite';
 export declare class CustomIconSet extends LiteElement {
     #private;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     getIcon(name: string): string | Node;
     get setName(): string;
     connectedCallback(): void;

package/exports/icon/icon.d.ts

@@ -5,7 +5,7 @@ export declare class CustomIcon extends LiteElement {
     accessor setName: any;
     accessor _icon: any;
     onChange(propertyKey: any, value: any): void;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/list/list-item.d.ts

@@ -8,6 +8,6 @@ export declare class CustomListItem extends LiteElement {
     accessor assignedStartElements: any;
     accessor startSlot: 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/menu/menu.d.ts

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

package/exports/mixins/file-reader-mixin.d.ts

@@ -337,5 +337,5 @@ export declare const FileReaderMixin: (Base: typeof LiteElement) => {
         focus(options?: FocusOptions): void;
     };
     readonly observedAttributes: any;
-    styles?: import("@vandeurenglenn/lite/element").StyleList;
+    styles?: import("lit").CSSResultGroup;
 };

package/exports/notification/notifications.d.ts

@@ -12,6 +12,6 @@ export declare class CustomNotifications extends LiteElement {
         image?: string;
     }, timeout?: EpochTimeStamp): void;
     _onclick(): void;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/notifications.js

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

package/exports/pages/pages.d.ts

@@ -9,6 +9,6 @@ export declare class CustomPages extends SelectBase {
      * set animation class when slot changes
      */
     slotchange(): void;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/pane/pane.d.ts

@@ -10,5 +10,6 @@ export declare class CustomPane extends LiteElement {
     accessor right: boolean;
     accessor id: string;
     closePane(event: any): void;
+    static styles: import("lit").CSSResultOrNative[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/pane.js

@@ -3,6 +3,7 @@ import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite
 import './elevation.js';
 import './icon-button.js';
 import './icon.js';
+import style from '@vandeurenglenn/custom-shared-styles/pane.css';
 import './button.js';
 import '@vandeurenglenn/little-pubsub';
 
@@ -49,7 +50,6 @@ let CustomPane = (() => {
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
         }
         #open_accessor_storage = __runInitializers(this, _open_initializers, false);
         get open() { return this.#open_accessor_storage; }
@@ -74,87 +74,9 @@ let CustomPane = (() => {
             this.open = false;
             document.dispatchEvent(new CustomEvent(`custom-pane-close`, { detail: this.id || `${this.left ? 'left' : 'right'}` }));
         }
+        static styles = [style];
         render() {
-            return html `<style>
-        :host {
-          --custom-pane-width: 100%;
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          background: var(--md-sys-color-surface);
-          color: var(--md-sys-color-on-surface);
-          position: relative;
-          /* border-radius: 12px; */
-
-          --md-elevation-level: 0;
-
-          pointer-events: none;
-          opacity: 0;
-          width: 100%;
-          max-width: var(--custom-pane-width);
-          transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
-            var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
-
-          --custom-pane-footer-height: 54px;
-        }
-
-        :host([left]) {
-          border-radius: var(--md-sys-shape-corner-large-end);
-          transform: translateX(-100%);
-          z-index: 1002;
-        }
-
-        :host([right]) {
-          border-radius: var(--md-sys-shape-corner-large-start);
-          transform: translateX(100%);
-          z-index: 1001;
-        }
-
-        :host([mobile]) {
-          inset: 0;
-          position: fixed;
-          z-index: 1001;
-        }
-
-        :host([type='modal']) {
-          --md-elevation-level: 1;
-        }
-
-        :host([open]) {
-          transform: translateX(0);
-          opacity: 1;
-          pointer-events: auto;
-          transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
-            var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
-        }
-
-        :host([open]) {
-          position: relative;
-        }
-
-        :host([open][mobile]) {
-          position: fixed;
-        }
-
-        aside {
-          width: 100%;
-          height: 100%;
-        }
-
-        .content {
-          height: calc(100% - var(--custom-pane-footer-height));
-          width: 100%;
-          overflow-y: auto;
-        }
-
-        .footer {
-          height: var(--custom-pane-footer-height);
-        }
-
-        :host([right]) custom-icon-button {
-          transform: rotateZ(180deg);
-        }
-      </style>
+            return html `
       <custom-elevation></custom-elevation>
       <aside>
         <slot name="header">
@@ -171,12 +93,16 @@ let CustomPane = (() => {
         <flex-row class="footer">
           <slot name="footer"></slot>
         </flex-row>
-      </aside> `;
+      </aside>
+    `;
         }
         constructor() {
             super(...arguments);
             __runInitializers(this, _id_extraInitializers);
         }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
     });
     return _classThis;
 })();

package/exports/rail.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 CustomRail = (() => {
     let _classDecorators = [customElement('custom-rail')];

package/exports/root/root.d.ts

@@ -1,6 +1,6 @@
 import { LiteElement } from '@vandeurenglenn/lite';
 import '../theme/theme.js';
 export declare class CustomRoot 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/router/hash-router.d.ts

@@ -0,0 +1,18 @@
+import { HashRouterConstructorOptions, RouteAble, RoutesOption } from './types.js';
+export default class HashRouter {
+    #private;
+    host: RouteAble;
+    routes: RoutesOption;
+    constructor({ host, fallback, routes }: HashRouterConstructorOptions);
+    static queryIt(params: any): string;
+    static dequeryIt(query: any): {};
+    static bang(route: string): string;
+    static debang(route: string): string;
+    static parseHash(hash: any): {
+        route: string;
+        routes: string[];
+        subRoutes: string[];
+        params: {};
+        url: string;
+    };
+}

package/exports/router/types.d.ts

@@ -0,0 +1,45 @@
+import { CustomPages } from '../elements.js';
+/**
+ * @example
+ * {
+ *   tagName: 'home-view',
+ *   import: './views/home',
+ *   subRoutes: [
+ *   'home/one' : {
+ *     tagName: 'home-view-one',
+ *     import: '...'
+ *   },
+ *   'home/one/two' : {
+ *     tagName: 'home-two',
+ *     import: '...'
+ *   }]
+ * }
+ *
+ */
+export type RouteInfo = {
+    tagName: string;
+    import: string;
+    subRoutes?: {
+        [route: string]: Omit<RouteInfo, 'subRoutes'>;
+    };
+};
+export type RoutesOption = {
+    [route: string]: RouteInfo;
+};
+export type HashRouterConstructorOptions = {
+    host: RouteAble;
+    fallback?: {
+        route: string;
+        params?: object;
+    };
+    routes?: RoutesOption;
+};
+export type RouteSelectInput = {
+    route: string;
+    subRoutes?: string[];
+    params?: object;
+};
+export interface RouteAble extends HTMLElement {
+    select: ({ route, subRoutes, params }: RouteSelectInput) => void;
+    pages?: CustomPages;
+}

package/exports/section/section.d.ts

@@ -13,7 +13,7 @@ declare const CustomSection_base: {
     [x: string]: any;
 };
 export declare class CustomSection extends CustomSection_base {
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};