drab 5.0.1 → 5.0.2

package/details/define.iife.js

@@ -1 +1 @@
-"use strict";(()=>{var m=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let i=this.querySelector(this.getAttribute("content")??"[data-content]");if(i instanceof t)return i;throw new Error("Content not found")}swapContent(t=!0,i=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let n=Array.from(this.getContent().childNodes);e instanceof HTMLTemplateElement?this.getContent().replaceChildren(e.content.cloneNode(!0)):this.getContent().replaceChildren(...e.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...n),i)}}safeListener(t,i,e=document.body,n={}){n.signal=this.#t.signal,e.addEventListener(t,i,n)}triggerListener(t,i=this.event){for(let e of this.getTrigger())e.addEventListener(i,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#t.abort()}};var f=class extends m{constructor(){super()}get animationOptions(){let t={};for(let i of this.getAttributeNames())if(i.startsWith("animation-option-")){let e=this.getAttribute(i),[,,n]=i.split("-");e&&(n==="duration"||n==="delay"?t[n]=Number(e):n==="easing"&&(t[n]=e))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:i=this.getContent(),options:e={}}=t,n=this.keyframes;if(n.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let o=n.at(0),s=n.at(-1);if(o&&s){let a=["composite","easing","offset"];for(let l of a)delete o[l],delete s[l]}e.direction?.includes("reverse")&&([o,s]=[s,o]),Object.assign(i.style,o),await i.animate(n,e).finished,Object.assign(i.style,s)}}get keyframes(){let t=[];for(let i of this.getAttributeNames()){let e=this.getAttribute(i),[,,n,...o]=i.split("-");if(i.startsWith("animation-keyframe-")){let s=o.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(n&&s){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let r=Number(n),a=t.find(l=>l.offset===r);a?a[s]=e:t.push({[s]:e,offset:r})}}}return t.sort((i,e)=>Number(i.offset)-Number(e.offset)),t}};var c=class extends f{constructor(){super()}get details(){let t=this.getContent(HTMLElement).parentElement;if(!(t instanceof HTMLDetailsElement))throw new Error("Details: HTMLDetailsElement not found.");return t}async open(){this.details.open=!0,await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.details.open=!1}toggle(){this.details.open?this.close():this.open()}mount(){this.triggerListener(t=>{t.preventDefault(),this.toggle()})}};customElements.define("drab-details",c);})();
+"use strict";(()=>{var m=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let i=this.querySelector(this.getAttribute("content")??"[data-content]");if(i instanceof e)return i;throw new Error("Content not found")}swapContent(e=!0,i=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let n=Array.from(this.getContent().childNodes);t instanceof HTMLTemplateElement?this.getContent().replaceChildren(t.content.cloneNode(!0)):this.getContent().replaceChildren(...t.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...n),i)}}safeListener(e,i,t=document.body,n={}){n.signal=this.#e.signal,t.addEventListener(e,i,n)}triggerListener(e,i=this.event){for(let t of this.getTrigger())t.addEventListener(i,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var f=class extends m{constructor(){super()}get animationOptions(){let e={};for(let i of this.getAttributeNames())if(i.startsWith("animation-option-")){let t=this.getAttribute(i),[,,n]=i.split("-");t&&(n==="duration"||n==="delay"?e[n]=Number(t):n==="easing"&&(e[n]=t))}return e}async animateElement(e={element:this.getContent(),options:{}}){let{element:i=this.getContent(),options:t={}}=e,n=this.keyframes;if(n.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){t=Object.assign(this.animationOptions,t),t.duration||(t.duration=200),t.easing||(t.easing="ease-in-out");let o=n.at(0),s=n.at(-1);if(o&&s){let a=["composite","easing","offset"];for(let l of a)delete o[l],delete s[l]}t.direction?.includes("reverse")&&([o,s]=[s,o]),Object.assign(i.style,o),await i.animate(n,t).finished,Object.assign(i.style,s)}}get keyframes(){let e=[];for(let i of this.getAttributeNames()){let t=this.getAttribute(i),[,,n,...o]=i.split("-");if(i.startsWith("animation-keyframe-")){let s=o.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(n&&s){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let r=Number(n),a=e.find(l=>l.offset===r);a?a[s]=t:e.push({[s]:t,offset:r})}}}return e.sort((i,t)=>Number(i.offset)-Number(t.offset)),e}};var c=class extends f{constructor(){super()}get details(){let e=this.getContent(HTMLElement).parentElement;if(!(e instanceof HTMLDetailsElement))throw new Error("Details: HTMLDetailsElement not found.");return e}async open(){this.details.open=!0,await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.details.open=!1}toggle(){this.details.open?this.close():this.open()}mount(){this.triggerListener(e=>{e.preventDefault(),this.toggle()})}};customElements.define("drab-details",c);})();

package/details/define.js

@@ -1 +1,2 @@
-import{a as e}from"../chunk-LHXOPRVC.js";import"../chunk-F5BEEHGA.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-details",e);
+import { Details } from "./index.js";
+customElements.define("drab-details", Details);

package/details/index.d.ts

@@ -1,8 +1,6 @@
-import { AnimateAttributes, Animate } from '../animate/index.js';
-import { A as Attributes } from '../index-J5TqSvEl.js';
-import '../base/index.js';
-
-type DetailsAttributes = Attributes<Details> & AnimateAttributes;
+import { Animate, type AnimateAttributes } from "../animate/index.js";
+import type { Attributes } from "../types/index.js";
+export type DetailsAttributes = Attributes<Details> & AnimateAttributes;
 /**
  * This element provides a progressive enhancement on top of the `HTMLDetailsElement` to
  * animate it with the Web Animations API.
@@ -12,7 +10,7 @@ type DetailsAttributes = Attributes<Details> & AnimateAttributes;
  * this animation. If you know the exact height of the content, you could animate `height`
  * instead.
  */
-declare class Details extends Animate {
+export declare class Details extends Animate {
     constructor();
     get details(): HTMLDetailsElement;
     open(): Promise<void>;
@@ -21,5 +19,3 @@ declare class Details extends Animate {
     toggle(): void;
     mount(): void;
 }
-
-export { Details, type DetailsAttributes };

package/details/index.js

@@ -1 +1,46 @@
-import{a}from"../chunk-LHXOPRVC.js";import"../chunk-F5BEEHGA.js";import"../chunk-MXKU7AKV.js";export{a as Details};
+import { Animate } from "../animate/index.js";
+/**
+ * This element provides a progressive enhancement on top of the `HTMLDetailsElement` to
+ * animate it with the Web Animations API.
+ *
+ * The best way I've found to animate the details element is using CSS grid from this
+ * [Kevin Powell video](https://youtu.be/B_n4YONte5A?t=116). The example demonstrates
+ * this animation. If you know the exact height of the content, you could animate `height`
+ * instead.
+ */
+export class Details extends Animate {
+    constructor() {
+        super();
+    }
+    get details() {
+        const details = this.getContent(HTMLElement).parentElement;
+        if (!(details instanceof HTMLDetailsElement))
+            throw new Error("Details: HTMLDetailsElement not found.");
+        return details;
+    }
+    async open() {
+        this.details.open = true;
+        await this.animateElement();
+    }
+    /** Closes details with animation. */
+    async close() {
+        await this.animateElement({
+            options: { direction: "reverse" },
+        });
+        this.details.open = false;
+    }
+    toggle() {
+        if (this.details.open) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    mount() {
+        this.triggerListener((e) => {
+            e.preventDefault();
+            this.toggle();
+        });
+    }
+}

package/dialog/define.d.ts

@@ -1,2 +1 @@
-
-export {  }
+export {};

package/dialog/define.js

@@ -1 +1,2 @@
-import{a as o}from"../chunk-H4RNP4O4.js";import"../chunk-F5BEEHGA.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-dialog",o);
+import { Dialog } from "./index.js";
+customElements.define("drab-dialog", Dialog);

package/dialog/index.d.ts

@@ -1,12 +1,10 @@
-import { AnimateAttributes, Animate } from '../animate/index.js';
-import { A as Attributes } from '../index-J5TqSvEl.js';
-import '../base/index.js';
-
-type DialogAttributes = Attributes<Dialog> & AnimateAttributes;
+import { Animate, type AnimateAttributes } from "../animate/index.js";
+import type { Attributes } from "../types/index.js";
+export type DialogAttributes = Attributes<Dialog> & AnimateAttributes;
 /**
  * Provides triggers and animations for the `HTMLDialogElement`.
  */
-declare class Dialog extends Animate {
+export declare class Dialog extends Animate {
     constructor();
     /** The `HTMLDialogElement` within the element. */
     get dialog(): HTMLDialogElement;
@@ -18,5 +16,3 @@ declare class Dialog extends Animate {
     toggle(): Promise<void>;
     mount(): void;
 }
-
-export { Dialog, type DialogAttributes };

package/dialog/index.js

@@ -1 +1,44 @@
-import{a}from"../chunk-H4RNP4O4.js";import"../chunk-F5BEEHGA.js";import"../chunk-MXKU7AKV.js";export{a as Dialog};
+import { Animate } from "../animate/index.js";
+/**
+ * Provides triggers and animations for the `HTMLDialogElement`.
+ */
+export class Dialog extends Animate {
+    constructor() {
+        super();
+    }
+    /** The `HTMLDialogElement` within the element. */
+    get dialog() {
+        return this.getContent(HTMLDialogElement);
+    }
+    /** `HTMLDialogElement.showModal()` with animation. */
+    async show() {
+        this.dialog.showModal();
+        await this.animateElement();
+    }
+    /** `HTMLDialogElement.close()` with animation. */
+    async close() {
+        await this.animateElement({
+            options: {
+                direction: "reverse",
+            },
+        });
+        this.dialog.close();
+    }
+    /** `show` or `close` depending on the dialog's `open` attribute. */
+    async toggle() {
+        if (this.dialog.open)
+            this.close();
+        else
+            this.show();
+    }
+    mount() {
+        this.triggerListener(() => this.toggle());
+        this.safeListener("keydown", (e) => {
+            if (e.key === "Escape" && this.dialog.open) {
+                // to execute animation
+                e.preventDefault();
+                this.close();
+            }
+        });
+    }
+}

package/editor/define.d.ts

@@ -1,2 +1 @@
-
-export {  }
+export {};

package/editor/define.js

@@ -1 +1,2 @@
-import{a as e}from"../chunk-GPET75FT.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-editor",e);
+import { Editor } from "./index.js";
+customElements.define("drab-editor", Editor);

package/editor/index.d.ts

@@ -1,11 +1,10 @@
-import { Base } from '../base/index.js';
-import { A as Attributes } from '../index-J5TqSvEl.js';
-
-type EditorAttributes = Attributes<Editor>;
+import { Base } from "../base/index.js";
+import type { Attributes } from "../types/index.js";
+export type EditorAttributes = Attributes<Editor>;
 /**
  * A piece of content to insert into the `textarea`.
  */
-type ContentElement = {
+export type ContentElement = {
     /** How to insert the content. */
     type: "block" | "inline" | "wrap";
     /** The value to insert. */
@@ -42,7 +41,7 @@ type ContentElement = {
  * - `tab` key will indent and not change focus if the selection is within a code block (three backticks).
  * - When text is highlighted and a `wrap` character `keyPair` is typed, the highlighted text will be wrapped with the character instead of removing it. For example, if a word is highlighted and the `"` character is typed, the work will be surrounded by `"`s.
  */
-declare class Editor extends Base {
+export declare class Editor extends Base {
     #private;
     /** The characters that will be automatically closed when typed. */
     keyPairs: {
@@ -56,5 +55,3 @@ declare class Editor extends Base {
     set text(value: string);
     mount(): void;
 }
-
-export { type ContentElement, Editor, type EditorAttributes };