element-vir 25.3.1 → 25.4.1

package/dist/declarative-element/directives/attributes.directive.d.ts

@@ -0,0 +1,30 @@
+import { type Primitive } from 'type-fest';
+import { nothing } from '../../lit-exports/all-lit-exports.js';
+/**
+ * Possible attribute values for {@link AttributeValues}.
+ *
+ * @category Internal
+ */
+export type AttributeValue = Exclude<Primitive, symbol> | string | typeof nothing;
+/**
+ * Parameters object for applying attributes to an HTML element via the {@link attributes} directive.
+ * Make sure that all keys (attribute names) are lowercase.
+ *
+ * @category Internal
+ */
+export type AttributeValues = {
+    [LowercaseKey in Lowercase<string>]: AttributeValue;
+};
+/**
+ * A directive applies multiple HTML attributes to the parent element all at once.
+ *
+ * @category Directives
+ */
+export declare const attributes: (values_0: AttributeValues) => import("lit-html/directive.js").DirectiveResult<{
+    new (partInfo: import("lit-html/directive.js").PartInfo): {
+        readonly element: HTMLElement;
+        render(params_0: AttributeValues): symbol;
+        readonly _$isConnected: boolean;
+        update(_part: import("lit-html").Part, props: Array<unknown>): unknown;
+    };
+}>;

package/dist/declarative-element/directives/attributes.directive.js

@@ -0,0 +1,32 @@
+import { getObjectTypedKeys, getOrSet } from '@augment-vir/common';
+import { nothing } from '../../lit-exports/all-lit-exports.js';
+import { createMutateDirective } from './mutate.directive.js';
+/**
+ * A directive applies multiple HTML attributes to the parent element all at once.
+ *
+ * @category Directives
+ */
+export const attributes = createMutateDirective('attributes', ({ element, params: [attributesToApply], directive: rawDirective }) => {
+    const directive = rawDirective;
+    const allAttributeNames = getOrSet(directive, 'allAttributesApplied', () => new Set());
+    getObjectTypedKeys(attributesToApply).forEach((attributeName) => {
+        if (attributeName.toLowerCase() !== attributeName) {
+            throw new Error(`Cannot assign attribute name with uppercase letters: ${attributeName}`);
+        }
+        allAttributeNames.add(attributeName);
+    });
+    allAttributeNames.forEach((attributeName) => {
+        const attributeValue = attributesToApply[attributeName];
+        if (attributeValue == undefined ||
+            attributeValue === false ||
+            attributeValue === nothing) {
+            element.removeAttribute(attributeName);
+        }
+        else if (attributeValue === '' || attributeValue === true) {
+            element.setAttribute(attributeName, '');
+        }
+        else {
+            element.setAttribute(attributeName, String(attributeValue));
+        }
+    });
+});

package/dist/declarative-element/directives/mutate.directive.d.ts

@@ -0,0 +1,38 @@
+import { Directive, type PartInfo } from '../../lit-exports/all-lit-exports.js';
+/**
+ * Parameters for the callback given to the {@link mutate} directive.
+ *
+ * @category Internal
+ */
+export type MutateDirectiveParams<Params extends any[] = []> = {
+    directive: Directive;
+    element: HTMLElement;
+    params: Params;
+};
+/**
+ * A directive that allows arbitrary modifications to be made to the element that it's attached to.
+ *
+ * @category Directives
+ */
+export declare const mutate: (callback: (params: Omit<MutateDirectiveParams, "params">) => void) => import("lit-html/directive.js").DirectiveResult<{
+    new (partInfo: PartInfo): {
+        readonly element: HTMLElement;
+        lastKey: string | undefined;
+        render(callback: (params: Omit<MutateDirectiveParams, "params">) => void): symbol;
+        readonly _$isConnected: boolean;
+        update(_part: import("lit-html").Part, props: Array<unknown>): unknown;
+    };
+}>;
+/**
+ * A helper for making new directives.
+ *
+ * @category Internal
+ */
+export declare function createMutateDirective<Params extends any[]>(directiveName: string, callback: (this: void, params: MutateDirectiveParams<Params>) => void): (...values: Params) => import("lit-html/directive.js").DirectiveResult<{
+    new (partInfo: PartInfo): {
+        readonly element: HTMLElement;
+        render(...params: Params): symbol;
+        readonly _$isConnected: boolean;
+        update(_part: import("lit-html").Part, props: Array<unknown>): unknown;
+    };
+}>;

package/dist/declarative-element/directives/mutate.directive.js

@@ -0,0 +1,45 @@
+import { assertWrap } from '@augment-vir/assert';
+import { directive, Directive, noChange } from '../../lit-exports/all-lit-exports.js';
+import { extractElement } from './directive-helpers.js';
+/**
+ * A directive that allows arbitrary modifications to be made to the element that it's attached to.
+ *
+ * @category Directives
+ */
+export const mutate = directive(class extends Directive {
+    element;
+    lastKey;
+    constructor(partInfo) {
+        super(partInfo);
+        this.element = assertWrap.instanceOf(extractElement(partInfo, 'modifyElement'), HTMLElement);
+    }
+    render(callback) {
+        callback({
+            directive: this,
+            element: this.element,
+        });
+        return noChange;
+    }
+});
+/**
+ * A helper for making new directives.
+ *
+ * @category Internal
+ */
+export function createMutateDirective(directiveName, callback) {
+    return directive(class extends Directive {
+        element;
+        constructor(partInfo) {
+            super(partInfo);
+            this.element = assertWrap.instanceOf(extractElement(partInfo, directiveName), HTMLElement);
+        }
+        render(...params) {
+            callback({
+                params: params,
+                directive: this,
+                element: this.element,
+            });
+            return noChange;
+        }
+    });
+}

package/dist/index.d.ts

@@ -6,9 +6,11 @@ export * from './declarative-element/define-element-no-inputs.js';
 export * from './declarative-element/define-element.js';
 export * from './declarative-element/definition-options.js';
 export * from './declarative-element/directives/async-prop.js';
+export * from './declarative-element/directives/attributes.directive.js';
 export * from './declarative-element/directives/create-attribute-directive.js';
 export * from './declarative-element/directives/directive-helpers.js';
 export * from './declarative-element/directives/listen.directive.js';
+export * from './declarative-element/directives/mutate.directive.js';
 export * from './declarative-element/directives/on-dom-created.directive.js';
 export * from './declarative-element/directives/on-dom-rendered.directive.js';
 export * from './declarative-element/directives/on-intersect.directive.js';

package/dist/index.js

@@ -6,9 +6,11 @@ export * from './declarative-element/define-element-no-inputs.js';
 export * from './declarative-element/define-element.js';
 export * from './declarative-element/definition-options.js';
 export * from './declarative-element/directives/async-prop.js';
+export * from './declarative-element/directives/attributes.directive.js';
 export * from './declarative-element/directives/create-attribute-directive.js';
 export * from './declarative-element/directives/directive-helpers.js';
 export * from './declarative-element/directives/listen.directive.js';
+export * from './declarative-element/directives/mutate.directive.js';
 export * from './declarative-element/directives/on-dom-created.directive.js';
 export * from './declarative-element/directives/on-dom-rendered.directive.js';
 export * from './declarative-element/directives/on-intersect.directive.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "25.3.1",
+    "version": "25.4.1",
     "keywords": [
         "custom",
         "web",
@@ -38,21 +38,21 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.18.0",
-        "@augment-vir/common": "^31.18.0",
+        "@augment-vir/assert": "^31.20.0",
+        "@augment-vir/common": "^31.20.0",
         "date-vir": "^7.3.1",
         "lit": "^3.3.0",
         "lit-css-vars": "^3.0.11",
         "lit-html": "^3.3.0",
         "object-shape-tester": "^5.1.5",
         "observavir": "^2.0.5",
-        "typed-event-target": "^4.0.4"
+        "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.18.0",
-        "@augment-vir/web": "^31.18.0",
+        "@augment-vir/test": "^31.20.0",
+        "@augment-vir/web": "^31.20.0",
         "@web/dev-server-esbuild": "^1.0.4",
-        "@web/test-runner": "^0.20.1",
+        "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.0",
         "@web/test-runner-visual-regression": "^0.10.0",