@alegendstale/holly-components 0.2.9 → 0.2.11

package/dist/components/absolute-container/absolute-container.js

@@ -1,96 +1,118 @@
-import { css as h, LitElement as d, html as c } from "lit";
-import { property as a, state as f, customElement as u } from "lit/decorators.js";
-import { createRef as m, ref as g } from "lit/directives/ref.js";
-import { styleMap as b } from "lit/directives/style-map.js";
-import { EventEmitter as v } from "../../utils/EventEmitter.js";
-var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (e, t, r, i) => {
-  for (var o = i > 1 ? void 0 : i ? _(t, r) : t, l = e.length - 1, p; l >= 0; l--)
-    (p = e[l]) && (o = (i ? p(t, r, o) : p(o)) || o);
-  return i && o && y(t, r, o), o;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-let s = class extends d {
-  constructor() {
-    super(...arguments), this.dialogRef = m(), this._open = !1, this.left = 0, this.top = 0, this.emitter = new v(), this.disableContextEvent = !1;
-  }
-  set open(e) {
-    this._open = e, requestAnimationFrame(() => {
-      if (!this.dialogRef.value) return;
-      let t = this.dialogRef.value;
-      t.open ? t.close() : t.showModal();
-    }), this.emitter.emit("visibility", e);
-  }
-  get open() {
-    return this._open;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.emitter.clear();
-  }
-  render() {
-    const e = {
-      inset: this.left === 0 && this.top === 0 ? 0 : "unset",
-      left: `${this.left}px`,
-      top: `${this.top}px`
-    };
-    return c`
-			<dialog
-				part='dialog'
-				style=${b(e)}
-				@mousedown=${(t) => {
-      if (!(t.target instanceof HTMLElement)) return;
-      const r = t.offsetX < 0 || t.offsetX > t.target.offsetWidth, i = t.offsetY < 0 || t.offsetY > t.target.offsetHeight;
-      (r || i) && (this.open = !1);
-    }}
-				@contextmenu=${(t) => this.disableContextEvent && t.preventDefault()}
-				${g(this.dialogRef)}
-			>
-				<slot></slot>
-			</dialog>
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { EventEmitter } from '../../utils/EventEmitter';
+let AbsoluteContainer = class AbsoluteContainer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.dialogRef = createRef();
+        this._open = false;
+        this.left = 0;
+        this.top = 0;
+        this.emitter = new EventEmitter();
+        /**
+         * Disables the ContextEvent (right click, or long touch)
+         *
+         * Useful for context menus
+         */
+        this.disableContextEvent = false;
+    }
+    set open(val) {
+        this._open = val;
+        requestAnimationFrame(() => {
+            if (!this.dialogRef.value)
+                return;
+            let dialog = this.dialogRef.value;
+            if (dialog.open)
+                dialog.close();
+            else
+                dialog.showModal();
+        });
+        this.emitter.emit('visibility', val);
+    }
+    get open() {
+        return this._open;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.emitter.clear();
+    }
+    render() {
+        const dialogStyles = {
+            inset: this.left === 0 && this.top === 0 ? 0 : 'unset',
+            left: `${this.left}px`,
+            top: `${this.top}px`,
+        };
+        return html `
+			<dialog
+				part='dialog'
+				style=${styleMap(dialogStyles)}
+				@mousedown=${(e) => {
+            if (!(e.target instanceof HTMLElement))
+                return;
+            const outsideWidthBounds = e.offsetX < 0 || e.offsetX > e.target.offsetWidth;
+            const outsideHeightBounds = e.offsetY < 0 || e.offsetY > e.target.offsetHeight;
+            // Check if cursor is inside element bounds. Close dialog if it isn't.
+            if (outsideWidthBounds || outsideHeightBounds)
+                this.open = false;
+        }}
+				@contextmenu=${(e) => this.disableContextEvent && e.preventDefault()}
+				${ref(this.dialogRef)}
+			>
+				<slot></slot>
+			</dialog>
 		`;
-  }
-  toggle() {
-    this.open = !this.open;
-  }
-  setOpen(e) {
-    this.open = e;
-  }
-  setPosition(e, t) {
-    this.left = e, this.top = t;
-  }
+    }
+    toggle() {
+        this.open = !this.open;
+    }
+    setOpen(val) {
+        this.open = val;
+    }
+    setPosition(left, top) {
+        this.left = left;
+        this.top = top;
+    }
 };
-s.styles = [
-  h`
-			:host {
-				display: block;
-			}
-
-			dialog {
-				width: min-content;
-				border: 0;
-				padding: 0;
-				background-color: transparent;
-				scrollbar-width: thin;
-
-				&::backdrop {
-					background-color: transparent;
-				}
-			}
+AbsoluteContainer.styles = [
+    css `
+			:host {
+				display: block;
+			}
+
+			dialog {
+				width: min-content;
+				border: 0;
+				padding: 0;
+				background-color: transparent;
+				scrollbar-width: thin;
+
+				&::backdrop {
+					background-color: transparent;
+				}
+			}
 		`
 ];
-n([
-  a({ type: Boolean, reflect: !0 })
-], s.prototype, "open", 1);
-n([
-  f()
-], s.prototype, "left", 2);
-n([
-  f()
-], s.prototype, "top", 2);
-n([
-  a({ type: Boolean, reflect: !0 })
-], s.prototype, "disableContextEvent", 2);
-s = n([
-  u("absolute-container")
-], s);
-export {
-  s as AbsoluteContainer
-};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AbsoluteContainer.prototype, "open", null);
+__decorate([
+    state()
+], AbsoluteContainer.prototype, "left", void 0);
+__decorate([
+    state()
+], AbsoluteContainer.prototype, "top", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AbsoluteContainer.prototype, "disableContextEvent", void 0);
+AbsoluteContainer = __decorate([
+    customElement('absolute-container')
+], AbsoluteContainer);
+export { AbsoluteContainer };

package/dist/components/absolute-container/absolute-container.stories.js

@@ -0,0 +1,36 @@
+import { html } from 'lit';
+import { createRef, ref } from 'lit/directives/ref.js';
+const meta = {
+    title: 'Absolute Container',
+    tags: ['autodocs'],
+    component: 'absolute-container',
+};
+export default meta;
+const Template = {
+    render: ({ disableContextEvent }) => {
+        let absoluteRef = createRef();
+        return html `
+			<button 
+				@click=${() => {
+            if (absoluteRef.value) {
+                let absolute = absoluteRef.value;
+                absolute.toggle();
+            }
+        }}
+			>
+				Open Absolute Container
+			</button>
+			<absolute-container
+				?disableContextEvent=${disableContextEvent}
+				open
+				${ref(absoluteRef)}
+			>
+				Hello
+			</absolute-container>
+		`;
+    },
+};
+export const Example = {
+    ...Template,
+    args: {},
+};

package/dist/components/absolute-container/index.js

@@ -1 +1 @@
-import "./absolute-container.js";
+import './absolute-container';