diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 1b05d4f..4beed21 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
- version: '1.0.191',
+ version: '1.0.192',
description: 'website for lossless.com'
}
diff --git a/ts_web/elements/dees-button.demo.ts b/ts_web/elements/dees-button.demo.ts
new file mode 100644
index 0000000..8732eba
--- /dev/null
+++ b/ts_web/elements/dees-button.demo.ts
@@ -0,0 +1,15 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+ This is a slotted Text
+
+ Highlighted
+
+ This is discreete button
+ This is a disabled button
+ This is a slotted Text
+ Normal Status
+ Pending Status
+ Success Status
+ Error Status
+`;
diff --git a/ts_web/elements/dees-button.ts b/ts_web/elements/dees-button.ts
index 3c1871d..86a840e 100644
--- a/ts_web/elements/dees-button.ts
+++ b/ts_web/elements/dees-button.ts
@@ -1,3 +1,4 @@
+import { demoFunc } from './dees-button.demo.js';
import {
customElement,
html,
@@ -20,17 +21,7 @@ declare global {
@customElement('dees-button')
export class DeesButton extends DeesElement {
- public static demo = () => html`
- This is a slotted Text
- Highlighted
- This is discreete button
- This is a disabled button
- This is a slotted Text
- Normal Status
- Pending Status
- Success Status
- Error Status
- `;
+ public static demo = demoFunc;
@property({
reflect: true,
diff --git a/ts_web/elements/dees-contextmenu.demo.ts b/ts_web/elements/dees-contextmenu.demo.ts
index 8449f57..5fb976c 100644
--- a/ts_web/elements/dees-contextmenu.demo.ts
+++ b/ts_web/elements/dees-contextmenu.demo.ts
@@ -33,7 +33,7 @@ export const demoFunc = () => html`
},
},
]);
-}}>Hello
+}}>Right-Click for contextmenu
html`
+ {
+ DeesModal.createAndShow({
+ heading: 'This is a heading',
+ content: html`
+
+
+
+
+
+
+ `
+ });
+ }}>open modal
+`
\ No newline at end of file
diff --git a/ts_web/elements/dees-modal.ts b/ts_web/elements/dees-modal.ts
new file mode 100644
index 0000000..b577bae
--- /dev/null
+++ b/ts_web/elements/dees-modal.ts
@@ -0,0 +1,168 @@
+import { demoFunc } from './dees-modal.demo.js';
+import {
+ customElement,
+ html,
+ DeesElement,
+ property,
+ type TemplateResult,
+ cssManager,
+ css,
+ type CSSResult,
+ unsafeCSS,
+ unsafeHTML,
+ state,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesWindowLayer } from './dees-windowlayer.js';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'dees-modal': DeesModal;
+ }
+}
+
+@customElement('dees-modal')
+export class DeesModal extends DeesElement {
+ // STATIC
+ public static demo = demoFunc;
+
+ public static async createAndShow(optionsArg: { heading: string; content: TemplateResult }) {
+ const body = document.body;
+ const modal = new DeesModal();
+ modal.heading = optionsArg.heading;
+ modal.content = optionsArg.content;
+ modal.windowLayer = await DeesWindowLayer.createAndShow();
+ modal.windowLayer.addEventListener('click', async () => {
+ await modal.destroy();
+ });
+ body.append(modal.windowLayer);
+ body.append(modal);
+ }
+
+ // INSTANCE
+
+ @property({
+ type: String,
+ })
+ public heading = '';
+
+ @state({})
+ public content: TemplateResult;
+
+ constructor() {
+ super();
+ }
+
+ public static styles = [
+ cssManager.defaultStyles,
+ css`
+ :host {
+ font-family: 'Mona Sans', 'Inter', sans-serif;
+ color: ${cssManager.bdTheme('#333', '#fff')};
+ }
+ .modalContainer {
+ display: flex;
+ position: fixed;
+ width: 100vw;
+ height: 100vh;
+ box-sizing: border-box;
+ align-items: center;
+ justify-content: center;
+ z-index: 2000;
+ }
+ .modal {
+ will-change: transform;
+ transform: translateY(10px);
+ opacity: 0;
+ width: 480px;
+ min-height: 120px;
+ background: #111;
+ border-radius: 8px;
+ border: 1px solid #222;
+ transition: all 0.2s;
+ overflow: hidden;
+ }
+
+ .modal.show {
+ opacity: 1;
+ transform: translateY(0px);
+ }
+
+ .modal .heading {
+ height: 32px;
+ font-family: 'Hubot Sans', 'Inter', sans-serif;
+ line-height: 32px;
+ text-align: center;
+ font-weight: 600;
+ font-size: 12px;
+ border-bottom: 1px solid #222;
+ }
+
+ .modal .content {
+ padding: 16px;
+ }
+ .modal .bottomButtons {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ border-top: 1px solid #222;
+ }
+
+ .modal .bottomButtons .bottomButton {
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ font-size: 14px;
+ border-right: 1px solid #222;
+ cursor: pointer;
+ }
+ .modal .bottomButtons .bottomButton:hover {
+ background: #222;
+ }
+ .modal .bottomButtons .bottomButton:last-child {
+ border-right: none;
+ }
+ `,
+ ];
+
+ public render(): TemplateResult {
+ return html`
+
+
+
${this.heading}
+
${this.content}
+
+
+
+ `;
+ }
+
+ private windowLayer: DeesWindowLayer;
+ public async firstUpdated(_changedProperties: Map) {
+ super.firstUpdated(_changedProperties);
+ const domtools = await this.domtoolsPromise;
+ await domtools.convenience.smartdelay.delayFor(30);
+ const modal = this.shadowRoot.querySelector('.modal');
+ modal.classList.add('show');
+ }
+
+ public async handleOutsideClick(eventArg: MouseEvent) {
+ eventArg.stopPropagation();
+ const modalContainer = this.shadowRoot.querySelector('.modalContainer');
+ if (eventArg.target === modalContainer) {
+ await this.destroy();
+ }
+ }
+
+ public async destroy() {
+ const domtools = await this.domtoolsPromise;
+ const modal = this.shadowRoot.querySelector('.modal');
+ modal.classList.remove('show');
+ await domtools.convenience.smartdelay.delayFor(200);
+ document.body.removeChild(this);
+ await this.windowLayer.destroy();
+ }
+}
diff --git a/ts_web/elements/dees-simple-appdash.ts b/ts_web/elements/dees-simple-appdash.ts
index d80a3e6..1c8c5c7 100644
--- a/ts_web/elements/dees-simple-appdash.ts
+++ b/ts_web/elements/dees-simple-appdash.ts
@@ -25,7 +25,7 @@ export class DeesSimpleAppDash extends DeesElement {
// INSTANCE
@property()
- public title = 'Dees Simple Login';
+ public name = 'Dees Simple Login';
public static styles = [
cssManager.defaultStyles,
diff --git a/ts_web/elements/dees-simple-login.demo.ts b/ts_web/elements/dees-simple-login.demo.ts
index 621bfe9..27e7aac 100644
--- a/ts_web/elements/dees-simple-login.demo.ts
+++ b/ts_web/elements/dees-simple-login.demo.ts
@@ -1,3 +1,3 @@
import { html } from '@design.estate/dees-element';
-export const demoFunc = () => html` Hello there `;
+export const demoFunc = () => html` Hello there `;
diff --git a/ts_web/elements/dees-simple-login.ts b/ts_web/elements/dees-simple-login.ts
index dca7f2a..02ce5aa 100644
--- a/ts_web/elements/dees-simple-login.ts
+++ b/ts_web/elements/dees-simple-login.ts
@@ -26,7 +26,7 @@ export class DeesSimpleLogin extends DeesElement {
// INSTANCE
@property()
- public title = 'Dees Simple Login';
+ public name = 'Dees Simple Login';
public static styles = [
cssManager.defaultStyles,
@@ -69,7 +69,7 @@ export class DeesSimpleLogin extends DeesElement {
-
+
login
diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts
index f9d827c..00f1b24 100644
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -14,6 +14,7 @@ export * from './dees-input-quantityselector.js';
export * from './dees-input-radio.js';
export * from './dees-input-text.js';
export * from './dees-mobilenavigation.js';
+export * from './dees-modal.js';
export * from './dees-pdf.js';
export * from './dees-simple-appdash.js';
export * from './dees-simple-login.js';