drab 5.0.0 → 5.0.2

package/youtube/index.js

@@ -1 +1,56 @@
-import{a}from"../chunk-VEVFQB5N.js";import"../chunk-MXKU7AKV.js";export{a as YouTube};
+import { Base } from "../base/index.js";
+/**
+ * Embeds a YouTube video iframe into a website with the video uid, using www.youtube-nocookie.com.
+ */
+export class YouTube extends Base {
+    static observedAttributes = ["autoplay", "start", "uid"];
+    constructor() {
+        super();
+    }
+    /** The `HTMLIFrameElement` within the element. */
+    get iframe() {
+        return this.getContent(HTMLIFrameElement);
+    }
+    /** Whether the video should start playing when loaded. */
+    get autoplay() {
+        return this.hasAttribute("autoplay");
+    }
+    set autoplay(value) {
+        if (value)
+            this.setAttribute("autoplay", "");
+        else
+            this.removeAttribute("autoplay");
+    }
+    /** The start time of the video (seconds). */
+    get start() {
+        return this.getAttribute("start") ?? "0";
+    }
+    set start(value) {
+        this.setAttribute("start", value);
+    }
+    /**
+     * The video's YouTube uid, found within the url of the video.
+     *
+     * For example if the video url is https://youtu.be/gouiY85kD2o,
+     * the `uid` is `"gouiY85kD2o"`.
+     */
+    get uid() {
+        const uid = this.getAttribute("uid");
+        if (!uid)
+            throw new Error("YouTube: missing `uid` attribute.");
+        return uid;
+    }
+    set uid(v) {
+        this.setAttribute("uid", v);
+    }
+    mount() {
+        this.iframe.allowFullscreen = true;
+        this.iframe.allow =
+            "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
+    }
+    attributeChangedCallback() {
+        queueMicrotask(() => {
+            this.iframe.src = `https://www.youtube-nocookie.com/embed/${this.uid}?start=${this.start}${this.autoplay ? "&autoplay=1" : ""}`;
+        });
+    }
+}

package/chunk-57VEEUFG.js

@@ -1 +0,0 @@
-import{a as l}from"./chunk-7KU2PRW5.js";var a=class extends l{#t;constructor(){super()}set#e(t){this.getContent().style.left=`${t.x}px`,this.getContent().style.top=`${t.y}px`}async show(t){let e=window.scrollY,i=window.scrollX,d=t instanceof MouseEvent?t.clientX:t.touches[0]?.clientX??0,f=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,s=d+i,n=f+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let o=this.getContent().offsetWidth+24,h=this.getContent().offsetHeight+6,c=window.innerWidth,r=window.innerHeight;s+o>i+c&&(s=i+c-o),n+h>e+r&&(n=e+r-h),this.#e={x:s,y:n},await this.animateElement()}async hide(){this.getContent().style.display!=="none"&&(await this.animateElement({options:{direction:"reverse"}}),this.getContent().style.display="none")}mount(){this.triggerListener(e=>{e.preventDefault(),this.show(e)},"contextmenu"),this.safeListener("click",()=>this.hide()),this.triggerListener(e=>{this.#t=setTimeout(()=>{this.show(e)},800)},"touchstart");let t=()=>clearTimeout(this.#t);this.triggerListener(t,"touchend"),this.triggerListener(t,"touchcancel"),this.safeListener("keydown",e=>{e.key==="Escape"&&this.hide()})}};export{a};

package/chunk-5JV4T7GM.js

@@ -1 +0,0 @@
-import{b as t}from"./chunk-MXKU7AKV.js";var r=class extends t{constructor(){super()}isFullscreen(){return document.fullscreenElement!==null}fullscreenSupported(){return!!document.documentElement.requestFullscreen}toggle(){if(this.isFullscreen())document.exitFullscreen();else try{this.getContent(HTMLElement).requestFullscreen()}catch{document.documentElement.requestFullscreen()}}mount(){this.triggerListener(()=>this.toggle());for(let e of this.getTrigger())!this.fullscreenSupported()&&"disabled"in e&&(e.disabled=!0)}};export{r as a};

package/chunk-6HYPZWQ4.js

@@ -1 +0,0 @@
-import{b as n}from"./chunk-MXKU7AKV.js";var s=class extends n{breakpoints=[{name:"sm",width:640},{name:"md",width:768},{name:"lg",width:1024},{name:"xl",width:1280},{name:"2xl",width:1536}];constructor(){super();let t=[];for(let e of this.getAttributeNames())if(e.startsWith("breakpoint-")){let[,...i]=e.split("-");i&&t.push({name:i.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,i)=>i.width-e.width)}get breakpoint(){for(let t=0;t<this.breakpoints.length;t++){let e=this.breakpoints[t];if(e&&window.innerWidth>e.width)return e.name}return"none"}mount(){let t=()=>this.getContent().innerHTML=`${this.breakpoint}:${window.innerWidth}`;t(),this.safeListener("resize",t,window)}};export{s as a};

package/chunk-7F7CQUEG.js

@@ -1 +0,0 @@
-import{b as e}from"./chunk-MXKU7AKV.js";var r=class extends e{constructor(){super()}get value(){return this.getAttribute("value")??""}set value(t){this.setAttribute("value",t)}async copy(t=this.value){await navigator.clipboard.writeText(t),this.swapContent()}};export{r as a};

package/chunk-7KU2PRW5.js

@@ -1 +0,0 @@
-import{b as m}from"./chunk-MXKU7AKV.js";var l=class extends m{constructor(){super()}get animationOptions(){let i={};for(let s of this.getAttributeNames())if(s.startsWith("animation-option-")){let e=this.getAttribute(s),[,,t]=s.split("-");e&&(t==="duration"||t==="delay"?i[t]=Number(e):t==="easing"&&(i[t]=e))}return i}async animateElement(i={element:this.getContent(),options:{}}){let{element:s=this.getContent(),options:e={}}=i,t=this.keyframes;if(t.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=t.at(0),n=t.at(-1);if(o&&n){let r=["composite","easing","offset"];for(let f of r)delete o[f],delete n[f]}e.direction?.includes("reverse")&&([o,n]=[n,o]),Object.assign(s.style,o),await s.animate(t,e).finished,Object.assign(s.style,n)}}get keyframes(){let i=[];for(let s of this.getAttributeNames()){let e=this.getAttribute(s),[,,t,...o]=s.split("-");if(s.startsWith("animation-keyframe-")){let n=o.map((a,r)=>r<1?a:a.at(0)?.toUpperCase()+a.slice(1)).join("");if(t&&n){t==="from"?t="0":t==="to"?t="1":t=String(parseInt(t)*.01);let a=Number(t),r=i.find(f=>f.offset===a);r?r[n]=e:i.push({[n]:e,offset:a})}}}return i.sort((s,e)=>Number(s.offset)-Number(e.offset)),i}};export{l as a};

package/chunk-7S6DTKGH.js

@@ -1 +0,0 @@
-import{a as t}from"./chunk-7KU2PRW5.js";var s=class extends t{constructor(){super()}get dialog(){return this.getContent(HTMLDialogElement)}async show(){this.dialog.showModal(),await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.dialog.close()}async toggle(){this.dialog.open?this.close():this.show()}mount(){this.triggerListener(()=>this.toggle()),this.safeListener("keydown",e=>{e.key==="Escape"&&this.dialog.open&&(e.preventDefault(),this.close())})}};export{s as a};

package/chunk-G5WFHYNX.js

@@ -1 +0,0 @@
-import{a as M}from"./chunk-VEVFQB5N.js";import{a as h}from"./chunk-GPET75FT.js";import{a as y}from"./chunk-5JV4T7GM.js";import{a as v}from"./chunk-T7RZI3ZL.js";import{a as L}from"./chunk-IQJQPZUL.js";import{a as b}from"./chunk-57VEEUFG.js";import{a as T}from"./chunk-TSTTUEAF.js";import{a as A}from"./chunk-JMJUWKN2.js";import{a as E}from"./chunk-7S6DTKGH.js";import{a as p}from"./chunk-7KU2PRW5.js";import{a as d}from"./chunk-6HYPZWQ4.js";import{a as H,b as i}from"./chunk-MXKU7AKV.js";var g={};H(g,{Animate:()=>p,Base:()=>i,Breakpoint:()=>d,ContextMenu:()=>b,Copy:()=>T,Details:()=>A,Dialog:()=>E,Editor:()=>h,Fullscreen:()=>y,Popover:()=>v,Share:()=>L,TableSort:()=>l,YouTube:()=>M});var l=class extends i{constructor(){super()}#t(t){let e="data-asc",r="data-desc";for(let n of this.getTrigger())n!==t&&(n.removeAttribute(e),n.removeAttribute(r));return t.hasAttribute(e)?(t.removeAttribute(e),t.setAttribute(r,""),!1):(t.removeAttribute(r),t.setAttribute(e,""),!0)}mount(){let t=this.getContent(HTMLTableSectionElement);for(let e of this.getTrigger())e.addEventListener(this.event,()=>{Array.from(t.querySelectorAll("tr")).sort(C(e,this.#t(e))).forEach(r=>t.appendChild(r))})}},C=(o,t)=>(r,n)=>{let c=Array.from(o.parentNode?.children??[]).indexOf(o);return((s,a)=>{let u=o.dataset.type??"string";if(u==="string")return new Intl.Collator().compare(s,a);if(u==="boolean"){let m=f=>["0","false","null","undefined"].includes(f)?!1:!!f;return m(s)===m(a)?0:m(s)?-1:1}else return Number(s)-Number(a)})(x(t?r:n,c),x(t?n:r,c))},x=(o,t)=>{let e=o.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};export{l as a,g as b};

package/chunk-GPET75FT.js

@@ -1,9 +0,0 @@
-import{b as p}from"./chunk-MXKU7AKV.js";var x=class extends p{#s=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#h)t.type==="wrap"&&(this.keyPairs[t.value]=t.value)}get textArea(){return this.getContent(HTMLTextAreaElement)}get text(){return this.textArea.value}set text(t){this.textArea.value=t}get#h(){let t=[];for(let s of this.getTrigger())t.push(this.#l(s));return t}get#o(){let t=this.text.split("```"),s=0;for(let[i,e]of t.entries())if(s+=e.length+3,this.#e<s)return i;return 0}get#t(){return this.textArea.selectionEnd}get#e(){return this.textArea.selectionStart}#i(t,s){this.textArea.setSelectionRange(t,s)}#l(t){let s=t.dataset.type,i=t.dataset.value,e=t.dataset.key??void 0;return{type:s,value:i,key:e}}async#c(t,s,i){if(t.type==="inline")this.text=`${this.text.slice(0,i)}${t.value}${this.text.slice(i)}`;else if(t.type==="wrap")this.text=k(this.text,t.value,s),this.text=k(this.text,this.keyPairs[t.value],i+t.value.length),t.value.length<2&&this.#s.push(t.value);else if(t.type==="block"){let{lines:e,lineNumber:n}=this.#r(),r=t.value.at(0);r&&e[n]?.startsWith(r)?e[n]=t.value.trim()+e[n]:e[n]=t.value+e[n],this.text=e.join(`
-`)}}async#u(t,s,i){let e=0,n=0;if(/[a-z]/i.test(t)){for(let r=i;r<this.text.length;r++)if(this.text[r]?.match(/[a-z]/i))e?n=r+1:e=r;else if(e)break}else e=s+t.length,n=i+t.length;this.#i(e,n),this.textArea.focus()}async#n(t){let s=this.#t,i=this.#e;await this.#c(t,i,s),this.#u(t.value,i,s)}#f(t){if(t){let s=[];this.#h.forEach(e=>{e.type==="block"&&s.push(e.value)});for(let e=0;e<s.length;e++){let n=s[e];if(n&&t.startsWith(n))return n}let i=g(t);if(i)return`${i}. `}return""}#r(){let t=this.text.split(`
-`),s=0;for(let i=0;i<t.length;i++){let e=t.at(i)?.length??0;if(s++,s+=e,s>this.#t)return{lines:t,lineNumber:i,columnNumber:this.#t-(s-e-1)}}return{lines:t,lineNumber:0,columnNumber:0}}#a(t,s=!1){let{lines:i}=this.#r();for(let e=t+1;e<i.length;e++){let n=i[e];if(n){let r=g(n);if(r){let h;if(s)if(r>1)h=r-1;else break;else h=r+1;i[e]=n.slice(String(r).length),i[e]=String(h)+i[e]}else break}}this.text=i.join(`
-`)}mount(){this.textArea.addEventListener("keydown",async t=>{let s=["ArrowUp","ArrowDown","Delete"],i=this.text[this.#t]??"";if(s.includes(t.key))this.#s=[];else if(t.key==="Backspace"){let e=this.text[this.#e-1];if(e&&e in this.keyPairs&&i===this.keyPairs[e]){t.preventDefault();let n=this.#e-1,r=this.#t-1;this.text=c(this.text,n),this.text=c(this.text,r),setTimeout(()=>{this.#i(n,r)},0),this.#s.pop()}if(e===`
-`&&this.#e===this.#t){t.preventDefault();let n=this.#e-1,{lineNumber:r}=this.#r();this.#a(r,!0),this.text=c(this.text,n),setTimeout(async()=>{this.#i(n,n)},0)}}else if(t.key==="Tab")this.#o%2!==0&&(t.preventDefault(),await this.#n({type:"inline",value:"	"}));else if(t.key==="Enter"){let{lines:e,lineNumber:n,columnNumber:r}=this.#r(),h=e.at(n),a=this.#f(h),o=a,u=g(a);if(u&&(a=`${u+1}. `),a&&o.length<r)t.preventDefault(),u&&this.#a(n),await this.#n({type:"inline",value:`
-${a}`});else if(a&&o.length===r){t.preventDefault();let m=this.#t,y=m-o.length;for(let f=0;f<o.length;f++)this.text=c(this.text,m-(f+1));setTimeout(async()=>{this.#i(y,y),this.textArea.focus(),await this.#n({type:"inline",value:`
-`})},0)}}else{let e=Object.values(this.keyPairs).includes(i),n=this.#e!==this.#t;if((t.ctrlKey||t.metaKey)&&this.#e===this.#t&&(t.key==="c"||t.key==="x")){t.preventDefault();let{lines:r,lineNumber:h,columnNumber:a}=this.#r();if(await navigator.clipboard.writeText(`${h===0&&t.key==="x"?"":`
-`}${r[h]}`),t.key==="x"){let o=this.#e-a;r.splice(h,1),this.text=r.join(`
-`),setTimeout(()=>{this.#i(o,o)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let r=this.#h.find(h=>h.key===t.key);r&&this.#n(r)}else e&&(i===t.key||t.key==="ArrowRight")&&this.#s.length&&!n?(t.preventDefault(),this.#i(this.#e+1,this.#t+1),this.#s.pop()):t.key in this.keyPairs&&(t.preventDefault(),await this.#n({type:"wrap",value:t.key}),this.#s.push(t.key))}}),this.textArea.addEventListener("dblclick",()=>{this.#e!==this.#t&&(this.text[this.#e]===" "&&this.#i(this.#e+1,this.#t),this.text[this.#t-1]===" "&&this.#i(this.#e,this.#t-1))}),this.textArea.addEventListener("click",()=>this.#s=[]);for(let t of this.getTrigger())t.addEventListener(this.event,()=>{this.#n(this.#l(t))})}},g=l=>{let t=l.match(/^(\d+)\./);return t?Number(t[1]):null},k=(l,t,s)=>l.slice(0,s)+t+l.slice(s),c=(l,t)=>l.slice(0,t)+l.slice(t+1);export{x as a};

package/chunk-IQJQPZUL.js

@@ -1 +0,0 @@
-import{a as t}from"./chunk-7F7CQUEG.js";var e=class extends t{constructor(){super()}async share(r=this.value){if(navigator.canShare&&navigator.canShare({url:r}))try{await navigator.share({url:r})}catch(a){a?.name!=="AbortError"&&console.error(a)}else this.copy()}mount(){this.triggerListener(async()=>await this.share())}};export{e as a};

package/chunk-JMJUWKN2.js

@@ -1 +0,0 @@
-import{a as t}from"./chunk-7KU2PRW5.js";var n=class extends t{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()})}};export{n as a};

package/chunk-MXKU7AKV.js

@@ -1 +0,0 @@
-var o=Object.defineProperty;var l=(s,e)=>{for(var t in e)o(s,t,{get:e[t],enumerable:!0})};var i=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 t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...r),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};export{l as a,i as b};

package/chunk-T7RZI3ZL.js

@@ -1 +0,0 @@
-import{a as t}from"./chunk-7KU2PRW5.js";var s=class extends t{constructor(){super()}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}async show(){this.getContent().showPopover(),await this.animateElement()}async hide(){await this.animateElement({options:{direction:"reverse"}}),this.getContent().hidePopover()}async toggle(){this.open?this.hide():this.show()}mount(){this.triggerListener(e=>{e.preventDefault(),this.toggle()}),this.getContent().addEventListener("toggle",e=>{e.newState==="open"?this.open=!0:this.open=!1}),this.safeListener("keydown",e=>{e.key==="Escape"&&this.open&&(e.preventDefault(),this.hide())})}};export{s as a};

package/chunk-TSTTUEAF.js

@@ -1 +0,0 @@
-import{a as t}from"./chunk-7F7CQUEG.js";var s=class extends t{constructor(){super()}mount(){this.triggerListener(async()=>await this.copy())}};export{s as a};

package/chunk-VEVFQB5N.js

@@ -1 +0,0 @@
-import{b as e}from"./chunk-MXKU7AKV.js";var r=class extends e{static observedAttributes=["autoplay","start","uid"];constructor(){super()}get iframe(){return this.getContent(HTMLIFrameElement)}get autoplay(){return this.hasAttribute("autoplay")}set autoplay(t){t?this.setAttribute("autoplay",""):this.removeAttribute("autoplay")}get start(){return this.getAttribute("start")??"0"}set start(t){this.setAttribute("start",t)}get uid(){let t=this.getAttribute("uid");if(!t)throw new Error("YouTube: missing `uid` attribute.");return t}set uid(t){this.setAttribute("uid",t)}mount(){this.iframe.allowFullscreen=!0,this.iframe.allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"}attributeChangedCallback(){queueMicrotask(()=>{this.iframe.src=`https://www.youtube-nocookie.com/embed/${this.uid}?start=${this.start}${this.autoplay?"&autoplay=1":""}`})}};export{r as a};

package/define/index.d.ts

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

package/define/index.js

@@ -1 +0,0 @@
-import{b as e}from"../chunk-G5WFHYNX.js";import"../chunk-VEVFQB5N.js";import"../chunk-GPET75FT.js";import"../chunk-5JV4T7GM.js";import"../chunk-T7RZI3ZL.js";import"../chunk-IQJQPZUL.js";import"../chunk-57VEEUFG.js";import"../chunk-TSTTUEAF.js";import"../chunk-7F7CQUEG.js";import"../chunk-JMJUWKN2.js";import"../chunk-7S6DTKGH.js";import"../chunk-7KU2PRW5.js";import"../chunk-6HYPZWQ4.js";import"../chunk-MXKU7AKV.js";for(let o in e)customElements.define(`drab-${o.toLowerCase()}`,e[o]);