@foxy.io/elements 1.18.0-beta.12 → 1.18.0-beta.14

package/dist/elements/internal/InternalEditableListControl/InternalEditableListControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalEditableListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Item, Option } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { classMap } from '../../../utils/class-map';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { live } from 'lit-html/directives/live';\nimport { html } from 'lit-element';\n\nexport class InternalEditableListControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Array },\n      __newItem: { attribute: false },\n    };\n  }\n\n  options: Option[] = [];\n\n  private __newItem = '';\n\n  render(): TemplateResult {\n    const deleteButtonClass = classMap({\n      'w-xs h-xs mr-xs rounded-full transition-colors flex-shrink-0': true,\n      'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,\n      'text-tertiary hover-bg-error-10 hover-text-error': !this.disabled,\n      'cursor-default text-disabled': this.disabled,\n      'flex items-center justify-center': !this.readonly,\n      'hidden': this.readonly,\n    });\n\n    const itemClass = classMap({\n      'transition-colors h-m ml-s flex items-center': true,\n      'text-secondary': this.readonly,\n      'text-disabled': this.disabled,\n    });\n\n    const isAddButtonDisabled = this.disabled || !this.__newItem;\n\n    const addItem = () => {\n      if (!this.__newItem) return;\n      this._value = [...this._value, { value: this.__newItem }];\n      this.__newItem = '';\n    };\n\n    return html`\n      <div class=\"group\">\n        <div\n          class=\"transition-colors mb-xs font-medium text-s text-secondary group-hover-text-body\"\n        >\n          ${this.label}\n        </div>\n\n        <div\n          class=\"border border-contrast-10 rounded transition-colors group-hover-border-contrast-20\"\n        >\n          <ol\n            class=\"transition-colors divide-y divide-contrast-10 font-medium group-hover-divide-contrast-20\"\n          >\n            ${repeat(\n              this._value,\n              item => item.value,\n              (item, index) => {\n                return html`\n                  <li class=${itemClass}>\n                    <div class=\"flex-1 mr-s\">${item.label ?? item.value}</div>\n\n                    <button\n                      aria-label=${this.t('delete')}\n                      class=${deleteButtonClass}\n                      ?disabled=${this.disabled}\n                      @click=${() => {\n                        this._value = this._value.filter((_, i) => i !== index);\n                      }}\n                    >\n                      <iron-icon icon=\"lumo:cross\" class=\"icon-inline text-xl\"></iron-icon>\n                    </button>\n                  </li>\n                `;\n              }\n            )}\n          </ol>\n\n          <div\n            style=${this._value.length === 0\n              ? 'border-radius: calc(var(--lumo-border-radius-m) - 1px)'\n              : 'border-radius: 0 0 calc(var(--lumo-border-radius-m) - 1px) calc(var(--lumo-border-radius-m) - 1px)'}\n            class=${classMap({\n              'transition-colors bg-contrast-10 pl-s h-m flex items-center': true,\n              'focus-within-ring-2 focus-within-ring-primary-50': true,\n              'group-hover-bg-contrast-20': true,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n            })}\n          >\n            <input\n              placeholder=${this.placeholder}\n              class=\"w-full bg-transparent appearance-none h-m font-medium focus-outline-none\"\n              list=\"list\"\n              .value=${live(this.__newItem)}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\n              @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n              @change=${(evt: Event) => evt.stopPropagation()}\n              @input=${(evt: InputEvent) => {\n                this.__newItem = (evt.currentTarget as HTMLInputElement).value.trim();\n              }}\n            />\n\n            <datalist id=\"list\">\n              ${this.options.map(({ label, value }) => {\n                if (this._value.some(item => item.value === value)) return;\n                return html`<option value=${value}>${label ?? value}</option>`;\n              })}\n            </datalist>\n\n            <div class=\"transition-opacity ${this.__newItem ? 'opacity-100' : 'opacity-0'}\">\n              <button\n                aria-label=${this.t('submit')}\n                class=${classMap({\n                  'w-xs h-xs mr-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none':\n                    true,\n                  'flex items-center justify-center rounded-full transition-colors': true,\n                  'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,\n                  'bg-success-10 text-success cursor-pointer': !isAddButtonDisabled,\n                  'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,\n                  'focus-ring-2': !isAddButtonDisabled,\n                })}\n                ?disabled=${isAddButtonDisabled}\n                @click=${addItem}\n              >\n                <iron-icon icon=\"lumo:plus\" class=\"icon-inline text-l\"></iron-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"transition-colors mt-xs text-xs text-secondary group-hover-text-body\">\n          ${this.helperText}\n        </div>\n      </div>\n    `;\n  }\n\n  protected get _value(): Item[] {\n    return (super._value ?? []) as Item[];\n  }\n\n  protected set _value(newValue: Item[]) {\n    super._value = newValue;\n  }\n}\n"]}

package/dist/elements/internal/InternalEditableListControl/index.d.ts

@@ -0,0 +1,3 @@
+import '../InternalEditableControl/index';
+import { InternalEditableListControl } from './InternalEditableListControl';
+export { InternalEditableListControl };

package/dist/elements/internal/InternalEditableListControl/index.js

@@ -0,0 +1,5 @@
+import "../InternalEditableControl/index.js";
+import { InternalEditableListControl } from "./InternalEditableListControl.js";
+customElements.define('foxy-internal-editable-list-control', InternalEditableListControl);
+export { InternalEditableListControl };
+//# sourceMappingURL=index.js.map

package/dist/elements/internal/InternalEditableListControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/index.ts"],"names":[],"mappings":"AAAA,6CAA0C;AAE1C,OAAO,EAAE,2BAA2B,EAAE,yCAAsC;AAE5E,cAAc,CAAC,MAAM,CAAC,qCAAqC,EAAE,2BAA2B,CAAC,CAAC;AAE1F,OAAO,EAAE,2BAA2B,EAAE,CAAC","sourcesContent":["import '../InternalEditableControl/index';\n\nimport { InternalEditableListControl } from './InternalEditableListControl';\n\ncustomElements.define('foxy-internal-editable-list-control', InternalEditableListControl);\n\nexport { InternalEditableListControl };\n"]}

package/dist/elements/internal/InternalEditableListControl/types.d.ts

@@ -0,0 +1,9 @@
+import type { TemplateResult } from 'lit-html';
+export declare type Item = {
+    label?: string | TemplateResult;
+    value: string;
+};
+export declare type Option = {
+    label?: string;
+    value: string;
+};

package/dist/elements/internal/InternalEditableListControl/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/elements/internal/InternalEditableListControl/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TemplateResult } from 'lit-html';\n\nexport type Item = { label?: string | TemplateResult; value: string };\nexport type Option = { label?: string; value: string };\n"]}

package/dist/elements/internal/InternalFrequencyControl/InternalFrequencyControl.d.ts

@@ -1,4 +1,4 @@
-import type { CSSResultArray, TemplateResult } from 'lit-element';
+import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
 /**
  * Internal control displaying a custom field for frequency input.
@@ -7,7 +7,12 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
  * @element foxy-internal-frequency-control
  */
 export declare class InternalFrequencyControl extends InternalEditableControl {
+    static get properties(): PropertyDeclarations;
     static get styles(): CSSResultArray;
+    options: {
+        value: string;
+        label: string;
+    }[];
     private __i18n;
     renderControl(): TemplateResult;
     updated(changes: Map<keyof this, unknown>): void;

package/dist/elements/internal/InternalFrequencyControl/InternalFrequencyControl.js

@@ -1,5 +1,4 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
-import { parseDuration } from "../../../utils/parse-duration.js";
 import { css, html } from 'lit-element';
 /**
  * Internal control displaying a custom field for frequency input.
@@ -10,14 +9,29 @@ import { css, html } from 'lit-element';
 export class InternalFrequencyControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        this.options = [
+            { value: 'd', label: 'day' },
+            { value: 'w', label: 'week' },
+            { value: 'm', label: 'month' },
+            { value: 'y', label: 'year' },
+        ];
         this.__i18n = {
             formatValue: inputValues => inputValues.join(''),
             parseValue: value => {
-                const { count, units } = parseDuration(value);
-                return [count.toString(), units];
+                var _a;
+                const normalizedValue = value.startsWith('.') ? `0${value}` : value;
+                const count = parseFloat(value.substring(0, Math.max(normalizedValue.length - 1, 0)));
+                const units = (_a = normalizedValue[normalizedValue.length - 1]) !== null && _a !== void 0 ? _a : '';
+                return isNaN(count) ? ['0', ''] : [count.toString(), units];
             },
         };
     }
+    static get properties() {
+        return {
+            ...super.properties,
+            options: { attribute: false },
+        };
+    }
     static get styles() {
         return [
             super.styles,
@@ -59,7 +73,11 @@ vaadin-combo-box::part(text-field){
     renderControl() {
         var _a, _b;
         const value = ((_a = this._value) !== null && _a !== void 0 ? _a : '');
-        const count = parseDuration(value).count;
+        const count = parseFloat(this.__i18n.parseValue(value)[0]);
+        const items = this.options.map(({ value, label }) => ({
+            label: this.t(label, { count }),
+            value,
+        }));
         return html `
       <vaadin-custom-field
         ?disabled=${this.disabled}
@@ -93,12 +111,7 @@ vaadin-combo-box::part(text-field){
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           ?invalid=${!this._checkValidity()}
-          .items=${[
-            { value: 'd', label: this.t('day', { count }) },
-            { value: 'w', label: this.t('week', { count }) },
-            { value: 'm', label: this.t('month', { count }) },
-            { value: 'y', label: this.t('year', { count }) },
-        ]}
+          .items=${items}
           @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
         >
         </vaadin-combo-box>
@@ -107,8 +120,8 @@ vaadin-combo-box::part(text-field){
     }
     updated(changes) {
         super.updated(changes);
-        const field = this.renderRoot.firstElementChild;
-        if (field.value !== this._value)
+        const field = this.renderRoot.querySelector('vaadin-custom-field');
+        if (field && field.value !== this._value)
             field.value = this._value;
     }
 }

package/dist/elements/internal/InternalFrequencyControl/InternalFrequencyControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalFrequencyControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CustomFieldElement, CustomFieldI18n } from '@vaadin/vaadin-custom-field';\nimport type { CSSResultArray, TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { parseDuration } from '../../../utils/parse-duration';\nimport { css, html } from 'lit-element';\n\n/**\n * Internal control displaying a custom field for frequency input.\n *\n * @since 1.17.0\n * @element foxy-internal-frequency-control\n */\nexport class InternalFrequencyControl extends InternalEditableControl {\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        :host {\n          display: block;\n        }\n\n        vaadin-custom-field {\n          width: 100%;\n          font-size: 0;\n          line-height: 0;\n          padding-top: 0 !important;\n        }\n\n        vaadin-custom-field::part(label) {\n          padding-bottom: var(--lumo-space-s);\n        }\n\n        vaadin-custom-field::part(error-message)[aria-hidden='false'] {\n          padding-top: var(--lumo-space-xs);\n        }\n\n        vaadin-integer-field,\n        vaadin-combo-box {\n          width: calc(50% - (var(--lumo-space-s) / 2));\n        }\n\n        vaadin-integer-field {\n          margin-right: var(--lumo-space-s);\n          padding: 0;\n        }\n\n        vaadin-combo-box::part(text-field) {\n          padding: 0;\n        }\n      `,\n    ];\n  }\n\n  private __i18n: CustomFieldI18n = {\n    formatValue: inputValues => inputValues.join(''),\n    parseValue: value => {\n      const { count, units } = parseDuration(value);\n      return [count.toString(), units];\n    },\n  };\n\n  renderControl(): TemplateResult {\n    const value = (this._value ?? '') as string;\n    const count = parseDuration(value).count;\n\n    return html`\n      <vaadin-custom-field\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .errorMessage=${this._errorMessage ?? ''}\n        .helperText=${this.helperText}\n        .label=${this.label}\n        .value=${value}\n        .i18n=${this.__i18n}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as CustomFieldElement;\n          this._value = field.value as string;\n        }}\n      >\n        <vaadin-integer-field\n          max=\"999\"\n          min=\"1\"\n          prevent-invalid-input\n          has-controls\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?invalid=${!this._checkValidity()}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        >\n        </vaadin-integer-field>\n\n        <vaadin-combo-box\n          item-value-path=\"value\"\n          item-label-path=\"label\"\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?invalid=${!this._checkValidity()}\n          .items=${[\n            { value: 'd', label: this.t('day', { count }) },\n            { value: 'w', label: this.t('week', { count }) },\n            { value: 'm', label: this.t('month', { count }) },\n            { value: 'y', label: this.t('year', { count }) },\n          ]}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        >\n        </vaadin-combo-box>\n      </vaadin-custom-field>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    const field = this.renderRoot.firstElementChild as CustomFieldElement;\n    if (field.value !== this._value) field.value = this._value as string;\n  }\n}\n"]}
+{"version":3,"file":"InternalFrequencyControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CustomFieldElement, CustomFieldI18n } from '@vaadin/vaadin-custom-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { css, html } from 'lit-element';\n\n/**\n * Internal control displaying a custom field for frequency input.\n *\n * @since 1.17.0\n * @element foxy-internal-frequency-control\n */\nexport class InternalFrequencyControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        :host {\n          display: block;\n        }\n\n        vaadin-custom-field {\n          width: 100%;\n          font-size: 0;\n          line-height: 0;\n          padding-top: 0 !important;\n        }\n\n        vaadin-custom-field::part(label) {\n          padding-bottom: var(--lumo-space-s);\n        }\n\n        vaadin-custom-field::part(error-message)[aria-hidden='false'] {\n          padding-top: var(--lumo-space-xs);\n        }\n\n        vaadin-integer-field,\n        vaadin-combo-box {\n          width: calc(50% - (var(--lumo-space-s) / 2));\n        }\n\n        vaadin-integer-field {\n          margin-right: var(--lumo-space-s);\n          padding: 0;\n        }\n\n        vaadin-combo-box::part(text-field) {\n          padding: 0;\n        }\n      `,\n    ];\n  }\n\n  options = [\n    { value: 'd', label: 'day' },\n    { value: 'w', label: 'week' },\n    { value: 'm', label: 'month' },\n    { value: 'y', label: 'year' },\n  ];\n\n  private __i18n: CustomFieldI18n = {\n    formatValue: inputValues => inputValues.join(''),\n    parseValue: value => {\n      const normalizedValue = value.startsWith('.') ? `0${value}` : value;\n      const count = parseFloat(value.substring(0, Math.max(normalizedValue.length - 1, 0)));\n      const units = normalizedValue[normalizedValue.length - 1] ?? '';\n\n      return isNaN(count) ? ['0', ''] : [count.toString(), units];\n    },\n  };\n\n  renderControl(): TemplateResult {\n    const value = (this._value ?? '') as string;\n    const count = parseFloat(this.__i18n.parseValue(value)[0] as string);\n    const items = this.options.map(({ value, label }) => ({\n      label: this.t(label, { count }),\n      value,\n    }));\n\n    return html`\n      <vaadin-custom-field\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .errorMessage=${this._errorMessage ?? ''}\n        .helperText=${this.helperText}\n        .label=${this.label}\n        .value=${value}\n        .i18n=${this.__i18n}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as CustomFieldElement;\n          this._value = field.value as string;\n        }}\n      >\n        <vaadin-integer-field\n          max=\"999\"\n          min=\"1\"\n          prevent-invalid-input\n          has-controls\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?invalid=${!this._checkValidity()}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        >\n        </vaadin-integer-field>\n\n        <vaadin-combo-box\n          item-value-path=\"value\"\n          item-label-path=\"label\"\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?invalid=${!this._checkValidity()}\n          .items=${items}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        >\n        </vaadin-combo-box>\n      </vaadin-custom-field>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    const field = this.renderRoot.querySelector('vaadin-custom-field');\n    if (field && field.value !== this._value) field.value = this._value as string;\n  }\n}\n"]}

package/dist/elements/internal/InternalIntegerControl/InternalIntegerControl.d.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult } from 'lit-element';
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
 /**
  * Internal control displaying a basic integer box.
@@ -7,6 +7,9 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
  * @element foxy-internal-integer-control
  */
 export declare class InternalIntegerControl extends InternalEditableControl {
+    static get properties(): PropertyDeclarations;
+    min: number | null;
+    max: number | null;
     renderControl(): TemplateResult;
     protected get _value(): number;
     protected set _value(newValue: number);

package/dist/elements/internal/InternalIntegerControl/InternalIntegerControl.js

@@ -8,7 +8,20 @@ import { html } from 'lit-element';
  * @element foxy-internal-integer-control
  */
 export class InternalIntegerControl extends InternalEditableControl {
+    constructor() {
+        super(...arguments);
+        this.min = null;
+        this.max = null;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            min: { type: Number },
+            max: { type: Number },
+        };
+    }
     renderControl() {
+        var _a, _b;
         return html `
       <vaadin-integer-field
         error-message=${ifDefined(this._errorMessage)}
@@ -16,6 +29,8 @@ export class InternalIntegerControl extends InternalEditableControl {
         helper-text=${this.helperText}
         label=${this.label}
         class="w-full"
+        min=${ifDefined((_a = this.min) !== null && _a !== void 0 ? _a : undefined)}
+        max=${ifDefined((_b = this.max) !== null && _b !== void 0 ? _b : undefined)}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
         .checkValidity=${this._checkValidity}

package/dist/elements/internal/InternalIntegerControl/InternalIntegerControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalIntegerControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalIntegerControl/InternalIntegerControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IACjE,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,WAAW;sBAChB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,KAAK;;oBAEN,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;;mBAEjB,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;kBACtE,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAoC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,CAAC,CAAC;IACnD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;CACF","sourcesContent":["import type { IntegerFieldElement } from '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport type { TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a basic integer box.\n *\n * @since 1.17.0\n * @element foxy-internal-integer-control\n */\nexport class InternalIntegerControl extends InternalEditableControl {\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-integer-field\n        error-message=${ifDefined(this._errorMessage)}\n        placeholder=${this.placeholder}\n        helper-text=${this.helperText}\n        label=${this.label}\n        class=\"w-full\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${String(this._value)}\n        clear-button-visible\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as IntegerFieldElement;\n          this._value = parseInt(field.value);\n        }}\n      >\n      </vaadin-integer-field>\n    `;\n  }\n\n  protected get _value(): number {\n    return (super._value as number | undefined) ?? 0;\n  }\n\n  protected set _value(newValue: number) {\n    super._value = newValue as unknown | undefined;\n  }\n}\n"]}
+{"version":3,"file":"InternalIntegerControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalIntegerControl/InternalIntegerControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IAAnE;;QASE,QAAG,GAAkB,IAAI,CAAC;QAE1B,QAAG,GAAkB,IAAI,CAAC;IAkC5B,CAAC;IA5CC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACrB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACtB,CAAC;IACJ,CAAC;IAMD,aAAa;;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,WAAW;sBAChB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,KAAK;;cAEZ,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,SAAS,CAAC;cAChC,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,SAAS,CAAC;oBAC1B,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;;mBAEjB,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;kBACtE,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAoC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,CAAC,CAAC;IACnD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;CACF","sourcesContent":["import type { IntegerFieldElement } from '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport type { PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a basic integer box.\n *\n * @since 1.17.0\n * @element foxy-internal-integer-control\n */\nexport class InternalIntegerControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      min: { type: Number },\n      max: { type: Number },\n    };\n  }\n\n  min: number | null = null;\n\n  max: number | null = null;\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-integer-field\n        error-message=${ifDefined(this._errorMessage)}\n        placeholder=${this.placeholder}\n        helper-text=${this.helperText}\n        label=${this.label}\n        class=\"w-full\"\n        min=${ifDefined(this.min ?? undefined)}\n        max=${ifDefined(this.max ?? undefined)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${String(this._value)}\n        clear-button-visible\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as IntegerFieldElement;\n          this._value = parseInt(field.value);\n        }}\n      >\n      </vaadin-integer-field>\n    `;\n  }\n\n  protected get _value(): number {\n    return (super._value as number | undefined) ?? 0;\n  }\n\n  protected set _value(newValue: number) {\n    super._value = newValue as unknown | undefined;\n  }\n}\n"]}

package/dist/elements/internal/InternalPasswordControl/InternalPasswordControl.d.ts

@@ -0,0 +1,13 @@
+import type { TemplateResult } from 'lit-element';
+import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+/**
+ * Internal control displaying a basic password box.
+ *
+ * @since 1.17.0
+ * @element foxy-internal-password-field-control
+ */
+export declare class InternalPasswordControl extends InternalEditableControl {
+    renderControl(): TemplateResult;
+    protected get _value(): string;
+    protected set _value(newValue: string);
+}

package/dist/elements/internal/InternalPasswordControl/InternalPasswordControl.js

@@ -0,0 +1,40 @@
+import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-element';
+/**
+ * Internal control displaying a basic password box.
+ *
+ * @since 1.17.0
+ * @element foxy-internal-password-field-control
+ */
+export class InternalPasswordControl extends InternalEditableControl {
+    renderControl() {
+        return html `
+      <vaadin-password-field
+        error-message=${ifDefined(this._errorMessage)}
+        helper-text=${this.helperText}
+        placeholder=${this.placeholder}
+        label=${this.label}
+        class="w-full"
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        .checkValidity=${this._checkValidity}
+        .value=${this._value}
+        @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
+        @input=${(evt) => {
+            const area = evt.currentTarget;
+            this._value = area.value;
+        }}
+      >
+      </vaadin-password-field>
+    `;
+    }
+    get _value() {
+        var _a;
+        return (_a = super._value) !== null && _a !== void 0 ? _a : '';
+    }
+    set _value(newValue) {
+        super._value = newValue;
+    }
+}
+//# sourceMappingURL=InternalPasswordControl.js.map

package/dist/elements/internal/InternalPasswordControl/InternalPasswordControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalPasswordControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/InternalPasswordControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,OAAO,uBAAwB,SAAQ,uBAAuB;IAClE,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;oBAEN,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;mBACT,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;iBACvE,CAAC,GAAgB,EAAE,EAAE;YAC5B,MAAM,IAAI,GAAG,GAAG,CAAC,aAAqC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,EAAE,CAAC;IACpD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;CACF","sourcesContent":["import type { PasswordFieldElement } from '@vaadin/vaadin-text-field/vaadin-password-field';\nimport type { TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a basic password box.\n *\n * @since 1.17.0\n * @element foxy-internal-password-field-control\n */\nexport class InternalPasswordControl extends InternalEditableControl {\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-password-field\n        error-message=${ifDefined(this._errorMessage)}\n        helper-text=${this.helperText}\n        placeholder=${this.placeholder}\n        label=${this.label}\n        class=\"w-full\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${this._value}\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @input=${(evt: CustomEvent) => {\n          const area = evt.currentTarget as PasswordFieldElement;\n          this._value = area.value;\n        }}\n      >\n      </vaadin-password-field>\n    `;\n  }\n\n  protected get _value(): string {\n    return (super._value as string | undefined) ?? '';\n  }\n\n  protected set _value(newValue: string) {\n    super._value = newValue as unknown | undefined;\n  }\n}\n"]}

package/dist/elements/internal/InternalPasswordControl/index.d.ts

@@ -0,0 +1,4 @@
+import '@vaadin/vaadin-text-field/vaadin-password-field';
+import '../InternalEditableControl/index';
+import { InternalPasswordControl as Control } from './InternalPasswordControl';
+export { Control as InternalPasswordControl };

package/dist/elements/internal/InternalPasswordControl/index.js

@@ -0,0 +1,6 @@
+import '@vaadin/vaadin-text-field/vaadin-password-field';
+import "../InternalEditableControl/index.js";
+import { InternalPasswordControl as Control } from "./InternalPasswordControl.js";
+customElements.define('foxy-internal-password-control', Control);
+export { Control as InternalPasswordControl };
+//# sourceMappingURL=index.js.map

package/dist/elements/internal/InternalPasswordControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,iDAAiD,CAAC;AACzD,6CAA0C;AAC1C,OAAO,EAAE,uBAAuB,IAAI,OAAO,EAAE,qCAAkC;AAE/E,cAAc,CAAC,MAAM,CAAC,gCAAgC,EAAE,OAAO,CAAC,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-text-field/vaadin-password-field';\nimport '../InternalEditableControl/index';\nimport { InternalPasswordControl as Control } from './InternalPasswordControl';\n\ncustomElements.define('foxy-internal-password-control', Control);\n\nexport { Control as InternalPasswordControl };\n"]}

package/dist/elements/internal/InternalSelectControl/InternalSelectControl.d.ts

@@ -13,5 +13,7 @@ export declare class InternalSelectControl extends InternalEditableControl {
     options: Option[];
     /** Same as the "theme" attribute/property of `vaadin-select`. */
     theme: string | null;
+    private __renderer;
     renderControl(): TemplateResult;
+    updated(changes: Map<keyof this, unknown>): void;
 }

package/dist/elements/internal/InternalSelectControl/InternalSelectControl.js

@@ -14,6 +14,18 @@ export class InternalSelectControl extends InternalEditableControl {
         this.options = [];
         /** Same as the "theme" attribute/property of `vaadin-select`. */
         this.theme = null;
+        this.__renderer = root => {
+            const items = this.options.map(({ label, value }) => {
+                return html `
+        <vaadin-item value=${value}>
+          <foxy-i18n lang=${this.lang} key=${label} ns=${this.ns}></foxy-i18n>
+        </vaadin-item>
+      `;
+            });
+            if (!root.firstElementChild)
+                root.appendChild(document.createElement('vaadin-list-box'));
+            render(items, root.firstElementChild);
+        };
     }
     static get properties() {
         return {
@@ -24,14 +36,6 @@ export class InternalSelectControl extends InternalEditableControl {
     }
     renderControl() {
         var _a;
-        const renderer = (root) => {
-            const items = this.options.map(({ label, value }) => {
-                return html `<vaadin-item value=${value}>${this.t(label)}</vaadin-item>`;
-            });
-            if (!root.firstElementChild)
-                root.appendChild(document.createElement('vaadin-list-box'));
-            render(items, root.firstElementChild);
-        };
         return html `
       <vaadin-select
         error-message=${ifDefined(this._errorMessage)}
@@ -43,7 +47,7 @@ export class InternalSelectControl extends InternalEditableControl {
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
         .checkValidity=${this._checkValidity}
-        .renderer=${renderer}
+        .renderer=${this.__renderer}
         .value=${this._value}
         @change=${(evt) => {
             const field = evt.currentTarget;
@@ -53,5 +57,12 @@ export class InternalSelectControl extends InternalEditableControl {
       </vaadin-select>
     `;
     }
+    updated(changes) {
+        var _a;
+        super.updated(changes);
+        if (changes.has('ns') || changes.has('lang') || changes.has('options')) {
+            (_a = this.renderRoot.querySelector('vaadin-select')) === null || _a === void 0 ? void 0 : _a.render();
+        }
+    }
 }
 //# sourceMappingURL=InternalSelectControl.js.map

package/dist/elements/internal/InternalSelectControl/InternalSelectControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalSelectControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSelectControl/InternalSelectControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,uBAAuB;IAAlE;;QASE,uCAAuC;QACvC,YAAO,GAAa,EAAE,CAAC;QAEvB,iEAAiE;QACjE,UAAK,GAAkB,IAAI,CAAC;IAiC9B,CAAC;IA7CC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAQD,aAAa;;QACX,MAAM,QAAQ,GAAG,CAAC,IAAa,EAAE,EAAE;YACjC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;gBAClD,OAAO,IAAI,CAAA,sBAAsB,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC;YAC1E,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,IAAI,CAAC,iBAAiB;gBAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;YACzF,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,iBAA4B,CAAC,CAAC;QACnD,CAAC,CAAC;QAEF,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,WAAW;sBAChB,IAAI,CAAC,UAAU;;gBAErB,IAAI,CAAC,KAAK;gBACV,SAAS,OAAC,IAAI,CAAC,KAAK,mCAAI,SAAS,CAAC;oBAC9B,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;oBACxB,QAAQ;iBACX,IAAI,CAAC,MAAgB;kBACpB,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAA8B,CAAC;YACjD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC;QAC5B,CAAC;;;KAGJ,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { SelectElement } from '@vaadin/vaadin-select';\nimport type { Option } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, render } from 'lit-html';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\n/**\n * Internal control wrapper for `vaadin-select` element.\n *\n * @since 1.19.0\n * @element foxy-internal-select-control\n */\nexport class InternalSelectControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Array },\n      theme: { type: String },\n    };\n  }\n\n  /** List of radio buttons to render. */\n  options: Option[] = [];\n\n  /** Same as the \"theme\" attribute/property of `vaadin-select`. */\n  theme: string | null = null;\n\n  renderControl(): TemplateResult {\n    const renderer = (root: Element) => {\n      const items = this.options.map(({ label, value }) => {\n        return html`<vaadin-item value=${value}>${this.t(label)}</vaadin-item>`;\n      });\n\n      if (!root.firstElementChild) root.appendChild(document.createElement('vaadin-list-box'));\n      render(items, root.firstElementChild as Element);\n    };\n\n    return html`\n      <vaadin-select\n        error-message=${ifDefined(this._errorMessage)}\n        placeholder=${this.placeholder}\n        helper-text=${this.helperText}\n        class=\"w-full -mt-m -mb-xs\"\n        label=${this.label}\n        theme=${ifDefined(this.theme ?? undefined)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .renderer=${renderer}\n        .value=${this._value as string}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as SelectElement;\n          this._value = field.value;\n        }}\n      >\n      </vaadin-select>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalSelectControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSelectControl/InternalSelectControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,uBAAuB;IAAlE;;QASE,uCAAuC;QACvC,YAAO,GAAa,EAAE,CAAC;QAEvB,iEAAiE;QACjE,UAAK,GAAkB,IAAI,CAAC;QAEpB,eAAU,GAAmB,IAAI,CAAC,EAAE;YAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;gBAClD,OAAO,IAAI,CAAA;6BACY,KAAK;4BACN,IAAI,CAAC,IAAI,QAAQ,KAAK,OAAO,IAAI,CAAC,EAAE;;OAEzD,CAAC;YACJ,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,IAAI,CAAC,iBAAiB;gBAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;YACzF,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,iBAA4B,CAAC,CAAC;QACnD,CAAC,CAAC;IAgCJ,CAAC;IAzDC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAqBD,aAAa;;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,WAAW;sBAChB,IAAI,CAAC,UAAU;;gBAErB,IAAI,CAAC,KAAK;gBACV,SAAS,OAAC,IAAI,CAAC,KAAK,mCAAI,SAAS,CAAC;oBAC9B,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;oBACxB,IAAI,CAAC,UAAU;iBAClB,IAAI,CAAC,MAAgB;kBACpB,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAA8B,CAAC;YACjD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC;QAC5B,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAiC;;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACtE,MAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAgB,eAAe,CAAC,0CAAE,MAAM,GAAG;SACzE;IACH,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { SelectElement, SelectRenderer } from '@vaadin/vaadin-select';\nimport type { Option } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, render } from 'lit-html';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\n/**\n * Internal control wrapper for `vaadin-select` element.\n *\n * @since 1.19.0\n * @element foxy-internal-select-control\n */\nexport class InternalSelectControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Array },\n      theme: { type: String },\n    };\n  }\n\n  /** List of radio buttons to render. */\n  options: Option[] = [];\n\n  /** Same as the \"theme\" attribute/property of `vaadin-select`. */\n  theme: string | null = null;\n\n  private __renderer: SelectRenderer = root => {\n    const items = this.options.map(({ label, value }) => {\n      return html`\n        <vaadin-item value=${value}>\n          <foxy-i18n lang=${this.lang} key=${label} ns=${this.ns}></foxy-i18n>\n        </vaadin-item>\n      `;\n    });\n\n    if (!root.firstElementChild) root.appendChild(document.createElement('vaadin-list-box'));\n    render(items, root.firstElementChild as Element);\n  };\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-select\n        error-message=${ifDefined(this._errorMessage)}\n        placeholder=${this.placeholder}\n        helper-text=${this.helperText}\n        class=\"w-full -mt-m -mb-xs\"\n        label=${this.label}\n        theme=${ifDefined(this.theme ?? undefined)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .renderer=${this.__renderer}\n        .value=${this._value as string}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as SelectElement;\n          this._value = field.value;\n        }}\n      >\n      </vaadin-select>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n\n    if (changes.has('ns') || changes.has('lang') || changes.has('options')) {\n      this.renderRoot.querySelector<SelectElement>('vaadin-select')?.render();\n    }\n  }\n}\n"]}

package/dist/elements/internal/InternalTextControl/InternalTextControl.d.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult } from 'lit-element';
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
 /**
  * Internal control displaying a basic text box.
@@ -7,6 +7,9 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
  * @element foxy-internal-text-control
  */
 export declare class InternalTextControl extends InternalEditableControl {
+    static get properties(): PropertyDeclarations;
+    prefix: string | null;
+    suffix: string | null;
     renderControl(): TemplateResult;
     protected get _value(): string;
     protected set _value(newValue: string);

package/dist/elements/internal/InternalTextControl/InternalTextControl.js

@@ -8,6 +8,18 @@ import { html } from 'lit-element';
  * @element foxy-internal-text-control
  */
 export class InternalTextControl extends InternalEditableControl {
+    constructor() {
+        super(...arguments);
+        this.prefix = null;
+        this.suffix = null;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            prefix: {},
+            suffix: {},
+        };
+    }
     renderControl() {
         return html `
       <vaadin-text-field
@@ -16,9 +28,9 @@ export class InternalTextControl extends InternalEditableControl {
         placeholder=${this.placeholder}
         label=${this.label}
         class="w-full"
+        ?clear-button-visible=${!this.suffix}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
-        clear-button-visible
         .checkValidity=${this._checkValidity}
         .value=${this._value}
         @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
@@ -27,6 +39,8 @@ export class InternalTextControl extends InternalEditableControl {
             this._value = field.value;
         }}
       >
+        ${this.prefix ? html `<div slot="prefix">${this.prefix}</div>` : ''}
+        ${this.suffix ? html `<div class="pr-s font-medium" slot="suffix">${this.suffix}</div>` : ''}
       </vaadin-text-field>
     `;
     }

package/dist/elements/internal/InternalTextControl/InternalTextControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalTextControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalTextControl/InternalTextControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,OAAO,mBAAoB,SAAQ,uBAAuB;IAC9D,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;oBAEN,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;;yBAER,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;mBACT,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;iBACvE,CAAC,GAAgB,EAAE,EAAE;YAC5B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAiC,CAAC;YACpD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC;QAC5B,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,EAAE,CAAC;IACpD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;CACF","sourcesContent":["import type { TextFieldElement } from '@vaadin/vaadin-text-field';\nimport type { TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a basic text box.\n *\n * @since 1.17.0\n * @element foxy-internal-text-control\n */\nexport class InternalTextControl extends InternalEditableControl {\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-text-field\n        error-message=${ifDefined(this._errorMessage)}\n        helper-text=${this.helperText}\n        placeholder=${this.placeholder}\n        label=${this.label}\n        class=\"w-full\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        clear-button-visible\n        .checkValidity=${this._checkValidity}\n        .value=${this._value}\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @input=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as TextFieldElement;\n          this._value = field.value;\n        }}\n      >\n      </vaadin-text-field>\n    `;\n  }\n\n  protected get _value(): string {\n    return (super._value as string | undefined) ?? '';\n  }\n\n  protected set _value(newValue: string) {\n    super._value = newValue as unknown | undefined;\n  }\n}\n"]}
+{"version":3,"file":"InternalTextControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalTextControl/InternalTextControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,OAAO,mBAAoB,SAAQ,uBAAuB;IAAhE;;QASE,WAAM,GAAkB,IAAI,CAAC;QAE7B,WAAM,GAAkB,IAAI,CAAC;IAkC/B,CAAC;IA5CC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;SACX,CAAC;IACJ,CAAC;IAMD,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;gCAEM,CAAC,IAAI,CAAC,MAAM;oBACxB,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;mBACT,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;iBACvE,CAAC,GAAgB,EAAE,EAAE;YAC5B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAiC,CAAC;YACpD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC;QAC5B,CAAC;;UAEC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;UAChE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,+CAA+C,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;;KAE9F,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,EAAE,CAAC;IACpD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { TextFieldElement } from '@vaadin/vaadin-text-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a basic text box.\n *\n * @since 1.17.0\n * @element foxy-internal-text-control\n */\nexport class InternalTextControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      prefix: {},\n      suffix: {},\n    };\n  }\n\n  prefix: string | null = null;\n\n  suffix: string | null = null;\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-text-field\n        error-message=${ifDefined(this._errorMessage)}\n        helper-text=${this.helperText}\n        placeholder=${this.placeholder}\n        label=${this.label}\n        class=\"w-full\"\n        ?clear-button-visible=${!this.suffix}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${this._value}\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @input=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as TextFieldElement;\n          this._value = field.value;\n        }}\n      >\n        ${this.prefix ? html`<div slot=\"prefix\">${this.prefix}</div>` : ''}\n        ${this.suffix ? html`<div class=\"pr-s font-medium\" slot=\"suffix\">${this.suffix}</div>` : ''}\n      </vaadin-text-field>\n    `;\n  }\n\n  protected get _value(): string {\n    return (super._value as string | undefined) ?? '';\n  }\n\n  protected set _value(newValue: string) {\n    super._value = newValue as unknown | undefined;\n  }\n}\n"]}

package/dist/elements/public/EmailTemplateCard/EmailTemplateCard.js

@@ -5,18 +5,18 @@ const NS = 'email-template-card';
 const Base = TranslatableMixin(InternalCard, NS);
 export class EmailTemplateCard extends Base {
     renderBody() {
-        var _a, _b, _c, _d;
-        // TODO remove the directive below once SDK has the types
-        // @ts-expect-error definition for template_language is missing in SDK types
-        const language = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.template_language) !== null && _b !== void 0 ? _b : 'nunjucks';
-        const languageToExtension = { nunjucks: '.njk', handlebars: '.hbs' };
-        const extension = (_c = languageToExtension[language]) !== null && _c !== void 0 ? _c : `.${language}`;
+        const data = this.data;
+        const type = (data === null || data === void 0 ? void 0 : data.content_html_url) && data.content_html_url
+            ? 'type_custom_url'
+            : (data === null || data === void 0 ? void 0 : data.content_html) && data.content_text
+                ? 'type_custom_text'
+                : (data === null || data === void 0 ? void 0 : data.content_html) || (data === null || data === void 0 ? void 0 : data.content_html_url) || (data === null || data === void 0 ? void 0 : data.content_text) || (data === null || data === void 0 ? void 0 : data.content_text_url)
+                    ? 'type_mixed'
+                    : 'type_default';
         return html `
-      <div class="flex items-center justify-between">
-        <div class="font-semibold">${(_d = this.data) === null || _d === void 0 ? void 0 : _d.description}&ZeroWidthSpace;</div>
-        <div class="rounded-t-l rounded-b-l px-s py-xs bg-contrast-5">
-          <span class="uppercase text-xs font-bold tracking-wide">${extension}</span>
-        </div>
+      <div class="flex justify-between gap-s">
+        <foxy-i18n class="font-semibold truncate flex-shrink-0" infer="" key="title"></foxy-i18n>
+        <foxy-i18n class="truncate text-tertiary" infer="" key=${type}></foxy-i18n>
       </div>
     `;
     }

package/dist/elements/public/EmailTemplateCard/EmailTemplateCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmailTemplateCard.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateCard/EmailTemplateCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,qBAAqB,CAAC;AACjC,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD,MAAM,OAAO,iBAAkB,SAAQ,IAAU;IAC/C,UAAU;;QACR,yDAAyD;QACzD,4EAA4E;QAC5E,MAAM,QAAQ,eAAG,IAAI,CAAC,IAAI,0CAAE,iBAAiB,mCAAI,UAAU,CAAC;QAC5D,MAAM,mBAAmB,GAA2B,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC;QAC7F,MAAM,SAAS,SAAG,mBAAmB,CAAC,QAAQ,CAAC,mCAAI,IAAI,QAAQ,EAAE,CAAC;QAElE,OAAO,IAAI,CAAA;;qCAEsB,MAAA,IAAI,CAAC,IAAI,0CAAE,WAAW;;oEAES,SAAS;;;KAGxE,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\n\nconst NS = 'email-template-card';\nconst Base = TranslatableMixin(InternalCard, NS);\n\nexport class EmailTemplateCard extends Base<Data> {\n  renderBody(): TemplateResult {\n    // TODO remove the directive below once SDK has the types\n    // @ts-expect-error definition for template_language is missing in SDK types\n    const language = this.data?.template_language ?? 'nunjucks';\n    const languageToExtension: Record<string, string> = { nunjucks: '.njk', handlebars: '.hbs' };\n    const extension = languageToExtension[language] ?? `.${language}`;\n\n    return html`\n      <div class=\"flex items-center justify-between\">\n        <div class=\"font-semibold\">${this.data?.description}&ZeroWidthSpace;</div>\n        <div class=\"rounded-t-l rounded-b-l px-s py-xs bg-contrast-5\">\n          <span class=\"uppercase text-xs font-bold tracking-wide\">${extension}</span>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"EmailTemplateCard.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateCard/EmailTemplateCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,qBAAqB,CAAC;AACjC,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD,MAAM,OAAO,iBAAkB,SAAQ,IAAU;IAC/C,UAAU;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,MAAM,IAAI,GACR,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,KAAI,IAAI,CAAC,gBAAgB;YAC7C,CAAC,CAAC,iBAAiB;YACnB,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,KAAI,IAAI,CAAC,YAAY;gBACzC,CAAC,CAAC,kBAAkB;gBACpB,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,MAClB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA,KACtB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAA,KAClB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA;oBACxB,CAAC,CAAC,YAAY;oBACd,CAAC,CAAC,cAAc,CAAC;QAErB,OAAO,IAAI,CAAA;;;iEAGkD,IAAI;;KAEhE,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\n\nconst NS = 'email-template-card';\nconst Base = TranslatableMixin(InternalCard, NS);\n\nexport class EmailTemplateCard extends Base<Data> {\n  renderBody(): TemplateResult {\n    const data = this.data;\n    const type =\n      data?.content_html_url && data.content_html_url\n        ? 'type_custom_url'\n        : data?.content_html && data.content_text\n        ? 'type_custom_text'\n        : data?.content_html ||\n          data?.content_html_url ||\n          data?.content_text ||\n          data?.content_text_url\n        ? 'type_mixed'\n        : 'type_default';\n\n    return html`\n      <div class=\"flex justify-between gap-s\">\n        <foxy-i18n class=\"font-semibold truncate flex-shrink-0\" infer=\"\" key=\"title\"></foxy-i18n>\n        <foxy-i18n class=\"truncate text-tertiary\" infer=\"\" key=${type}></foxy-i18n>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/public/NucleonElement/NucleonElement.js

@@ -3,7 +3,7 @@ import { Nucleon, Rumour } from '@foxy.io/sdk/core';
 import { assign, interpret } from 'xstate';
 import { API } from "./API.js";
 import { FetchEvent } from "./FetchEvent.js";
-import { UpdateEvent } from "./UpdateEvent.js";
+import { UpdateEvent, UpdateResult } from "./UpdateEvent.js";
 import memoize from 'lodash-es/memoize';
 import { serveFromCache } from "./serveFromCache.js";
 import { InferrableMixin } from "../../../mixins/inferrable.js";
@@ -304,10 +304,20 @@ export class NucleonElement extends InferrableMixin(LitElement) {
     }
     __createService() {
         this.__service.onTransition(state => {
+            var _a, _b;
             if (!state.changed)
                 return;
+            let result = undefined;
+            if (state.matches('idle')) {
+                if ((_a = state.history) === null || _a === void 0 ? void 0 : _a.matches({ busy: 'deleting' })) {
+                    result = UpdateResult.ResourceDeleted;
+                }
+                else if ((_b = state.history) === null || _b === void 0 ? void 0 : _b.matches({ busy: 'creating' })) {
+                    result = UpdateResult.ResourceCreated;
+                }
+            }
             this.requestUpdate();
-            this.dispatchEvent(new UpdateEvent());
+            this.dispatchEvent(new UpdateEvent('update', { detail: { result } }));
             if (!state.matches('busy'))
                 this.__processFetchEventQueue();
         });
@@ -383,7 +393,7 @@ export class NucleonElement extends InferrableMixin(LitElement) {
             return;
         event.preventDefault();
         this.__fetchEventQueue.push(event);
-        if (!this.in('busy'))
+        if (!this.__service.state.matches('busy'))
             this.__processFetchEventQueue();
     }
 }