decue 1.0.0

package/.forgejo/workflows/publish.yaml

@@ -0,0 +1,18 @@
+name: Publish Package to npmjs
+on:
+  release:
+    types: [published]
+jobs:
+  build:
+    runs-on: codeberg-tiny-lazy
+    steps:
+      - uses: actions/checkout@v4
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '15.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Jyri-Matti Lähteenmäki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,95 @@
+# DecuE
+
+Declarative Custom Elements
+
+DeCuE is a lightweight framework for defining custom elements declaratively using HTML `<template>` tags.
+It supports Shadow DOM, slotting, attribute observation, and form-associated custom elements.
+
+Based on ideas in https://github.com/kgscialdone/facet (Thank you very much!) though with a bit different mindset.
+
+## Features
+
+- Automatically registers all `<template decue="...">` as custom elements at DOMContentLoaded.
+  - also from inside `<object>`s, thus supporting elements defined in external files.
+- Supports Shadow DOM modes: `none`, `open`, `closed` (default is `none`).
+- Allows giving parameter data to elements.
+    - as slots for structured data: named and unnamed, also without shadow DOM (though mind the differences to native slots).
+    - as attributes for textual data: referenced by {placeholders} in template content.
+- Supports function and method piping in placeholders, e.g. `{name|.toUpperCase|someGlobalFunc}`.
+- Supports form-associated custom elements.
+  - I currently don't have actual use cases. Please let me know if you need some functionality!
+- Allows event handler binding via `decue-on:eventname` attributes.
+- No dependencies. Rather small.
+
+## Installation
+
+Download from https://unpkg.com/decue/dist/decue.min.js
+and include in your HTML:
+```
+<script src="decue.min.js"></script>
+```
+
+You can add `defer` unless you want to use predefined elements.
+
+## Usage
+
+By default, all templates having the attribute `decue` are automatically defined as custom elements at `DOMContentLoaded`. The template content is automatically searched for placeholder references, which are then included as observedAttributes to monitor for changes.
+
+By default, all elements are defined without a shadow DOM. You can choose the shadow mode (`none`, `open` or `closed`) by the following ways:
+```
+<!-- global default shadow DOM mode -->
+<script shadow="...">
+
+<!-- my-element default shadow DOM mode -->
+<template decue="my-element" shadow="...">
+
+<!-- specific my-element instance shadow DOM mode -->
+<my-element shadow="...">
+
+<!-- make my-element form-associated -->
+<template decue="my-element" form-associated>
+```
+
+### Predefined elements
+
+If you want to have elements already defined when the DOM is parsed to remove flicker, you can use the script tag with the attribute `elements`  (or `form-associated` for form associated elements). In this case the template is not available yet, so attributes will be monitored for changes using a MutationObserver. You can declare attributes explicitly to make them observed as `observedAttributes` instead. Make sure the template appears before the using elements in the DOM.
+
+```
+<!-- predefined custom element names, separated by spaces, -->
+<!-- can include attributes to observe, separated by a comma -->
+<script elements="my-element my-other-element[observed1,observed2]">
+```
+
+### External elements
+
+You can include elements defined in external files using an `<object>` tag:
+```
+<object data="external.html" type="text/html" style="position:absolute; left: -99999px"></object>
+```
+or by including them into the DOM as you wish and calling `decue.processTemplate(...)` for each of them.
+
+### Events
+
+Fires `connect`, `disconnect`, `adopt`, `attributechange`, `formassociate`, `formdisable`, `formreset`, `formstaterestore` and `checkvalidity` custom events.
+
+Allows binding global functions as event handlers via `decue-on:eventname` attributes:
+
+```
+<script>
+  function validateme(ev) {
+      ...
+  }
+</script>
+
+<form-associated-element decue-on:checkvalidity="validateme">...</form-associated-element>
+```
+
+This form doesn't require using eval. Please let me know if you need the old fashioned (and not recommended) inline-javascript way.
+
+### Examples
+
+See https://lahteenmaki.net/decue/examples.html for some examples.
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)

package/dist/decue.js

@@ -0,0 +1,332 @@
+// @ts-check
+
+// ---------------------------
+// ---------- DeCuE ----------
+// ---------------------------
+//
+// Declarative Custom Elements
+// https://codeberg.org/jyri-matti/decue
+
+/**
+ * @typedef { ShadowRootMode | 'none' } ShadowMode
+ */
+
+var decue = (function() {
+    /** @satisfy {ShadowMode} */
+    const defaultShadow = document.currentScript.getAttribute('shadow') || 'none';
+    if (!['open', 'closed', 'none'].includes(defaultShadow)) {
+        throw `Invalid default shadow DOM mode "${defaultShadow}". Must be one of "open", "closed" or "none".`;
+    }
+
+    const placeholders = /{([a-zA-Z_0-9]+)((?:\|[.]?[a-zA-Z_0-9]+)*)}/g;
+
+    /** @type {(a: string) => boolean} */
+    const isNotBuiltinAttribute = a => !(a === 'shadow' || a.startsWith('decue-'));
+
+    // check if the element is still in the document
+    /** @type {(element: Node) => boolean} */
+    const isInDocument = element => {
+        var currentElement = element;
+        while (currentElement && currentElement.parentNode) {
+            if (currentElement.parentNode === document) {
+                return true;
+            } else if (currentElement.parentNode instanceof ShadowRoot) {
+                currentElement = currentElement.parentNode.host;
+            } else {
+                currentElement = currentElement.parentNode;
+            }
+        }
+        return false;
+    };
+    
+    // evaluate a function or property on the given attribute value
+    const evalFunc = (/** @type {Node} */ ths) => (/** @type {any} */ attrValue, /** @type {string} */ func) => {
+        const method = func.startsWith('.') ? func.substring(1) : undefined;
+        // @ts-ignore
+        const globalFunc = window[func];
+        if (!method && !globalFunc) {
+            throw `Global function "${func}" not found. Make sure to include it (not deferred) before this element is created.`;
+        }
+        return method ? (typeof attrValue[method] === 'function' ? attrValue[method]() : attrValue[method])
+                      : globalFunc.apply(ths, [attrValue]);
+    };
+    
+    // replace all placeholders in originalValue
+    /** @type {(ths: Node, root: HTMLElement, originalValue: string) => string} */
+    const replacePlaceholders = (ths, root, originalValue) =>
+        originalValue.replaceAll(placeholders, (placeholder, /** @type {string} */ attributeName, /** @type {string} */ pipes) =>
+            root.hasAttribute(attributeName)
+                ? pipes.split('|').slice(1).reduce(evalFunc(ths), root.getAttribute(attributeName))
+                : placeholder);
+    
+    // update all placeholders in the given node
+    /** @type {(root: HTMLElement, arr:[Node,string,string]) => void} */
+    const updatePlaceholders = (root, [node,originalValue,attributeName]) => {
+        const newval = replacePlaceholders(node, root, originalValue);
+        if (node instanceof Text) {
+            if (newval !== node.data) {
+                node.data = newval;
+            }
+        } else if (node instanceof HTMLElement) {
+            if (newval !== node.getAttribute(attributeName)) {
+                node.setAttribute(attributeName, newval);
+            }
+        }
+    };
+
+    /** @type {(elem: Node, matchHandler: (node: (Text|HTMLElement), attributeName: string?, placeholderName: string) => void) => void} */
+    const forEachPlaceholder = (elem, matchHandler) => {
+        const walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+        while (walker.nextNode()) {
+            const node = walker.currentNode;
+            if (node instanceof Text) {
+                [...node.data.matchAll(placeholders)].forEach(m => matchHandler(node, undefined, m[1]));
+            } else if (node instanceof HTMLElement) {
+                node.getAttributeNames().forEach(a =>
+                    [...node.getAttribute(a).matchAll(placeholders)].forEach(m => matchHandler(node, a, m[1])));
+            }
+        }
+    };
+
+    /** @type {(root: (HTMLElement|ShadowRoot), content: DocumentFragment) => void} */
+    const lightDOMSlotting = (root, content) => {
+        // named slots
+        content.querySelectorAll('slot[name]').forEach(slot => {
+            const slotContents = root.querySelectorAll(`:scope > [slot="${slot.getAttribute('name')}"]`);
+            const replacement = slotContents.length > 0 ? slotContents : slot.children;
+            slot.replaceWith.apply(slot, replacement);
+        });
+        
+        const unnamedSlot = content.querySelector('slot:not([name])');
+        if (unnamedSlot) {
+            const slotContents = [...root.childNodes].filter(x => x.nodeType !== Node.ELEMENT_NODE || ! /** @type HTMLElement */ (x).hasAttribute('slot'));
+            const replacement = slotContents.length > 0 ? slotContents : unnamedSlot.children;
+            unnamedSlot.replaceWith.apply(unnamedSlot, replacement);
+        }
+    };
+    
+    const defineElement = (/** @type {boolean} */ debug,
+                           /** @type {string} */ elementName,
+                           /** @type {HTMLTemplateElement?} */ template,
+                           /** @type {boolean} */ formAssociated,
+                           /** @type {string[]} */ attributesToObserve) => {
+        /** @type { (msg: string) => void} */
+        const dbg = msg => debug ? console.log(elementName + ': ' + msg) : undefined;
+
+        /** @type {string[]} */ 
+        var observedAttrs = attributesToObserve;
+        if (template) {
+            forEachPlaceholder(template.content, (_node, _attributeName, placeholderName) => observedAttrs.push(placeholderName))
+        }
+        observedAttrs = [...new Set(observedAttrs.filter(isNotBuiltinAttribute))];
+        window.customElements.define(elementName, class extends HTMLElement {
+            static formAssociated = formAssociated;
+            static observedAttributes = observedAttrs;
+            
+            constructor() {
+                super();
+
+                /** @type {HTMLTemplateElement} */ 
+                this._template = template || [...document.getElementsByTagName('template')].find(x => x.getAttribute('decue') === elementName);
+                if (!this._template) {
+                    throw `Template for "${elementName}" not found. Make sure it comes in the DOM before any corresponding custom element.`;
+                }
+
+                if (!formAssociated && this._template.hasAttribute('formAssociated')) {
+                    throw `Cannot declare a predefined custom element "${elementName}" as formAssociated. Move it from elements="..." to formAssociated="...".`;
+                }
+
+                const ths = this;
+                this.getAttributeNames()
+                    .filter(a => a.startsWith("decue-on:"))
+                    .map(a => a.substring("decue-on:".length))
+                    .forEach(eventName => {
+                        const func = ths.getAttribute('decue-on:' + eventName);
+                        // @ts-ignore
+                        const handler = window[func];
+                        if (!handler) {
+                            throw `Global handler function "${func}" for event "${eventName}" not found.`;
+                        }
+                        dbg('Registering event listener for event: ' + eventName);
+                        ths.addEventListener(eventName, handler);
+                    });
+
+                if (formAssociated) {
+                    // https://web.dev/articles/more-capable-form-controls
+                    const internals = this.attachInternals();
+                    var value = this.getAttribute('value');
+                    dbg('Making form-associated with value: ' + value);
+                    Object.defineProperties(this, {
+                        internals: { value: internals, writable: false },
+                        value:     { get: () => value, set: newValue => {
+                            value = newValue;
+                            internals.setFormValue(value);
+                            // @ts-ignore
+                            ths.checkValidity();
+                        }},
+
+                        name:              { get: () => this.getAttribute('name') },
+                        form:              { get: () => internals.form },
+                        labels:            { get: () => internals.labels },
+                        validity:          { get: () => internals.validity },
+                        validationMessage: { get: () => internals.validationMessage },
+                        willValidate:      { get: () => internals.willValidate },
+
+                        // @ts-ignore
+                        setFormValue:   { value: (n,s) => internals.setFormValue(value = n, s), writable: false },
+                        setValidity:    { value: internals.setValidity.bind(internals),         writable: false },
+                        checkValidity:  { value: () => {
+                            fireEvent(ths, 'checkvalidity');
+                            return internals.checkValidity();
+                        }, writable: false },
+                        reportValidity: { value: internals.reportValidity.bind(internals),      writable: false }
+                    });
+                    this.value = value;
+                    if (!this.hasAttribute('tabindex')) {
+                        this.tabIndex = 0;
+                    }
+                }
+            }
+
+            connectedCallback() {
+                /** @type {ShadowMode} */
+                this._shadow = /** @type {ShadowMode} */ (this.getAttribute('shadow') || this._template.getAttribute('shadow') || defaultShadow);
+                if (!['open', 'closed', 'none'].includes(this._shadow)) {
+                    throw `Invalid shadow DOM mode "${this._shadow}" for element "${elementName}". Must be one of "open", "closed" or "none".`;
+                }
+                
+                const root = this._shadow === 'none' ? /** @type {HTMLElement} */ (this) : this.attachShadow({ mode: this._shadow, delegatesFocus: true });
+                const content = /** @type {DocumentFragment} */ (this._template.content.cloneNode(true));
+                
+                const finalize = () => {
+                    dbg('Finalizing...');
+
+                    if (this._shadow === 'none') {
+                        // Implement slotting manually when no shadow DOM in use
+                        lightDOMSlotting(root, content);
+                        dbg('Slots initialized');
+                    }
+
+                    // nodes having placeholder references, and thus need to be updated when attributes change.
+                    /** @type {[Node,string,string][]} */
+                    this._boundNodes = [];
+                    
+                    // Find all placeholders in the attributes and text of template or element content.
+                    [content, this].forEach(x =>
+                        forEachPlaceholder(x, (node,attributeName,_) => this._boundNodes.push(node instanceof HTMLElement
+                            ? [node, node.getAttribute(attributeName), attributeName]
+                            : [node, node.data, undefined])));
+
+                    const ths = this;
+                    // If there are attributes, which weren't yet observed statically, observe them dynamically with a MutationObserver.
+                    const unobservedAttributes = this.getAttributeNames().filter(isNotBuiltinAttribute).filter(x => !observedAttrs.includes(x));
+                    if (unobservedAttributes.length > 0 && this._boundNodes.length > 0) {
+                        new MutationObserver(recs => recs.forEach(rec => {
+                            if (unobservedAttributes.includes(rec.attributeName)) {
+                                ths.attributeChangedCallback(rec.attributeName, rec.oldValue, (/** @type {HTMLElement} */ (rec.target)).getAttribute(rec.attributeName));
+                            }
+                        })).observe(this, { attributes: true });
+                        this._decueMutationObserved = true;
+                        if (debug) {
+                            dbg('Observing attributes with MutationObserver: ' + unobservedAttributes.join(' '));
+                            this.setAttribute('data-decue-mutation-observed-attributes', unobservedAttributes.join(' '));
+                        }
+                    }
+                    if (debug && observedAttrs.length > 0) {
+                        dbg('Observing attributes with observedAttributes: ' + observedAttrs.join(' '));
+                        this.setAttribute('data-decue-observed-attributes', observedAttrs.join(' '));
+                    }
+                    
+                    root.append(content);
+                    this._boundNodes.forEach(x => updatePlaceholders(ths, x));
+
+                    fireEvent(this, 'connect');
+                };
+
+                if (template) {
+                    finalize();
+                } else {
+                    // predefined element. Finalize only after the children are parsed.
+                    /** @type {MutationObserver} */
+                    const observer = new MutationObserver(() => {
+                        observer.disconnect();
+                        finalize();
+                    });
+                    observer.observe(this.parentElement, { childList: true });
+                }
+            }
+
+            /** @type { (name: string, oldValue: string, newValue: string) => void } */
+            attributeChangedCallback(name, oldValue, newValue) {
+                if (oldValue !== newValue) {
+                    if (name === 'value' && this.value !== newValue) {
+                        this.value = newValue;
+                    }
+                    if (this._boundNodes) {
+                        const stillInDocument = this._boundNodes.filter(([node,_]) => isInDocument(node));
+                        if (stillInDocument.length !== this._boundNodes.length) {
+                            this._boundNodes = stillInDocument;
+                        }
+                        const ths = this;
+                        this._boundNodes.forEach(x => updatePlaceholders(ths, x));
+                    }
+                    fireEvent(this, 'attributechange', { name, oldValue, newValue })
+                }
+            }
+
+            disconnectedCallback()                             { fireEvent(this, 'disconnect') }
+            adoptedCallback()                                  { fireEvent(this, 'adopt') }
+            /** @type { (form:HTMLFormElement) => void } */
+            formAssociatedCallback(form)                       { fireEvent(this, 'formassociate', { form }) }
+            /** @type { (disabled:boolean) => void } */
+            formDisabledCallback(disabled)                     { fireEvent(this, 'formdisable', { disabled }) }
+            formResetCallback()                                { fireEvent(this, 'formreset') }
+            /** @type { (state: any, mode: "autocomplete"|"restore") => void } */
+            formStateRestoreCallback(state, mode)              { fireEvent(this, 'formstaterestore', { state, mode }) }
+        });
+    }
+
+    /** @type {(ths: HTMLElement, name: string, detail?: object) => void} */
+    const fireEvent = (ths, name, detail) => {
+        ths.dispatchEvent(new CustomEvent(name, { detail: detail || {}, bubbles: true }));
+    }
+
+    const debug = document.currentScript.hasAttribute('debug');
+
+    // predefine explicitly listed custom elements immediately before the DOM is parsed
+    [{attr: 'elements', formAssociated: false},{attr: 'form-associated', formAssociated: true}].forEach(({attr, formAssociated}) => {
+        if (document.currentScript.hasAttribute(attr)) {
+            document.currentScript.getAttribute(attr)
+                                  .split(/\s+/)
+                                  .map(x => x.split(/\[|]/))
+                                  .forEach(([elementName,observedAttributes]) =>
+                                      defineElement(debug, elementName, undefined, formAssociated, (observedAttributes ? observedAttributes.split(',') : [])));
+        }
+    });
+
+    /** @type { (template:HTMLTemplateElement) => void } */
+    const processTemplate = template => {
+        const name = template.getAttribute('decue');
+        if (name && !window.customElements.get(name)) {
+            defineElement(debug, name, template, template.hasAttribute('form-associated'), []);
+        }
+    };
+    
+    window.addEventListener('DOMContentLoaded', () => {
+        // define all custom elements not already defined
+        [...document.getElementsByTagName('template')].forEach(processTemplate);
+        
+        // define all custom elements included in <object> tags
+        [...document.getElementsByTagName('object')]
+                    .filter(obj => obj.getAttribute('type') === 'text/html')
+                    .forEach(obj => {
+                        obj.addEventListener('load', () => [...obj.contentDocument.getElementsByTagName('template')].forEach(processTemplate));
+                        [...obj.contentDocument.getElementsByTagName('template')].forEach(processTemplate);
+                    });
+    });
+
+    return {
+        processTemplate: processTemplate,
+        defineElement: defineElement
+    };
+})();

package/dist/decue.min.js

@@ -0,0 +1 @@
+var decue=function(){const d=document.currentScript.getAttribute("shadow")||"none";if(!["open","closed","none"].includes(d)){throw`Invalid default shadow DOM mode "${d}". Must be one of "open", "closed" or "none".`}const a=/{([a-zA-Z_0-9]+)((?:\|[.]?[a-zA-Z_0-9]+)*)}/g;const c=t=>!(t==="shadow"||t.startsWith("decue-"));const u=t=>{var e=t;while(e&&e.parentNode){if(e.parentNode===document){return true}else if(e.parentNode instanceof ShadowRoot){e=e.parentNode.host}else{e=e.parentNode}}return false};const n=o=>(t,e)=>{const s=e.startsWith(".")?e.substring(1):undefined;const i=window[e];if(!s&&!i){throw`Global function "${e}" not found. Make sure to include it (not deferred) before this element is created.`}return s?typeof t[s]==="function"?t[s]():t[s]:i.apply(o,[t])};const r=(i,o,t)=>t.replaceAll(a,(t,e,s)=>o.hasAttribute(e)?s.split("|").slice(1).reduce(n(i),o.getAttribute(e)):t);const h=(t,[e,s,i])=>{const o=r(e,t,s);if(e instanceof Text){if(o!==e.data){e.data=o}}else if(e instanceof HTMLElement){if(o!==e.getAttribute(i)){e.setAttribute(i,o)}}};const f=(t,s)=>{const e=document.createTreeWalker(t,NodeFilter.SHOW_TEXT|NodeFilter.SHOW_ELEMENT);while(e.nextNode()){const i=e.currentNode;if(i instanceof Text){[...i.data.matchAll(a)].forEach(t=>s(i,undefined,t[1]))}else if(i instanceof HTMLElement){i.getAttributeNames().forEach(e=>[...i.getAttribute(e).matchAll(a)].forEach(t=>s(i,e,t[1])))}}};const b=(i,t)=>{t.querySelectorAll("slot[name]").forEach(t=>{const e=i.querySelectorAll(`:scope > [slot="${t.getAttribute("name")}"]`);const s=e.length>0?e:t.children;t.replaceWith.apply(t,s)});const e=t.querySelector("slot:not([name])");if(e){const s=[...i.childNodes].filter(t=>t.nodeType!==Node.ELEMENT_NODE||!t.hasAttribute("slot"));const o=s.length>0?s:e.children;e.replaceWith.apply(e,o)}};const i=(o,a,n,t,e)=>{const r=t=>o?console.log(a+": "+t):undefined;var l=e;if(n){f(n.content,(t,e,s)=>l.push(s))}l=[...new Set(l.filter(c))];window.customElements.define(a,class extends HTMLElement{static formAssociated=t;static observedAttributes=l;constructor(){super();this._template=n||[...document.getElementsByTagName("template")].find(t=>t.getAttribute("decue")===a);if(!this._template){throw`Template for "${a}" not found. Make sure it comes in the DOM before any corresponding custom element.`}if(!t&&this._template.hasAttribute("formAssociated")){throw`Cannot declare a predefined custom element "${a}" as formAssociated. Move it from elements="..." to formAssociated="...".`}const i=this;this.getAttributeNames().filter(t=>t.startsWith("decue-on:")).map(t=>t.substring("decue-on:".length)).forEach(t=>{const e=i.getAttribute("decue-on:"+t);const s=window[e];if(!s){throw`Global handler function "${e}" for event "${t}" not found.`}r("Registering event listener for event: "+t);i.addEventListener(t,s)});if(t){const o=this.attachInternals();var s=this.getAttribute("value");r("Making form-associated with value: "+s);Object.defineProperties(this,{internals:{value:o,writable:false},value:{get:()=>s,set:t=>{s=t;o.setFormValue(s);i.checkValidity()}},name:{get:()=>this.getAttribute("name")},form:{get:()=>o.form},labels:{get:()=>o.labels},validity:{get:()=>o.validity},validationMessage:{get:()=>o.validationMessage},willValidate:{get:()=>o.willValidate},setFormValue:{value:(t,e)=>o.setFormValue(s=t,e),writable:false},setValidity:{value:o.setValidity.bind(o),writable:false},checkValidity:{value:()=>{m(i,"checkvalidity");return o.checkValidity()},writable:false},reportValidity:{value:o.reportValidity.bind(o),writable:false}});this.value=s;if(!this.hasAttribute("tabindex")){this.tabIndex=0}}}connectedCallback(){this._shadow=this.getAttribute("shadow")||this._template.getAttribute("shadow")||d;if(!["open","closed","none"].includes(this._shadow)){throw`Invalid shadow DOM mode "${this._shadow}" for element "${a}". Must be one of "open", "closed" or "none".`}const t=this._shadow==="none"?this:this.attachShadow({mode:this._shadow,delegatesFocus:true});const i=this._template.content.cloneNode(true);const e=()=>{r("Finalizing...");if(this._shadow==="none"){b(t,i);r("Slots initialized")}this._boundNodes=[];[i,this].forEach(t=>f(t,(t,e,s)=>this._boundNodes.push(t instanceof HTMLElement?[t,t.getAttribute(e),e]:[t,t.data,undefined])));const e=this;const s=this.getAttributeNames().filter(c).filter(t=>!l.includes(t));if(s.length>0&&this._boundNodes.length>0){new MutationObserver(t=>t.forEach(t=>{if(s.includes(t.attributeName)){e.attributeChangedCallback(t.attributeName,t.oldValue,t.target.getAttribute(t.attributeName))}})).observe(this,{attributes:true});this._decueMutationObserved=true;if(o){r("Observing attributes with MutationObserver: "+s.join(" "));this.setAttribute("data-decue-mutation-observed-attributes",s.join(" "))}}if(o&&l.length>0){r("Observing attributes with observedAttributes: "+l.join(" "));this.setAttribute("data-decue-observed-attributes",l.join(" "))}t.append(i);this._boundNodes.forEach(t=>h(e,t));m(this,"connect")};if(n){e()}else{const s=new MutationObserver(()=>{s.disconnect();e()});s.observe(this.parentElement,{childList:true})}}attributeChangedCallback(t,e,s){if(e!==s){if(t==="value"&&this.value!==s){this.value=s}if(this._boundNodes){const i=this._boundNodes.filter(([t,e])=>u(t));if(i.length!==this._boundNodes.length){this._boundNodes=i}const o=this;this._boundNodes.forEach(t=>h(o,t))}m(this,"attributechange",{name:t,oldValue:e,newValue:s})}}disconnectedCallback(){m(this,"disconnect")}adoptedCallback(){m(this,"adopt")}formAssociatedCallback(t){m(this,"formassociate",{form:t})}formDisabledCallback(t){m(this,"formdisable",{disabled:t})}formResetCallback(){m(this,"formreset")}formStateRestoreCallback(t,e){m(this,"formstaterestore",{state:t,mode:e})}})};const m=(t,e,s)=>{t.dispatchEvent(new CustomEvent(e,{detail:s||{},bubbles:true}))};const o=document.currentScript.hasAttribute("debug");[{attr:"elements",formAssociated:false},{attr:"form-associated",formAssociated:true}].forEach(({attr:t,formAssociated:s})=>{if(document.currentScript.hasAttribute(t)){document.currentScript.getAttribute(t).split(/\s+/).map(t=>t.split(/\[|]/)).forEach(([t,e])=>i(o,t,undefined,s,e?e.split(","):[]))}});const e=t=>{const e=t.getAttribute("decue");if(e&&!window.customElements.get(e)){i(o,e,t,t.hasAttribute("form-associated"),[])}};window.addEventListener("DOMContentLoaded",()=>{[...document.getElementsByTagName("template")].forEach(e);[...document.getElementsByTagName("object")].filter(t=>t.getAttribute("type")==="text/html").forEach(t=>{t.addEventListener("load",()=>[...t.contentDocument.getElementsByTagName("template")].forEach(e));[...t.contentDocument.getElementsByTagName("template")].forEach(e)})});return{processTemplate:e,defineElement:i}}();