@foxy.io/elements 1.17.0 → 1.18.0-beta.3

package/dist/mixins/configurable.js

@@ -132,7 +132,6 @@ export const ConfigurableMixin = (BaseElement) => {
             return nestedTemplates;
         }
         applyInferredProperties(context) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             super.applyInferredProperties(context);
             if (this.infer === null)
                 return;
@@ -144,14 +143,23 @@ export const ConfigurableMixin = (BaseElement) => {
             const hidden = context.get('hidden');
             const templates = context.get('templates');
             const mode = context.get('mode');
-            this.disabledControls = (_a = disabledSelector === null || disabledSelector === void 0 ? void 0 : disabledSelector.zoom(this.infer)) !== null && _a !== void 0 ? _a : BooleanSelector.False;
-            this.disabled = (_c = (_b = disabledSelector === null || disabledSelector === void 0 ? void 0 : disabledSelector.matches(this.infer, true)) !== null && _b !== void 0 ? _b : disabled) !== null && _c !== void 0 ? _c : false;
-            this.readonlyControls = (_d = readonlySelector === null || readonlySelector === void 0 ? void 0 : readonlySelector.zoom(this.infer)) !== null && _d !== void 0 ? _d : BooleanSelector.False;
-            this.readonly = (_f = (_e = readonlySelector === null || readonlySelector === void 0 ? void 0 : readonlySelector.matches(this.infer, true)) !== null && _e !== void 0 ? _e : readonly) !== null && _f !== void 0 ? _f : false;
-            this.hiddenControls = (_g = hiddenSelector === null || hiddenSelector === void 0 ? void 0 : hiddenSelector.zoom(this.infer)) !== null && _g !== void 0 ? _g : BooleanSelector.False;
-            this.hidden = (_j = (_h = hiddenSelector === null || hiddenSelector === void 0 ? void 0 : hiddenSelector.matches(this.infer, true)) !== null && _h !== void 0 ? _h : hidden) !== null && _j !== void 0 ? _j : false;
+            const trueAsString = BooleanSelector.True.toString();
+            const simplify = (selector, fallback) => {
+                return selector.toString() === trueAsString || (fallback !== null && fallback !== void 0 ? fallback : false);
+            };
+            const zoomIfNested = (selector) => {
+                var _a;
+                return (_a = (this.infer ? selector === null || selector === void 0 ? void 0 : selector.zoom(this.infer) : selector)) !== null && _a !== void 0 ? _a : BooleanSelector.False;
+            };
+            this.disabledControls = zoomIfNested(disabledSelector);
+            this.disabled = simplify(this.disabledControls, disabled);
+            this.readonlyControls = zoomIfNested(readonlySelector);
+            this.readonly = simplify(this.readonlyControls, readonly);
+            this.hiddenControls = zoomIfNested(hiddenSelector);
+            this.hidden = simplify(this.hiddenControls, hidden);
             this.templates = templates !== null && templates !== void 0 ? templates : {};
-            this.templates = this.getNestedTemplates(this.infer);
+            if (this.infer)
+                this.templates = this.getNestedTemplates(this.infer);
             this.mode = mode !== null && mode !== void 0 ? mode : 'production';
         }
         __observe() {

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';\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"]}
+{"version":3,"file":"configurable.js","sourceRoot":"","sources":["../../src/mixins/configurable.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAEtE,OAAO,EAAiE,IAAI,EAAE,MAAM,aAAa,CAAC;AAElG,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAgI3D,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,WAAkB,EAC0B,EAAE;IAC9C,OAAO,MAAM,mBAAoB,SAAQ,WAAW;QAA7C;;YA0CL,cAAS,GAAG,EAA4C,CAAC;YAEzD,SAAI,GAAiC,YAAY,CAAC;YAElD,aAAQ,GAAG,KAAK,CAAC;YAEjB,qBAAgB,GAAoB,eAAe,CAAC,KAAK,CAAC;YAE1D,aAAQ,GAAG,KAAK,CAAC;YAEjB,qBAAgB,GAAoB,eAAe,CAAC,KAAK,CAAC;YAE1D,WAAM,GAAG,KAAK,CAAC;YAEf,mBAAc,GAAoB,eAAe,CAAC,KAAK,CAAC;YAEvC,eAAU,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAwKhF,CAAC;QAjOC,MAAM,KAAK,kBAAkB;YAC3B,OAAO;gBACL,GAAG,KAAK,CAAC,kBAAkB;gBAC3B,kBAAkB;gBAClB,kBAAkB;gBAClB,gBAAgB;gBAChB,WAAW;gBACX,UAAU;gBACV,UAAU;gBACV,QAAQ;gBACR,MAAM;aACP,CAAC;QACJ,CAAC;QAED,MAAM,KAAK,UAAU;YACnB,OAAO;gBACL,GAAG,KAAK,CAAC,UAAU;gBAEnB,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;gBAC/B,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;gBAEtB,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;gBAC1C,gBAAgB,EAAE;oBAChB,SAAS,EAAE,kBAAkB;oBAC7B,SAAS,EAAE,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,eAAe,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,EAAE;iBACxE;gBAED,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;gBAC1C,gBAAgB,EAAE;oBAChB,SAAS,EAAE,kBAAkB;oBAC7B,SAAS,EAAE,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,eAAe,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,EAAE;iBACxE;gBAED,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;gBACxC,cAAc,EAAE;oBACd,SAAS,EAAE,gBAAgB;oBAC3B,SAAS,EAAE,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,eAAe,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,EAAE;iBACxE;aACF,CAAC;QACJ,CAAC;QAoBD,IAAI,gBAAgB;YAClB,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;QACtE,CAAC;QAED,IAAI,gBAAgB;YAClB,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;QACtE,CAAC;QAED,IAAI,cAAc;YAChB,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;QAClE,CAAC;QAED,iBAAiB;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC1B,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa;gBAAE,IAAI,CAAC,SAAS,EAAE,CAAC;QACpD,CAAC;QAED,oBAAoB;YAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;YAC7B,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;QAC/B,CAAC;QAES,YAAY,CAAC,GAAG,IAA4C;YACpE,KAAK,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,CAAC;YAC5B,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY;gBAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1D,CAAC;QAES,OAAO,CAAC,OAAiC;YACjD,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAEvB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YAE/C,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;gBACvB,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;gBAC7B,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa;oBAAE,IAAI,CAAC,SAAS,EAAE,CAAC;aACnD;QACH,CAAC;QAED,gBAAgB,CAAC,OAAO,GAAG,KAAK;YAC9B,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YAEvD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;;gBACxC,IAAI,KAAK,CAAC,SAAS,KAAK,UAAU;oBAAE,OAAO;gBAC3C,MAAM,IAAI,SAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,mCAAI,SAAS,CAAC;gBAErD,IAAI;oBACF,MAAM,MAAM,GAAG,gBAAgB,KAAK,CAAC,SAAS,IAAI,CAAC;oBACnD,SAAS,CAAC,IAAI,CAAC,GAAG,IAAI,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAyB,CAAC;iBAChF;gBAAC,OAAO,GAAG,EAAE;oBACZ,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;iBACpB;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC7B,CAAC;QAED,oBAAoB,CAAC,IAAa,EAAE,OAAa;YAC/C,MAAM,YAAY,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,SAAS,CAAC;YACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;YAE9C,IAAI,CAAC,QAAQ;gBAAE,OAAO,IAAI,CAAA,cAAc,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;YAElE,MAAM,QAAQ,GAAG,GAAG,EAAE;gBACpB,IAAI;oBACF,MAAM,MAAM,GAAG,EAAqB,CAAC;oBACrC,MAAM,eAAe,GAAG,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,IAAI,CAAC;oBACxC,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;oBAE3E,OAAO,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,IAAI,EAAE,KAAK,EAAE;iBAChC;gBAAC,OAAO,GAAG,EAAE;oBACZ,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;iBACpB;YACH,CAAC,CAAC;YAEF,OAAO,IAAI,CAAA;6CAC4B,YAAY,YAAY,QAAQ;;OAEtE,CAAC;QACJ,CAAC;QAED,kBAAkB,CAAmD,EAAU;YAC7E,MAAM,eAAe,GAAG,EAAO,CAAC;YAEhC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;gBACtD,IAAI,GAAG,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE;oBAC5B,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC;oBAC5C,eAAe,CAAC,SAAoB,CAAC,GAAG,KAAmB,CAAC;iBAC7D;YACH,CAAC,CAAC,CAAC;YAEH,OAAO,eAAe,CAAC;QACzB,CAAC;QAED,uBAAuB,CAAC,OAA6B;YACnD,KAAK,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC;YAKvC,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;gBAAE,OAAO;YAEhC,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAgC,CAAC;YACxF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,UAAU,CAAwB,CAAC;YAEhE,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAgC,CAAC;YACxF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,UAAU,CAAwB,CAAC;YAEhE,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAgC,CAAC;YACpF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAwB,CAAC;YAE5D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,WAAW,CAA0B,CAAC;YACpE,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAqB,CAAC;YAErD,MAAM,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACrD,MAAM,QAAQ,GAAG,CAAC,QAAyB,EAAE,QAAkB,EAAE,EAAE;gBACjE,OAAO,QAAQ,CAAC,QAAQ,EAAE,KAAK,YAAY,IAAI,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,KAAK,CAAC,CAAC;YACrE,CAAC,CAAC;YAEF,MAAM,YAAY,GAAG,CAAC,QAA0B,EAAE,EAAE;;gBAClD,aAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,mCAAI,eAAe,CAAC,KAAK,CAAC;YACvF,CAAC,CAAC;YAEF,IAAI,CAAC,gBAAgB,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;YACvD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;YAE1D,IAAI,CAAC,gBAAgB,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;YACvD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;YAE1D,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC;YACnD,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;YAEpD,IAAI,CAAC,SAAS,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAC;YACjC,IAAI,IAAI,CAAC,KAAK;gBAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAErE,IAAI,CAAC,IAAI,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,YAAY,CAAC;QACnC,CAAC;QAEO,SAAS;YACf,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE;gBAC5B,aAAa,EAAE,IAAI;gBACnB,UAAU,EAAE,IAAI;gBAChB,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;YAEH,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;QAEO,YAAY;YAClB,MAAM,MAAM,GAAyB;gBACnC,aAAa,EAAE,IAAI;gBACnB,UAAU,EAAE,IAAI;gBAChB,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI;aACd,CAAC;YAEF,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;YAC7B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YAEtC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACxC,IAAI,KAAK,CAAC,SAAS,KAAK,UAAU,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;oBAAE,OAAO;gBAC1E,IAAI,CAAC,UAAU,CAAC,OAAO,CAAE,KAA6B,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;YAC1E,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","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      const trueAsString = BooleanSelector.True.toString();\n      const simplify = (selector: BooleanSelector, fallback?: boolean) => {\n        return selector.toString() === trueAsString || (fallback ?? false);\n      };\n\n      const zoomIfNested = (selector?: BooleanSelector) => {\n        return (this.infer ? selector?.zoom(this.infer) : selector) ?? BooleanSelector.False;\n      };\n\n      this.disabledControls = zoomIfNested(disabledSelector);\n      this.disabled = simplify(this.disabledControls, disabled);\n\n      this.readonlyControls = zoomIfNested(readonlySelector);\n      this.readonly = simplify(this.readonlyControls, readonly);\n\n      this.hiddenControls = zoomIfNested(hiddenSelector);\n      this.hidden = simplify(this.hiddenControls, hidden);\n\n      this.templates = templates ?? {};\n      if (this.infer) 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.js

@@ -19,30 +19,32 @@ export const InferrableMixin = (BaseElement) => {
                 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);
+            this.updateComplete.then(() => {
+                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);
+                        }
                     }
-                    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);
+                };
+                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];

package/dist/mixins/inferrable.js.map

@@ -1 +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"]}
+{"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;QA2D9B,CAAC;QAvEC,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,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;;gBAC5B,MAAM,OAAO,GAAG,IAAI,GAAG,EAAmB,CAAC;gBAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,WAAuC,CAAC;gBACjE,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;gBAEnE,MAAM,WAAW,GAAG,CAAC,IAAiB,EAAQ,EAAE;oBAC9C,IAAI,IAAI,EAAE;wBACR,IAAI,IAAI,YAAY,UAAU,EAAE;4BAC9B,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;yBACxB;6BAAM,IAAI,IAAI,YAAY,WAAW,EAAE;4BACtC,kBAAkB,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;gCAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;gCAC/C,IAAI,KAAK,KAAK,SAAS,EAAE;oCACvB,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;oCACxB,kBAAkB,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;iCAChC;4BACH,CAAC,CAAC,CAAC;4BAEH,IAAI,kBAAkB,CAAC,IAAI,GAAG,CAAC;gCAAE,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;yBAC/D;qBACF;gBACH,CAAC,CAAC;gBAEF,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAC7B,MAAA,IAAI,CAAC,uBAAuB,+CAA5B,IAAI,EAA2B,OAAO,EAAE;YAC1C,CAAC,CAAC,CAAC;QACL,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      this.updateComplete.then(() => {\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\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"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foxy.io/elements",
   "type": "module",
-  "version": "1.17.0",
+  "version": "1.18.0-beta.3",
   "description": "E-commerce web components by Foxy.",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "prepack": "npm run lint && rimraf dist && node ./.build/compile-for-npm.js && rollup -c"
   },
   "dependencies": {
-    "@foxy.io/sdk": "^1.9.1",
+    "@foxy.io/sdk": "^1.9.2",
     "@open-wc/lit-helpers": "^0.3.11",
     "@open-wc/scoped-elements": "1.2.1",
     "@polymer/iron-icons": "^3.0.1",

package/dist/cdn/shared-45feee83.js

@@ -1 +0,0 @@
-import{F as e,A as t}from"./shared-92327224.js";class s extends t{constructor(t){super({base:new URL(document.baseURI),fetch:(...n)=>new Promise(((c,a)=>{const o="string"==typeof n[0]?new s.WHATWGRequest(...n):n[0];o.headers.set("Content-Type","application/json"),o.headers.set("FOXY-API-VERSION","1");const r=new e("fetch",{cancelable:!0,composed:!0,bubbles:!0,request:o,resolve:c,reject:a});t.dispatchEvent(r),r.defaultPrevented||fetch(o).then(c).catch(a)}))})}}s.FetchEvent=e;export{s as A};

package/dist/cdn/shared-63685d2e.js

@@ -1,302 +0,0 @@
-import{I as e,_ as t}from"./shared-fadcb2e1.js";import{F as a}from"./shared-2188d5f7.js";import{E as s,C as i,T as r}from"./shared-195fd5af.js";import"./shared-31c43743.js";import"./shared-4e201e09.js";import{a as l}from"./shared-d28ac9dc.js";import"./shared-dc23b751.js";import{h as n,P as o}from"./shared-ae415a98.js";import{d,P as h,A as u,L as c,c as p,h as m}from"./shared-dc73b9a5.js";import"./shared-a052131e.js";import{p as v}from"./shared-c309e0ef.js";import{a as g,y as b}from"./shared-62169210.js";import{T as _,U as f,V as y,W as x,X as w,Y as E,Z as T,$ as k,b as S,a0 as $,a1 as A,a2 as V,a3 as C,a4 as I,a5 as M,a6 as z,m as F,a7 as L}from"./shared-92327224.js";import{s as j}from"./shared-99940888.js";import{i as q}from"./shared-7c8bb60c.js";var P={raise:_,send:f,sendParent:y,sendUpdate:x,log:w,cancel:E,start:T,stop:k,assign:S,after:$,done:A,respond:V,forwardTo:C,escalate:I,choose:M,pure:z};const H=d((e=>t=>{const{element:a,name:s,strings:i}=t.committer;if(2!==i.length||""!==i[0]||""!==i[1])throw new Error("live directive bindings must not contain any static values");if(t.committer.parts.length>1)throw new Error("live directive must be the only directive for an attribute or property");if(t instanceof h)a[s]!==e&&t.setValue(e);else{if(!(t instanceof u))throw new Error("live directive can only be used on attributes or properties");a.getAttribute(s)!==e&&t.setValue(e)}})),O=n`<dom-module id="lumo-text-area" theme-for="vaadin-text-area">
-  <template>
-    <style include="lumo-text-field">
-      [part="input-field"],
-      [part="input-field"] ::slotted(textarea) {
-        /* Equal to the implicit padding in vaadin-text-field */
-        padding-top: calc((var(--lumo-text-field-size) - 1em * var(--lumo-line-height-s)) / 2);
-        padding-bottom: calc((var(--lumo-text-field-size) - 1em * var(--lumo-line-height-s)) / 2);
-        height: auto;
-        box-sizing: border-box;
-        transition: background-color 0.1s;
-        line-height: var(--lumo-line-height-s);
-      }
-
-      :host(:not([readonly])) [part="input-field"]::after {
-        display: none;
-      }
-
-      :host([readonly]) [part="input-field"] {
-        border: 1px dashed var(--lumo-contrast-30pct);
-      }
-
-      :host([readonly]) [part="input-field"]::after {
-        border: none;
-      }
-
-      :host(:hover:not([readonly]):not([focused]):not([invalid])) [part="input-field"] {
-        background-color: var(--lumo-contrast-20pct);
-      }
-
-      @media (pointer: coarse) {
-        :host(:hover:not([readonly]):not([focused]):not([invalid])) [part="input-field"] {
-          background-color: var(--lumo-contrast-10pct);
-        }
-
-        :host(:active:not([readonly]):not([focused])) [part="input-field"] {
-          background-color: var(--lumo-contrast-20pct);
-        }
-      }
-
-      [part="value"],
-      [part="input-field"] ::slotted(textarea) {
-        line-height: inherit;
-        --_lumo-text-field-overflow-mask-image: none;
-      }
-
-      /* Vertically align icon prefix/suffix with the first line of text */
-      [part="input-field"] ::slotted(iron-icon) {
-        margin-top: calc((var(--lumo-icon-size-m) - 1em * var(--lumo-line-height-s)) / -2);
-      }
-
-      [part="input-field"] [part="value"],
-      [part="input-field"] ::slotted(textarea) {
-        white-space: pre-wrap; /* override \`nowrap\` from <vaadin-text-field> */
-        align-self: stretch; /* override \`baseline\` from <vaadin-text-field> */
-      }
-    </style>
-  </template>
-</dom-module>`;document.head.appendChild(O.content);
-/**
-@license
-Copyright (c) 2017 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/
-class U extends(s(l(i(r(o))))){static get template(){return n`
-    <style include="vaadin-text-field-shared-styles">
-      .vaadin-text-area-container {
-        flex: auto;
-        max-height: inherit; /* MSIE 11 */
-        min-height: inherit; /* MSIE 11 */
-      }
-
-      /* The label, helper text and the error message should neither grow nor shrink. */
-      [part="label"],
-      [part="helper-text"],
-      [part="error-message"] {
-        flex: none;
-      }
-
-      [part="input-field"] {
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-      }
-
-      [part="value"] {
-        resize: none;
-      }
-
-      [part="value"],
-      [part="input-field"] ::slotted(*) {
-        align-self: flex-start;
-      }
-
-      @keyframes vaadin-text-area-appear {
-        to {
-          opacity: 1;
-        }
-      }
-
-      :host {
-        animation: 1ms vaadin-text-area-appear;
-      }
-
-      /* Workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1739079 */
-      :host([disabled]) [part='value'] {
-        user-select: none;
-      }
-    </style>
-
-    <div class="vaadin-text-area-container">
-
-      <label part="label" on-click="focus" id="[[_labelId]]">[[label]]</label>
-
-      <div part="input-field" id="[[_inputId]]" on-scroll="__scrollPositionUpdated">
-
-        <slot name="prefix"></slot>
-
-        <slot name="textarea">
-          <textarea part="value"></textarea>
-        </slot>
-
-        <div part="clear-button" id="clearButton" role="button" aria-label\$="[[i18n.clear]]"></div>
-        <slot name="suffix"></slot>
-
-      </div>
-
-      <div part="helper-text" id="[[_helperTextId]]">
-        <slot name="helper">[[helperText]]</slot>
-      </div>
-
-      <div part="error-message" id="[[_errorId]]" aria-live="assertive" aria-hidden\$="[[_getErrorMessageAriaHidden(invalid, errorMessage, _errorId)]]">[[errorMessage]]</div>
-
-    </div>
-`}static get is(){return"vaadin-text-area"}static get version(){return"2.9.2"}static get properties(){return{pattern:{type:String}}}static get observers(){return["_textAreaValueChanged(value)"]}ready(){super.ready(),this._updateHeight(),this.addEventListener("animationend",this._onAnimationEnd),this._inputField=this.root.querySelector("[part=input-field]"),this._inputField.addEventListener("wheel",(e=>{const t=this._inputField.scrollTop;this._inputField.scrollTop+=e.deltaY,t!==this._inputField.scrollTop&&(e.preventDefault(),this.__scrollPositionUpdated())})),this.__scrollPositionUpdated()}__scrollPositionUpdated(){this.updateStyles({"--_text-area-vertical-scroll-position":this._inputField.scrollTop+"px"})}_onAnimationEnd(e){0===e.animationName.indexOf("vaadin-text-area-appear")&&this._updateHeight()}get _slottedTagName(){return"textarea"}_textAreaValueChanged(e){this._updateHeight()}_updateHeight(){const e=this.root.querySelector("[part=input-field]"),t=e.scrollTop,a=this.inputElement,s=this.value?this.value.length:0;if(this._oldValueLength>=s){const t=getComputedStyle(e).height,s=getComputedStyle(a).width;e.style.display="block",e.style.height=t,a.style.maxWidth=s,a.style.height="auto"}this._oldValueLength=s;const i=a.scrollHeight;i>a.clientHeight&&(a.style.height=i+"px"),a.style.removeProperty("max-width"),e.style.removeProperty("display"),e.style.removeProperty("height"),e.scrollTop=t,this._dispatchIronResizeEventIfNeeded("InputHeight",i)}checkValidity(){if(!super.checkValidity())return!1;if(!this.pattern||!this.inputElement.value)return!0;try{const e=this.inputElement.value.match(this.pattern);return!!e&&e[0]===e.input}catch(e){return!0}}}customElements.define(U.is,U);class N extends CustomEvent{constructor(e){super("change",{detail:e})}}const D=n`<dom-module id="lumo-custom-field" theme-for="vaadin-custom-field">
-  <template>
-    <style include="lumo-required-field">
-      :host {
-        --lumo-text-field-size: var(--lumo-size-m);
-        color: var(--lumo-body-text-color);
-        font-size: var(--lumo-font-size-m);
-        /* align with text-field height + vertical paddings */
-        line-height: calc(var(--lumo-text-field-size) + 2 * var(--lumo-space-xs));
-        font-family: var(--lumo-font-family);
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-tap-highlight-color: transparent;
-        padding: 0;
-      }
-
-      :host::before {
-        margin-top: var(--lumo-space-xs);
-        height: var(--lumo-text-field-size);
-        box-sizing: border-box;
-        display: inline-flex;
-        align-items: center;
-      }
-
-      /* align with text-field label */
-      :host([has-label]) [part="label"] {
-        padding-bottom: calc(0.5em - var(--lumo-space-xs));
-      }
-
-      :host(:not([has-label])) [part="label"],
-      :host(:not([has-label]))::before {
-        display: none;
-      }
-
-      /* align with text-field error message */
-      :host([invalid]) [part="error-message"]:not(:empty)::before {
-        height: calc(0.4em - var(--lumo-space-xs));
-      }
-
-      :host([focused]:not([readonly]):not([disabled])) [part="label"] {
-        color: var(--lumo-primary-text-color);
-      }
-
-      :host(:hover:not([readonly]):not([disabled]):not([focused])) [part="label"],
-      :host(:hover:not([readonly]):not([disabled]):not([focused])) [part="helper-text"],
-      :host(:hover:not([readonly]):not([disabled]):not([focused])) [part="helper-text"] ::slotted(*) {
-        color: var(--lumo-body-text-color);
-      }
-
-      :host([has-helper]) [part="helper-text"]::before {
-        content: "";
-        display: block;
-        height: 0.4em;
-      }
-
-      [part="helper-text"],
-      [part="helper-text"] ::slotted(*) {
-        display: block;
-        color: var(--lumo-secondary-text-color);
-        font-size: var(--lumo-font-size-xs);
-        line-height: var(--lumo-line-height-xs);
-        margin-left: calc(var(--lumo-border-radius-m) / 4);
-        transition: color 0.2s;
-      }
-
-      /* helper-text position */
-
-      :host([has-helper][theme~="helper-above-field"]) [part="helper-text"]::before {
-        display: none;
-      }
-
-      :host([has-helper][theme~="helper-above-field"]) [part="helper-text"]::after {
-        content: "";
-        display: block;
-        height: 0.4em;
-      }
-
-      :host([has-helper][theme~="helper-above-field"]) [part="label"] {
-        order: 0;
-        padding-bottom: 0.4em;
-      }
-
-      :host([has-helper][theme~="helper-above-field"]) [part="helper-text"] {
-        order: 1;
-      }
-
-      :host([has-helper][theme~="helper-above-field"]) .inputs-wrapper {
-        order: 2;
-      }
-
-      :host([has-helper][theme~="helper-above-field"]) [part="error-message"] {
-        order: 3;
-      }
-
-      /* Touch device adjustment */
-      @media (pointer: coarse) {
-        :host(:hover:not([readonly]):not([disabled]):not([focused])) [part="label"] {
-          color: var(--lumo-secondary-text-color);
-        }
-      }
-
-      /* Disabled style */
-
-      :host([disabled]) [part="label"] {
-        color: var(--lumo-disabled-text-color);
-        -webkit-text-fill-color: var(--lumo-disabled-text-color);
-      }
-
-      /* Small theme */
-
-      :host([theme~="small"]) {
-        font-size: var(--lumo-font-size-s);
-        --lumo-text-field-size: var(--lumo-size-s);
-      }
-
-      :host([theme~="small"][has-label]) [part="label"] {
-        font-size: var(--lumo-font-size-xs);
-      }
-
-      :host([theme~="small"][has-label]) [part="error-message"] {
-        font-size: var(--lumo-font-size-xxs);
-      }
-    </style>
-  </template>
-</dom-module>`;document.head.appendChild(D.content);const B=e=>class extends e{static get properties(){return{inputs:{type:Array,readOnly:!0},i18n:{type:Object,value:()=>({parseValue:function(e){return e.split("\t")},formatValue:function(e){return e.join("\t")}})},__errorId:String,__labelId:String,__helperTextId:String,__hasSlottedHelper:Boolean}}connectedCallback(){super.connectedCallback(),this.__observer&&this.__observer.connect()}disconnectedCallback(){super.disconnectedCallback(),this.__observer&&this.__observer.disconnect()}ready(){super.ready(),this.__setInputsFromSlot(),this.__observer=new a(this.$.slot,(()=>{this.__setInputsFromSlot()})),this.$.helperSlot.addEventListener("slotchange",this.__onHelperSlotChange.bind(this)),this.__onHelperSlotChange();const e=/Chrome/.test(navigator.userAgent)&&/Google Inc/.test(navigator.vendor);this.addEventListener("keydown",(t=>{if(9===t.keyCode){if("slot"===t.target.parentElement.localName&&!t.defaultPrevented&&e){const e=t.target.parentElement;e.setAttribute("tabindex",-1),setTimeout((()=>e.removeAttribute("tabindex")))}this.inputs.indexOf(t.target)<this.inputs.length-1&&!t.shiftKey||this.inputs.indexOf(t.target)>0&&t.shiftKey?this.dispatchEvent(new CustomEvent("internal-tab")):this.__setValue()}})),this.addEventListener("focusin",(()=>this.setAttribute("focused",""))),this.addEventListener("focusout",(e=>{const t=this.getRootNode().activeElement;this.inputs.some((e=>t===e||e.shadowRoot&&e.shadowRoot.contains(t)))||this.removeAttribute("focused")}));var t=B._uniqueId=1+B._uniqueId||1;this.__errorId=`${this.constructor.is}-error-${t}`,this.__labelId=`${this.constructor.is}-label-${t}`,this.__helperTextId=`${this.constructor.is}-helper-${t}`}focus(){this.inputs&&this.inputs[0]&&this.inputs[0].focus()}__updateValue(e){e&&e.stopPropagation(),this.__setValue(),this.validate(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!1,detail:{value:this.value}}))}__setValue(){this.__settingValue=!0,this.value=this.i18n.formatValue.apply(this,[this.inputs.map((e=>e.value))]),this.__settingValue=!1}__queryAllAssignedElements(e){const t=[];let a;return"SLOT"===e.tagName?a=e.assignedNodes({flatten:!0}).filter((e=>e.nodeType===Node.ELEMENT_NODE)):(t.push(e),a=Array.from(e.children)),a.forEach((e=>t.push(...this.__queryAllAssignedElements(e)))),t}__getInputsFromSlot(){return this.__queryAllAssignedElements(this.$.slot).filter((e=>e.validate||e.checkValidity))}__setInputsFromSlot(){this._setInputs(this.__getInputsFromSlot()),this.__setValue()}__valueChanged(e,t){if(this.__settingValue||!this.inputs)return;const a=this.i18n.parseValue(e);a&&0!=a.length?(this.inputs.forEach(((e,t)=>e.value=a[t])),void 0!==t&&this.validate()):console.warn("Value parser has not provided values array")}__onHelperSlotChange(){const e=this.$.helperSlot.assignedNodes({flatten:!0});this.__hasSlottedHelper=e.filter((e=>3!==e.nodeType)).length>0,this.__hasSlottedHelper?this.setAttribute("has-helper","slotted"):""!==this.helperText&&null!==this.helperText||this.removeAttribute("has-helper")}}
-/**
-@license
-Copyright (c) 2018 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/;class R extends(s(B(r(o)))){static get template(){return n`
-    <style>
-      :host {
-        display: inline-flex;
-      }
-
-      :host::before {
-        content: "\\2003";
-        width: 0;
-        display: inline-block;
-        /* Size and position this element on the same vertical position as the input-field element
-           to make vertical align for the host element work as expected */
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      .container {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .inputs-wrapper {
-        flex: none;
-      }
-    </style>
-
-    <div class="container">
-      <label part="label" on-click="focus" id="[[__labelId]]">[[label]]</label>
-      <div class="inputs-wrapper" on-change="__updateValue">
-        <slot id="slot"></slot>
-      </div>
-      <div part="helper-text" id="[[__helperTextId]]">
-        <slot name="helper" id="helperSlot">[[helperText]]</slot>
-      </div>
-      <div part="error-message" id="[[__errorId]]" aria-live="assertive" aria-hidden\$="[[__getErrorMessageAriaHidden(invalid, errorMessage, __errorId)]]">[[errorMessage]]</div>
-    </div>
-`}static get is(){return"vaadin-custom-field"}static get version(){return"1.3.0"}static get properties(){return{label:{type:String,value:"",observer:"_labelChanged"},name:String,required:{type:Boolean,reflectToAttribute:!0},value:{type:String,observer:"__valueChanged",notify:!0},invalid:{type:Boolean,reflectToAttribute:!0,notify:!0,value:!1,observer:"__invalidChanged"},errorMessage:{type:String,value:"",observer:"__errorMessageChanged"},helperText:{type:String,value:"",observer:"__helperTextChanged"}}}static get observers(){return["__getActiveErrorId(invalid, errorMessage, __errorId, helperText, __helperTextId, __hasSlottedHelper)","__getActiveLabelId(label, __labelId)","__toggleHasValue(value)"]}__invalidChanged(e){this.__setOrToggleAttribute("aria-invalid",e,this)}__errorMessageChanged(e){this.__setOrToggleAttribute("has-error-message",!!e,this)}__helperTextChanged(e){this.__setOrToggleAttribute("has-helper",!!e,this)}__toggleHasValue(e){null!==e&&""!==e.trim()?this.setAttribute("has-value",""):this.removeAttribute("has-value")}_labelChanged(e){""!==e&&null!=e?this.setAttribute("has-label",""):this.removeAttribute("has-label")}validate(){return!(this.invalid=!this.checkValidity())}checkValidity(){return!(this.inputs.filter((e=>!(e.validate||e.checkValidity).call(e))).length||this.required&&!this.value.trim())}__setOrToggleAttribute(e,t,a){e&&a&&a.hasAttribute(e)===!t&&(t?a.setAttribute(e,"boolean"==typeof t?"":t):a.removeAttribute(e))}__getActiveErrorId(e,t,a,s,i,r){const l=[];(s||r)&&l.push(i),t&&e&&l.push(a),l.length>0?this.setAttribute("aria-describedby",l.join(" ")):this.removeAttribute("aria-describedby")}__getActiveLabelId(e,t){this.__setOrToggleAttribute("aria-labelledby",e?t:void 0,this)}__getErrorMessageAriaHidden(e,t,a){return(!(t&&e?a:void 0)).toString()}}customElements.define(R.is,R);class Y extends CustomEvent{constructor(e){super("change",{detail:e})}}class W extends Y{}let X,K,G=e=>e;class Z extends(g(e(c))){constructor(){super(...arguments),this.label="",this.value="",this.disabled=!1,this.readonly=!1,this.errorMessage="",this.__i18n={formatValue:e=>e.join(""),parseValue:e=>{const{count:t,units:a}=v(e);return[t.toString(),a]}},this.__getItems=F((e=>{const t=v(e).count;return[{value:"d",label:this.t("day",{count:t})},{value:"w",label:this.t("week",{count:t})},{value:"m",label:this.t("month",{count:t})},{value:"y",label:this.t("year",{count:t})}]}))}static get properties(){return t(t({},super.properties),{},{checkValidity:{attribute:!1},errorMessage:{type:String,attribute:"error-message"},disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},label:{type:String},value:{type:String}})}static get styles(){return p(X||(X=G`:host{display:block}vaadin-custom-field{width:100%;font-size:0;line-height:0;padding-top:0!important}vaadin-custom-field::part(label){padding-bottom:var(--lumo-space-s)}vaadin-custom-field::part(error-message)[aria-hidden=false]{padding-top:var(--lumo-space-xs)}vaadin-combo-box,vaadin-integer-field{width:calc(50% - (var(--lumo-space-s)/ 2))}vaadin-integer-field{margin-right:var(--lumo-space-s);padding:0}vaadin-combo-box::part(text-field){padding:0}`))}render(){return m(K||(K=G` <vaadin-custom-field data-testid="field" .i18n="${0}" .label="${0}" .value="${0}" ?disabled="${0}" ?readonly="${0}" .errorMessage="${0}" .checkValidity="${0}" @change="${0}"> <vaadin-integer-field data-testid="value" min="1" max="999" has-controls prevent-invalid-input ?invalid="${0}" ?disabled="${0}" ?readonly="${0}"> </vaadin-integer-field> <vaadin-combo-box data-testid="units" item-value-path="value" item-label-path="label" .items="${0}" ?invalid="${0}" ?disabled="${0}" ?readonly="${0}"> </vaadin-combo-box> </vaadin-custom-field> `),this.__i18n,this.label,H(this.value),this.disabled,this.readonly,this.errorMessage,this.checkValidity,this.__handleChange,!this.checkValidity(),this.disabled,this.readonly,this.__getItems(this.value),!this.checkValidity(),this.disabled,this.readonly)}updated(e){super.updated(e);const t=this.renderRoot.firstElementChild;t.value!==this.value&&(t.value=this.value)}checkValidity(){return!0}__handleChange(e){const t=e.target;this.value=t.value,this.dispatchEvent(new W(this.value))}}const J=L({id:"choice",type:"parallel",context:{defaultCustomValue:"",customValue:null,custom:!1,items:[],value:null,type:"text",min:null,max:null},states:{mutability:{initial:"editable",states:{editable:{},readonly:{}},on:{SET_READONLY:[{target:".editable",cond:"isPayloadFalsey"},{target:".readonly",cond:"isPayloadTruthy"}]}},interactivity:{initial:"enabled",states:{enabled:{},disabled:{}},on:{SET_DISABLED:[{target:".enabled",cond:"isPayloadFalsey"},{target:".disabled",cond:"isPayloadTruthy"}]}},selection:{initial:"unknown",states:{unknown:{always:[{target:"multiple",cond:"isValueArray"},{target:"single"}]},none:{},single:{},multiple:{}}},extension:{initial:"unknown",states:{unknown:{always:[{target:"present",cond:"hasCustom"},{target:"absent"}]},absent:{},present:{initial:"unknown",states:{unknown:{always:[{target:"selected",cond:"hasCustomValue"},{target:"available"}]},available:{on:{SET_TYPE:{actions:"setType"}}},selected:{initial:"unknown",states:{unknown:{always:[{target:"integer",cond:"showsIntegerField"},{target:"textarea",cond:"showsTextarea"},{target:"frequency",cond:"showsFrequency"},{target:"text"}]},text:{},frequency:{},textarea:{},integer:{type:"parallel",states:{min:{initial:"unknown",states:{unknown:{always:[{target:"custom",cond:"hasMinConstraint"},{target:"none"}]},none:{},custom:{}}},max:{initial:"unknown",states:{unknown:{always:[{target:"custom",cond:"hasMaxConstraint"},{target:"none"}]},none:{},custom:{}}}}}}}}}}}},on:{SET_DEFAULT_CUSTOM_VALUE:{actions:"setDefaultCustomValue"},SET_CUSTOM:{actions:"setCustom",target:[".selection.unknown",".extension.unknown"]},SET_VALUE:{actions:"setValue",target:[".selection.unknown",".extension.unknown"]},SET_ITEMS:{actions:"setItems",target:[".selection.unknown",".extension.unknown"]},SET_TYPE:{actions:"setType",target:".extension.unknown"},SET_MIN:{actions:"setMin",target:".extension.unknown"},SET_MAX:{actions:"setMax",target:".extension.unknown"}}},{guards:{isPayloadFalsey:(e,t)=>!t.data,isPayloadTruthy:(e,t)=>!!t.data,isValueArray:e=>Array.isArray(e.value),showsIntegerField:e=>"integer"===e.type,showsFrequency:e=>"frequency"===e.type,showsTextarea:e=>"textarea"===e.type,hasMinConstraint:e=>"number"==typeof e.min,hasMaxConstraint:e=>"number"==typeof e.max,hasCustomValue:e=>"string"==typeof e.customValue,hasCustom:e=>e.custom},actions:{setDefaultCustomValue:P.assign({defaultCustomValue:(e,t)=>t.data}),setValue:P.assign({value:(e,t)=>t.data,customValue:(e,t)=>Array.isArray(t.data)?t.data.find((t=>!e.items.includes(t))):e.items.includes(t.data)?null:t.data}),setCustom:P.assign({custom:(e,t)=>t.data}),setItems:P.assign({items:(e,t)=>t.data}),setType:P.assign({type:(e,t)=>t.data}),setMin:P.assign({min:(e,t)=>t.data}),setMax:P.assign({max:(e,t)=>t.data})}});let Q,ee,te,ae,se,ie,re,le,ne,oe,de,he,ue,ce=e=>e;const pe=`@foxy.io/elements::other[${(Math.pow(10,10)*Math.random()).toFixed(0)}]`;class me extends b{constructor(){super(...arguments),this.getText=e=>e,this.__service=q(J).onChange((()=>this.requestUpdate())).onTransition((({changed:e})=>e&&this.requestUpdate())).start()}static get scopedElements(){return{"vaadin-integer-field":customElements.get("vaadin-integer-field"),"vaadin-text-field":customElements.get("vaadin-text-field"),"x-frequency-input":Z,"vaadin-text-area":customElements.get("vaadin-text-area"),"iron-icon":customElements.get("iron-icon")}}static get styles(){return[super.styles,p(te||(te=ce`:host{--item-width:calc((var(--lumo-space-m) * 2) + 1.25rem)}.ml-xxl{margin-left:var(--item-width)}.item{height:var(--lumo-size-l);width:var(--item-width)}.radio{height:1.25rem;width:1.25rem}.check{height:1.125rem;width:1.125rem}.dot{height:.5rem;width:.5rem}`))]}static get properties(){return t(t({},super.properties),{},{defaultCustomValue:{type:String,attribute:"default-custom-value"},disabled:{type:Boolean},readonly:{type:Boolean},custom:{type:Boolean},type:{type:String},min:{type:Number},max:{type:Number},value:{type:Array},items:{type:Array},getText:{attribute:!1}})}get defaultCustomValue(){return this.__service.state.context.defaultCustomValue}set defaultCustomValue(e){this.__service.send("SET_DEFAULT_CUSTOM_VALUE",{data:e})}get readonly(){return this.__service.state.matches("mutability.readonly")}set readonly(e){this.__service.send("SET_READONLY",{data:e})}get disabled(){return this.__service.state.matches("interactivity.disabled")}set disabled(e){this.__service.send("SET_DISABLED",{data:e})}get custom(){return this.__service.state.matches("extension.present")}set custom(e){this.__service.send("SET_CUSTOM",{data:e})}get type(){return this.__service.state.context.type}set type(e){this.__service.send("SET_TYPE",{data:e})}get min(){return this.__service.state.context.min}set min(e){this.__service.send("SET_MIN",{data:e})}get max(){return this.__service.state.context.max}set max(e){this.__service.send("SET_MAX",{data:e})}get value(){return this.__service.state.context.value}set value(e){this.__service.send("SET_VALUE",{data:e})}get items(){return this.__service.state.context.items}set items(e){this.__service.send("SET_ITEMS",{data:e})}render(){const e=this.custom?[...this.items,pe]:this.items,t=Array.isArray(this.value),a=this.__service.state.matches("extension.present.selected"),s=m(ae||(ae=ce` ${0} `),e.map(((e,s,i)=>{var r;const l=this.custom&&s===i.length-1,n=l?a:t?!!(null===(r=this.value)||void 0===r?void 0:r.includes(e)):e===String(this.value),o=this.disabled||!this._isI18nReady,d=j({value:l?pe:e,name:t?e:"choice","data-testid":`item-${e}`,"?disabled":o,"@change":t=>{if(this.readonly)return t.preventDefault();const a=t.target.checked,s=e===pe?this.defaultCustomValue:e,i=this.value;Array.isArray(i)?this.value=e===pe?a?[...i,s]:i.slice(0,i.length-1):a?[s,...i]:i.filter((e=>e!==s)):this.value=a?s:null,this.dispatchEvent(new N(this.value))}}),h=m(se||(se=ce` <div> ${0} </div> `),e===pe?this._t("choice.other").toString():m(ie||(ie=ce`<slot name="${0}">${0}</slot>`),`${e}-label`,this.getText(e)));return m(re||(re=ce` <div class="ml-xxl border-t border-contrast-10 ${0}"></div> ${0} <div class="mr-m ml-xxl"> ${0} ${0} </div> `),s?"":"hidden",t?function(e,t,a,s,i){const r="transition ease-in-out duration-200",l=`${r} transform ${a?"scale-100":"scale-0"} ${e?"text-contrast-70":"text-tint"}`;return m(ee||(ee=ce` <label class="group flex items-center ${0}"> <div class="item flex items-center justify-center flex-shrink-0 text-primary-contrast"> <div class="check rounded-s ${0} ${0} ${0} focus-within-shadow-outline"> <iron-icon icon="lumo:checkmark" class="block w-full h-full ${0}"></iron-icon> <input type="checkbox" class="sr-only" .checked="${0}" ...="${0}"> </div> </div> <div class="font-lumo leading-m ${0}">${0}</div> </label> `),t||e?"":"cursor-pointer","border "+(e?"border-dashed border-contrast-30":"border-transparent"),r,e?"":t?a?"bg-primary-50":"bg-contrast-10":a?"bg-primary":"bg-contrast-20 group-hover-bg-contrast-30",l,a,s,t?"text-disabled":e?"text-secondary":"text-body",i)}(this.readonly,o,n,d,h):function(e,t,a,s,i){const r="transition ease-in-out duration-200",l=`${r} ${t||e?"":"shadow-xs"} transform ${a?"scale-100":"scale-0"} ${e?"bg-contrast-70":"bg-tint"}`;return m(Q||(Q=ce` <label class="group flex items-center ${0}"> <div class="item flex items-center justify-center flex-shrink-0"> <div class="flex radio rounded-full ${0} ${0} ${0} focus-within-shadow-outline"> <div class="dot m-auto rounded-full ${0}"></div> <input type="radio" class="sr-only" .checked="${0}" ...="${0}"> </div> </div> <div class="font-lumo leading-m ${0}">${0}</div> </label> `),t||e?"":"cursor-pointer","border "+(e?"border-dashed border-contrast-30":"border-transparent"),r,e?"":t?a?"bg-primary-50":"bg-contrast-10":a?"bg-primary":"bg-contrast-20 group-hover-bg-contrast-30",l,a,s,t?"text-disabled":e?"text-secondary":"text-body",i)}(this.readonly,o,n,d,h),e===pe&&a?this.__field:"",e!==pe?m(le||(le=ce`<slot name="${0}"></slot>`),e):"")})));return m(ne||(ne=ce`<form>${0}</form> `),s)}get __field(){const e=j({placeholder:this._t("choice.other").toString(),class:"w-full mb-m",value:this.__service.state.context.customValue,max:this.max,min:this.min,ns:this.ns,"?disabled":this.disabled,"?readonly":this.readonly,"data-testid":"field","@change":e=>{e.stopPropagation();const t=e.target.value;Array.isArray(this.value)?this.value=this.value.slice(0,this.value.length-1).concat(t):this.value=t,this.dispatchEvent(new N(this.value))}});return"frequency"===this.type?m(oe||(oe=ce`<x-frequency-input ...="${0}"></x-frequency-input>`),e):"integer"===this.type?m(de||(de=ce`<vaadin-integer-field ...="${0}" has-controls></vaadin-integer-field>`),e):"textarea"===this.type?m(he||(he=ce`<vaadin-text-area ...="${0}"></vaadin-text-area>`),e):m(ue||(ue=ce`<vaadin-text-field ...="${0}"></vaadin-text-field>`),e)}}export{me as C,Y as D,Z as F,R as a,N as b,P as c};