@vandeurenglenn/lite-elements 0.3.50 → 0.3.52

package/exports/upload-image.js

@@ -89,99 +89,99 @@ let CustomUploadImage = (() => {
         get hasLibrary() { return this.#hasLibrary_accessor_storage; }
         set hasLibrary(value) { this.#hasLibrary_accessor_storage = value; }
         static styles = [
-            css `
-      :host {
-        display: block;
-      }
-
-      h5 {
-        margin: 0;
-      }
-
-      custom-tab.custom-selected {
-        background: var(--md-sys-color-tertiary);
-        --custom-icon-color: var(--md-sys-color-on-tertiary);
-        border: none;
-      }
-
-      custom-tab.custom-selected span,
-      custom-tab.custom-selected custom-icon {
-        color: var(--md-sys-color-on-tertiary);
-        --custom-icon-color: var(--md-sys-color-on-tertiary);
-      }
-
-      custom-tab {
-        gap: 8px;
-        height: 40px;
-        padding: 0 12px;
-        box-sizing: border-box;
-        width: auto;
-        border-radius: 20px;
-        font: var(--_supporting-text-type);
-      }
-
-      custom-tabs {
-        height: 40px;
-      }
-
-      section {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        width: 100%;
-        min-height: 168px;
-        position: absolute;
-        transform: scale(0);
-        justify-content: center;
-        align-items: center;
-      }
-
-      section[route='camera'] {
-        overflow-y: hidden;
-      }
-
-      section.custom-selected {
-        transform: scale(1);
-        position: relative;
-      }
-      md-outlined-text-field {
-        padding-top: 12px;
-      }
-
-      .camera-actions {
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-        margin-bottom: 3px;
-      }
-
-      section[route='camera'] flex-container {
-        height: 320px;
-      }
-
-      flex-column {
-        width: auto;
-      }
-
-      flex-container video,
-      img:not([data-variant='icon']) {
-        height: -webkit-fill-available;
-        width: -webkit-fill-available;
-      }
-
-      [route='library'] img {
-        width: 150px;
-        cursor: pointer;
-      }
-
-      [data-variant='icon'] {
-        height: 48px;
-        width: 48px;
-      }
-
-      md-dialog {
-        --_container-color: #2d2f31;
-      }
+            css `
+      :host {
+        display: block;
+      }
+
+      h5 {
+        margin: 0;
+      }
+
+      custom-tab.custom-selected {
+        background: var(--md-sys-color-tertiary);
+        --custom-icon-color: var(--md-sys-color-on-tertiary);
+        border: none;
+      }
+
+      custom-tab.custom-selected span,
+      custom-tab.custom-selected custom-icon {
+        color: var(--md-sys-color-on-tertiary);
+        --custom-icon-color: var(--md-sys-color-on-tertiary);
+      }
+
+      custom-tab {
+        gap: 8px;
+        height: 40px;
+        padding: 0 12px;
+        box-sizing: border-box;
+        width: auto;
+        border-radius: 20px;
+        font: var(--_supporting-text-type);
+      }
+
+      custom-tabs {
+        height: 40px;
+      }
+
+      section {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+        min-height: 168px;
+        position: absolute;
+        transform: scale(0);
+        justify-content: center;
+        align-items: center;
+      }
+
+      section[route='camera'] {
+        overflow-y: hidden;
+      }
+
+      section.custom-selected {
+        transform: scale(1);
+        position: relative;
+      }
+      md-outlined-text-field {
+        padding-top: 12px;
+      }
+
+      .camera-actions {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        margin-bottom: 3px;
+      }
+
+      section[route='camera'] flex-container {
+        height: 320px;
+      }
+
+      flex-column {
+        width: auto;
+      }
+
+      flex-container video,
+      img:not([data-variant='icon']) {
+        height: -webkit-fill-available;
+        width: -webkit-fill-available;
+      }
+
+      [route='library'] img {
+        width: 150px;
+        cursor: pointer;
+      }
+
+      [data-variant='icon'] {
+        height: 48px;
+        width: 48px;
+      }
+
+      md-dialog {
+        --_container-color: #2d2f31;
+      }
     `
         ];
         get #dialog() {
@@ -214,9 +214,9 @@ let CustomUploadImage = (() => {
                     const item = document.createElement('md-list-item');
                     item.headline = file.name;
                     item.setAttribute('noninteractive', '');
-                    item.innerHTML = `
-          <img data-variant="icon" slot="start" src="${data}">
-          <md-standard-icon-button slot="end"><custom-icon>delete</custom-icon></md-standard-icon-button>
+                    item.innerHTML = `
+          <img data-variant="icon" slot="start" src="${data}">
+          <md-standard-icon-button slot="end"><custom-icon>delete</custom-icon></md-standard-icon-button>
         `;
                     item.onclick = () => {
                         this.shadowRoot.querySelector('section[route="file"]').removeChild(item);
@@ -255,103 +255,103 @@ let CustomUploadImage = (() => {
             this.#dialog.open = true;
         }
         #addImageTemplate() {
-            return html `
-      <form id="form-content" method="dialog">
-        <custom-tabs attr-for-selected="route" @selected=${this.#onSelected.bind(this)}>
+            return html `
+      <form id="form-content" method="dialog">
+        <custom-tabs attr-for-selected="route" @selected=${this.#onSelected.bind(this)}>
           ${this.hasLibrary
-                ? html `
-                <custom-tab route="library">
-                  <custom-icon>photo_library</custom-icon>
-                  <span>library</span>
-                </custom-tab>
+                ? html `
+                <custom-tab route="library">
+                  <custom-icon>photo_library</custom-icon>
+                  <span>library</span>
+                </custom-tab>
               `
-                : ''}
-          <custom-tab route="url">
-            <custom-icon>link</custom-icon>
-            <span>url</span>
-          </custom-tab>
-
-          <custom-tab route="camera">
-            <custom-icon>camera</custom-icon>
-            <span>camera</span>
-          </custom-tab>
-
-          <custom-tab route="file">
-            <custom-icon>upload</custom-icon>
-            <span>file</span>
-          </custom-tab>
-          <flex-it></flex-it>
-        </custom-tabs>
-        <custom-pages attr-for-selected="route">
+                : ''}
+          <custom-tab route="url">
+            <custom-icon>link</custom-icon>
+            <span>url</span>
+          </custom-tab>
+
+          <custom-tab route="camera">
+            <custom-icon>camera</custom-icon>
+            <span>camera</span>
+          </custom-tab>
+
+          <custom-tab route="file">
+            <custom-icon>upload</custom-icon>
+            <span>file</span>
+          </custom-tab>
+          <flex-it></flex-it>
+        </custom-tabs>
+        <custom-pages attr-for-selected="route">
           ${this.hasLibrary
-                ? html `
-                <section route="library">
-                  <flex-wrap-around>
-                    ${this.images.map((image) => html `
-                        <img
-                          @click=${(event) => this.#onlibclick.call(this, event, image.firebaseKey)}
-                          src=${`${location.origin}/api/image?image=${image.link.replace('.png', 'b.png')}`}
-                        />
-                      `)}
-                  </flex-wrap-around>
-                </section>
+                ? html `
+                <section route="library">
+                  <flex-wrap-around>
+                    ${this.images.map((image) => html `
+                        <img
+                          @click=${(event) => this.#onlibclick.call(this, event, image.firebaseKey)}
+                          src=${`${location.origin}/api/image?image=${image.link.replace('.png', 'b.png')}`}
+                        />
+                      `)}
+                  </flex-wrap-around>
+                </section>
               `
-                : ''}
-          <section route="url">
-            <flex-column>
-              add image using a link/url
-              <md-outlined-text-field label="url" input-field="url"></md-outlined-text-field>
-            </flex-column>
-          </section>
-
-          <section route="camera">
-            <flex-container>
-              <video autoplay mute="true" class="camera-preview"></video>
-            </flex-container>
-
-            <flex-row class="camera-actions">
-              <flex-it flex="2"></flex-it>
-
-              <md-standard-icon-button
-                @click=${() => (this.#cameraFacingMode = 'user')}
-                ?disabled=${this.frontCameraDisabled}
-              >
-                <custom-icon>photo_camera_front</custom-icon>
-              </md-standard-icon-button>
-
-              <flex-it flex="1"></flex-it>
-
-              <md-standard-icon-button style="transform: scale(1.66);" @click=${this.#takePhoto}>
-                <custom-icon>photo_camera</custom-icon>
-              </md-standard-icon-button>
-
-              <flex-it flex="1"></flex-it>
-
-              <md-standard-icon-button
-                @click=${() => (this.#cameraFacingMode = 'environment')}
-                ?disabled=${this.rearCameraDisabled}
-              >
-                <custom-icon>photo_camera_back</custom-icon>
-              </md-standard-icon-button>
-
-              <flex-it flex="2"></flex-it>
-            </flex-row>
-          </section>
-
-          <section route="file">
-            <md-filled-tonal-button @click=${this.#selectFile.bind(this)}>
-              <custom-icon slot="icon">upload</custom-icon>
-              select
-            </md-filled-tonal-button>
-          </section>
-        </custom-pages>
-      </form>
-
-      <flex-row slot="actions">
-        <md-text-button form="form-content" value="cancel">cancel</md-text-button>
-        <flex-one></flex-one>
-        <md-text-button form="form-content" value="submit">submit</md-text-button>
-      </flex-row>
+                : ''}
+          <section route="url">
+            <flex-column>
+              add image using a link/url
+              <md-outlined-text-field label="url" input-field="url"></md-outlined-text-field>
+            </flex-column>
+          </section>
+
+          <section route="camera">
+            <flex-container>
+              <video autoplay mute="true" class="camera-preview"></video>
+            </flex-container>
+
+            <flex-row class="camera-actions">
+              <flex-it flex="2"></flex-it>
+
+              <md-standard-icon-button
+                @click=${() => (this.#cameraFacingMode = 'user')}
+                ?disabled=${this.frontCameraDisabled}
+              >
+                <custom-icon>photo_camera_front</custom-icon>
+              </md-standard-icon-button>
+
+              <flex-it flex="1"></flex-it>
+
+              <md-standard-icon-button style="transform: scale(1.66);" @click=${this.#takePhoto}>
+                <custom-icon>photo_camera</custom-icon>
+              </md-standard-icon-button>
+
+              <flex-it flex="1"></flex-it>
+
+              <md-standard-icon-button
+                @click=${() => (this.#cameraFacingMode = 'environment')}
+                ?disabled=${this.rearCameraDisabled}
+              >
+                <custom-icon>photo_camera_back</custom-icon>
+              </md-standard-icon-button>
+
+              <flex-it flex="2"></flex-it>
+            </flex-row>
+          </section>
+
+          <section route="file">
+            <md-filled-tonal-button @click=${this.#selectFile.bind(this)}>
+              <custom-icon slot="icon">upload</custom-icon>
+              select
+            </md-filled-tonal-button>
+          </section>
+        </custom-pages>
+      </form>
+
+      <flex-row slot="actions">
+        <md-text-button form="form-content" value="cancel">cancel</md-text-button>
+        <flex-one></flex-one>
+        <md-text-button form="form-content" value="submit">submit</md-text-button>
+      </flex-row>
     `;
         }
         #onAction = () => new Promise((resolve, reject) => {
@@ -383,17 +383,17 @@ let CustomUploadImage = (() => {
             this.#dialog.addEventListener('closed', action);
         });
         #busytemplate(title, description) {
-            return html `
-      <flex-row slot="title">
-        <h5>${title}</h5>
-      </flex-row>
-      <flex-column>
-        <flex-column> ${description} </flex-column>
-
-        <flex-row style="justify-content: center; width: 100%;">
-          <md-circular-progress indeterminate></md-circular-progress>
-        </flex-row>
-      </flex-column>
+            return html `
+      <flex-row slot="title">
+        <h5>${title}</h5>
+      </flex-row>
+      <flex-column>
+        <flex-column> ${description} </flex-column>
+
+        <flex-row style="justify-content: center; width: 100%;">
+          <md-circular-progress indeterminate></md-circular-progress>
+        </flex-row>
+      </flex-column>
     `;
         }
         async addImage() {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vandeurenglenn/lite-elements",
-	"version": "0.3.50",
+	"version": "0.3.52",
 	"description": "set of lite elements following Material Design 3 spec",
 	"type": "module",
 	"scripts": {
@@ -19,32 +19,32 @@
 	"license": "MIT",
 	"dependencies": {
 		"@material-design-icons/svg": "^0.14.13",
-		"@material-symbols/svg-400": "^0.17.0",
-		"@material/web": "^1.3.0",
-		"@vandeurenglenn/custom-shared-styles": "^0.0.16",
-		"@vandeurenglenn/flex-elements": "^1.3.1",
-		"@vandeurenglenn/lite": "^0.2.37",
+		"@material-symbols/svg-400": "^0.27.2",
+		"@material/web": "^2.2.0",
+		"@vandeurenglenn/custom-shared-styles": "^0.0.18",
+		"@vandeurenglenn/flex-elements": "^1.3.2",
+		"@vandeurenglenn/lite": "^0.2.52",
 		"custom-element-decorator": "^0.6.0"
 	},
 	"devDependencies": {
-		"@rollup/plugin-commonjs": "^25.0.7",
+		"@rollup/plugin-commonjs": "^28.0.1",
 		"@rollup/plugin-json": "^6.1.0",
-		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-node-resolve": "^15.3.0",
 		"@rollup/plugin-terser": "^0.4.4",
-		"@rollup/plugin-typescript": "^11.1.6",
+		"@rollup/plugin-typescript": "^12.1.1",
 		"@types/html": "^1.0.4",
-		"@types/node": "^20.11.30",
+		"@types/node": "^22.10.1",
 		"@web/rollup-plugin-html": "^2.3.0",
-		"chrome-launcher": "^1.1.0",
-		"globby": "^14.0.1",
-		"lighthouse": "^11.6.0",
-		"material-symbols": "^0.17.0",
-		"rimraf": "^5.0.5",
-		"rollup": "^4.13.0",
+		"chrome-launcher": "^1.1.2",
+		"globby": "^14.0.2",
+		"lighthouse": "^12.2.2",
+		"material-symbols": "^0.27.2",
+		"rimraf": "^6.0.1",
+		"rollup": "^4.28.1",
 		"rollup-plugin-auto-exports": "^1.0.8",
 		"rollup-plugin-material-symbols": "^2.1.5",
-		"tslib": "^2.6.2",
-		"typescript": "^5.4.2"
+		"tslib": "^2.8.1",
+		"typescript": "^5.7.2"
 	},
 	"exports": {
 		".": {
@@ -387,14 +387,6 @@
 			"import": "./exports/selector.js",
 			"types": "./exports/selector/selector.d.ts"
 		},
-		"./simple-hash-router": {
-			"import": "./exports/simple-hash-router.js",
-			"types": "./exports/router/simple-hash-router.d.ts"
-		},
-		"./simple-hash-router.js": {
-			"import": "./exports/simple-hash-router.js",
-			"types": "./exports/router/simple-hash-router.d.ts"
-		},
 		"./summary-mirror": {
 			"import": "./exports/summary-mirror.js",
 			"types": "./exports/summary/summary-mirror.d.ts"
@@ -493,11 +485,11 @@
 		},
 		"./types": {
 			"import": "./exports/types.js",
-			"types": "./exports/router/types.d.ts"
+			"types": "./exports/types.d.ts"
 		},
 		"./types.js": {
 			"import": "./exports/types.js",
-			"types": "./exports/router/types.d.ts"
+			"types": "./exports/types.d.ts"
 		},
 		"./typography": {
 			"import": "./exports/typography.js",

package/exports/bundle/simple-hash-router.js

@@ -1 +0,0 @@
-class SimpleHashRouter{routes;constructor({host:t,fallback:s,routes:e}){this.host=t,this.routes=e,globalThis.onhashchange=this.#t,!location.hash&&s?.route?location.hash=HashRouter.bang(s.params?`${s.route}?${HashRouter.queryIt(s.params)}`:s.route):this.#t()}static queryIt(t){return Object.entries(t).map((([t,s])=>`${t}=${s}`)).join("&")}static dequeryIt(t){const s={};if(!t)return s;for(const e of t.split("&")){const[t,o]=e.split("=");s[t]=o}}static bang(t){return`#!/${t}`}static debang(t){return t.split("#!/")[1]}static parseHash(t){const s=HashRouter.debang(t).split("?"),e=s[0].split("/"),o=e[0],a=e.slice(1,-1);return{route:o,routes:e,subRoutes:a,params:HashRouter.dequeryIt(s[1]),url:s[0]}}#s=async(t,s)=>{const{params:e,subRoutes:o}=t;let a=this.host.pages.querySelector(".custom-selected");if(t.subRoutes?.length>0)for(const r of t.subRoutes){const u=s.subRoutes[r];u?customElements.get(`./${u.tagName}`)||await import(`./${u.import}.js`):(customElements.get(`./${r}`)||await import(`./${r}.js`),console.warn(`handling undefined subroute for ${t.route} falling back to default behavior.`)),a.select({route:r,params:e,subRoutes:o}),a=a.pages.querySelector(".custom-selected")}if(e)for(const[t,s]of Object.entries(e))a[t]=s};#t=async()=>{const t=HashRouter.parseHash(location.hash),s=this.routes[t.url];s?customElements.get(`./${s.tagName}`)||await import(`./${s.import}.js`):customElements.get(`./${t.route}`)||await import(`./${t.route}.js`),this.host.select(t),this.host.pages&&this.#s(t,s),document.dispatchEvent(new CustomEvent("route-change",{detail:{routing:t,routeInfo:s}}))};go(t,s){}}export{SimpleHashRouter as default};

package/exports/bundle/types2.js

@@ -1 +0,0 @@
-

package/exports/router/simple-hash-router.d.ts

@@ -1,34 +0,0 @@
-import { RoutesOption } from './types.js';
-/**
- * @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'
- *     }
- *   }]
- * })
- *
- */
-export default class SimpleHashRouter {
-    #private;
-    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: any;
-        routes: any;
-        subRoutes: any;
-        params: any;
-        url: any;
-    };
-    go(route: any, params: any): void;
-}

package/exports/router/types.d.ts

@@ -1,45 +0,0 @@
-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;
-}