@foxy.io/elements 1.16.0 → 1.18.0-beta.2

package/dist/mixins/configurable.js.map

@@ -1 +1 @@
-{"version":3,"file":"configurable.js","sourceRoot":"","sources":["../../src/mixins/configurable.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\nimport { Constructor, LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nexport declare class ConfigurableMixinHost {\n  /** Template render functions mapped to their name. */\n  templates: Partial<Record<string, Renderer<any>>>;\n\n  /**\n   * Toggles additional functionality for developers on and off. In particular,\n   * setting this property (or attribute with the same name) to \"development\" will\n   * start tracking changes in templates, allowing developers to edit HTML in the browser\n   * and see results without having to refresh the page every time.\n   */\n  mode: 'development' | 'production';\n\n  /**\n   * If true, makes every editable control inside of this element read-only.\n   * This property is reflected to the `readonly` boolean attribute.\n   *\n   * @since 1.4.0\n   */\n  readonly: boolean;\n\n  /**\n   * [BooleanSelector](https://sdk.foxy.dev/classes/_core_index_.booleanselector.html) selecting\n   * controls to render as read-only. Parsed version of the `readonlycontrols` attribute value.\n   *\n   * @type {BooleanSelector}\n   * @since 1.4.0\n   * @default BooleanSelector.False\n   */\n  readonlyControls: BooleanSelector;\n\n  /**\n   * If true, disables every interactive control inside of this element.\n   * This property is reflected to the `disabled` boolean attribute.\n   *\n   * @since 1.4.0\n   */\n  disabled: boolean;\n\n  /**\n   * [BooleanSelector](https://sdk.foxy.dev/classes/_core_index_.booleanselector.html) selecting\n   * controls to render as disabled.  Parsed version of the `disabledcontrols` attribute value.\n   *\n   * @type {BooleanSelector}\n   * @since 1.4.0\n   * @default BooleanSelector.False\n   */\n  disabledControls: BooleanSelector;\n\n  /**\n   * If true, hides every configurable control inside of this element.\n   * This property is reflected to the `hidden` boolean attribute.\n   *\n   * @since 1.4.0\n   */\n  hidden: boolean;\n\n  /**\n   * [BooleanSelector](https://sdk.foxy.dev/classes/_core_index_.booleanselector.html) selecting\n   * controls to hide.  Parsed version of the `hiddencontrols` attribute value.\n   *\n   * @type {BooleanSelector}\n   * @since 1.4.0\n   * @default BooleanSelector.False\n   */\n  hiddenControls: BooleanSelector;\n\n  /**\n   * Combined [BooleanSelector](https://sdk.foxy.dev/classes/_core_index_.booleanselector.html) for `readonlyControls`\n   * and `readonly` properties. If `readonly` is true, this selector will match any control,\n   * otherwise it will match the same controls as in `readonlyControls`.\n   *\n   * @since 1.4.0\n   */\n  get readonlySelector(): BooleanSelector;\n\n  /**\n   * Combined [BooleanSelector](https://sdk.foxy.dev/classes/_core_index_.booleanselector.html) for `disabledControls`\n   * and `disabled` properties. If `disabled` is true, this selector will match any control,\n   * otherwise it will match the same controls as in `disabledControls`.\n   *\n   * @since 1.4.0\n   */\n  get disabledSelector(): BooleanSelector;\n\n  /**\n   * Combined [BooleanSelector](https://sdk.foxy.dev/classes/_core_index_.booleanselector.html) for `hiddenControls`\n   * and `hidden` properties. If `hidden` is true, this selector will match any control,\n   * otherwise it will match the same controls as in `hiddenControls`.\n   *\n   * @since 1.4.0\n   */\n  get hiddenSelector(): BooleanSelector;\n\n  /**\n   * Looks for templates in element's children and compiles them to render functions.\n   *\n   * @param replace If true, all existing templates will be removed.\n   */\n  compileTemplates(replace?: boolean): void;\n\n  /**\n   * Renders a template with the given name if available and a slot otherwise.\n   * For empty name looks for a \"default\" template first and renders it if found – otherwise renders a default slot.\n   *\n   * @param name Name of the template/slot to render.\n   * @param __noSandbox INTERNAL - if true, doesn't isolate template content in a sandbox.\n   */\n  renderTemplateOrSlot(name?: string, __noSandbox?: boolean): void;\n\n  /**\n   * Zooms into templates with complex names. For example, zooming on `customer` in `customer:header:before`\n   * will return `header:before`.\n   *\n   * @param id Name to zoom on.\n   */\n  getNestedTemplates<T extends Partial<Record<string, Renderer<any>>>>(id: string): T;\n}\n\ntype Base = Constructor<LitElement> & { properties?: PropertyDeclarations };\ntype TemplateFunction = typeof html;\nexport type Renderer<THost> = (html: TemplateFunction, host: THost) => TemplateResult;\n\nexport const ConfigurableMixin = <TBase extends Base>(\n  BaseElement: TBase\n): TBase & Constructor<ConfigurableMixinHost> => {\n  return class ConfigurableElement extends BaseElement {\n    static get properties(): PropertyDeclarations {\n      return {\n        ...super.properties,\n\n        templates: { attribute: false },\n        mode: { type: String },\n\n        readonly: { type: Boolean, reflect: true },\n        readonlyControls: {\n          attribute: 'readonlycontrols',\n          converter: { fromAttribute: value => new BooleanSelector(value ?? '') },\n        },\n\n        disabled: { type: Boolean, reflect: true },\n        disabledControls: {\n          attribute: 'disabledcontrols',\n          converter: { fromAttribute: value => new BooleanSelector(value ?? '') },\n        },\n\n        hidden: { type: Boolean, reflect: true },\n        hiddenControls: {\n          attribute: 'hiddencontrols',\n          converter: { fromAttribute: value => new BooleanSelector(value ?? '') },\n        },\n      };\n    }\n\n    templates = {} as Partial<Record<string, Renderer<any>>>;\n\n    mode: 'development' | 'production' = 'production';\n\n    readonly = false;\n\n    readonlyControls: BooleanSelector = BooleanSelector.False;\n\n    disabled = false;\n\n    disabledControls: BooleanSelector = BooleanSelector.False;\n\n    hidden = false;\n\n    hiddenControls: BooleanSelector = BooleanSelector.False;\n\n    private readonly __observer = new MutationObserver(() => this.__onMutation());\n\n    get readonlySelector(): BooleanSelector {\n      return this.readonly ? BooleanSelector.True : this.readonlyControls;\n    }\n\n    get disabledSelector(): BooleanSelector {\n      return this.disabled ? BooleanSelector.True : this.disabledControls;\n    }\n\n    get hiddenSelector(): BooleanSelector {\n      return this.hidden ? BooleanSelector.True : this.hiddenControls;\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      if (this.mode === 'development') this.__observe();\n    }\n\n    disconnectedCallback(): void {\n      super.disconnectedCallback();\n      this.__observer.disconnect();\n    }\n\n    protected firstUpdated(...args: Parameters<LitElement['firstUpdated']>): void {\n      super.firstUpdated(...args);\n      if (this.mode === 'production') this.compileTemplates();\n    }\n\n    protected updated(changes: Map<keyof this, unknown>): void {\n      super.updated(changes);\n\n      if (changes.has('mode')) {\n        this.__observer.disconnect();\n        if (this.mode === 'development') this.__observe();\n      }\n    }\n\n    compileTemplates(replace = false): void {\n      const templates = replace ? {} : { ...this.templates };\n\n      Array.from(this.children).forEach(child => {\n        if (child.localName !== 'template') return;\n        const slot = child.getAttribute('slot') ?? 'default';\n\n        try {\n          const script = `return html\\`${child.innerHTML}\\``;\n          templates[slot] = new Function('html', 'host', script) as () => TemplateResult;\n        } catch (err) {\n          console.error(err);\n        }\n      });\n\n      this.templates = templates;\n    }\n\n    renderTemplateOrSlot(name?: string, __noSandbox = false) {\n      const templateName = name ?? 'default';\n      const template = this.templates[templateName];\n\n      if (!template) return html`<slot name=${ifDefined(name)}></slot>`;\n\n      const renderer = () => {\n        try {\n          const target = {} as unknown as this;\n          const proxy = new Proxy(target, { get: (_, p) => this[p as keyof this] });\n          return template?.(html, proxy);\n        } catch (err) {\n          console.error(err);\n        }\n      };\n\n      if (__noSandbox) return renderer();\n\n      return html`\n        <foxy-internal-sandbox data-testid=${templateName} .render=${renderer}>\n        </foxy-internal-sandbox>\n      `;\n    }\n\n    getNestedTemplates<T extends Partial<Record<string, Renderer<any>>>>(id: string): T {\n      const nestedTemplates = {} as T;\n\n      Object.entries(this.templates).forEach(([key, value]) => {\n        if (key.startsWith(`${id}:`)) {\n          const zoomedKey = key.replace(`${id}:`, '');\n          nestedTemplates[zoomedKey as keyof T] = value as T[keyof T];\n        }\n      });\n\n      return nestedTemplates;\n    }\n\n    private __observe() {\n      this.__observer.observe(this, {\n        characterData: true,\n        attributes: true,\n        childList: true,\n        subtree: true,\n      });\n\n      this.__onMutation();\n    }\n\n    private __onMutation() {\n      const config: MutationObserverInit = {\n        characterData: true,\n        attributes: true,\n        childList: true,\n        subtree: true,\n      };\n\n      this.__observer.disconnect();\n      this.__observer.observe(this, config);\n\n      Array.from(this.children).forEach(child => {\n        if (child.localName !== 'template' || !child.hasAttribute('slot')) return;\n        this.__observer.observe((child as HTMLTemplateElement).content, config);\n      });\n\n      this.compileTemplates(true);\n    }\n  };\n};\n"]}
+{"version":3,"file":"configurable.js","sourceRoot":"","sources":["../../src/mixins/configurable.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\nimport { Constructor, LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { InferrableMixinHost } from './inferrable';\n\nexport declare class ConfigurableMixinHost {\n  /** Template render functions mapped to their name. */\n  templates: Partial<Record<string, Renderer<any>>>;\n\n  /**\n   * Toggles additional functionality for developers on and off. In particular,\n   * setting this property (or attribute with the same name) to \"development\" will\n   * start tracking changes in templates, allowing developers to edit HTML in the browser\n   * and see results without having to refresh the page every time.\n   */\n  mode: 'development' | 'production';\n\n  /**\n   * If true, makes every editable control inside of this element read-only.\n   * This property is reflected to the `readonly` boolean attribute.\n   *\n   * @since 1.4.0\n   */\n  readonly: boolean;\n\n  /**\n   * [BooleanSelector](https://sdk.foxy.dev/classes/_core_index_.booleanselector.html) selecting\n   * controls to render as read-only. Parsed version of the `readonlycontrols` attribute value.\n   *\n   * @type {BooleanSelector}\n   * @since 1.4.0\n   * @default BooleanSelector.False\n   */\n  readonlyControls: BooleanSelector;\n\n  /**\n   * If true, disables every interactive control inside of this element.\n   * This property is reflected to the `disabled` boolean attribute.\n   *\n   * @since 1.4.0\n   */\n  disabled: boolean;\n\n  /**\n   * [BooleanSelector](https://sdk.foxy.dev/classes/_core_index_.booleanselector.html) selecting\n   * controls to render as disabled.  Parsed version of the `disabledcontrols` attribute value.\n   *\n   * @type {BooleanSelector}\n   * @since 1.4.0\n   * @default BooleanSelector.False\n   */\n  disabledControls: BooleanSelector;\n\n  /**\n   * If true, hides every configurable control inside of this element.\n   * This property is reflected to the `hidden` boolean attribute.\n   *\n   * @since 1.4.0\n   */\n  hidden: boolean;\n\n  /**\n   * [BooleanSelector](https://sdk.foxy.dev/classes/_core_index_.booleanselector.html) selecting\n   * controls to hide.  Parsed version of the `hiddencontrols` attribute value.\n   *\n   * @type {BooleanSelector}\n   * @since 1.4.0\n   * @default BooleanSelector.False\n   */\n  hiddenControls: BooleanSelector;\n\n  /**\n   * Combined [BooleanSelector](https://sdk.foxy.dev/classes/_core_index_.booleanselector.html) for `readonlyControls`\n   * and `readonly` properties. If `readonly` is true, this selector will match any control,\n   * otherwise it will match the same controls as in `readonlyControls`.\n   *\n   * @since 1.4.0\n   */\n  get readonlySelector(): BooleanSelector;\n\n  /**\n   * Combined [BooleanSelector](https://sdk.foxy.dev/classes/_core_index_.booleanselector.html) for `disabledControls`\n   * and `disabled` properties. If `disabled` is true, this selector will match any control,\n   * otherwise it will match the same controls as in `disabledControls`.\n   *\n   * @since 1.4.0\n   */\n  get disabledSelector(): BooleanSelector;\n\n  /**\n   * Combined [BooleanSelector](https://sdk.foxy.dev/classes/_core_index_.booleanselector.html) for `hiddenControls`\n   * and `hidden` properties. If `hidden` is true, this selector will match any control,\n   * otherwise it will match the same controls as in `hiddenControls`.\n   *\n   * @since 1.4.0\n   */\n  get hiddenSelector(): BooleanSelector;\n\n  /**\n   * Looks for templates in element's children and compiles them to render functions.\n   *\n   * @param replace If true, all existing templates will be removed.\n   */\n  compileTemplates(replace?: boolean): void;\n\n  /**\n   * Renders a template with the given name if available and a slot otherwise.\n   * For empty name looks for a \"default\" template first and renders it if found – otherwise renders a default slot.\n   *\n   * @param name Name of the template/slot to render.\n   * @param context Context to provide template renderer with.\n   */\n  renderTemplateOrSlot(name?: string, context?: any): void;\n\n  /**\n   * Zooms into templates with complex names. For example, zooming on `customer` in `customer:header:before`\n   * will return `header:before`.\n   *\n   * @param id Name to zoom on.\n   */\n  getNestedTemplates<T extends Partial<Record<string, Renderer<any>>>>(id: string): T;\n}\n\ntype Base = Constructor<InferrableMixinHost> &\n  Constructor<LitElement> & { properties?: PropertyDeclarations; inferredProperties: string[] };\n\ntype TemplateFunction = typeof html;\n\nexport type Renderer<THost> = (html: TemplateFunction, host: THost) => TemplateResult;\n\nexport const ConfigurableMixin = <TBase extends Base>(\n  BaseElement: TBase\n): TBase & Constructor<ConfigurableMixinHost> => {\n  return class ConfigurableElement extends BaseElement {\n    static get inferredProperties(): string[] {\n      return [\n        ...super.inferredProperties,\n        'disabledSelector',\n        'readonlySelector',\n        'hiddenSelector',\n        'templates',\n        'disabled',\n        'readonly',\n        'hidden',\n        'mode',\n      ];\n    }\n\n    static get properties(): PropertyDeclarations {\n      return {\n        ...super.properties,\n\n        templates: { attribute: false },\n        mode: { type: String },\n\n        readonly: { type: Boolean, reflect: true },\n        readonlyControls: {\n          attribute: 'readonlycontrols',\n          converter: { fromAttribute: value => new BooleanSelector(value ?? '') },\n        },\n\n        disabled: { type: Boolean, reflect: true },\n        disabledControls: {\n          attribute: 'disabledcontrols',\n          converter: { fromAttribute: value => new BooleanSelector(value ?? '') },\n        },\n\n        hidden: { type: Boolean, reflect: true },\n        hiddenControls: {\n          attribute: 'hiddencontrols',\n          converter: { fromAttribute: value => new BooleanSelector(value ?? '') },\n        },\n      };\n    }\n\n    templates = {} as Partial<Record<string, Renderer<any>>>;\n\n    mode: 'development' | 'production' = 'production';\n\n    readonly = false;\n\n    readonlyControls: BooleanSelector = BooleanSelector.False;\n\n    disabled = false;\n\n    disabledControls: BooleanSelector = BooleanSelector.False;\n\n    hidden = false;\n\n    hiddenControls: BooleanSelector = BooleanSelector.False;\n\n    private readonly __observer = new MutationObserver(() => this.__onMutation());\n\n    get readonlySelector(): BooleanSelector {\n      return this.readonly ? BooleanSelector.True : this.readonlyControls;\n    }\n\n    get disabledSelector(): BooleanSelector {\n      return this.disabled ? BooleanSelector.True : this.disabledControls;\n    }\n\n    get hiddenSelector(): BooleanSelector {\n      return this.hidden ? BooleanSelector.True : this.hiddenControls;\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      if (this.mode === 'development') this.__observe();\n    }\n\n    disconnectedCallback(): void {\n      super.disconnectedCallback();\n      this.__observer.disconnect();\n    }\n\n    protected firstUpdated(...args: Parameters<LitElement['firstUpdated']>): void {\n      super.firstUpdated(...args);\n      if (this.mode === 'production') this.compileTemplates();\n    }\n\n    protected updated(changes: Map<keyof this, unknown>): void {\n      super.updated(changes);\n\n      this.style.display = this.hidden ? 'none' : '';\n\n      if (changes.has('mode')) {\n        this.__observer.disconnect();\n        if (this.mode === 'development') this.__observe();\n      }\n    }\n\n    compileTemplates(replace = false): void {\n      const templates = replace ? {} : { ...this.templates };\n\n      Array.from(this.children).forEach(child => {\n        if (child.localName !== 'template') return;\n        const slot = child.getAttribute('slot') ?? 'default';\n\n        try {\n          const script = `return html\\`${child.innerHTML}\\``;\n          templates[slot] = new Function('html', 'host', script) as () => TemplateResult;\n        } catch (err) {\n          console.error(err);\n        }\n      });\n\n      this.templates = templates;\n    }\n\n    renderTemplateOrSlot(name?: string, context?: any) {\n      const templateName = name ?? 'default';\n      const template = this.templates[templateName];\n\n      if (!template) return html`<slot name=${ifDefined(name)}></slot>`;\n\n      const renderer = () => {\n        try {\n          const target = {} as unknown as this;\n          const resolvedContext = context ?? this;\n          const proxy = new Proxy(target, { get: (_, key) => resolvedContext[key] });\n\n          return template?.(html, proxy);\n        } catch (err) {\n          console.error(err);\n        }\n      };\n\n      return html`\n        <foxy-internal-sandbox data-testid=${templateName} .render=${renderer}>\n        </foxy-internal-sandbox>\n      `;\n    }\n\n    getNestedTemplates<T extends Partial<Record<string, Renderer<any>>>>(id: string): T {\n      const nestedTemplates = {} as T;\n\n      Object.entries(this.templates).forEach(([key, value]) => {\n        if (key.startsWith(`${id}:`)) {\n          const zoomedKey = key.replace(`${id}:`, '');\n          nestedTemplates[zoomedKey as keyof T] = value as T[keyof T];\n        }\n      });\n\n      return nestedTemplates;\n    }\n\n    applyInferredProperties(context: Map<string, unknown>): void {\n      super.applyInferredProperties(context);\n\n      type Templates = ConfigurableMixinHost['templates'];\n      type Mode = ConfigurableMixinHost['mode'];\n\n      if (this.infer === null) return;\n\n      const disabledSelector = context.get('disabledSelector') as BooleanSelector | undefined;\n      const disabled = context.get('disabled') as boolean | undefined;\n\n      const readonlySelector = context.get('readonlySelector') as BooleanSelector | undefined;\n      const readonly = context.get('readonly') as boolean | undefined;\n\n      const hiddenSelector = context.get('hiddenSelector') as BooleanSelector | undefined;\n      const hidden = context.get('hidden') as boolean | undefined;\n\n      const templates = context.get('templates') as Templates | undefined;\n      const mode = context.get('mode') as Mode | undefined;\n\n      this.disabledControls = disabledSelector?.zoom(this.infer) ?? BooleanSelector.False;\n      this.disabled = disabledSelector?.matches(this.infer, true) ?? disabled ?? false;\n\n      this.readonlyControls = readonlySelector?.zoom(this.infer) ?? BooleanSelector.False;\n      this.readonly = readonlySelector?.matches(this.infer, true) ?? readonly ?? false;\n\n      this.hiddenControls = hiddenSelector?.zoom(this.infer) ?? BooleanSelector.False;\n      this.hidden = hiddenSelector?.matches(this.infer, true) ?? hidden ?? false;\n\n      this.templates = templates ?? {};\n      this.templates = this.getNestedTemplates(this.infer);\n\n      this.mode = mode ?? 'production';\n    }\n\n    private __observe() {\n      this.__observer.observe(this, {\n        characterData: true,\n        attributes: true,\n        childList: true,\n        subtree: true,\n      });\n\n      this.__onMutation();\n    }\n\n    private __onMutation() {\n      const config: MutationObserverInit = {\n        characterData: true,\n        attributes: true,\n        childList: true,\n        subtree: true,\n      };\n\n      this.__observer.disconnect();\n      this.__observer.observe(this, config);\n\n      Array.from(this.children).forEach(child => {\n        if (child.localName !== 'template' || !child.hasAttribute('slot')) return;\n        this.__observer.observe((child as HTMLTemplateElement).content, config);\n      });\n\n      this.compileTemplates(true);\n    }\n  };\n};\n"]}

package/dist/mixins/inferrable.d.ts

@@ -0,0 +1,15 @@
+import { Constructor, LitElement, PropertyDeclarations } from 'lit-element';
+declare type Base = Constructor<LitElement> & {
+    properties?: PropertyDeclarations;
+};
+export declare class InferrableMixinHost {
+    infer: string | null;
+    inferProperties(): void;
+    inferFromElement(key: string, element: HTMLElement): unknown | undefined;
+    inferPropertiesInDescendants(): void;
+    applyInferredProperties(context: Map<string, unknown>): void;
+}
+export declare const InferrableMixin: <TBase extends Base>(BaseElement: TBase) => TBase & Constructor<InferrableMixinHost> & {
+    inferredProperties: string[];
+};
+export {};

package/dist/mixins/inferrable.js

@@ -0,0 +1,67 @@
+export const InferrableMixin = (BaseElement) => {
+    return class InferrableElement extends BaseElement {
+        constructor() {
+            super(...arguments);
+            /** Set a name for this element here to enable property inference. Set to `null` to disable. */
+            this.infer = null;
+        }
+        static get inferredProperties() {
+            return [];
+        }
+        static get properties() {
+            return {
+                ...super.properties,
+                infer: { type: String, reflect: true },
+            };
+        }
+        inferFromElement(key, element) {
+            if (key in element)
+                return element[key];
+        }
+        inferProperties() {
+            var _a;
+            const context = new Map();
+            const constructor = this.constructor;
+            const contextKeysToInfer = new Set(constructor.inferredProperties);
+            const processNode = (node) => {
+                if (node) {
+                    if (node instanceof ShadowRoot) {
+                        processNode(node.host);
+                    }
+                    else if (node instanceof HTMLElement) {
+                        contextKeysToInfer.forEach(key => {
+                            const value = this.inferFromElement(key, node);
+                            if (value !== undefined) {
+                                context.set(key, value);
+                                contextKeysToInfer.delete(key);
+                            }
+                        });
+                        if (contextKeysToInfer.size > 0)
+                            processNode(node.parentNode);
+                    }
+                }
+            };
+            processNode(this.parentNode);
+            (_a = this.applyInferredProperties) === null || _a === void 0 ? void 0 : _a.call(this, context);
+        }
+        inferPropertiesInDescendants() {
+            const roots = this.renderRoot === this ? [this.renderRoot] : [this.renderRoot, this];
+            roots.forEach(root => root
+                .querySelectorAll('[infer]')
+                .forEach(inferrable => inferrable.inferProperties()));
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        applyInferredProperties(context) {
+            //
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.inferPropertiesInDescendants();
+        }
+        updated(changes) {
+            super.updated(changes);
+            this.inferPropertiesInDescendants();
+        }
+    };
+};
+//# sourceMappingURL=inferrable.js.map

package/dist/mixins/inferrable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inferrable.js","sourceRoot":"","sources":["../../src/mixins/inferrable.ts"],"names":[],"mappings":"AAgBA,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,WAAkB,EAC2D,EAAE;IAC/E,OAAO,MAAM,iBAAkB,SAAQ,WAAW;QAA3C;;YAYL,+FAA+F;YAC/F,UAAK,GAAkB,IAAI,CAAC;QAyD9B,CAAC;QArEC,MAAM,KAAK,kBAAkB;YAC3B,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,MAAM,KAAK,UAAU;YACnB,OAAO;gBACL,GAAG,KAAK,CAAC,UAAU;gBACnB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;aACvC,CAAC;QACJ,CAAC;QAKD,gBAAgB,CAAC,GAAW,EAAE,OAAoB;YAChD,IAAI,GAAG,IAAI,OAAO;gBAAE,OAAQ,OAAe,CAAC,GAAG,CAAC,CAAC;QACnD,CAAC;QAED,eAAe;;YACb,MAAM,OAAO,GAAG,IAAI,GAAG,EAAmB,CAAC;YAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,WAAuC,CAAC;YACjE,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;YAEnE,MAAM,WAAW,GAAG,CAAC,IAAiB,EAAQ,EAAE;gBAC9C,IAAI,IAAI,EAAE;oBACR,IAAI,IAAI,YAAY,UAAU,EAAE;wBAC9B,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;qBACxB;yBAAM,IAAI,IAAI,YAAY,WAAW,EAAE;wBACtC,kBAAkB,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;4BAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;4BAC/C,IAAI,KAAK,KAAK,SAAS,EAAE;gCACvB,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;gCACxB,kBAAkB,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;6BAChC;wBACH,CAAC,CAAC,CAAC;wBAEH,IAAI,kBAAkB,CAAC,IAAI,GAAG,CAAC;4BAAE,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;qBAC/D;iBACF;YACH,CAAC,CAAC;YAEF,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC7B,MAAA,IAAI,CAAC,uBAAuB,+CAA5B,IAAI,EAA2B,OAAO,EAAE;QAC1C,CAAC;QAED,4BAA4B;YAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YAErF,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CACnB,IAAI;iBACD,gBAAgB,CAAoC,SAAS,CAAC;iBAC9D,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC,CACvD,CAAC;QACJ,CAAC;QAED,6DAA6D;QAC7D,uBAAuB,CAAC,OAA6B;YACnD,EAAE;QACJ,CAAC;QAED,iBAAiB;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC1B,IAAI,CAAC,4BAA4B,EAAE,CAAC;QACtC,CAAC;QAED,OAAO,CAAC,OAAiC;YACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACvB,IAAI,CAAC,4BAA4B,EAAE,CAAC;QACtC,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Constructor, LitElement, PropertyDeclarations } from 'lit-element';\n\ntype Base = Constructor<LitElement> & { properties?: PropertyDeclarations };\n\nexport declare class InferrableMixinHost {\n  infer: string | null;\n\n  inferProperties(): void;\n\n  inferFromElement(key: string, element: HTMLElement): unknown | undefined;\n\n  inferPropertiesInDescendants(): void;\n\n  applyInferredProperties(context: Map<string, unknown>): void;\n}\n\nexport const InferrableMixin = <TBase extends Base>(\n  BaseElement: TBase\n): TBase & Constructor<InferrableMixinHost> & { inferredProperties: string[] } => {\n  return class InferrableElement extends BaseElement {\n    static get inferredProperties(): string[] {\n      return [];\n    }\n\n    static get properties(): PropertyDeclarations {\n      return {\n        ...super.properties,\n        infer: { type: String, reflect: true },\n      };\n    }\n\n    /** Set a name for this element here to enable property inference. Set to `null` to disable. */\n    infer: string | null = null;\n\n    inferFromElement(key: string, element: HTMLElement): unknown | undefined {\n      if (key in element) return (element as any)[key];\n    }\n\n    inferProperties(): void {\n      const context = new Map<string, unknown>();\n      const constructor = this.constructor as typeof InferrableElement;\n      const contextKeysToInfer = new Set(constructor.inferredProperties);\n\n      const processNode = (node: Node | null): void => {\n        if (node) {\n          if (node instanceof ShadowRoot) {\n            processNode(node.host);\n          } else if (node instanceof HTMLElement) {\n            contextKeysToInfer.forEach(key => {\n              const value = this.inferFromElement(key, node);\n              if (value !== undefined) {\n                context.set(key, value);\n                contextKeysToInfer.delete(key);\n              }\n            });\n\n            if (contextKeysToInfer.size > 0) processNode(node.parentNode);\n          }\n        }\n      };\n\n      processNode(this.parentNode);\n      this.applyInferredProperties?.(context);\n    }\n\n    inferPropertiesInDescendants(): void {\n      const roots = this.renderRoot === this ? [this.renderRoot] : [this.renderRoot, this];\n\n      roots.forEach(root =>\n        root\n          .querySelectorAll<InferrableMixinHost & HTMLElement>('[infer]')\n          .forEach(inferrable => inferrable.inferProperties())\n      );\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    applyInferredProperties(context: Map<string, unknown>): void {\n      //\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      this.inferPropertiesInDescendants();\n    }\n\n    updated(changes: Map<keyof this, unknown>): void {\n      super.updated(changes);\n      this.inferPropertiesInDescendants();\n    }\n  };\n};\n"]}