@mhmo91/schmancy 0.2.167 → 0.2.168

package/dist/dailog-DAJREbGA.cjs

@@ -1,79 +0,0 @@
-"use strict";const l=require("rxjs");require("lit/directives/class-map.js");const u=require("lit/directives/style-map.js"),g=require("./litElement.mixin-BEw8-T-i.cjs");require("./tailwind.mixin-3l-Om0oz.cjs");const f=require("./ripple-C2BHbhcS.cjs"),p=require("./theme.interface-Xg5Zi46a.cjs"),m=require("lit"),o=require("lit/decorators.js");var v=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(t,i,n,r)=>{for(var a,e=r>1?void 0:r?b(i,n):i,c=t.length-1;c>=0;c--)(a=t[c])&&(e=(r?a(i,n,e):a(e))||e);return r&&e&&v(i,n,e),e};exports.ConfirmDialog=class extends g.$LitElement(m.css`
-	:host {
-		display: block;
-		position: fixed;
-		inset: 0;
-		z-index: 1000;
-		visibility: hidden;
-		pointer-events: none;
-	}
-
-	:host([open]) {
-		visibility: visible;
-		pointer-events: auto;
-	}
-
-	.dialog {
-		position: absolute;
-		max-width: 360px;
-		width: max-content;
-		opacity: 0;
-		transform: scale(0.95);
-		transition:
-			opacity 0.15s ease,
-			transform 0.15s ease;
-	}
-
-	:host([open]) .dialog {
-		opacity: 1;
-		transform: scale(1);
-	}
-
-	.overlay {
-		position: fixed;
-		inset: 0;
-		background: rgba(0, 0, 0, 0.4);
-		opacity: 0;
-		transition: opacity 0.15s ease;
-	}
-
-	:host([open]) .overlay {
-		opacity: 1;
-	}
-`){constructor(){super(...arguments),this.open=!1,this.title="Confirm Action",this.message="Are you sure you want to proceed?",this.confirmText="Confirm",this.cancelText="Cancel",this.variant="default",this._position={x:0,y:0},this._clickPosition={x:0,y:0}}showAt(t,i){this._clickPosition={x:t,y:i},this._position=this._calculateOptimalPosition(t,i),this.open=!0,this._setupListeners()}hide(){this.open=!1}_calculateOptimalPosition(t,i){return requestAnimationFrame(()=>{var d;const n=(d=this.shadowRoot)==null?void 0:d.querySelector(".dialog");if(!n)return;const r=n.offsetWidth,a=n.offsetHeight,e=window.innerWidth,c=window.innerHeight;let h=t,y=i;h+r>e-16&&(h=Math.max(16,e-r-16)),y+a>c-16&&(y=i>a+16?i-a-8:16),this._position={x:h,y}}),{x:t,y:i}}_setupListeners(){l.fromEvent(document,"keydown").pipe(l.takeUntil(this.disconnecting)).subscribe(t=>{t.key==="Escape"&&this.open&&this._handleCancel()}),l.fromEvent(window,"resize").pipe(l.takeUntil(this.disconnecting)).subscribe(()=>{this.open&&(this._position=this._calculateOptimalPosition(this._clickPosition.x,this._clickPosition.y))})}_handleConfirm(){this.hide(),this.dispatchEvent(new CustomEvent("confirm",{bubbles:!0,composed:!0}))}_handleCancel(){this.hide(),this.dispatchEvent(new CustomEvent("cancel",{bubbles:!0,composed:!0}))}render(){const t={left:`${this._position.x}px`,top:`${this._position.y}px`};return m.html`
-			<div class="overlay" @click=${this._handleCancel}></div>
-
-			<div
-				class="dialog"
-				style=${u.styleMap(t)}
-				role="alertdialog"
-				aria-modal="true"
-				aria-labelledby="dialog-title"
-				aria-describedby="dialog-message"
-			>
-				<schmancy-surface rounded="all" elevation="3" type="containerHigh">
-					<div class="p-4">
-						<div id="dialog-title" class="mb-2">
-							<schmancy-typography type="title" token="md"> ${this.title} </schmancy-typography>
-						</div>
-
-						<div id="dialog-message" class="mb-4">
-							<schmancy-typography type="body"> ${this.message} </schmancy-typography>
-						</div>
-
-						<div class="flex justify-end gap-3">
-							<schmancy-button variant="outlined" @click=${this._handleCancel}> ${this.cancelText} </schmancy-button>
-
-							<schmancy-button
-								variant="filled"
-								${f.color({bgColor:this.variant==="danger"?p.SchmancyTheme.sys.color.error.default:p.SchmancyTheme.sys.color.primary.default,color:this.variant==="danger"?p.SchmancyTheme.sys.color.error.on:p.SchmancyTheme.sys.color.primary.on})}
-								@click=${this._handleConfirm}
-							>
-								${this.confirmText}
-							</schmancy-button>
-						</div>
-					</div>
-				</schmancy-surface>
-			</div>
-		`}},s([o.property({type:Boolean,reflect:!0})],exports.ConfirmDialog.prototype,"open",2),s([o.property({type:String})],exports.ConfirmDialog.prototype,"title",2),s([o.property({type:String})],exports.ConfirmDialog.prototype,"message",2),s([o.property({type:String})],exports.ConfirmDialog.prototype,"confirmText",2),s([o.property({type:String})],exports.ConfirmDialog.prototype,"cancelText",2),s([o.property({type:String})],exports.ConfirmDialog.prototype,"variant",2),s([o.state()],exports.ConfirmDialog.prototype,"_position",2),exports.ConfirmDialog=s([o.customElement("confirm-dialog")],exports.ConfirmDialog);
-//# sourceMappingURL=dailog-DAJREbGA.cjs.map

package/dist/dailog-DAJREbGA.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"dailog-DAJREbGA.cjs","sources":["../src/dialog/dailog.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { color } from '@schmancy/directives'\nimport { SchmancyTheme } from '@schmancy/theme/theme.interface'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { fromEvent, takeUntil } from 'rxjs'\n\n/**\n * A minimal, positioned confirm dialog component\n *\n * @element confirm-dialog\n * @fires confirm - When the confirm button is clicked\n * @fires cancel - When the cancel button is clicked or outside is clicked\n */\n@customElement('confirm-dialog')\nexport class ConfirmDialog extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: fixed;\n\t\tinset: 0;\n\t\tz-index: 1000;\n\t\tvisibility: hidden;\n\t\tpointer-events: none;\n\t}\n\n\t:host([open]) {\n\t\tvisibility: visible;\n\t\tpointer-events: auto;\n\t}\n\n\t.dialog {\n\t\tposition: absolute;\n\t\tmax-width: 360px;\n\t\twidth: max-content;\n\t\topacity: 0;\n\t\ttransform: scale(0.95);\n\t\ttransition:\n\t\t\topacity 0.15s ease,\n\t\t\ttransform 0.15s ease;\n\t}\n\n\t:host([open]) .dialog {\n\t\topacity: 1;\n\t\ttransform: scale(1);\n\t}\n\n\t.overlay {\n\t\tposition: fixed;\n\t\tinset: 0;\n\t\tbackground: rgba(0, 0, 0, 0.4);\n\t\topacity: 0;\n\t\ttransition: opacity 0.15s ease;\n\t}\n\n\t:host([open]) .overlay {\n\t\topacity: 1;\n\t}\n`) {\n\t/**\n\t * Whether the dialog is open\n\t */\n\t@property({ type: Boolean, reflect: true })\n\topen = false\n\n\t/**\n\t * Dialog title\n\t */\n\t@property({ type: String })\n\ttitle = 'Confirm Action'\n\n\t/**\n\t * Dialog message\n\t */\n\t@property({ type: String })\n\tmessage = 'Are you sure you want to proceed?'\n\n\t/**\n\t * Text for confirm button\n\t */\n\t@property({ type: String })\n\tconfirmText = 'Confirm'\n\n\t/**\n\t * Text for cancel button\n\t */\n\t@property({ type: String })\n\tcancelText = 'Cancel'\n\n\t/**\n\t * Dialog variant (affects button colors)\n\t */\n\t@property({ type: String })\n\tvariant: 'default' | 'danger' = 'default'\n\n\t/**\n\t * Internal position state\n\t */\n\t@state() private _position = { x: 0, y: 0 }\n\n\t/**\n\t * Last clicked position for initial placement\n\t */\n\tprivate _clickPosition = { x: 0, y: 0 }\n\n\t/**\n\t * Show the dialog at specific coordinates\n\t */\n\tpublic showAt(x: number, y: number) {\n\t\tthis._clickPosition = { x, y }\n\t\tthis._position = this._calculateOptimalPosition(x, y)\n\t\tthis.open = true\n\t\tthis._setupListeners()\n\t}\n\n\t/**\n\t * Hide the dialog\n\t */\n\tpublic hide() {\n\t\tthis.open = false\n\t}\n\n\t/**\n\t * Find the best position for the dialog based on click coordinates\n\t */\n\tprivate _calculateOptimalPosition(x: number, y: number) {\n\t\t// Wait for next frame to ensure dialog is rendered and has dimensions\n\t\trequestAnimationFrame(() => {\n\t\t\tconst dialog = this.shadowRoot?.querySelector('.dialog') as HTMLElement\n\t\t\tif (!dialog) return\n\n\t\t\tconst dialogWidth = dialog.offsetWidth\n\t\t\tconst dialogHeight = dialog.offsetHeight\n\t\t\tconst viewport = {\n\t\t\t\twidth: window.innerWidth,\n\t\t\t\theight: window.innerHeight,\n\t\t\t}\n\n\t\t\t// Start with the click position\n\t\t\tlet newX = x\n\t\t\tlet newY = y\n\n\t\t\t// Ensure dialog stays in viewport horizontally\n\t\t\tif (newX + dialogWidth > viewport.width - 16) {\n\t\t\t\tnewX = Math.max(16, viewport.width - dialogWidth - 16)\n\t\t\t}\n\n\t\t\t// Ensure dialog stays in viewport vertically\n\t\t\tif (newY + dialogHeight > viewport.height - 16) {\n\t\t\t\t// Place above click if there's room\n\t\t\t\tif (y > dialogHeight + 16) {\n\t\t\t\t\tnewY = y - dialogHeight - 8\n\t\t\t\t} else {\n\t\t\t\t\t// Otherwise place at top of screen with small margin\n\t\t\t\t\tnewY = 16\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Update the position state\n\t\t\tthis._position = { x: newX, y: newY }\n\t\t})\n\n\t\t// Return initial position for first render\n\t\treturn { x, y }\n\t}\n\n\t/**\n\t * Setup event listeners when dialog opens\n\t */\n\tprivate _setupListeners() {\n\t\t// Listen for ESC key\n\t\tfromEvent<KeyboardEvent>(document, 'keydown')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(e => {\n\t\t\t\tif (e.key === 'Escape' && this.open) {\n\t\t\t\t\tthis._handleCancel()\n\t\t\t\t}\n\t\t\t})\n\n\t\t// Handle window resize to reposition dialog if needed\n\t\tfromEvent(window, 'resize')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(() => {\n\t\t\t\tif (this.open) {\n\t\t\t\t\tthis._position = this._calculateOptimalPosition(this._clickPosition.x, this._clickPosition.y)\n\t\t\t\t}\n\t\t\t})\n\t}\n\n\t/**\n\t * Handle confirm action\n\t */\n\tprivate _handleConfirm() {\n\t\tthis.hide()\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('confirm', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\t/**\n\t * Handle cancel action\n\t */\n\tprivate _handleCancel() {\n\t\tthis.hide()\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('cancel', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\trender() {\n\t\tconst dialogStyles = {\n\t\t\tleft: `${this._position.x}px`,\n\t\t\ttop: `${this._position.y}px`,\n\t\t}\n\n\t\treturn html`\n\t\t\t<div class=\"overlay\" @click=${this._handleCancel}></div>\n\n\t\t\t<div\n\t\t\t\tclass=\"dialog\"\n\t\t\t\tstyle=${styleMap(dialogStyles)}\n\t\t\t\trole=\"alertdialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\taria-labelledby=\"dialog-title\"\n\t\t\t\taria-describedby=\"dialog-message\"\n\t\t\t>\n\t\t\t\t<schmancy-surface rounded=\"all\" elevation=\"3\" type=\"containerHigh\">\n\t\t\t\t\t<div class=\"p-4\">\n\t\t\t\t\t\t<div id=\"dialog-title\" class=\"mb-2\">\n\t\t\t\t\t\t\t<schmancy-typography type=\"title\" token=\"md\"> ${this.title} </schmancy-typography>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div id=\"dialog-message\" class=\"mb-4\">\n\t\t\t\t\t\t\t<schmancy-typography type=\"body\"> ${this.message} </schmancy-typography>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"flex justify-end gap-3\">\n\t\t\t\t\t\t\t<schmancy-button variant=\"outlined\" @click=${this._handleCancel}> ${this.cancelText} </schmancy-button>\n\n\t\t\t\t\t\t\t<schmancy-button\n\t\t\t\t\t\t\t\tvariant=\"filled\"\n\t\t\t\t\t\t\t\t${color({\n\t\t\t\t\t\t\t\t\tbgColor:\n\t\t\t\t\t\t\t\t\t\tthis.variant === 'danger'\n\t\t\t\t\t\t\t\t\t\t\t? SchmancyTheme.sys.color.error.default\n\t\t\t\t\t\t\t\t\t\t\t: SchmancyTheme.sys.color.primary.default,\n\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\tthis.variant === 'danger' ? SchmancyTheme.sys.color.error.on : SchmancyTheme.sys.color.primary.on,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t@click=${this._handleConfirm}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t${this.confirmText}\n\t\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</schmancy-surface>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'confirm-dialog': ConfirmDialog\n\t}\n}\n"],"names":["ConfirmDialog","$LitElement","css","constructor","super","arguments","this","open","title","message","confirmText","cancelText","variant","_position","x","y","_clickPosition","_calculateOptimalPosition","_setupListeners","requestAnimationFrame","dialog","shadowRoot","querySelector","dialogWidth","offsetWidth","dialogHeight","offsetHeight","viewport","window","innerWidth","innerHeight","newX","newY","Math","max","fromEvent","document","pipe","takeUntil","disconnecting","subscribe","e","key","_handleCancel","hide","dispatchEvent","CustomEvent","bubbles","composed","render","dialogStyles","left","top","html","styleMap","color","bgColor","SchmancyTheme","sys","error","default","primary","on","_handleConfirm","__decorateClass","property","type","Boolean","reflect","prototype","String","state","customElement"],"mappings":"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"}

package/dist/dailog-DQHJeJ0g.js

@@ -1,133 +0,0 @@
-import { fromEvent as m, takeUntil as u } from "rxjs";
-import "lit/directives/class-map.js";
-import { styleMap as f } from "lit/directives/style-map.js";
-import { $ as g } from "./litElement.mixin-KvfZL1-7.js";
-import "./tailwind.mixin-B2sscaiD.js";
-import { c as v } from "./ripple-BumgqsDT.js";
-import { S as p } from "./theme.interface-C5Kj6WjD.js";
-import { css as b, html as x } from "lit";
-import { property as c, state as _, customElement as w } from "lit/decorators.js";
-var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, s = (t, i, n, a) => {
-  for (var r, e = a > 1 ? void 0 : a ? C(i, n) : i, l = t.length - 1; l >= 0; l--) (r = t[l]) && (e = (a ? r(i, n, e) : r(e)) || e);
-  return a && e && k(i, n, e), e;
-};
-let o = class extends g(b`
-	:host {
-		display: block;
-		position: fixed;
-		inset: 0;
-		z-index: 1000;
-		visibility: hidden;
-		pointer-events: none;
-	}
-
-	:host([open]) {
-		visibility: visible;
-		pointer-events: auto;
-	}
-
-	.dialog {
-		position: absolute;
-		max-width: 360px;
-		width: max-content;
-		opacity: 0;
-		transform: scale(0.95);
-		transition:
-			opacity 0.15s ease,
-			transform 0.15s ease;
-	}
-
-	:host([open]) .dialog {
-		opacity: 1;
-		transform: scale(1);
-	}
-
-	.overlay {
-		position: fixed;
-		inset: 0;
-		background: rgba(0, 0, 0, 0.4);
-		opacity: 0;
-		transition: opacity 0.15s ease;
-	}
-
-	:host([open]) .overlay {
-		opacity: 1;
-	}
-`) {
-  constructor() {
-    super(...arguments), this.open = !1, this.title = "Confirm Action", this.message = "Are you sure you want to proceed?", this.confirmText = "Confirm", this.cancelText = "Cancel", this.variant = "default", this._position = { x: 0, y: 0 }, this._clickPosition = { x: 0, y: 0 };
-  }
-  showAt(t, i) {
-    this._clickPosition = { x: t, y: i }, this._position = this._calculateOptimalPosition(t, i), this.open = !0, this._setupListeners();
-  }
-  hide() {
-    this.open = !1;
-  }
-  _calculateOptimalPosition(t, i) {
-    return requestAnimationFrame(() => {
-      var y;
-      const n = (y = this.shadowRoot) == null ? void 0 : y.querySelector(".dialog");
-      if (!n) return;
-      const a = n.offsetWidth, r = n.offsetHeight, e = window.innerWidth, l = window.innerHeight;
-      let h = t, d = i;
-      h + a > e - 16 && (h = Math.max(16, e - a - 16)), d + r > l - 16 && (d = i > r + 16 ? i - r - 8 : 16), this._position = { x: h, y: d };
-    }), { x: t, y: i };
-  }
-  _setupListeners() {
-    m(document, "keydown").pipe(u(this.disconnecting)).subscribe((t) => {
-      t.key === "Escape" && this.open && this._handleCancel();
-    }), m(window, "resize").pipe(u(this.disconnecting)).subscribe(() => {
-      this.open && (this._position = this._calculateOptimalPosition(this._clickPosition.x, this._clickPosition.y));
-    });
-  }
-  _handleConfirm() {
-    this.hide(), this.dispatchEvent(new CustomEvent("confirm", { bubbles: !0, composed: !0 }));
-  }
-  _handleCancel() {
-    this.hide(), this.dispatchEvent(new CustomEvent("cancel", { bubbles: !0, composed: !0 }));
-  }
-  render() {
-    const t = { left: `${this._position.x}px`, top: `${this._position.y}px` };
-    return x`
-			<div class="overlay" @click=${this._handleCancel}></div>
-
-			<div
-				class="dialog"
-				style=${f(t)}
-				role="alertdialog"
-				aria-modal="true"
-				aria-labelledby="dialog-title"
-				aria-describedby="dialog-message"
-			>
-				<schmancy-surface rounded="all" elevation="3" type="containerHigh">
-					<div class="p-4">
-						<div id="dialog-title" class="mb-2">
-							<schmancy-typography type="title" token="md"> ${this.title} </schmancy-typography>
-						</div>
-
-						<div id="dialog-message" class="mb-4">
-							<schmancy-typography type="body"> ${this.message} </schmancy-typography>
-						</div>
-
-						<div class="flex justify-end gap-3">
-							<schmancy-button variant="outlined" @click=${this._handleCancel}> ${this.cancelText} </schmancy-button>
-
-							<schmancy-button
-								variant="filled"
-								${v({ bgColor: this.variant === "danger" ? p.sys.color.error.default : p.sys.color.primary.default, color: this.variant === "danger" ? p.sys.color.error.on : p.sys.color.primary.on })}
-								@click=${this._handleConfirm}
-							>
-								${this.confirmText}
-							</schmancy-button>
-						</div>
-					</div>
-				</schmancy-surface>
-			</div>
-		`;
-  }
-};
-s([c({ type: Boolean, reflect: !0 })], o.prototype, "open", 2), s([c({ type: String })], o.prototype, "title", 2), s([c({ type: String })], o.prototype, "message", 2), s([c({ type: String })], o.prototype, "confirmText", 2), s([c({ type: String })], o.prototype, "cancelText", 2), s([c({ type: String })], o.prototype, "variant", 2), s([_()], o.prototype, "_position", 2), o = s([w("confirm-dialog")], o);
-export {
-  o as C
-};
-//# sourceMappingURL=dailog-DQHJeJ0g.js.map

package/dist/dailog-DQHJeJ0g.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dailog-DQHJeJ0g.js","sources":["../src/dialog/dailog.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { color } from '@schmancy/directives'\nimport { SchmancyTheme } from '@schmancy/theme/theme.interface'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { fromEvent, takeUntil } from 'rxjs'\n\n/**\n * A minimal, positioned confirm dialog component\n *\n * @element confirm-dialog\n * @fires confirm - When the confirm button is clicked\n * @fires cancel - When the cancel button is clicked or outside is clicked\n */\n@customElement('confirm-dialog')\nexport class ConfirmDialog extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: fixed;\n\t\tinset: 0;\n\t\tz-index: 1000;\n\t\tvisibility: hidden;\n\t\tpointer-events: none;\n\t}\n\n\t:host([open]) {\n\t\tvisibility: visible;\n\t\tpointer-events: auto;\n\t}\n\n\t.dialog {\n\t\tposition: absolute;\n\t\tmax-width: 360px;\n\t\twidth: max-content;\n\t\topacity: 0;\n\t\ttransform: scale(0.95);\n\t\ttransition:\n\t\t\topacity 0.15s ease,\n\t\t\ttransform 0.15s ease;\n\t}\n\n\t:host([open]) .dialog {\n\t\topacity: 1;\n\t\ttransform: scale(1);\n\t}\n\n\t.overlay {\n\t\tposition: fixed;\n\t\tinset: 0;\n\t\tbackground: rgba(0, 0, 0, 0.4);\n\t\topacity: 0;\n\t\ttransition: opacity 0.15s ease;\n\t}\n\n\t:host([open]) .overlay {\n\t\topacity: 1;\n\t}\n`) {\n\t/**\n\t * Whether the dialog is open\n\t */\n\t@property({ type: Boolean, reflect: true })\n\topen = false\n\n\t/**\n\t * Dialog title\n\t */\n\t@property({ type: String })\n\ttitle = 'Confirm Action'\n\n\t/**\n\t * Dialog message\n\t */\n\t@property({ type: String })\n\tmessage = 'Are you sure you want to proceed?'\n\n\t/**\n\t * Text for confirm button\n\t */\n\t@property({ type: String })\n\tconfirmText = 'Confirm'\n\n\t/**\n\t * Text for cancel button\n\t */\n\t@property({ type: String })\n\tcancelText = 'Cancel'\n\n\t/**\n\t * Dialog variant (affects button colors)\n\t */\n\t@property({ type: String })\n\tvariant: 'default' | 'danger' = 'default'\n\n\t/**\n\t * Internal position state\n\t */\n\t@state() private _position = { x: 0, y: 0 }\n\n\t/**\n\t * Last clicked position for initial placement\n\t */\n\tprivate _clickPosition = { x: 0, y: 0 }\n\n\t/**\n\t * Show the dialog at specific coordinates\n\t */\n\tpublic showAt(x: number, y: number) {\n\t\tthis._clickPosition = { x, y }\n\t\tthis._position = this._calculateOptimalPosition(x, y)\n\t\tthis.open = true\n\t\tthis._setupListeners()\n\t}\n\n\t/**\n\t * Hide the dialog\n\t */\n\tpublic hide() {\n\t\tthis.open = false\n\t}\n\n\t/**\n\t * Find the best position for the dialog based on click coordinates\n\t */\n\tprivate _calculateOptimalPosition(x: number, y: number) {\n\t\t// Wait for next frame to ensure dialog is rendered and has dimensions\n\t\trequestAnimationFrame(() => {\n\t\t\tconst dialog = this.shadowRoot?.querySelector('.dialog') as HTMLElement\n\t\t\tif (!dialog) return\n\n\t\t\tconst dialogWidth = dialog.offsetWidth\n\t\t\tconst dialogHeight = dialog.offsetHeight\n\t\t\tconst viewport = {\n\t\t\t\twidth: window.innerWidth,\n\t\t\t\theight: window.innerHeight,\n\t\t\t}\n\n\t\t\t// Start with the click position\n\t\t\tlet newX = x\n\t\t\tlet newY = y\n\n\t\t\t// Ensure dialog stays in viewport horizontally\n\t\t\tif (newX + dialogWidth > viewport.width - 16) {\n\t\t\t\tnewX = Math.max(16, viewport.width - dialogWidth - 16)\n\t\t\t}\n\n\t\t\t// Ensure dialog stays in viewport vertically\n\t\t\tif (newY + dialogHeight > viewport.height - 16) {\n\t\t\t\t// Place above click if there's room\n\t\t\t\tif (y > dialogHeight + 16) {\n\t\t\t\t\tnewY = y - dialogHeight - 8\n\t\t\t\t} else {\n\t\t\t\t\t// Otherwise place at top of screen with small margin\n\t\t\t\t\tnewY = 16\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Update the position state\n\t\t\tthis._position = { x: newX, y: newY }\n\t\t})\n\n\t\t// Return initial position for first render\n\t\treturn { x, y }\n\t}\n\n\t/**\n\t * Setup event listeners when dialog opens\n\t */\n\tprivate _setupListeners() {\n\t\t// Listen for ESC key\n\t\tfromEvent<KeyboardEvent>(document, 'keydown')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(e => {\n\t\t\t\tif (e.key === 'Escape' && this.open) {\n\t\t\t\t\tthis._handleCancel()\n\t\t\t\t}\n\t\t\t})\n\n\t\t// Handle window resize to reposition dialog if needed\n\t\tfromEvent(window, 'resize')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(() => {\n\t\t\t\tif (this.open) {\n\t\t\t\t\tthis._position = this._calculateOptimalPosition(this._clickPosition.x, this._clickPosition.y)\n\t\t\t\t}\n\t\t\t})\n\t}\n\n\t/**\n\t * Handle confirm action\n\t */\n\tprivate _handleConfirm() {\n\t\tthis.hide()\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('confirm', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\t/**\n\t * Handle cancel action\n\t */\n\tprivate _handleCancel() {\n\t\tthis.hide()\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('cancel', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\trender() {\n\t\tconst dialogStyles = {\n\t\t\tleft: `${this._position.x}px`,\n\t\t\ttop: `${this._position.y}px`,\n\t\t}\n\n\t\treturn html`\n\t\t\t<div class=\"overlay\" @click=${this._handleCancel}></div>\n\n\t\t\t<div\n\t\t\t\tclass=\"dialog\"\n\t\t\t\tstyle=${styleMap(dialogStyles)}\n\t\t\t\trole=\"alertdialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\taria-labelledby=\"dialog-title\"\n\t\t\t\taria-describedby=\"dialog-message\"\n\t\t\t>\n\t\t\t\t<schmancy-surface rounded=\"all\" elevation=\"3\" type=\"containerHigh\">\n\t\t\t\t\t<div class=\"p-4\">\n\t\t\t\t\t\t<div id=\"dialog-title\" class=\"mb-2\">\n\t\t\t\t\t\t\t<schmancy-typography type=\"title\" token=\"md\"> ${this.title} </schmancy-typography>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div id=\"dialog-message\" class=\"mb-4\">\n\t\t\t\t\t\t\t<schmancy-typography type=\"body\"> ${this.message} </schmancy-typography>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"flex justify-end gap-3\">\n\t\t\t\t\t\t\t<schmancy-button variant=\"outlined\" @click=${this._handleCancel}> ${this.cancelText} </schmancy-button>\n\n\t\t\t\t\t\t\t<schmancy-button\n\t\t\t\t\t\t\t\tvariant=\"filled\"\n\t\t\t\t\t\t\t\t${color({\n\t\t\t\t\t\t\t\t\tbgColor:\n\t\t\t\t\t\t\t\t\t\tthis.variant === 'danger'\n\t\t\t\t\t\t\t\t\t\t\t? SchmancyTheme.sys.color.error.default\n\t\t\t\t\t\t\t\t\t\t\t: SchmancyTheme.sys.color.primary.default,\n\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\tthis.variant === 'danger' ? SchmancyTheme.sys.color.error.on : SchmancyTheme.sys.color.primary.on,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t@click=${this._handleConfirm}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t${this.confirmText}\n\t\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</schmancy-surface>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'confirm-dialog': ConfirmDialog\n\t}\n}\n"],"names":["ConfirmDialog","$LitElement","css","constructor","super","arguments","this","open","title","message","confirmText","cancelText","variant","_position","x","y","_clickPosition","_calculateOptimalPosition","_setupListeners","hide","requestAnimationFrame","dialog","shadowRoot","querySelector","dialogWidth","offsetWidth","dialogHeight","offsetHeight","viewport","window","innerWidth","innerHeight","newX","newY","Math","max","fromEvent","document","pipe","takeUntil","disconnecting","subscribe","e","key","_handleCancel","_handleConfirm","dispatchEvent","CustomEvent","bubbles","composed","render","dialogStyles","left","top","html","styleMap","color","bgColor","SchmancyTheme","sys","error","default","primary","on","__decorateClass","property","type","Boolean","reflect","prototype","String","state","customElement"],"mappings":"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"}