@neovici/cosmoz-utils 6.23.0 → 6.24.0

package/dist/directives/forward-attributes.d.ts

@@ -0,0 +1,3 @@
+type Value = string | null | ((item: Element) => string | null);
+export declare const forwardAttributes: (attrs: Record<string, Value>) => unknown;
+export {};

package/dist/directives/forward-attributes.js

@@ -0,0 +1,64 @@
+import { noChange } from 'lit-html';
+import { AsyncDirective, directive } from 'lit-html/async-directive.js';
+import { invoke } from '../function';
+const write = (item, name, value) => {
+    if (value == null) {
+        item.removeAttribute(name);
+    }
+    else {
+        item.setAttribute(name, value);
+    }
+};
+const forward = (attrs, item) => {
+    for (const [name, value] of Object.entries(attrs)) {
+        write(item, name, invoke(value, item));
+    }
+};
+/**
+ * Forwards attributes onto every flattened assigned element of the slot
+ * the directive is placed on — on each render (state changes re-render
+ * the slot) and on slot changes (different elements are assigned).
+ *
+ * Values are strings, nulls (removals), or functions of the assigned
+ * element. Placement is the configuration: the placed slot states which
+ * members receive the attributes. Slot semantics decide membership:
+ * slotting forwards through nested slots, wrappers do not — a
+ * non-forwarding wrapper receives the attributes itself without
+ * exposing state.
+ */
+class ForwardAttributesDirective extends AsyncDirective {
+    _slot;
+    _attrs;
+    #forward = () => {
+        if (!this._slot || !this._attrs) {
+            return;
+        }
+        const items = this._slot.assignedElements({ flatten: true });
+        for (const item of items) {
+            forward(this._attrs, item);
+        }
+    };
+    #onSlotChange = () => this.#forward();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(attrs) {
+        return noChange;
+    }
+    update(part, [attrs]) {
+        this._attrs = attrs;
+        const slot = part.element;
+        if (this._slot !== slot) {
+            this._slot?.removeEventListener('slotchange', this.#onSlotChange);
+            this._slot = slot;
+            slot.addEventListener('slotchange', this.#onSlotChange);
+        }
+        this.#forward();
+        return noChange;
+    }
+    disconnected() {
+        // the slot outlives renders; the listener is owned for its lifetime
+        // and removed when the part is cleared (template swap, disconnect)
+        this._slot?.removeEventListener('slotchange', this.#onSlotChange);
+        this._slot = undefined;
+    }
+}
+export const forwardAttributes = directive(ForwardAttributesDirective);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-utils",
-	"version": "6.23.0",
+	"version": "6.24.0",
 	"description": "Date, money and template management functions commonly needed in Cosmoz views.",
 	"keywords": [
 		"polymer",
@@ -60,7 +60,7 @@
 		"./keybindings/*": "./dist/keybindings/*.js"
 	},
 	"dependencies": {
-		"@pionjs/pion": "^2.7.1"
+		"@pionjs/pion": "^2.16.3"
 	},
 	"devDependencies": {
 		"@changesets/cli": "^3.0.2",