element-vir 7.0.0 → 7.0.2

package/dist/augments/array.d.ts

@@ -0,0 +1,2 @@
+export declare function filterOutArrayIndexes<T>(array: Readonly<T[]>, indexes: Readonly<number[]>): T[];
+//# sourceMappingURL=array.d.ts.map

package/dist/augments/array.js

@@ -0,0 +1,3 @@
+export function filterOutArrayIndexes(array, indexes) {
+    return array.filter((_, index) => !indexes.includes(index));
+}

package/dist/augments/type.d.ts

@@ -0,0 +1,9 @@
+export type NonEmptyString<T> = T extends '' ? never : T;
+/**
+ * If the given value is not an instance of the given constructor, an error is thrown.
+ *
+ * This is a variation of assertInstanceOf that can be run in run-time code and doesn't require
+ * testing packages.
+ */
+export declare function ensureInstanceOf<T>(value: unknown, constructor: new (...args: any) => T, message?: string): asserts value is T;
+//# sourceMappingURL=type.d.ts.map

package/dist/augments/type.js

@@ -0,0 +1,13 @@
+/**
+ * If the given value is not an instance of the given constructor, an error is thrown.
+ *
+ * This is a variation of assertInstanceOf that can be run in run-time code and doesn't require
+ * testing packages.
+ */
+export function ensureInstanceOf(value, constructor, message) {
+    if (!(value instanceof constructor)) {
+        const extraMessage = message ? `: ${message}` : '';
+        const errorMessage = `${value} is not an instanceof of ${constructor.name}${extraMessage}`;
+        throw new TypeError(errorMessage);
+    }
+}

package/dist/declarative-element/declarative-element-init.d.ts

@@ -0,0 +1,45 @@
+import { CSSResult } from 'lit';
+import { DeclarativeElementDefinitionOptions } from './definition-options';
+import { CssVarsInitMap } from './properties/css-vars';
+import { EventsInitMap } from './properties/element-events';
+import { PropertyInitMapBase } from './properties/element-properties';
+import { HostClassesInitMap } from './properties/host-classes';
+import { StylesCallback } from './properties/styles';
+import { InitCallback, RenderCallback } from './render-callback';
+export type CustomElementTagName = `${string}-${string}`;
+export type DeclarativeElementInit<InputsGeneric extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = {
+    /**
+     * HTML tag name. This should not be used directly, as interpolating it with the html tagged
+     * template from this package is preferred.
+     */
+    tagName: CustomElementTagName;
+    /** Static styles. These should not and cannot change. */
+    styles?: CSSResult | StylesCallback<HostClassKeys, CssVarKeys>;
+    /** Element properties. (These can be thought of as "inputs".) */
+    stateInit?: StateInit;
+    /** Events that the element can dispatch. (These can be thought of as "outputs".) */
+    events?: EventsInitGeneric;
+    /**
+     * CSS host classes. Values can be callbacks to determine when a host class should be defined,
+     * based on current instance state or inputs, or just undefined to indicate that the host class
+     * will only be manually set.
+     */
+    hostClasses?: HostClassesInitMap<HostClassKeys, InputsGeneric, StateInit>;
+    /**
+     * CSS Vars for the component. Keys of this object should be camelCased (or whatever your casing
+     * convention is). They will be transformed, at runtime, to CSS vars with kebab-casing, to match
+     * CSS standards.
+     *
+     * Values of this object represent the default fallback value for the given CSS var. These are
+     * then passed to the styles property, which must be a callback to take advantage of these.
+     * cssVarValues or cssVarNames can then be destructured from the styles property's callback
+     * input.
+     */
+    cssVars?: CssVarsInitMap<CssVarKeys>;
+    /** Called as part of the first renderCallback call, before the first renderCallback call. */
+    initCallback?: InitCallback<InputsGeneric, StateInit, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    renderCallback: RenderCallback<InputsGeneric, StateInit, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    cleanupCallback?: InitCallback<InputsGeneric, StateInit, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    options?: Partial<DeclarativeElementDefinitionOptions> | undefined;
+};
+//# sourceMappingURL=declarative-element-init.d.ts.map

package/dist/declarative-element/declarative-element-init.js

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

package/dist/declarative-element/declarative-element.d.ts

@@ -0,0 +1,49 @@
+import { RequiredAndNotNullBy, RequiredBy } from '@augment-vir/common';
+import { CSSResult, LitElement, TemplateResult } from 'lit';
+import { DeclarativeElementInit } from './declarative-element-init';
+import { CssVarNameOrValueMap } from './properties/css-vars';
+import { EventDescriptorMap, EventsInitMap } from './properties/element-events';
+import { ElementPropertyDescriptorMap, PropertyInitMapBase } from './properties/element-properties';
+import { HostClassNamesMap } from './properties/host-classes';
+import { RenderCallback } from './render-callback';
+export type HostInstanceType<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = RequiredAndNotNullBy<DeclarativeElement<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, 'shadowRoot'>;
+export type DeclarativeElementDefinition<InputsGeneric extends PropertyInitMapBase = any, StateInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = string, CssVarKeys extends string = string> = (new () => HostInstanceType<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) & StaticDeclarativeElementProperties<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys> & {
+    instanceType: HostInstanceType<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+};
+export declare abstract class DeclarativeElement<InputsGeneric extends PropertyInitMapBase = any, StateInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = string, CssVarKeys extends string = string> extends LitElement {
+    static readonly tagName: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['tagName'];
+    static readonly styles: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['styles'];
+    static readonly isStrictInstance: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['isStrictInstance'];
+    static readonly renderCallback: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['renderCallback'];
+    static readonly inputsType: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['inputsType'];
+    static readonly stateType: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['stateType'];
+    static readonly events: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['events'];
+    static readonly stateInit: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['stateInit'];
+    static readonly init: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['init'];
+    static readonly hostClasses: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['hostClasses'];
+    static readonly cssVarNames: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['cssVarNames'];
+    static readonly cssVarValues: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['cssVarValues'];
+    abstract render(): TemplateResult | Promise<TemplateResult>;
+    abstract readonly instanceState: StateInitGeneric;
+    abstract readonly instanceInputs: InputsGeneric;
+    abstract assignInputs(inputs: InputsGeneric): void;
+    abstract readonly haveInputsBeenSet: boolean;
+    abstract markInputsAsHavingBeenSet(): void;
+    abstract readonly definition: DeclarativeElementDefinition<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+}
+export interface StaticDeclarativeElementProperties<InputsGeneric extends PropertyInitMapBase, StateInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> {
+    /** Pass through the render callback for direct unit testability */
+    readonly renderCallback: RenderCallback<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    events: EventDescriptorMap<EventsInitGeneric>;
+    stateInit: ElementPropertyDescriptorMap<StateInitGeneric>;
+    init: RequiredBy<DeclarativeElementInit<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, 'stateInit' | 'events'>;
+    inputsType: InputsGeneric;
+    stateType: StateInitGeneric;
+    isStrictInstance: (element: unknown) => element is DeclarativeElement<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    hostClasses: HostClassNamesMap<string, HostClassKeys>;
+    cssVarNames: CssVarNameOrValueMap<CssVarKeys>;
+    cssVarValues: CssVarNameOrValueMap<CssVarKeys>;
+    tagName: string;
+    styles: CSSResult;
+}
+//# sourceMappingURL=declarative-element.d.ts.map

package/dist/declarative-element/declarative-element.js

@@ -0,0 +1,18 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+function staticImplements() {
+    return (constructor) => {
+        constructor;
+    };
+}
+let DeclarativeElement = class DeclarativeElement extends LitElement {
+};
+DeclarativeElement = __decorate([
+    staticImplements()
+], DeclarativeElement);
+export { DeclarativeElement };

package/dist/declarative-element/define-element-no-inputs.d.ts

@@ -0,0 +1,6 @@
+import { DeclarativeElementDefinition } from './declarative-element';
+import { DeclarativeElementInit } from './declarative-element-init';
+import { EventsInitMap } from './properties/element-events';
+import { PropertyInitMapBase } from './properties/element-properties';
+export declare function defineElementNoInputs<InputsGeneric extends PropertyInitMapBase = {}, StateGeneric extends PropertyInitMapBase = {}, EventsInitGeneric extends EventsInitMap = {}, HostClassKeys extends string = '', CssVarKeys extends string = ''>(initInput: DeclarativeElementInit<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>): DeclarativeElementDefinition<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+//# sourceMappingURL=define-element-no-inputs.d.ts.map

package/dist/declarative-element/define-element-no-inputs.js

@@ -0,0 +1,133 @@
+import { getObjectTypedKeys, kebabCaseToCamelCase } from '@augment-vir/common';
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { DeclarativeElementMarkerSymbol } from '../declarative-element-marker-symbol';
+import { DeclarativeElement, } from './declarative-element';
+import { defaultDeclarativeElementDefinitionOptions, IgnoreInputsNotBeenSetBeforeRenderWarningSymbol, } from './definition-options';
+import { assign } from './directives/assign.directive';
+import { hasDeclarativeElementParent } from './has-declarative-element-parent';
+import { createCssVarNamesMap, createCssVarValuesMap } from './properties/css-vars';
+import { createEventDescriptorMap } from './properties/element-events';
+import { createElementUpdaterProxy } from './properties/element-updater-proxy';
+import { createHostClassNamesMap } from './properties/host-classes';
+import { applyHostClasses, hostClassNamesToStylesInput } from './properties/styles';
+import { createRenderParams } from './render-callback';
+export function defineElementNoInputs(initInput) {
+    var _a;
+    const eventsMap = createEventDescriptorMap(initInput.events);
+    const hostClassNames = createHostClassNamesMap(initInput.tagName, initInput.hostClasses);
+    const cssVarNames = createCssVarNamesMap(initInput.tagName, initInput.cssVars);
+    const cssVarValues = createCssVarValuesMap(initInput.cssVars, cssVarNames);
+    const elementOptions = {
+        ...defaultDeclarativeElementDefinitionOptions,
+        ...initInput.options,
+    };
+    const calculatedStyles = typeof initInput.styles === 'function'
+        ? initInput.styles(hostClassNamesToStylesInput({ hostClassNames, cssVarNames, cssVarValues }))
+        : initInput.styles || css ``;
+    const typedRenderCallback = initInput.renderCallback;
+    const anonymousClass = (_a = class extends DeclarativeElement {
+            createRenderParams() {
+                return createRenderParams(this, eventsMap);
+            }
+            get instanceType() {
+                throw new Error(`"instanceType" was called on ${initInput.tagName} as a value but it is only for types.`);
+            }
+            static get inputsType() {
+                throw new Error(`"inputsType" was called on ${initInput.tagName} as a value but it is only for types.`);
+            }
+            static get stateType() {
+                throw new Error(`"stateType" was called on ${initInput.tagName} as a value but it is only for types.`);
+            }
+            markInputsAsHavingBeenSet() {
+                if (!this.haveInputsBeenSet) {
+                    this.haveInputsBeenSet = true;
+                }
+            }
+            render() {
+                if (
+                // This ignores elements at the root of a page, as they can't receive inputs from
+                // other elements (cause they have no custom element ancestors).
+                hasDeclarativeElementParent(this) &&
+                    !this.haveInputsBeenSet &&
+                    !elementOptions[IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]) {
+                    console.warn(this, `${initInput.tagName} got rendered before its input object was set. This was most likely caused by forgetting to use the "${assign.name}" directive on it. If no inputs are intended, use "${defineElementNoInputs.name}" to define ${initInput.tagName}.`);
+                }
+                const renderParams = this.createRenderParams();
+                if (!this.initCalled && initInput.initCallback) {
+                    this.initCalled = true;
+                    initInput.initCallback(renderParams);
+                }
+                const renderResult = initInput.renderCallback(renderParams);
+                applyHostClasses({
+                    host: renderParams.host,
+                    hostClassesInit: initInput.hostClasses,
+                    hostClassNames,
+                    state: renderParams.state,
+                    inputs: renderParams.inputs,
+                });
+                return renderResult;
+            }
+            disconnectedCallback() {
+                super.disconnectedCallback();
+                if (initInput.cleanupCallback) {
+                    const renderParams = this.createRenderParams();
+                    initInput.cleanupCallback(renderParams);
+                }
+                this.initCalled = false;
+            }
+            assignInputs(inputs) {
+                getObjectTypedKeys(inputs).forEach((key) => {
+                    property()(this, key);
+                    this.instanceInputs[key] = inputs[key];
+                });
+                this.markInputsAsHavingBeenSet();
+            }
+            constructor() {
+                super();
+                this.initCalled = false;
+                this.haveInputsBeenSet = false;
+                // this is set below in Object.defineProperties
+                this.definition = {};
+                this.instanceInputs = createElementUpdaterProxy(this, false);
+                this.instanceState = createElementUpdaterProxy(this, true);
+                const stateInit = initInput.stateInit || {};
+                Object.keys(stateInit).forEach((propName) => {
+                    property()(this, propName);
+                    this.instanceState[propName] = stateInit[propName];
+                });
+                this.definition = anonymousClass;
+            }
+        },
+        _a.tagName = initInput.tagName,
+        _a.styles = calculatedStyles,
+        // this gets set below in Object.defineProperties
+        _a.isStrictInstance = () => false,
+        _a.events = eventsMap,
+        _a.renderCallback = typedRenderCallback,
+        _a.hostClasses = hostClassNames,
+        _a.cssVarNames = cssVarNames,
+        _a.stateInit = initInput.stateInit,
+        _a.cssVarValues = cssVarNames,
+        _a);
+    Object.defineProperties(anonymousClass, {
+        [DeclarativeElementMarkerSymbol]: {
+            value: true,
+            writable: false,
+        },
+        name: {
+            value: kebabCaseToCamelCase(initInput.tagName, {
+                capitalizeFirstLetter: true,
+            }),
+            writable: true,
+        },
+        isStrictInstance: {
+            value: (element) => {
+                return element instanceof anonymousClass;
+            },
+            writable: false,
+        },
+    });
+    window.customElements.define(initInput.tagName, anonymousClass);
+    return anonymousClass;
+}

package/dist/declarative-element/define-element.d.ts

@@ -0,0 +1,6 @@
+import { DeclarativeElementDefinition } from './declarative-element';
+import { DeclarativeElementInit } from './declarative-element-init';
+import { EventsInitMap } from './properties/element-events';
+import { PropertyInitMapBase } from './properties/element-properties';
+export declare function defineElement<InputsGeneric extends PropertyInitMapBase = {}>(): <PropertyInitGeneric extends PropertyInitMapBase = {}, EventsInitGeneric extends EventsInitMap = {}, HostClassKeys extends string = "", CssVarKeys extends string = "">(initInput: DeclarativeElementInit<InputsGeneric, PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => DeclarativeElementDefinition<InputsGeneric, PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+//# sourceMappingURL=define-element.d.ts.map

package/dist/declarative-element/define-element.js

@@ -0,0 +1,13 @@
+import { defineElementNoInputs } from './define-element-no-inputs';
+import { IgnoreInputsNotBeenSetBeforeRenderWarningSymbol } from './definition-options';
+export function defineElement() {
+    return (initInput) => {
+        return defineElementNoInputs({
+            ...initInput,
+            options: {
+                [IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]: false,
+            },
+            ...initInput.options,
+        });
+    };
+}

package/dist/declarative-element/definition-options.d.ts

@@ -0,0 +1,6 @@
+export declare const IgnoreInputsNotBeenSetBeforeRenderWarningSymbol: unique symbol;
+export type DeclarativeElementDefinitionOptions = {
+    [IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]: boolean;
+};
+export declare const defaultDeclarativeElementDefinitionOptions: DeclarativeElementDefinitionOptions;
+//# sourceMappingURL=definition-options.d.ts.map

package/dist/declarative-element/definition-options.js

@@ -0,0 +1,4 @@
+export const IgnoreInputsNotBeenSetBeforeRenderWarningSymbol = Symbol('key for ignoring inputs not having been set yet');
+export const defaultDeclarativeElementDefinitionOptions = {
+    [IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]: true,
+};

package/dist/declarative-element/directives/assign-with-clean-up.directive.d.ts

@@ -0,0 +1,24 @@
+import { AsyncDirective } from 'lit/async-directive.js';
+import { PartInfo } from 'lit/directive.js';
+import { DeclarativeElementDefinition } from '../declarative-element';
+export type CleanupCallback<T> = (oldValue: T) => void;
+/**
+ * Assign values but include a cleanup callback which gets called when a new value gets assigned so
+ * the previous value can get cleaned up. An optional equality check callback can be provided. If it
+ * is provided, the clean up callback will then only be called if the equality check callback
+ * resolves to false (which indicates that the previous value and the new value are not equal).
+ *
+ * Example use case: 3D graphics applications with classes that setup buffers and the like.
+ */
+export declare function assignWithCleanup<DeclarativeElementGeneric extends DeclarativeElementDefinition>(elementDefinition: DeclarativeElementGeneric, inputsObject: DeclarativeElementGeneric extends DeclarativeElementDefinition<infer InputsGeneric> ? InputsGeneric : never, cleanupCallback: CleanupCallback<DeclarativeElementGeneric extends DeclarativeElementDefinition<infer InputsGeneric> ? InputsGeneric : never>): import("lit-html/directive").DirectiveResult<typeof AssignWithCleanupDirectiveClass>;
+declare class AssignWithCleanupDirectiveClass extends AsyncDirective {
+    private readonly element;
+    private lastValue;
+    private lastCallback;
+    private hasBeenAssigned;
+    constructor(partInfo: PartInfo);
+    disconnected(): void;
+    render(elementDefinition: DeclarativeElementDefinition, inputsObject: Record<PropertyKey, unknown>, cleanupCallback: CleanupCallback<any>): symbol;
+}
+export {};
+//# sourceMappingURL=assign-with-clean-up.directive.d.ts.map

package/dist/declarative-element/directives/assign-with-clean-up.directive.js

@@ -0,0 +1,43 @@
+import { noChange } from 'lit';
+import { AsyncDirective } from 'lit/async-directive.js';
+import { directive } from 'lit/directive.js';
+import { assignInputsObject } from './assign.directive';
+import { extractDeclarativeElement } from './directive-helpers';
+/**
+ * Assign values but include a cleanup callback which gets called when a new value gets assigned so
+ * the previous value can get cleaned up. An optional equality check callback can be provided. If it
+ * is provided, the clean up callback will then only be called if the equality check callback
+ * resolves to false (which indicates that the previous value and the new value are not equal).
+ *
+ * Example use case: 3D graphics applications with classes that setup buffers and the like.
+ */
+export function assignWithCleanup(elementDefinition, inputsObject, cleanupCallback) {
+    /**
+     * The directive generics (in listenDirective) are not strong enough to maintain their values.
+     * Thus, the directive call is wrapped in this function.
+     */
+    return assignWithCleanupDirective(elementDefinition, inputsObject, cleanupCallback);
+}
+class AssignWithCleanupDirectiveClass extends AsyncDirective {
+    constructor(partInfo) {
+        super(partInfo);
+        this.hasBeenAssigned = false;
+        this.element = extractDeclarativeElement(partInfo, 'assign');
+    }
+    disconnected() {
+        if (this.lastValue != undefined && this.lastCallback != undefined) {
+            this.lastCallback(this.lastValue);
+        }
+    }
+    render(elementDefinition, inputsObject, cleanupCallback) {
+        if (this.hasBeenAssigned) {
+            cleanupCallback(this.lastValue);
+        }
+        assignInputsObject(elementDefinition, this.element, inputsObject);
+        this.hasBeenAssigned = true;
+        this.lastValue = inputsObject;
+        this.lastCallback = cleanupCallback;
+        return noChange;
+    }
+}
+const assignWithCleanupDirective = directive(AssignWithCleanupDirectiveClass);

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

@@ -0,0 +1,13 @@
+import { PartInfo } from 'lit/directive.js';
+import { DeclarativeElement, DeclarativeElementDefinition } from '../declarative-element';
+/** Assign an object matching an element's inputs to its inputs. */
+export declare function assign<DeclarativeElementGeneric extends DeclarativeElementDefinition>(declarativeElement: DeclarativeElementGeneric, inputsObject: DeclarativeElementGeneric['inputsType']): import("lit-html/directive").DirectiveResult<{
+    new (partInfo: PartInfo): {
+        readonly element: DeclarativeElement<any, any, any, string, string>;
+        render(elementDefinition: DeclarativeElementDefinition<any, any, any, string, string>, inputsObject: Record<PropertyKey, unknown>): symbol;
+        readonly _$isConnected: boolean;
+        update(_part: import("lit-html").Part, props: unknown[]): unknown;
+    };
+}>;
+export declare function assignInputsObject<DeclarativeElementInstanceGeneric extends DeclarativeElement, DeclarativeElementDefinitionGeneric extends DeclarativeElementDefinition>(expectedElementConstructor: DeclarativeElementDefinitionGeneric, element: DeclarativeElementInstanceGeneric, assignmentObject: DeclarativeElementDefinitionGeneric['inputsType']): void;
+//# sourceMappingURL=assign.directive.d.ts.map

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

@@ -0,0 +1,28 @@
+import { noChange } from 'lit';
+import { directive, Directive } from 'lit/directive.js';
+import { extractDeclarativeElement } from './directive-helpers';
+/** Assign an object matching an element's inputs to its inputs. */
+export function assign(declarativeElement, inputsObject) {
+    /**
+     * The directive generics (in listenDirective) are not strong enough to maintain their values.
+     * Thus, the directive call is wrapped in this function.
+     */
+    return assignDirective(declarativeElement, inputsObject);
+}
+const assignDirective = directive(class extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        this.element = extractDeclarativeElement(partInfo, 'assign');
+    }
+    render(elementDefinition, inputsObject) {
+        assignInputsObject(elementDefinition, this.element, inputsObject);
+        return noChange;
+    }
+});
+export function assignInputsObject(expectedElementConstructor, element, assignmentObject) {
+    if (element.tagName.toLowerCase() !== expectedElementConstructor.tagName.toLowerCase()) {
+        console.error(element, expectedElementConstructor);
+        throw new Error(`Assignment mismatch. Assignment was made for ${element.tagName.toLowerCase()} but it's attached to ${expectedElementConstructor.tagName.toLowerCase()}`);
+    }
+    element.assignInputs(assignmentObject);
+}

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

@@ -0,0 +1,15 @@
+import { ElementPartInfo, PartInfo } from 'lit/directive.js';
+import { DeclarativeElement } from '../declarative-element';
+/** For some reason these aren't defined in lit's types already. */
+export type ExtraPartInfoProperties = {
+    element: Element;
+    options: {
+        host: Element;
+        renderBefore: Element;
+        isConnected: boolean;
+    };
+};
+export declare function extractDeclarativeElement(partInfo: PartInfo, directiveName: string): DeclarativeElement;
+export declare function extractElement<ElementType = HTMLElement>(partInfo: PartInfo, directiveName: string, constructorClass: (new () => ElementType) | (abstract new () => ElementType)): ElementType;
+export declare function assertIsElementPartInfo(partInfo: PartInfo, directiveName: string): asserts partInfo is ElementPartInfo & ExtraPartInfoProperties;
+//# sourceMappingURL=directive-helpers.d.ts.map

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

@@ -0,0 +1,21 @@
+import { PartType } from 'lit/directive.js';
+import { DeclarativeElement } from '../declarative-element';
+export function extractDeclarativeElement(partInfo, directiveName) {
+    return extractElement(partInfo, directiveName, DeclarativeElement);
+}
+export function extractElement(partInfo, directiveName, constructorClass) {
+    assertIsElementPartInfo(partInfo, directiveName);
+    const element = partInfo.element;
+    if (!(element instanceof constructorClass)) {
+        throw new Error(`${directiveName} attached to non ${constructorClass.name} element.`);
+    }
+    return element;
+}
+export function assertIsElementPartInfo(partInfo, directiveName) {
+    if (partInfo.type !== PartType.ELEMENT) {
+        throw new Error(`${directiveName} directive can only be attached directly to an element.`);
+    }
+    if (!partInfo.element) {
+        throw new Error(`${directiveName} directive found no element.`);
+    }
+}

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

@@ -0,0 +1,15 @@
+import { DirectiveResult } from 'lit/directive.js';
+import { DefinedTypedEvent, TypedEvent } from '../../typed-event/typed-event';
+/**
+ * Listen to events. These can be native DOM events (use a string for the inputType argument) or
+ * typed events (pass in a return value from defineTypedEvent).
+ *
+ * @param definedTypedEvent Needs to come either from a declarative element (like
+ *   MyDeclarativeElement.events.eventName) or from a typed event created via the defineTypedEvent
+ *   function.
+ * @param listener The callback to fire when an event is caught. Assuming the definedTypedEvent
+ *   input is properly typed, the event given to this callback will also be typed.
+ */
+export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric, NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(eventType: DefinedTypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>, listener: (event: TypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>) => void): DirectiveResult<any>;
+export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric, NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(eventType: NativeElementEventNameGeneric, listener: (event: HTMLElementEventMap[NativeElementEventNameGeneric]) => void): DirectiveResult<any>;
+//# sourceMappingURL=listen.directive.d.ts.map

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

@@ -0,0 +1,47 @@
+import { noChange } from 'lit';
+import { directive, Directive } from 'lit/directive.js';
+import { extractElement } from './directive-helpers';
+export function listen(eventType, listener) {
+    return listenDirective(eventType, listener);
+}
+/**
+ * The directive generics here are not strong enough to maintain their values. Thus, the directive
+ * call is wrapped in the function above.
+ */
+const listenDirective = directive(class extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        this.element = extractElement(partInfo, 'listen', HTMLElement);
+    }
+    resetListener(listenerMetaData) {
+        if (this.lastListenerMetaData) {
+            this.element.removeEventListener(this.lastListenerMetaData.eventType, this.lastListenerMetaData.listener);
+        }
+        this.element.addEventListener(listenerMetaData.eventType, listenerMetaData.listener);
+        this.lastListenerMetaData = listenerMetaData;
+    }
+    createListenerMetaData(eventType, callback) {
+        return {
+            eventType,
+            callback,
+            listener: (event) => { var _a; return (_a = this.lastListenerMetaData) === null || _a === void 0 ? void 0 : _a.callback(event); },
+        };
+    }
+    render(eventTypeInput, callback) {
+        const eventType = typeof eventTypeInput === 'string' ? eventTypeInput : eventTypeInput.type;
+        if (typeof eventType !== 'string') {
+            throw new Error(`Cannot listen to an event with a name that is not a string. Given event name: "${eventType}"`);
+        }
+        if (this.lastListenerMetaData && this.lastListenerMetaData.eventType === eventType) {
+            /**
+             * Store the callback here so we don't have to update the attached listener every
+             * time the callback is updated.
+             */
+            this.lastListenerMetaData.callback = callback;
+        }
+        else {
+            this.resetListener(this.createListenerMetaData(eventType, callback));
+        }
+        return noChange;
+    }
+});

package/dist/declarative-element/directives/on-dom-created.directive.d.ts

@@ -0,0 +1,12 @@
+import { PartInfo } from 'lit/directive.js';
+export type OnDomCreatedCallback = (element: Element) => void;
+/** Only fires once, when the element has been created. */
+export declare const onDomCreated: (callback: OnDomCreatedCallback) => import("lit-html/directive").DirectiveResult<{
+    new (partInfo: PartInfo): {
+        element: Element | undefined;
+        update(partInfo: PartInfo, [callback]: [OnDomCreatedCallback]): undefined;
+        render(callback: OnDomCreatedCallback): undefined;
+        readonly _$isConnected: boolean;
+    };
+}>;
+//# sourceMappingURL=on-dom-created.directive.d.ts.map

package/dist/declarative-element/directives/on-dom-created.directive.js

@@ -0,0 +1,23 @@
+import { directive, Directive } from 'lit/directive.js';
+import { assertIsElementPartInfo } from './directive-helpers';
+const directiveName = 'onDomCreated';
+/** Only fires once, when the element has been created. */
+export const onDomCreated = directive(class extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        assertIsElementPartInfo(partInfo, directiveName);
+    }
+    update(partInfo, [callback]) {
+        assertIsElementPartInfo(partInfo, directiveName);
+        const newElement = partInfo.element;
+        if (newElement !== this.element) {
+            // use requestAnimationFrame here so it can fire property changes outside of a render loop
+            requestAnimationFrame(() => callback(newElement));
+            this.element = newElement;
+        }
+        return this.render(callback);
+    }
+    render(callback) {
+        return undefined;
+    }
+});

package/dist/declarative-element/directives/on-resize.directive.d.ts

@@ -0,0 +1,16 @@
+import { PartInfo } from 'lit/directive.js';
+export type OnResizeCallback = (
+/** Only these two properties are supported in all major modern browsers */
+entry: Readonly<Pick<ResizeObserverEntry, 'target' | 'contentRect'>>) => void;
+export declare const onResize: (callback: OnResizeCallback) => import("lit-html/directive").DirectiveResult<{
+    new (partInfo: PartInfo): {
+        element: Element | undefined;
+        readonly resizeObserver: ResizeObserver;
+        callback: OnResizeCallback | undefined;
+        fireCallback(entries: ResizeObserverEntry[]): void;
+        update(partInfo: PartInfo, [callback]: [OnResizeCallback]): undefined;
+        render(callback: OnResizeCallback): undefined;
+        readonly _$isConnected: boolean;
+    };
+}>;
+//# sourceMappingURL=on-resize.directive.d.ts.map