@foxy.io/elements 1.28.0 → 1.29.0-beta.2

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

@@ -1 +1 @@
-{"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/**\n * An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n *\n * @element foxy-internal-form\n * @since 1.17.0\n */\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n  /** Validation errors with this prefix will show up at the top of the form. */\n  static generalErrorPrefix = 'error:';\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      status: { type: Object },\n    };\n  }\n\n  /** Status message to render at the top of the form. If `null`, the message is hidden. */\n  status: null | Status = null;\n\n  /**\n   * Renders header actions when the optional header is rendered.\n   * Empty by default.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  renderHeaderActions(data: TData): TemplateResult | null {\n    return null;\n  }\n\n  /** Getter that returns a i18n key for the optional form header title. */\n  get headerTitleKey(): string {\n    return 'title';\n  }\n\n  /** I18next options to pass to the header title translation function. */\n  get headerTitleOptions(): Record<string, unknown> {\n    return {\n      ...this.data,\n      context: this.data ? 'existing' : 'new',\n      id: this.data ? getResourceId(this.data._links.self.href) : null,\n    };\n  }\n\n  /** Getter that returns a i18n key for the optional form header subtitle. Note that subtitle is shown only when data is avaiable. */\n  get headerSubtitleKey(): string {\n    return 'subtitle';\n  }\n\n  /** I18next options to pass to the header subtitle translation function. Note that subtitle is shown only when data is avaiable. */\n  get headerSubtitleOptions(): Record<string, unknown> {\n    return this.data ?? {};\n  }\n\n  /** ID that will be written to clipboard when Copy ID button in header is clicked. */\n  get headerCopyIdValue(): string | number {\n    return this.data ? getResourceId(this.data._links.self.href) ?? '' : '';\n  }\n\n  /**\n   * Renders optional form header.\n   * - Customize which actions are rendered with `.renderHeaderActions()` method.\n   * - Customize the header title and subtitle with `.headerTitleKey` and `.headerSubtitleKey` getters.\n   * - Customize the header title and subtitle options with `.headerTitleOptions` and `.headerSubtitleOptions` getters.\n   * - To hide the header completely, add `header` to `hidden-controls` attribute.\n   */\n  renderHeader(): TemplateResult {\n    if (this.hiddenSelector.matches('header', true)) return html``;\n\n    const data = this.data;\n    const actions = data ? this.renderHeaderActions(data) : null;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('header:before')}\n        <h2>\n          <span class=\"flex items-center gap-s leading-xs text-xl font-medium break-all\">\n            <foxy-i18n\n              options=${JSON.stringify(this.headerTitleOptions)}\n              infer=\"header\"\n              key=${this.headerTitleKey}\n            >\n            </foxy-i18n>\n            ${data\n              ? html`\n                  ${this.hiddenSelector.matches('header:copy-id', true)\n                    ? ''\n                    : html`\n                        <foxy-copy-to-clipboard\n                          infer=\"header copy-id\"\n                          class=\"text-m\"\n                          text=${this.headerCopyIdValue}\n                        >\n                        </foxy-copy-to-clipboard>\n                      `}\n                  ${this.hiddenSelector.matches('header:copy-json', true)\n                    ? ''\n                    : html`\n                        <foxy-copy-to-clipboard\n                          infer=\"header copy-json\"\n                          class=\"text-m\"\n                          icon=\"icons:code\"\n                          text=${JSON.stringify(data, null, 2)}\n                        >\n                        </foxy-copy-to-clipboard>\n                      `}\n                `\n              : ''}\n          </span>\n          ${data\n            ? html`\n                <foxy-i18n\n                  infer=\"header\"\n                  class=\"text-m text-secondary\"\n                  key=${this.headerSubtitleKey}\n                  .options=${this.headerSubtitleOptions}\n                >\n                </foxy-i18n>\n                ${actions ? html`<div class=\"mt-xs flex gap-m\">${actions}</div>` : ''}\n              `\n            : ''}\n        </h2>\n        ${this.renderTemplateOrSlot('header:after')}\n      </div>\n    `;\n  }\n\n  /**\n   * Renders form body. This is the method you should implement in your forms\n   * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n   * don't forget to add `super.renderBody()` to your template.\n   */\n  renderBody(): TemplateResult {\n    if (this.data) {\n      const isSnapshotDirty = this.in({ idle: { snapshot: 'dirty' } });\n      const isDeleteHidden = this.hiddenSelector.matches('delete', true);\n      const actionClass = classMap({ 'transition-opacity': true, 'opacity-0': !isSnapshotDirty });\n\n      return html`\n        <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n        ${!isDeleteHidden || isSnapshotDirty\n          ? html`\n              <div class=\"flex gap-s\">\n                <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n                <div class=\"w-full\"></div>\n                <foxy-internal-undo-control class=${actionClass} infer=\"undo\">\n                </foxy-internal-undo-control>\n                <foxy-internal-submit-control class=${actionClass} infer=\"submit\">\n                </foxy-internal-submit-control>\n              </div>\n            `\n          : ''}\n      `;\n    } else {\n      return html`\n        <div class=\"flex\">\n          <foxy-internal-submit-control infer=\"create\" theme=\"primary success\" class=\"ml-auto\">\n          </foxy-internal-submit-control>\n        </div>\n      `;\n    }\n  }\n\n  /**\n   * Renders the entire form. You should probably implement `.renderBody()`\n   * instead of this method in your form to keep the spinner and the common layout features.\n   */\n  render(): TemplateResult {\n    const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) || !this.data);\n\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'space-y-m': true,\n            'transition-opacity': true,\n            'opacity-0 pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n          ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'flex flex-col items-center justify-center gap-m': true,\n            'transition-opacity absolute inset-0': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('fail') ? 'vertical' : 'no-label'}\n            state=${this.in('fail') ? 'error' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n          ${this.href && this.in('fail')\n            ? html`\n                <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n                  <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n                </vaadin-button>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  private get __generalErrors() {\n    const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n    return this.errors.filter(v => v.startsWith(prefix));\n  }\n\n  private __renderGeneralError(err: string) {\n    return html`\n      <foxy-i18n\n        class=\"leading-xs text-body rounded bg-error-10 block\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n        infer=\"error\"\n        key=${err.replace('error:', '')}\n      >\n      </foxy-i18n>\n    `;\n  }\n\n  private __renderStatus({ key, options }: Status) {\n    if (this.hiddenSelector.matches('status', true)) return;\n    return html`\n      <p\n        data-testid=\"status\"\n        class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n        <vaadin-button\n          class=\"flex-shrink-0\"\n          theme=\"success tertiary-inline\"\n          @click=${() => (this.status = null)}\n        >\n          <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n        </vaadin-button>\n      </p>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/**\n * An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n *\n * @element foxy-internal-form\n * @since 1.17.0\n */\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n  /** Validation errors with this prefix will show up at the top of the form. */\n  static generalErrorPrefix = 'error:';\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      status: { type: Object },\n    };\n  }\n\n  /** Status message to render at the top of the form. If `null`, the message is hidden. */\n  status: null | Status = null;\n\n  /**\n   * Renders header actions when the optional header is rendered.\n   * Empty by default.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  renderHeaderActions(data: TData): TemplateResult | null {\n    return null;\n  }\n\n  /** Getter that returns a i18n key for the optional form header title. */\n  get headerTitleKey(): string {\n    return 'title';\n  }\n\n  /** I18next options to pass to the header title translation function. */\n  get headerTitleOptions(): Record<string, unknown> {\n    return {\n      ...this.data,\n      context: this.data ? 'existing' : 'new',\n      id: this.data ? getResourceId(this.data._links.self.href) : null,\n    };\n  }\n\n  /** Getter that returns a i18n key for the optional form header subtitle. Note that subtitle is shown only when data is avaiable. */\n  get headerSubtitleKey(): string {\n    return 'subtitle';\n  }\n\n  /** I18next options to pass to the header subtitle translation function. Note that subtitle is shown only when data is avaiable. */\n  get headerSubtitleOptions(): Record<string, unknown> {\n    return this.data ?? {};\n  }\n\n  /** ID that will be written to clipboard when Copy ID button in header is clicked. */\n  get headerCopyIdValue(): string | number {\n    return this.data ? getResourceId(this.data._links.self.href) ?? '' : '';\n  }\n\n  get hiddenSelector(): BooleanSelector {\n    const alwaysMatch = [super.hiddenSelector.toString()];\n    if (this.href) alwaysMatch.unshift('create');\n    if (!this.href) alwaysMatch.unshift('delete', 'timestamps', 'submit');\n    if (!this.in({ idle: { snapshot: 'dirty' } })) alwaysMatch.unshift('undo', 'submit');\n    return new BooleanSelector(alwaysMatch.join(' ').trim());\n  }\n\n  /**\n   * Renders optional form header.\n   * - Customize which actions are rendered with `.renderHeaderActions()` method.\n   * - Customize the header title and subtitle with `.headerTitleKey` and `.headerSubtitleKey` getters.\n   * - Customize the header title and subtitle options with `.headerTitleOptions` and `.headerSubtitleOptions` getters.\n   * - To hide the header completely, add `header` to `hidden-controls` attribute.\n   */\n  renderHeader(): TemplateResult {\n    if (this.hiddenSelector.matches('header', true)) return html``;\n\n    const data = this.data;\n    const actions = data ? this.renderHeaderActions(data) : null;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('header:before')}\n        <h2>\n          <span class=\"flex items-center gap-s leading-xs text-xl font-medium break-all\">\n            <foxy-i18n\n              options=${JSON.stringify(this.headerTitleOptions)}\n              infer=\"header\"\n              key=${this.headerTitleKey}\n            >\n            </foxy-i18n>\n            ${data\n              ? html`\n                  ${this.hiddenSelector.matches('header:copy-id', true)\n                    ? ''\n                    : html`\n                        <foxy-copy-to-clipboard\n                          infer=\"header copy-id\"\n                          class=\"text-m\"\n                          text=${this.headerCopyIdValue}\n                        >\n                        </foxy-copy-to-clipboard>\n                      `}\n                  ${this.hiddenSelector.matches('header:copy-json', true)\n                    ? ''\n                    : html`\n                        <foxy-copy-to-clipboard\n                          infer=\"header copy-json\"\n                          class=\"text-m\"\n                          icon=\"icons:code\"\n                          text=${JSON.stringify(data, null, 2)}\n                        >\n                        </foxy-copy-to-clipboard>\n                      `}\n                `\n              : ''}\n          </span>\n          ${data\n            ? html`\n                <foxy-i18n\n                  infer=\"header\"\n                  class=\"text-m text-secondary\"\n                  key=${this.headerSubtitleKey}\n                  .options=${this.headerSubtitleOptions}\n                >\n                </foxy-i18n>\n                ${actions ? html`<div class=\"mt-xs flex gap-m\">${actions}</div>` : ''}\n              `\n            : ''}\n        </h2>\n        ${this.renderTemplateOrSlot('header:after')}\n      </div>\n    `;\n  }\n\n  /**\n   * Renders form body. This is the method you should implement in your forms\n   * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n   * don't forget to add `super.renderBody()` to your template.\n   */\n  renderBody(): TemplateResult {\n    const nested = ['delete', 'undo', 'submit', 'create'];\n\n    return html`\n      <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n\n      <div class=\"flex gap-m\" ?hidden=${nested.every(v => this.hiddenSelector.matches(v, true))}>\n        <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n\n        <div class=\"w-full\"></div>\n\n        <foxy-internal-undo-control infer=\"undo\"> </foxy-internal-undo-control>\n        <foxy-internal-submit-control infer=\"submit\"> </foxy-internal-submit-control>\n        <foxy-internal-submit-control infer=\"create\" theme=\"primary success\">\n        </foxy-internal-submit-control>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the entire form. You should probably implement `.renderBody()`\n   * instead of this method in your form to keep the spinner and the common layout features.\n   */\n  render(): TemplateResult {\n    const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) || !this.data);\n\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'space-y-m': true,\n            'transition-opacity': true,\n            'opacity-0 pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n          ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'flex flex-col items-center justify-center gap-m': true,\n            'transition-opacity absolute inset-0': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('fail') ? 'vertical' : 'no-label'}\n            state=${this.in('fail') ? 'error' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n          ${this.href && this.in('fail')\n            ? html`\n                <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n                  <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n                </vaadin-button>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  private get __generalErrors() {\n    const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n    return this.errors.filter(v => v.startsWith(prefix));\n  }\n\n  private __renderGeneralError(err: string) {\n    return html`\n      <foxy-i18n\n        class=\"leading-xs text-body rounded bg-error-10 block\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n        infer=\"error\"\n        key=${err.replace('error:', '')}\n      >\n      </foxy-i18n>\n    `;\n  }\n\n  private __renderStatus({ key, options }: Status) {\n    if (this.hiddenSelector.matches('status', true)) return;\n    return html`\n      <p\n        data-testid=\"status\"\n        class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n        <vaadin-button\n          class=\"flex-shrink-0\"\n          theme=\"success tertiary-inline\"\n          @click=${() => (this.status = null)}\n        >\n          <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n        </vaadin-button>\n      </p>\n    `;\n  }\n}\n"]}

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

@@ -9,12 +9,15 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
 export declare class InternalFrequencyControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
     static get styles(): CSSResultArray;
+    allowTwiceAMonth: boolean;
     options: {
         value: string;
         label: string;
     }[];
+    layout: 'summary-item' | 'standalone' | null;
     max: number | null;
     private __i18n;
     renderControl(): TemplateResult;
     updated(changes: Map<keyof this, unknown>): void;
+    private __renderSummaryItemLayout;
 }

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

@@ -1,6 +1,7 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
-import { css, html } from 'lit-element';
+import { css, html, svg } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from "../../../utils/class-map.js";
 /**
  * Internal control displaying a custom field for frequency input.
  *
@@ -10,12 +11,14 @@ import { ifDefined } from 'lit-html/directives/if-defined';
 export class InternalFrequencyControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        this.allowTwiceAMonth = false;
         this.options = [
             { value: 'd', label: 'day' },
             { value: 'w', label: 'week' },
             { value: 'm', label: 'month' },
             { value: 'y', label: 'year' },
         ];
+        this.layout = null;
         this.max = 999;
         this.__i18n = {
             formatValue: inputValues => inputValues.join(''),
@@ -31,7 +34,9 @@ export class InternalFrequencyControl extends InternalEditableControl {
     static get properties() {
         return {
             ...super.properties,
+            allowTwiceAMonth: { type: Boolean, attribute: 'allow-twice-a-month' },
             options: { attribute: false },
+            layout: {},
             max: { type: Number },
         };
     }
@@ -70,11 +75,23 @@ vaadin-integer-field{
 vaadin-combo-box::part(text-field){
   padding:0;
 }
+
+input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button{
+  -webkit-appearance:none;
+  margin:0;
+}
+
+input{
+  -moz-appearance:textfield;
+}
       `,
         ];
     }
     renderControl() {
         var _a, _b;
+        if (this.layout === 'summary-item')
+            return this.__renderSummaryItemLayout();
         const value = ((_a = this._value) !== null && _a !== void 0 ? _a : '');
         const count = parseFloat(this.__i18n.parseValue(value)[0]);
         const items = this.options.map(({ value, label }) => ({
@@ -128,5 +145,115 @@ vaadin-combo-box::part(text-field){
         if (field && field.value !== this._value)
             field.value = ((_a = this._value) !== null && _a !== void 0 ? _a : '');
     }
+    __renderSummaryItemLayout() {
+        var _a, _b;
+        const value = ((_a = this._value) !== null && _a !== void 0 ? _a : '');
+        const [strCount, units] = this.__i18n.parseValue(value);
+        const count = parseFloat(strCount);
+        const selection = this._value === '.5m' && !this.allowTwiceAMonth
+            ? undefined
+            : this.options.find(v => v.value === units);
+        return html `
+      <div class="flex items-start gap-m leading-xs">
+        <div>
+          <label class="text-m text-body" for="input">${this.label}</label>
+          <p class="text-s text-secondary">${this.helperText}</p>
+          <p class="text-s text-error" ?hidden=${this.disabled || this.readonly}>
+            ${this._errorMessage}
+          </p>
+        </div>
+
+        <div class="flex-1 flex items-center gap-xs">
+          <input
+            placeholder=${this.placeholder}
+            inputmode="numeric"
+            style="min-width: 10ch"
+            class=${classMap({
+            'w-full appearance-none text-right bg-transparent transition-colors': true,
+            'text-m rounded-s focus-outline-none': true,
+            'text-secondary': this.readonly,
+            'text-disabled': this.disabled,
+            'font-medium': !this.readonly,
+        })}
+            type="number"
+            step="1"
+            min="1"
+            max=${ifDefined((_b = this.max) !== null && _b !== void 0 ? _b : void 0)}
+            id="input"
+            .value=${value === '.5m' ? (this.allowTwiceAMonth ? 2 : '') : count}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
+            @input=${(evt) => {
+            evt.stopPropagation();
+            const input = evt.currentTarget;
+            this._value = this.__i18n.formatValue([input.value, units]);
+        }}
+          />
+
+          <div
+            class=${classMap({
+            'relative rounded-s transition-colors transition-opacity': true,
+            'focus-within-ring-2 focus-within-ring-primary-50': !this.disabled && !this.readonly,
+            'text-body hover-opacity-80 cursor-pointer': !this.disabled && !this.readonly,
+            'text-secondary': this.readonly,
+            'text-disabled': this.disabled,
+            'font-medium': !this.readonly,
+        })}
+          >
+            <div class="flex items-center gap-xs">
+              <div class="whitespace-nowrap">
+                ${value === '.5m'
+            ? this.t('times_a_month')
+            : selection
+                ? this.t(selection.label, { count })
+                : this.t('select')}
+              </div>
+              ${this.readonly
+            ? ''
+            : svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25)"><path fill-rule="evenodd" d="M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z" clip-rule="evenodd" /></svg>`}
+            </div>
+
+            <select
+              class=${classMap({
+            'absolute inset-0 opacity-0': true,
+            'cursor-pointer': !this.disabled && !this.readonly,
+        })}
+              id="select"
+              ?disabled=${this.disabled}
+              ?hidden=${this.readonly}
+              @change=${(evt) => {
+            evt.stopPropagation();
+            const value = evt.currentTarget.value;
+            if (value === 'times_a_month') {
+                this._value = '.5m';
+            }
+            else {
+                this._value = this.__i18n.formatValue([count, value]);
+            }
+        }}
+            >
+              <option value="" ?selected=${!selection} disabled hidden>${this.t('select')}</option>
+              ${this.allowTwiceAMonth && (count === 2 || value === '.5m')
+            ? html `
+                    <option value="times_a_month" ?selected=${value === '.5m'}>
+                      ${this.t('times_a_month')}
+                    </option>
+                  `
+            : ''}
+              ${this.options.map(option => html `
+                    <option
+                      value=${option.value}
+                      ?selected=${value !== '.5m' && option.value === (selection === null || selection === void 0 ? void 0 : selection.value)}
+                    >
+                      ${this.t(option.label, { count })}
+                    </option>
+                  `)}
+            </select>
+          </div>
+        </div>
+      </div>
+    `;
+    }
 }
 //# sourceMappingURL=InternalFrequencyControl.js.map

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 { 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';\nimport { ifDefined } from 'lit-html/directives/if-defined';\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      max: { type: Number },\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  max: number | null = 999;\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=${ifDefined(this.max || undefined)}\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"]}
+{"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, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\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      allowTwiceAMonth: { type: Boolean, attribute: 'allow-twice-a-month' },\n      options: { attribute: false },\n      layout: {},\n      max: { type: Number },\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        input::-webkit-outer-spin-button,\n        input::-webkit-inner-spin-button {\n          -webkit-appearance: none;\n          margin: 0;\n        }\n\n        input {\n          -moz-appearance: textfield;\n        }\n      `,\n    ];\n  }\n\n  allowTwiceAMonth = false;\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  layout: 'summary-item' | 'standalone' | null = null;\n\n  max: number | null = 999;\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    if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\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=${ifDefined(this.max || undefined)}\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  private __renderSummaryItemLayout() {\n    const value = (this._value ?? '') as string;\n    const [strCount, units] = this.__i18n.parseValue(value);\n    const count = parseFloat(strCount as string);\n    const selection =\n      this._value === '.5m' && !this.allowTwiceAMonth\n        ? undefined\n        : this.options.find(v => v.value === units);\n\n    return html`\n      <div class=\"flex items-start gap-m leading-xs\">\n        <div>\n          <label class=\"text-m text-body\" for=\"input\">${this.label}</label>\n          <p class=\"text-s text-secondary\">${this.helperText}</p>\n          <p class=\"text-s text-error\" ?hidden=${this.disabled || this.readonly}>\n            ${this._errorMessage}\n          </p>\n        </div>\n\n        <div class=\"flex-1 flex items-center gap-xs\">\n          <input\n            placeholder=${this.placeholder}\n            inputmode=\"numeric\"\n            style=\"min-width: 10ch\"\n            class=${classMap({\n              'w-full appearance-none text-right bg-transparent transition-colors': true,\n              'text-m rounded-s focus-outline-none': true,\n              'text-secondary': this.readonly,\n              'text-disabled': this.disabled,\n              'font-medium': !this.readonly,\n            })}\n            type=\"number\"\n            step=\"1\"\n            min=\"1\"\n            max=${ifDefined(this.max ?? void 0)}\n            id=\"input\"\n            .value=${value === '.5m' ? (this.allowTwiceAMonth ? 2 : '') : count}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n            @input=${(evt: Event) => {\n              evt.stopPropagation();\n              const input = evt.currentTarget as HTMLInputElement;\n              this._value = this.__i18n.formatValue([input.value, units]);\n            }}\n          />\n\n          <div\n            class=${classMap({\n              'relative rounded-s transition-colors transition-opacity': true,\n              'focus-within-ring-2 focus-within-ring-primary-50': !this.disabled && !this.readonly,\n              'text-body hover-opacity-80 cursor-pointer': !this.disabled && !this.readonly,\n              'text-secondary': this.readonly,\n              'text-disabled': this.disabled,\n              'font-medium': !this.readonly,\n            })}\n          >\n            <div class=\"flex items-center gap-xs\">\n              <div class=\"whitespace-nowrap\">\n                ${value === '.5m'\n                  ? this.t('times_a_month')\n                  : selection\n                  ? this.t(selection.label, { count })\n                  : this.t('select')}\n              </div>\n              ${this.readonly\n                ? ''\n                : svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25)\"><path fill-rule=\"evenodd\" d=\"M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z\" clip-rule=\"evenodd\" /></svg>`}\n            </div>\n\n            <select\n              class=${classMap({\n                'absolute inset-0 opacity-0': true,\n                'cursor-pointer': !this.disabled && !this.readonly,\n              })}\n              id=\"select\"\n              ?disabled=${this.disabled}\n              ?hidden=${this.readonly}\n              @change=${(evt: Event) => {\n                evt.stopPropagation();\n                const value = (evt.currentTarget as HTMLSelectElement).value;\n                if (value === 'times_a_month') {\n                  this._value = '.5m';\n                } else {\n                  this._value = this.__i18n.formatValue([count, value]);\n                }\n              }}\n            >\n              <option value=\"\" ?selected=${!selection} disabled hidden>${this.t('select')}</option>\n              ${this.allowTwiceAMonth && (count === 2 || value === '.5m')\n                ? html`\n                    <option value=\"times_a_month\" ?selected=${value === '.5m'}>\n                      ${this.t('times_a_month')}\n                    </option>\n                  `\n                : ''}\n              ${this.options.map(\n                option =>\n                  html`\n                    <option\n                      value=${option.value}\n                      ?selected=${value !== '.5m' && option.value === selection?.value}\n                    >\n                      ${this.t(option.label, { count })}\n                    </option>\n                  `\n              )}\n            </select>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
 /**
  * Internal control displaying a basic number box.
@@ -8,9 +8,12 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
  */
 export declare class InternalNumberControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
+    static get styles(): CSSResultArray;
+    layout: 'summary-item' | 'standalone' | null;
     prefix: string | null;
     suffix: string | null;
     min: number | null;
     max: number | null;
     renderControl(): TemplateResult;
+    private __renderSummaryItemLayout;
 }

package/dist/elements/internal/InternalNumberControl/InternalNumberControl.js

@@ -1,6 +1,7 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { html, css, svg } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html } from 'lit-element';
+import { classMap } from "../../../utils/class-map.js";
 /**
  * Internal control displaying a basic number box.
  *
@@ -10,6 +11,7 @@ import { html } from 'lit-element';
 export class InternalNumberControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        this.layout = null;
         this.prefix = null;
         this.suffix = null;
         this.min = null;
@@ -18,14 +20,32 @@ export class InternalNumberControl extends InternalEditableControl {
     static get properties() {
         return {
             ...super.properties,
+            layout: {},
             prefix: {},
             suffix: {},
             min: { type: Number },
             max: { type: Number },
         };
     }
+    static get styles() {
+        return [
+            ...super.styles,
+            css `input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button{
+  -webkit-appearance:none;
+  margin:0;
+}
+
+input{
+  -moz-appearance:textfield;
+}
+      `,
+        ];
+    }
     renderControl() {
         var _a, _b;
+        if (this.layout === 'summary-item')
+            return this.__renderSummaryItemLayout();
         return html `
       <vaadin-number-field
         error-message=${ifDefined(this._errorMessage)}
@@ -51,5 +71,77 @@ export class InternalNumberControl extends InternalEditableControl {
       </vaadin-number-field>
     `;
     }
+    __renderSummaryItemLayout() {
+        var _a, _b;
+        const sharedTextStyles = {
+            'text-disabled': this.disabled,
+            'text-tertiary': !this.readonly && !this.disabled,
+            'font-medium': !this.readonly,
+        };
+        return html `
+      <div class="flex items-start gap-m leading-xs">
+        <div>
+          <label class="text-m text-body" for="input">${this.label}</label>
+          <p class="text-s text-secondary">${this.helperText}</p>
+          <p class="text-s text-error" ?hidden=${this.disabled || this.readonly}>
+            ${this._errorMessage}
+          </p>
+        </div>
+
+        <div class="flex-1 flex items-center gap-xs">
+          <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>
+            ${this.prefix}
+          </span>
+
+          <input
+            placeholder=${this.placeholder}
+            style="min-width: 10ch"
+            class=${classMap({
+            'w-full appearance-none text-right bg-transparent transition-colors': true,
+            'text-m rounded-s focus-outline-none': true,
+            'text-secondary': this.readonly,
+            'text-disabled': this.disabled,
+            'font-medium': !this.readonly,
+        })}
+            type="number"
+            min=${ifDefined((_a = this.min) !== null && _a !== void 0 ? _a : void 0)}
+            max=${ifDefined((_b = this.max) !== null && _b !== void 0 ? _b : void 0)}
+            id="input"
+            .value=${this._value}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
+            @input=${(evt) => {
+            evt.stopPropagation();
+            this._value = evt.target.value;
+        }}
+          />
+
+          <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>
+            ${this.suffix}
+          </span>
+
+          <button
+            aria-label=${this.t('clear')}
+            class=${classMap({
+            'flex-shrink-0 rounded-full transition-colors': true,
+            'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+            'cursor-pointer text-tertiary hover-text-body': !this.disabled,
+            'cursor-default text-disabled': this.disabled,
+        })}
+            style="width: 1em; height: 1em;"
+            ?disabled=${this.disabled}
+            ?hidden=${this.readonly}
+            @click=${() => {
+            this._value = 0;
+            this.dispatchEvent(new CustomEvent('clear'));
+        }}
+          >
+            ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`}
+          </button>
+        </div>
+      </div>
+    `;
+    }
 }
 //# sourceMappingURL=InternalNumberControl.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InternalNumberControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalNumberControl/InternalNumberControl.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,qBAAsB,SAAQ,uBAAuB;IAAlE;;QAWE,WAAM,GAAkB,IAAI,CAAC;QAE7B,WAAM,GAAkB,IAAI,CAAC;QAE7B,QAAG,GAAkB,IAAI,CAAC;QAE1B,QAAG,GAAkB,IAAI,CAAC;IA4B5B,CAAC;IA5CC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;YACV,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACrB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACtB,CAAC;IACJ,CAAC;IAUD,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,IAAI,CAAC,MAAM;;mBAET,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,aAAmC,CAAC;YACtD,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACxC,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;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { NumberFieldElement } from '@vaadin/vaadin-text-field/vaadin-number-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 number box.\n *\n * @since 1.17.0\n * @element foxy-internal-number-control\n */\nexport class InternalNumberControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      prefix: {},\n      suffix: {},\n      min: { type: Number },\n      max: { type: Number },\n    };\n  }\n\n  prefix: string | null = null;\n\n  suffix: string | null = null;\n\n  min: number | null = null;\n\n  max: number | null = null;\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-number-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=${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 NumberFieldElement;\n          this._value = parseFloat(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-number-field>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalNumberControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalNumberControl/InternalNumberControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,uBAAuB;IAAlE;;QA6BE,WAAM,GAAyC,IAAI,CAAC;QAEpD,WAAM,GAAkB,IAAI,CAAC;QAE7B,WAAM,GAAkB,IAAI,CAAC;QAE7B,QAAG,GAAkB,IAAI,CAAC;QAE1B,QAAG,GAAkB,IAAI,CAAC;IAsG5B,CAAC;IA1IC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;YACV,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACrB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACtB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,KAAK,CAAC,MAAM;YACf,GAAG;;;;;;;;;OAUF;SACF,CAAC;IACJ,CAAC;IAYD,aAAa;;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,cAAc;YAAE,OAAO,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAE5E,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,IAAI,CAAC,MAAM;;mBAET,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,aAAmC,CAAC;YACtD,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACxC,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;IAEO,yBAAyB;;QAC/B,MAAM,gBAAgB,GAAG;YACvB,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,eAAe,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YACjD,aAAa,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC9B,CAAC;QACF,OAAO,IAAI,CAAA;;;wDAGyC,IAAI,CAAC,KAAK;6CACrB,IAAI,CAAC,UAAU;iDACX,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;cACjE,IAAI,CAAC,aAAa;;;;;wBAKR,QAAQ,CAAC,EAAE,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,gBAAgB,EAAE,CAAC;cAC5E,IAAI,CAAC,MAAM;;;;0BAIC,IAAI,CAAC,WAAW;;oBAEtB,QAAQ,CAAC;YACf,oEAAoE,EAAE,IAAI;YAC1E,qCAAqC,EAAE,IAAI;YAC3C,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,aAAa,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC9B,CAAC;;kBAEI,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,KAAK,CAAC,CAAC;kBAC7B,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,KAAK,CAAC,CAAC;;qBAE1B,IAAI,CAAC,MAAM;wBACR,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,QAAQ;uBACd,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;qBACvE,CAAC,GAAU,EAAE,EAAE;YACtB,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,IAAI,CAAC,MAAM,GAAI,GAAG,CAAC,MAA2B,CAAC,KAAK,CAAC;QACvD,CAAC;;;wBAGW,QAAQ,CAAC,EAAE,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,gBAAgB,EAAE,CAAC;cAC5E,IAAI,CAAC,MAAM;;;;yBAIA,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;oBACpB,QAAQ,CAAC;YACf,8CAA8C,EAAE,IAAI;YACpD,uDAAuD,EAAE,IAAI;YAC7D,8CAA8C,EAAE,CAAC,IAAI,CAAC,QAAQ;YAC9D,8BAA8B,EAAE,IAAI,CAAC,QAAQ;SAC9C,CAAC;;wBAEU,IAAI,CAAC,QAAQ;sBACf,IAAI,CAAC,QAAQ;qBACd,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;YAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;QAC/C,CAAC;;cAEC,GAAG,CAAA,sWAAsW;;;;KAIlX,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { NumberFieldElement } from '@vaadin/vaadin-text-field/vaadin-number-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\n\n/**\n * Internal control displaying a basic number box.\n *\n * @since 1.17.0\n * @element foxy-internal-number-control\n */\nexport class InternalNumberControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      layout: {},\n      prefix: {},\n      suffix: {},\n      min: { type: Number },\n      max: { type: Number },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        input::-webkit-outer-spin-button,\n        input::-webkit-inner-spin-button {\n          -webkit-appearance: none;\n          margin: 0;\n        }\n\n        input {\n          -moz-appearance: textfield;\n        }\n      `,\n    ];\n  }\n\n  layout: 'summary-item' | 'standalone' | null = null;\n\n  prefix: string | null = null;\n\n  suffix: string | null = null;\n\n  min: number | null = null;\n\n  max: number | null = null;\n\n  renderControl(): TemplateResult {\n    if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n    return html`\n      <vaadin-number-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=${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 NumberFieldElement;\n          this._value = parseFloat(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-number-field>\n    `;\n  }\n\n  private __renderSummaryItemLayout() {\n    const sharedTextStyles = {\n      'text-disabled': this.disabled,\n      'text-tertiary': !this.readonly && !this.disabled,\n      'font-medium': !this.readonly,\n    };\n    return html`\n      <div class=\"flex items-start gap-m leading-xs\">\n        <div>\n          <label class=\"text-m text-body\" for=\"input\">${this.label}</label>\n          <p class=\"text-s text-secondary\">${this.helperText}</p>\n          <p class=\"text-s text-error\" ?hidden=${this.disabled || this.readonly}>\n            ${this._errorMessage}\n          </p>\n        </div>\n\n        <div class=\"flex-1 flex items-center gap-xs\">\n          <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>\n            ${this.prefix}\n          </span>\n\n          <input\n            placeholder=${this.placeholder}\n            style=\"min-width: 10ch\"\n            class=${classMap({\n              'w-full appearance-none text-right bg-transparent transition-colors': true,\n              'text-m rounded-s focus-outline-none': true,\n              'text-secondary': this.readonly,\n              'text-disabled': this.disabled,\n              'font-medium': !this.readonly,\n            })}\n            type=\"number\"\n            min=${ifDefined(this.min ?? void 0)}\n            max=${ifDefined(this.max ?? void 0)}\n            id=\"input\"\n            .value=${this._value}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n            @input=${(evt: Event) => {\n              evt.stopPropagation();\n              this._value = (evt.target as HTMLInputElement).value;\n            }}\n          />\n\n          <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>\n            ${this.suffix}\n          </span>\n\n          <button\n            aria-label=${this.t('clear')}\n            class=${classMap({\n              'flex-shrink-0 rounded-full transition-colors': true,\n              'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n              'cursor-pointer text-tertiary hover-text-body': !this.disabled,\n              'cursor-default text-disabled': this.disabled,\n            })}\n            style=\"width: 1em; height: 1em;\"\n            ?disabled=${this.disabled}\n            ?hidden=${this.readonly}\n            @click=${() => {\n              this._value = 0;\n              this.dispatchEvent(new CustomEvent('clear'));\n            }}\n          >\n            ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em\"><path d=\"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" /></svg>`}\n          </button>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -1,16 +1,26 @@
 import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { HALJSONResource } from '../../public/NucleonElement/types';
+import type { FormRenderer } from '../../public/FormDialog/types';
 import type { Option } from '../../public/QueryBuilder/types';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+declare type DisplayValueOptionsCb = (resource: HALJSONResource) => Record<string, unknown>;
 export declare class InternalResourcePickerControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
+    getDisplayValueOptions: DisplayValueOptionsCb;
     virtualHost: string;
+    formProps: Record<string, unknown>;
     filters: Option[];
+    layout: 'summary-item' | 'standalone' | null;
     first: string | null;
     item: string | null;
+    form: string | null | FormRenderer;
     private readonly __getItemRenderer;
     renderControl(): TemplateResult;
     updated(changes: Map<keyof this, unknown>): void;
+    private __renderSummaryItemLayout;
+    private __renderStandaloneLayout;
     private __handleFetchEvent;
-    private __handleEmpty;
     private __handleSelect;
+    private __handleEmpty;
 }
+export {};