@vandeurenglenn/lite-elements 0.3.55 → 0.3.56

package/exports/prompt/prompt.d.ts

@@ -0,0 +1,9 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+export declare class CustomPrompt extends LiteElement {
+    accessor promptTitle: string;
+    constructor(promptTitle: string);
+    cancel: () => boolean;
+    ok: () => boolean;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/prompt.js

@@ -0,0 +1,68 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
+import { property, css, html, LiteElement } from '@vandeurenglenn/lite';
+
+// import './../dialog/dialog'
+globalThis.customPrompt = (promptTitle) => {
+    const dialog = document.createElement('custom-prompt');
+    dialog.promptTitle = promptTitle;
+    document.body.appendChild(dialog);
+    return new Promise((resolve) => {
+        dialog.addEventListener('close', ({ detail }) => {
+            dialog.remove();
+            resolve(detail);
+        });
+    });
+};
+let CustomPrompt = (() => {
+    let _classSuper = LiteElement;
+    let _promptTitle_decorators;
+    let _promptTitle_initializers = [];
+    let _promptTitle_extraInitializers = [];
+    return class CustomPrompt extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _promptTitle_decorators = [property({ type: String })];
+            __esDecorate(this, null, _promptTitle_decorators, { kind: "accessor", name: "promptTitle", static: false, private: false, access: { has: obj => "promptTitle" in obj, get: obj => obj.promptTitle, set: (obj, value) => { obj.promptTitle = value; } }, metadata: _metadata }, _promptTitle_initializers, _promptTitle_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #promptTitle_accessor_storage = __runInitializers(this, _promptTitle_initializers, 'Prompt Title');
+        get promptTitle() { return this.#promptTitle_accessor_storage; }
+        set promptTitle(value) { this.#promptTitle_accessor_storage = value; }
+        constructor(promptTitle) {
+            super();
+            this.setAttribute('prompt-title', promptTitle);
+        }
+        cancel = (__runInitializers(this, _promptTitle_extraInitializers), () => this.dispatchEvent(new CustomEvent('close', { detail: undefined })));
+        ok = () => this.dispatchEvent(new CustomEvent('close', { detail: this.shadowRoot.querySelector('input').value }));
+        static styles = [
+            css `
+      :host {
+        display: contents;
+      }
+
+      footer {
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      input {
+        background: var(--background);
+      }
+    `
+        ];
+        render() {
+            return html `
+      <custom-dialog>
+        <header slot="header">${this.promptTitle}</header>
+        <input />
+        <footer slot="actions">
+          <custom-button label="Cancel" action="cancel" @click=${this.cancel}></custom-button>
+          <custom-button label="Ok" action="ok" @click=${this.ok}></custom-button>
+        </footer>
+      </custom-dialog>
+    `;
+        }
+    };
+})();
+
+export { CustomPrompt };

package/exports/theme/theme.d.ts

@@ -6,7 +6,7 @@ export declare class CustomTheme extends LiteElement {
     accessor mobileTrigger: string;
     accessor narrow: boolean;
     onChange(propertyKey: string, value: any): void;
-    connectedCallback(): void;
+    connectedCallback(): Promise<void>;
     set language(value: string);
     get language(): string;
     /**

package/exports/theme.js

@@ -78,7 +78,8 @@ let CustomTheme = (() => {
             this.#mediaListener.onchange = this.#mediaQueryChange;
             this.#mediaQueryChange({ matches: this.#mediaListener.matches });
         }
-        connectedCallback() {
+        async connectedCallback() {
+            await this.rendered;
             // this.load('./themes/default/tokens.js')
             this.load('./themes/default/theme.css');
             const style = document.createElement('style');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vandeurenglenn/lite-elements",
-	"version": "0.3.55",
+	"version": "0.3.56",
 	"description": "set of lite elements following Material Design 3 spec",
 	"type": "module",
 	"scripts": {
@@ -331,6 +331,14 @@
 			"import": "./exports/pane.js",
 			"types": "./exports/pane/pane.d.ts"
 		},
+		"./prompt": {
+			"import": "./exports/prompt.js",
+			"types": "./exports/prompt/prompt.d.ts"
+		},
+		"./prompt.js": {
+			"import": "./exports/prompt.js",
+			"types": "./exports/prompt/prompt.d.ts"
+		},
 		"./rail": {
 			"import": "./exports/rail.js",
 			"types": "./exports/rail/rail.d.ts"