ds-one 0.2.5-alpha.9 → 0.3.0-alpha.2

package/dist/4-page/ds-grid.js

@@ -1,7 +1,43 @@
 // ds-grid.ts
 // Simple grid layout component
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
+import { detectMobileDevice } from "../0-face/device";
+import styles from "./styles/ds-grid.css?inline";
 export class Grid extends LitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateMobileClass();
+        // Listen for resize events to update mobile class
+        this.resizeObserver = () => {
+            if (this.resizeTimeout) {
+                clearTimeout(this.resizeTimeout);
+            }
+            this.resizeTimeout = setTimeout(() => {
+                this.updateMobileClass();
+            }, 100);
+        };
+        window.addEventListener("resize", this.resizeObserver);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.resizeObserver) {
+            window.removeEventListener("resize", this.resizeObserver);
+        }
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+        }
+    }
+    updateMobileClass() {
+        const isMobile = detectMobileDevice();
+        if (isMobile) {
+            this.classList.add("mobile");
+            this.classList.remove("desktop");
+        }
+        else {
+            this.classList.add("desktop");
+            this.classList.remove("mobile");
+        }
+    }
     render() {
         return html ``;
     }
@@ -9,59 +45,5 @@ export class Grid extends LitElement {
 Grid.properties = {
     align: { type: String },
 };
-Grid.styles = css `
-    :host {
-      margin-top: 0.5px !important;
-      margin-left: 0.5px !important;
-      display: grid;
-      width: 1440px;
-      height: 360px;
-      grid-template-columns: repeat(auto-fill, 19px);
-      grid-template-rows: repeat(auto-fill, 19px);
-      gap: 1px;
-      row-rule: calc(1px * var(--sf)) solid var(--grid-color);
-      column-rule: calc(1px * var(--sf)) solid var(--grid-color);
-      outline: 1px solid black;
-      position: fixed;
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      pointer-events: none;
-      z-index: 300;
-    }
-
-    /* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
-    :host(.mobile) {
-      width: calc(100% - calc(1px * var(--sf)));
-      max-width: 100vw;
-      margin-left: 0 !important;
-      margin-top: 0 !important;
-      box-sizing: border-box;
-      position: fixed;
-      top: calc(0.5px * var(--sf));
-      left: 50%;
-      transform: translateX(-50%);
-      pointer-events: none;
-      z-index: 300;
-      gap: calc(1px * var(--sf));
-      grid-template-columns: repeat(14, calc(19px * var(--sf)));
-      grid-template-rows: repeat(auto-fill, calc(19px * var(--sf)));
-    }
-
-    :host([align="left"]) {
-      left: 0;
-      transform: none;
-    }
-
-    :host([align="center"]) {
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    :host([align="right"]) {
-      left: auto;
-      right: 0;
-      transform: none;
-    }
-  `;
+Grid.styles = unsafeCSS(styles);
 customElements.define("ds-grid", Grid);

package/dist/4-page/ds-layout.d.ts

@@ -13,14 +13,14 @@ export declare class Layout extends LitElement {
         align: {
             type: StringConstructor;
         };
-        debug: {
+        view: {
             type: BooleanConstructor;
         };
     };
     mode: string;
     align?: string;
-    debug?: boolean;
-    static styles: import("lit").CSSResult;
+    view?: boolean;
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/4-page/ds-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-layout.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IAEF,IAAI,EAAE,MAAM,CAAe;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,MAAM,CAAC,MAAM,0BAiNX;IAEF,MAAM;CAqEP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
+{"version":3,"file":"ds-layout.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAGvD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IAEF,IAAI,EAAE,MAAM,CAAe;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,MAAM,4BAsjBX;IAEF,MAAM;CAwMP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}