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

package/dist/cdn/translations/customer/en.json

@@ -28,11 +28,11 @@
   },
   "address-form": {
     "header": {
+      "title_default_shipping": "Default shipping address",
+      "title_default_billing": "Default billing address",
       "title_existing": "Customer address #{{ id }}",
       "title_new": "New customer address",
-      "subtitle_default_shipping": "Default shipping address",
-      "subtitle_default_billing": "Default billing address",
-      "subtitle_custom": "Custom address",
+      "subtitle": "",
       "copy-id": {
         "failed_to_copy": "Failed to copy",
         "click_to_copy": "Copy ID",

package/dist/cdn/translations/item-form/en.json

@@ -42,7 +42,6 @@
   },
   "subscription-frequency": {
     "label": "Subscription frequency",
-    "helper_text": "",
     "day": "Day",
     "day_plural": "Days",
     "week": "Week",

package/dist/cdn/translations/transaction/en.json

@@ -138,7 +138,6 @@
         },
         "subscription-frequency": {
           "label": "Subscription frequency",
-          "helper_text": "",
           "day": "Day",
           "day_plural": "Days",
           "week": "Week",

package/dist/elements/internal/InternalCalendar/InternalCalendar.js

@@ -130,7 +130,8 @@ export class InternalCalendar extends ThemeableMixin(LitElement) {
         return html `
       <label
         class=${classMap({
-            'font-tnum select-none relative flex h-m items-center justify-center rounded': true,
+            'relative flex w-m h-m items-center justify-center rounded-s': true,
+            'font-tnum text-l select-none leading-none': true,
             'cursor-pointer focus-within-ring-2 focus-within-ring-primary-50': !disabled,
             'bg-contrast-5 hover-bg-contrast-10': !checked && !disabled,
             'bg-primary text-primary-contrast': checked && !disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"InternalCalendar.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCalendar/InternalCalendar.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { classMap } from '../../../utils/class-map';\nimport { parseDate } from '../../../utils/parse-date';\nimport { serializeDate } from '../../../utils/serialize-date';\n\nexport class InternalCalendar extends ThemeableMixin(LitElement) {\n  static get properties(): PropertyDeclarations {\n    return {\n      checkAvailability: { attribute: false },\n      readonly: { type: Boolean, reflect: true },\n      disabled: { type: Boolean, reflect: true },\n      value: { type: String },\n      start: { type: String },\n      lang: { type: String },\n    };\n  }\n\n  checkAvailability: (date: Date) => boolean = () => true;\n\n  readonly = false;\n\n  disabled = false;\n\n  value = '';\n\n  start = '';\n\n  lang = '';\n\n  render(): TemplateResult {\n    const thisMonth = new Date(this.__startAsDate ?? this.__valueAsDate ?? Date.now());\n    const prevMonth = new Date(thisMonth);\n    const nextMonth = new Date(thisMonth);\n    const lang = this.lang || navigator.language;\n\n    prevMonth.setMonth(prevMonth.getMonth() - 1);\n    nextMonth.setMonth(nextMonth.getMonth() + 1);\n\n    return html`\n      <div class=\"text-m text-body font-lumo leading-m\">\n        <div class=\"grid p-xs\" style=\"grid-template: auto / max-content auto max-content\">\n          <vaadin-button\n            data-testid=\"prev\"\n            aria-label=${prevMonth.toLocaleString(lang, { year: 'numeric', month: 'long' })}\n            theme=\"icon tertiary\"\n            class=\"px-xs\"\n            ?disabled=${this.disabled}\n            @click=${this.__handlePrevButtonClick}\n          >\n            <iron-icon icon=\"icons:chevron-left\"></iron-icon>\n          </vaadin-button>\n\n          <span\n            data-testid=\"month\"\n            class=${classMap({\n              'text-center self-center font-medium': true,\n              'text-disabled': this.disabled,\n            })}\n          >\n            ${thisMonth.toLocaleDateString(lang, { month: 'long', year: 'numeric' })}\n          </span>\n\n          <vaadin-button\n            data-testid=\"next\"\n            aria-label=${nextMonth.toLocaleString(lang, { year: 'numeric', month: 'long' })}\n            theme=\"icon tertiary\"\n            class=\"px-xs\"\n            ?disabled=${this.disabled}\n            @click=${this.__handleNextButtonClick}\n          >\n            <iron-icon icon=\"icons:chevron-right\"></iron-icon>\n          </vaadin-button>\n        </div>\n\n        ${this.__renderMonth(thisMonth.getMonth(), thisMonth.getFullYear())}\n      </div>\n    `;\n  }\n\n  private get __valueAsDate(): Date | null {\n    return parseDate(this.value);\n  }\n\n  private set __valueAsDate(value: Date | null) {\n    this.value = value ? serializeDate(value) : '';\n  }\n\n  private get __startAsDate(): Date | null {\n    return parseDate(this.start);\n  }\n\n  private set __startAsDate(value: Date | null) {\n    this.start = value ? serializeDate(value) : '';\n  }\n\n  private __renderMonth(month: number, year: number) {\n    const lang = this.lang || navigator.language;\n    const date = new Date(year, month, 1, 0, 0, 0, 0);\n    const items: TemplateResult[] = [];\n\n    for (let i = 0; i < 7; ++i) {\n      const weekdayDate = new Date();\n      while (weekdayDate.getDay() !== i) weekdayDate.setDate(weekdayDate.getDate() + 1);\n\n      items.push(html`\n        <span\n          class=${classMap({\n            'self-center text-xxs uppercase font-medium tracking-wider': true,\n            'text-secondary': !this.disabled,\n            'text-disabled': this.disabled,\n          })}\n        >\n          ${weekdayDate.toLocaleString(lang, { weekday: 'short' })}\n        </span>\n      `);\n    }\n\n    while (date.getMonth() === month) {\n      const checked =\n        date.getFullYear() === this.__valueAsDate?.getFullYear() &&\n        date.getMonth() === this.__valueAsDate?.getMonth() &&\n        date.getDate() === this.__valueAsDate?.getDate();\n\n      items.push(html`\n        <div style=\"grid-column: ${date.getDay() + 1}\" data-testclass=\"day-of-month\">\n          ${this.__renderDate(date.getDate(), month, year, checked)}\n        </div>\n      `);\n\n      date.setDate(date.getDate() + 1);\n    }\n\n    return html`\n      <form\n        data-testid=\"grid\"\n        class=\"grid gap-s p-s text-center\"\n        style=\"grid-template: auto / repeat(7, 1fr);\"\n      >\n        ${items}\n      </form>\n    `;\n  }\n\n  private __renderDate(date: number, month: number, year: number, checked = false) {\n    const disabled =\n      this.disabled || this.readonly || !this.checkAvailability(new Date(year, month, date));\n\n    return html`\n      <label\n        class=${classMap({\n          'font-tnum select-none relative flex h-m items-center justify-center rounded': true,\n          'cursor-pointer focus-within-ring-2 focus-within-ring-primary-50': !disabled,\n          'bg-contrast-5 hover-bg-contrast-10': !checked && !disabled,\n          'bg-primary text-primary-contrast': checked && !disabled,\n          'border border-dashed border-contrast-20 text-disabled': !checked && disabled,\n          'border border-dashed border-primary text-primary': checked && disabled,\n        })}\n      >\n        <input\n          name=\"date\"\n          type=\"radio\"\n          value=${date}\n          class=\"sr-only\"\n          ?disabled=${this.readonly || this.disabled || disabled}\n          @change=${() => {\n            this.__valueAsDate = new Date(year, month, date);\n            this.dispatchEvent(new CustomEvent('change'));\n          }}\n        />\n\n        ${date}\n      </label>\n    `;\n  }\n\n  private __handlePrevButtonClick() {\n    const currentStart = this.__startAsDate ?? new Date();\n    this.__startAsDate = new Date(currentStart.setMonth(currentStart.getMonth() - 1));\n  }\n\n  private __handleNextButtonClick() {\n    const currentStart = this.__startAsDate ?? new Date();\n    this.__startAsDate = new Date(currentStart.setMonth(currentStart.getMonth() + 1));\n  }\n}\n"]}
+{"version":3,"file":"InternalCalendar.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCalendar/InternalCalendar.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { classMap } from '../../../utils/class-map';\nimport { parseDate } from '../../../utils/parse-date';\nimport { serializeDate } from '../../../utils/serialize-date';\n\nexport class InternalCalendar extends ThemeableMixin(LitElement) {\n  static get properties(): PropertyDeclarations {\n    return {\n      checkAvailability: { attribute: false },\n      readonly: { type: Boolean, reflect: true },\n      disabled: { type: Boolean, reflect: true },\n      value: { type: String },\n      start: { type: String },\n      lang: { type: String },\n    };\n  }\n\n  checkAvailability: (date: Date) => boolean = () => true;\n\n  readonly = false;\n\n  disabled = false;\n\n  value = '';\n\n  start = '';\n\n  lang = '';\n\n  render(): TemplateResult {\n    const thisMonth = new Date(this.__startAsDate ?? this.__valueAsDate ?? Date.now());\n    const prevMonth = new Date(thisMonth);\n    const nextMonth = new Date(thisMonth);\n    const lang = this.lang || navigator.language;\n\n    prevMonth.setMonth(prevMonth.getMonth() - 1);\n    nextMonth.setMonth(nextMonth.getMonth() + 1);\n\n    return html`\n      <div class=\"text-m text-body font-lumo leading-m\">\n        <div class=\"grid p-xs\" style=\"grid-template: auto / max-content auto max-content\">\n          <vaadin-button\n            data-testid=\"prev\"\n            aria-label=${prevMonth.toLocaleString(lang, { year: 'numeric', month: 'long' })}\n            theme=\"icon tertiary\"\n            class=\"px-xs\"\n            ?disabled=${this.disabled}\n            @click=${this.__handlePrevButtonClick}\n          >\n            <iron-icon icon=\"icons:chevron-left\"></iron-icon>\n          </vaadin-button>\n\n          <span\n            data-testid=\"month\"\n            class=${classMap({\n              'text-center self-center font-medium': true,\n              'text-disabled': this.disabled,\n            })}\n          >\n            ${thisMonth.toLocaleDateString(lang, { month: 'long', year: 'numeric' })}\n          </span>\n\n          <vaadin-button\n            data-testid=\"next\"\n            aria-label=${nextMonth.toLocaleString(lang, { year: 'numeric', month: 'long' })}\n            theme=\"icon tertiary\"\n            class=\"px-xs\"\n            ?disabled=${this.disabled}\n            @click=${this.__handleNextButtonClick}\n          >\n            <iron-icon icon=\"icons:chevron-right\"></iron-icon>\n          </vaadin-button>\n        </div>\n\n        ${this.__renderMonth(thisMonth.getMonth(), thisMonth.getFullYear())}\n      </div>\n    `;\n  }\n\n  private get __valueAsDate(): Date | null {\n    return parseDate(this.value);\n  }\n\n  private set __valueAsDate(value: Date | null) {\n    this.value = value ? serializeDate(value) : '';\n  }\n\n  private get __startAsDate(): Date | null {\n    return parseDate(this.start);\n  }\n\n  private set __startAsDate(value: Date | null) {\n    this.start = value ? serializeDate(value) : '';\n  }\n\n  private __renderMonth(month: number, year: number) {\n    const lang = this.lang || navigator.language;\n    const date = new Date(year, month, 1, 0, 0, 0, 0);\n    const items: TemplateResult[] = [];\n\n    for (let i = 0; i < 7; ++i) {\n      const weekdayDate = new Date();\n      while (weekdayDate.getDay() !== i) weekdayDate.setDate(weekdayDate.getDate() + 1);\n\n      items.push(html`\n        <span\n          class=${classMap({\n            'self-center text-xxs uppercase font-medium tracking-wider': true,\n            'text-secondary': !this.disabled,\n            'text-disabled': this.disabled,\n          })}\n        >\n          ${weekdayDate.toLocaleString(lang, { weekday: 'short' })}\n        </span>\n      `);\n    }\n\n    while (date.getMonth() === month) {\n      const checked =\n        date.getFullYear() === this.__valueAsDate?.getFullYear() &&\n        date.getMonth() === this.__valueAsDate?.getMonth() &&\n        date.getDate() === this.__valueAsDate?.getDate();\n\n      items.push(html`\n        <div style=\"grid-column: ${date.getDay() + 1}\" data-testclass=\"day-of-month\">\n          ${this.__renderDate(date.getDate(), month, year, checked)}\n        </div>\n      `);\n\n      date.setDate(date.getDate() + 1);\n    }\n\n    return html`\n      <form\n        data-testid=\"grid\"\n        class=\"grid gap-s p-s text-center\"\n        style=\"grid-template: auto / repeat(7, 1fr);\"\n      >\n        ${items}\n      </form>\n    `;\n  }\n\n  private __renderDate(date: number, month: number, year: number, checked = false) {\n    const disabled =\n      this.disabled || this.readonly || !this.checkAvailability(new Date(year, month, date));\n\n    return html`\n      <label\n        class=${classMap({\n          'relative flex w-m h-m items-center justify-center rounded-s': true,\n          'font-tnum text-l select-none leading-none': true,\n          'cursor-pointer focus-within-ring-2 focus-within-ring-primary-50': !disabled,\n          'bg-contrast-5 hover-bg-contrast-10': !checked && !disabled,\n          'bg-primary text-primary-contrast': checked && !disabled,\n          'border border-dashed border-contrast-20 text-disabled': !checked && disabled,\n          'border border-dashed border-primary text-primary': checked && disabled,\n        })}\n      >\n        <input\n          name=\"date\"\n          type=\"radio\"\n          value=${date}\n          class=\"sr-only\"\n          ?disabled=${this.readonly || this.disabled || disabled}\n          @change=${() => {\n            this.__valueAsDate = new Date(year, month, date);\n            this.dispatchEvent(new CustomEvent('change'));\n          }}\n        />\n\n        ${date}\n      </label>\n    `;\n  }\n\n  private __handlePrevButtonClick() {\n    const currentStart = this.__startAsDate ?? new Date();\n    this.__startAsDate = new Date(currentStart.setMonth(currentStart.getMonth() - 1));\n  }\n\n  private __handleNextButtonClick() {\n    const currentStart = this.__startAsDate ?? new Date();\n    this.__startAsDate = new Date(currentStart.setMonth(currentStart.getMonth() + 1));\n  }\n}\n"]}

package/dist/elements/internal/InternalCard/InternalCard.js

@@ -40,13 +40,13 @@ export class InternalCard extends ThemeableMixin(NucleonElement) {
         <div
           class=${classMap({
             'transition duration-500 ease-in-out absolute inset-0 flex': true,
+            'items-center justify-center': true,
             'opacity-0 pointer-events-none': this.isBodyReady,
         })}
         >
           <foxy-spinner
             layout=${spinnerState === 'busy' ? 'no-label' : 'horizontal'}
             state=${spinnerState}
-            class="m-auto"
             infer="spinner"
           >
           </foxy-spinner>

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

@@ -1 +1 @@
-{"version":3,"file":"InternalCard.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCard/InternalCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,OAAO,YAAiC,SAAQ,cAAc,CAAC,cAAc,CAAQ;IACzF;;;OAGG;IACH,UAAU;QACR,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;YAClC,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;gBAC/B,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,MAAM,CAAC;QAEX,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;;;kBAKjB,QAAQ,CAAC;YACf,qCAAqC,EAAE,IAAI;YAC3C,+BAA+B,EAAE,CAAC,IAAI,CAAC,WAAW;SACnD,CAAC;;YAEA,IAAI,CAAC,UAAU,EAAE;;;;kBAIX,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,+BAA+B,EAAE,IAAI,CAAC,WAAW;SAClD,CAAC;;;qBAGS,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;oBACpD,YAAY;;;;;;;KAO3B,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;CACF","sourcesContent":["import type { HALJSONResource as Data } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\n\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\n/**\n * Internal base element for cards.\n *\n * @since 1.17.0\n * @element foxy-internal-card\n */\nexport class InternalCard<TData extends Data> extends ThemeableMixin(NucleonElement)<TData> {\n  /**\n   * Invoked together with `.render()` to obtain a template for card contents.\n   * When extending `InternalCard`, prefer overriding this method to `.render()`.\n   */\n  renderBody(): TemplateResult {\n    return html``;\n  }\n\n  render(): TemplateResult {\n    const spinnerState = this.in('fail')\n      ? 'error'\n      : this.in({ idle: 'template' })\n      ? 'empty'\n      : 'busy';\n\n    return html`\n      <div\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative leading-m text-body text-m font-lumo\"\n      >\n        <div\n          class=${classMap({\n            'transition duration-500 ease-in-out': true,\n            'opacity-0 pointer-events-none': !this.isBodyReady,\n          })}\n        >\n          ${this.renderBody()}\n        </div>\n\n        <div\n          class=${classMap({\n            'transition duration-500 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': this.isBodyReady,\n          })}\n        >\n          <foxy-spinner\n            layout=${spinnerState === 'busy' ? 'no-label' : 'horizontal'}\n            state=${spinnerState}\n            class=\"m-auto\"\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  get isBodyReady(): boolean {\n    return !!this.data;\n  }\n}\n"]}
+{"version":3,"file":"InternalCard.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCard/InternalCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,OAAO,YAAiC,SAAQ,cAAc,CAAC,cAAc,CAAQ;IACzF;;;OAGG;IACH,UAAU;QACR,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;YAClC,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;gBAC/B,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,MAAM,CAAC;QAEX,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;;;kBAKjB,QAAQ,CAAC;YACf,qCAAqC,EAAE,IAAI;YAC3C,+BAA+B,EAAE,CAAC,IAAI,CAAC,WAAW;SACnD,CAAC;;YAEA,IAAI,CAAC,UAAU,EAAE;;;;kBAIX,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,6BAA6B,EAAE,IAAI;YACnC,+BAA+B,EAAE,IAAI,CAAC,WAAW;SAClD,CAAC;;;qBAGS,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;oBACpD,YAAY;;;;;;KAM3B,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;CACF","sourcesContent":["import type { HALJSONResource as Data } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\n\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\n/**\n * Internal base element for cards.\n *\n * @since 1.17.0\n * @element foxy-internal-card\n */\nexport class InternalCard<TData extends Data> extends ThemeableMixin(NucleonElement)<TData> {\n  /**\n   * Invoked together with `.render()` to obtain a template for card contents.\n   * When extending `InternalCard`, prefer overriding this method to `.render()`.\n   */\n  renderBody(): TemplateResult {\n    return html``;\n  }\n\n  render(): TemplateResult {\n    const spinnerState = this.in('fail')\n      ? 'error'\n      : this.in({ idle: 'template' })\n      ? 'empty'\n      : 'busy';\n\n    return html`\n      <div\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative leading-m text-body text-m font-lumo\"\n      >\n        <div\n          class=${classMap({\n            'transition duration-500 ease-in-out': true,\n            'opacity-0 pointer-events-none': !this.isBodyReady,\n          })}\n        >\n          ${this.renderBody()}\n        </div>\n\n        <div\n          class=${classMap({\n            'transition duration-500 ease-in-out absolute inset-0 flex': true,\n            'items-center justify-center': true,\n            'opacity-0 pointer-events-none': this.isBodyReady,\n          })}\n        >\n          <foxy-spinner\n            layout=${spinnerState === 'busy' ? 'no-label' : 'horizontal'}\n            state=${spinnerState}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  get isBodyReady(): boolean {\n    return !!this.data;\n  }\n}\n"]}

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

@@ -26,6 +26,7 @@ export declare class InternalControl extends InternalControl_base {
     nucleon: NucleonElement<any> | null;
     inferFromElement(key: string, element: HTMLElement): unknown | undefined;
     applyInferredProperties(context: Map<string, unknown>): void;
+    renderLightDom(): void;
     updated(changes: Map<keyof this, unknown>): void;
     /**
      * Renders the control itself. In most cases, you will need to implement

package/dist/elements/internal/InternalControl/InternalControl.js

@@ -43,15 +43,18 @@ export class InternalControl extends ConfigurableMixin(TranslatableMixin(Themeab
         if (((_b = this.nucleon) === null || _b === void 0 ? void 0 : _b.in('idle')) === false)
             this.disabled = true;
     }
+    renderLightDom() {
+        if (typeof this.infer !== 'string')
+            return;
+        const lightDomTemplate = html `
+      <slot name="${this.infer}:before" slot="before"></slot>
+      <slot name="${this.infer}:after" slot="after"></slot>
+    `;
+        render(lightDomTemplate, this);
+    }
     updated(changes) {
         super.updated(changes);
-        if (typeof this.infer === 'string') {
-            const lightDomTemplate = html `
-        <slot name="${this.infer}:before" slot="before"></slot>
-        <slot name="${this.infer}:after" slot="after"></slot>
-      `;
-            render(lightDomTemplate, this);
-        }
+        this.renderLightDom();
     }
     /**
      * Renders the control itself. In most cases, you will need to implement

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

@@ -1 +1 @@
-{"version":3,"file":"InternalControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalControl/InternalControl.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;;;;;;;;;GAUG;AACH,MAAM,OAAO,eAAgB,SAAQ,iBAAiB,CACpD,iBAAiB,CAAC,cAAc,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,CAC/D;IAFD;;QAcE,wDAAwD;QACxD,YAAO,GAA+B,IAAI,CAAC;IA+C7C,CAAC;IA3DC,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,GAAG,KAAK,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;IAClD,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC9B,CAAC;IACJ,CAAC;IAKD,gBAAgB,CAAC,GAAW,EAAE,OAAoB;QAChD,IAAI,GAAG,KAAK,SAAS,IAAI,OAAO,YAAY,cAAc;YAAE,OAAO,OAAO,CAAC;QAC3E,OAAO,KAAK,CAAC,gBAAgB,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAC9C,CAAC;IAED,uBAAuB,CAAC,OAA6B;;QACnD,KAAK,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC;QAEvC,IAAI,CAAC,OAAO,SAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAqC,mCAAI,IAAI,CAAC;QACnF,IAAI,OAAA,IAAI,CAAC,OAAO,0CAAE,EAAE,CAAC,MAAM,OAAM,KAAK;YAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAC/D,CAAC;IAED,OAAO,CAAC,OAAiC;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YAClC,MAAM,gBAAgB,GAAG,IAAI,CAAA;sBACb,IAAI,CAAC,KAAK;sBACV,IAAI,CAAC,KAAK;OACzB,CAAC;YAEF,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;SAChC;IACH,CAAC;IAED;;;OAGG;IACH,aAAa;QACX,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAE/B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;QACzE,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC;KACnD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { html, LitElement } from 'lit-element';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { render } from 'lit-html';\n\n/**\n * An internal base class for any control in a Nucleon form. That control can be as simple as a text field bound\n * to a property or as complex as a query builder, and it infers property values from the\n * parent Nucleon/Configurable/Translatable element, saving the need to manually calculate\n * and bind properties in Lit templates. Each control renders before and after slots in the regular DOM + its\n * own layout in the shadow DOM. When hidden via `hiddencontrols` in the parent,\n * uses `display: none` to hide itself.\n *\n * @element foxy-internal-control\n * @since 1.17.0\n */\nexport class InternalControl extends ConfigurableMixin(\n  TranslatableMixin(ThemeableMixin(InferrableMixin(LitElement)))\n) {\n  static get inferredProperties(): string[] {\n    return [...super.inferredProperties, 'nucleon'];\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      nucleon: { attribute: false },\n    };\n  }\n\n  /** NucleonElement instance this control is bound to. */\n  nucleon: NucleonElement<any> | null = null;\n\n  inferFromElement(key: string, element: HTMLElement): unknown | undefined {\n    if (key === 'nucleon' && element instanceof NucleonElement) return element;\n    return super.inferFromElement(key, element);\n  }\n\n  applyInferredProperties(context: Map<string, unknown>): void {\n    super.applyInferredProperties(context);\n\n    this.nucleon = (context.get('nucleon') as NucleonElement<any> | undefined) ?? null;\n    if (this.nucleon?.in('idle') === false) this.disabled = true;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n\n    if (typeof this.infer === 'string') {\n      const lightDomTemplate = html`\n        <slot name=\"${this.infer}:before\" slot=\"before\"></slot>\n        <slot name=\"${this.infer}:after\" slot=\"after\"></slot>\n      `;\n\n      render(lightDomTemplate, this);\n    }\n  }\n\n  /**\n   * Renders the control itself. In most cases, you will need to implement\n   * this method instead of `.render()` in your class to keep the before and after templates/slots.\n   */\n  renderControl(): TemplateResult {\n    return html``;\n  }\n\n  /**\n   * Renders the control (if visible) and the before/after templates/slots.\n   * You should probably implement `.renderControl()` method instead of this one in your class.\n   */\n  render(): TemplateResult {\n    if (this.hidden) return html``;\n\n    return html`\n      ${this.renderTemplateOrSlot('before', this.nucleon)} ${this.renderControl()}\n      ${this.renderTemplateOrSlot('after', this.nucleon)}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalControl/InternalControl.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;;;;;;;;;GAUG;AACH,MAAM,OAAO,eAAgB,SAAQ,iBAAiB,CACpD,iBAAiB,CAAC,cAAc,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,CAC/D;IAFD;;QAcE,wDAAwD;QACxD,YAAO,GAA+B,IAAI,CAAC;IAkD7C,CAAC;IA9DC,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,GAAG,KAAK,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;IAClD,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC9B,CAAC;IACJ,CAAC;IAKD,gBAAgB,CAAC,GAAW,EAAE,OAAoB;QAChD,IAAI,GAAG,KAAK,SAAS,IAAI,OAAO,YAAY,cAAc;YAAE,OAAO,OAAO,CAAC;QAC3E,OAAO,KAAK,CAAC,gBAAgB,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAC9C,CAAC;IAED,uBAAuB,CAAC,OAA6B;;QACnD,KAAK,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC;QAEvC,IAAI,CAAC,OAAO,SAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAqC,mCAAI,IAAI,CAAC;QACnF,IAAI,OAAA,IAAI,CAAC,OAAO,0CAAE,EAAE,CAAC,MAAM,OAAM,KAAK;YAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAC/D,CAAC;IAED,cAAc;QACZ,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;YAAE,OAAO;QAE3C,MAAM,gBAAgB,GAAG,IAAI,CAAA;oBACb,IAAI,CAAC,KAAK;oBACV,IAAI,CAAC,KAAK;KACzB,CAAC;QAEF,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;IACjC,CAAC;IAED,OAAO,CAAC,OAAiC;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED;;;OAGG;IACH,aAAa;QACX,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAE/B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;QACzE,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC;KACnD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { html, LitElement } from 'lit-element';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { render } from 'lit-html';\n\n/**\n * An internal base class for any control in a Nucleon form. That control can be as simple as a text field bound\n * to a property or as complex as a query builder, and it infers property values from the\n * parent Nucleon/Configurable/Translatable element, saving the need to manually calculate\n * and bind properties in Lit templates. Each control renders before and after slots in the regular DOM + its\n * own layout in the shadow DOM. When hidden via `hiddencontrols` in the parent,\n * uses `display: none` to hide itself.\n *\n * @element foxy-internal-control\n * @since 1.17.0\n */\nexport class InternalControl extends ConfigurableMixin(\n  TranslatableMixin(ThemeableMixin(InferrableMixin(LitElement)))\n) {\n  static get inferredProperties(): string[] {\n    return [...super.inferredProperties, 'nucleon'];\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      nucleon: { attribute: false },\n    };\n  }\n\n  /** NucleonElement instance this control is bound to. */\n  nucleon: NucleonElement<any> | null = null;\n\n  inferFromElement(key: string, element: HTMLElement): unknown | undefined {\n    if (key === 'nucleon' && element instanceof NucleonElement) return element;\n    return super.inferFromElement(key, element);\n  }\n\n  applyInferredProperties(context: Map<string, unknown>): void {\n    super.applyInferredProperties(context);\n\n    this.nucleon = (context.get('nucleon') as NucleonElement<any> | undefined) ?? null;\n    if (this.nucleon?.in('idle') === false) this.disabled = true;\n  }\n\n  renderLightDom(): void {\n    if (typeof this.infer !== 'string') return;\n\n    const lightDomTemplate = html`\n      <slot name=\"${this.infer}:before\" slot=\"before\"></slot>\n      <slot name=\"${this.infer}:after\" slot=\"after\"></slot>\n    `;\n\n    render(lightDomTemplate, this);\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    this.renderLightDom();\n  }\n\n  /**\n   * Renders the control itself. In most cases, you will need to implement\n   * this method instead of `.render()` in your class to keep the before and after templates/slots.\n   */\n  renderControl(): TemplateResult {\n    return html``;\n  }\n\n  /**\n   * Renders the control (if visible) and the before/after templates/slots.\n   * You should probably implement `.renderControl()` method instead of this one in your class.\n   */\n  render(): TemplateResult {\n    if (this.hidden) return html``;\n\n    return html`\n      ${this.renderTemplateOrSlot('before', this.nucleon)} ${this.renderControl()}\n      ${this.renderTemplateOrSlot('after', this.nucleon)}\n    `;\n  }\n}\n"]}

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

@@ -9,6 +9,9 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
 export declare class InternalDateControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
     /** Date format. If `unix`, expects and outputs a UNIX timestamp (number), otherwise defaults to ISO 8601 date. */
-    format: 'unix' | null;
+    format: 'unix' | 'iso-long' | null;
+    /** Use summary item layout inside `<foxy-internal-summary-control>`. */
+    layout: 'summary-item' | 'standalone' | null;
     renderControl(): TemplateResult;
+    private get __pickerI18n();
 }

package/dist/elements/internal/InternalDateControl/InternalDateControl.js

@@ -3,6 +3,9 @@ import { serializeDate } from "../../../utils/serialize-date.js";
 import { parseDate } from "../../../utils/parse-date.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { html } from 'lit-element';
+import { getWeekdayShortNames } from "./getWeekdayShortNames.js";
+import { getWeekdayLongNames } from "./getWeekdayLongNames.js";
+import { getMonthNames } from "./getMonthNames.js";
 /**
  * Internal control displaying a basic date picker box.
  *
@@ -14,19 +17,25 @@ export class InternalDateControl extends InternalEditableControl {
         super(...arguments);
         /** Date format. If `unix`, expects and outputs a UNIX timestamp (number), otherwise defaults to ISO 8601 date. */
         this.format = null;
+        /** Use summary item layout inside `<foxy-internal-summary-control>`. */
+        this.layout = null;
     }
     static get properties() {
         return {
             ...super.properties,
-            format: { type: String },
+            format: {},
+            layout: {},
         };
     }
     renderControl() {
-        var _a;
+        var _a, _b;
         let value;
         if (this.format === 'unix') {
             value = serializeDate(new Date(((_a = this._value) !== null && _a !== void 0 ? _a : 0) * 1000));
         }
+        else if (this.format === 'iso-long') {
+            value = serializeDate(new Date(this._value));
+        }
         else {
             value = this._value;
         }
@@ -37,17 +46,22 @@ export class InternalDateControl extends InternalEditableControl {
         helper-text=${this.helperText}
         label=${this.label}
         class="w-full"
+        theme=${(_b = this.layout) !== null && _b !== void 0 ? _b : 'standalone'}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
         .checkValidity=${this._checkValidity}
         .value=${value}
+        .i18n=${this.__pickerI18n}
         @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
         @change=${(evt) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             const field = evt.currentTarget;
             if (this.format === 'unix') {
                 this._value = Math.floor(((_b = (_a = parseDate(field.value)) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : 0) / 1000);
             }
+            else if (this.format === 'iso-long') {
+                this._value = (_d = (_c = parseDate(field.value)) === null || _c === void 0 ? void 0 : _c.toISOString()) !== null && _d !== void 0 ? _d : null;
+            }
             else {
                 this._value = field.value;
             }
@@ -56,5 +70,24 @@ export class InternalDateControl extends InternalEditableControl {
       </vaadin-date-picker>
     `;
     }
+    get __pickerI18n() {
+        return {
+            monthNames: getMonthNames(this.lang || 'en'),
+            weekdays: getWeekdayLongNames(this.lang || 'en'),
+            weekdaysShort: getWeekdayShortNames(this.lang || 'en'),
+            firstDayOfWeek: 0,
+            week: this.t('week'),
+            calendar: this.t('calendar'),
+            clear: this.t('clear'),
+            today: this.t('today'),
+            cancel: this.t('cancel'),
+            referenceDate: '',
+            parseDate: null,
+            formatTitle: (m, y) => m + ' ' + y,
+            formatDate: (d) => {
+                return this.t('display_value', { value: new Date(d.year, d.month, d.day) });
+            },
+        };
+    }
 }
 //# sourceMappingURL=InternalDateControl.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InternalDateControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalDateControl/InternalDateControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,aAAa,EAAE,yCAAsC;AAC9D,OAAO,EAAE,SAAS,EAAE,qCAAkC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,OAAO,mBAAoB,SAAQ,uBAAuB;IAAhE;;QAQE,kHAAkH;QAClH,WAAM,GAAkB,IAAI,CAAC;IAoC/B,CAAC;IA5CC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACzB,CAAC;IACJ,CAAC;IAKD,aAAa;;QACX,IAAI,KAAa,CAAC;QAElB,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE;YAC1B,KAAK,GAAG,aAAa,CAAC,IAAI,IAAI,CAAC,OAAE,IAAI,CAAC,MAAiB,mCAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;SACxE;aAAM;YACL,KAAK,GAAG,IAAI,CAAC,MAAgB,CAAC;SAC/B;QAED,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,KAAK;mBACH,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,aAAkC,CAAC;YAErD,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE;gBAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,aAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,0CAAE,OAAO,qCAAM,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;aAC3E;iBAAM;gBACL,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC;aAC3B;QACH,CAAC;;;KAGJ,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult, PropertyDeclarations } from 'lit-element';\nimport type { DatePickerElement } from '@vaadin/vaadin-date-picker';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { serializeDate } from '../../../utils/serialize-date';\nimport { parseDate } from '../../../utils/parse-date';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a basic date picker box.\n *\n * @since 1.17.0\n * @element foxy-internal-date-control\n */\nexport class InternalDateControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      format: { type: String },\n    };\n  }\n\n  /** Date format. If `unix`, expects and outputs a UNIX timestamp (number), otherwise defaults to ISO 8601 date. */\n  format: 'unix' | null = null;\n\n  renderControl(): TemplateResult {\n    let value: string;\n\n    if (this.format === 'unix') {\n      value = serializeDate(new Date(((this._value as number) ?? 0) * 1000));\n    } else {\n      value = this._value as string;\n    }\n\n    return html`\n      <vaadin-date-picker\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=${value}\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as DatePickerElement;\n\n          if (this.format === 'unix') {\n            this._value = Math.floor((parseDate(field.value)?.getTime() ?? 0) / 1000);\n          } else {\n            this._value = field.value;\n          }\n        }}\n      >\n      </vaadin-date-picker>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalDateControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalDateControl/InternalDateControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TemplateResult, PropertyDeclarations } from 'lit-element';\nimport type { DatePickerElement } from '@vaadin/vaadin-date-picker';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { serializeDate } from '../../../utils/serialize-date';\nimport { parseDate } from '../../../utils/parse-date';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\nimport { getWeekdayShortNames } from './getWeekdayShortNames';\nimport { getWeekdayLongNames } from './getWeekdayLongNames';\nimport { getMonthNames } from './getMonthNames';\n\n/**\n * Internal control displaying a basic date picker box.\n *\n * @since 1.17.0\n * @element foxy-internal-date-control\n */\nexport class InternalDateControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      format: {},\n      layout: {},\n    };\n  }\n\n  /** Date format. If `unix`, expects and outputs a UNIX timestamp (number), otherwise defaults to ISO 8601 date. */\n  format: 'unix' | 'iso-long' | null = null;\n\n  /** Use summary item layout inside `<foxy-internal-summary-control>`. */\n  layout: 'summary-item' | 'standalone' | null = null;\n\n  renderControl(): TemplateResult {\n    let value: string;\n\n    if (this.format === 'unix') {\n      value = serializeDate(new Date(((this._value as number) ?? 0) * 1000));\n    } else if (this.format === 'iso-long') {\n      value = serializeDate(new Date(this._value as string));\n    } else {\n      value = this._value as string;\n    }\n\n    return html`\n      <vaadin-date-picker\n        error-message=${ifDefined(this._errorMessage)}\n        placeholder=${this.placeholder}\n        helper-text=${this.helperText}\n        label=${this.label}\n        class=\"w-full\"\n        theme=${this.layout ?? 'standalone'}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${value}\n        .i18n=${this.__pickerI18n}\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as DatePickerElement;\n\n          if (this.format === 'unix') {\n            this._value = Math.floor((parseDate(field.value)?.getTime() ?? 0) / 1000);\n          } else if (this.format === 'iso-long') {\n            this._value = parseDate(field.value)?.toISOString() ?? null;\n          } else {\n            this._value = field.value;\n          }\n        }}\n      >\n      </vaadin-date-picker>\n    `;\n  }\n\n  private get __pickerI18n() {\n    return {\n      monthNames: getMonthNames(this.lang || 'en'),\n      weekdays: getWeekdayLongNames(this.lang || 'en'),\n      weekdaysShort: getWeekdayShortNames(this.lang || 'en'),\n      firstDayOfWeek: 0,\n      week: this.t('week'),\n      calendar: this.t('calendar'),\n      clear: this.t('clear'),\n      today: this.t('today'),\n      cancel: this.t('cancel'),\n      referenceDate: '',\n      parseDate: null,\n      formatTitle: (m: string, y: string) => m + ' ' + y,\n      formatDate: (d: { day: number; month: number; year: number }) => {\n        return this.t('display_value', { value: new Date(d.year, d.month, d.day) });\n      },\n    };\n  }\n}\n"]}

package/dist/elements/internal/InternalDateControl/getMonthNames.d.ts

@@ -0,0 +1 @@
+export declare function getMonthNames(lang: string): string[];

package/dist/elements/internal/InternalDateControl/getMonthNames.js

@@ -0,0 +1,7 @@
+export function getMonthNames(lang) {
+    return new Array(12).fill(new Date()).map((date, i) => {
+        date.setMonth(i);
+        return date.toLocaleDateString(lang, { month: 'long' });
+    });
+}
+//# sourceMappingURL=getMonthNames.js.map

package/dist/elements/internal/InternalDateControl/getMonthNames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMonthNames.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalDateControl/getMonthNames.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,aAAa,CAAC,IAAY;IACxC,OAAO,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAU,EAAE,CAAC,EAAE,EAAE;QAC1D,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACjB,OAAO,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["export function getMonthNames(lang: string): string[] {\n  return new Array(12).fill(new Date()).map((date: Date, i) => {\n    date.setMonth(i);\n    return date.toLocaleDateString(lang, { month: 'long' });\n  });\n}\n"]}

package/dist/elements/internal/InternalDateControl/getWeekdayLongNames.d.ts

@@ -0,0 +1 @@
+export declare function getWeekdayLongNames(lang: string): string[];

package/dist/elements/internal/InternalDateControl/getWeekdayLongNames.js

@@ -0,0 +1,8 @@
+export function getWeekdayLongNames(lang) {
+    return new Array(7).fill(new Date()).map((date, i) => {
+        while (date.getDay() !== i)
+            date.setDate(date.getDate() + 1);
+        return date.toLocaleDateString(lang, { weekday: 'long' });
+    });
+}
+//# sourceMappingURL=getWeekdayLongNames.js.map

package/dist/elements/internal/InternalDateControl/getWeekdayLongNames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getWeekdayLongNames.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalDateControl/getWeekdayLongNames.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,mBAAmB,CAAC,IAAY;IAC9C,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAU,EAAE,CAAC,EAAE,EAAE;QACzD,OAAO,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;YAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;QAC7D,OAAO,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["export function getWeekdayLongNames(lang: string): string[] {\n  return new Array(7).fill(new Date()).map((date: Date, i) => {\n    while (date.getDay() !== i) date.setDate(date.getDate() + 1);\n    return date.toLocaleDateString(lang, { weekday: 'long' });\n  });\n}\n"]}

package/dist/elements/internal/InternalDateControl/getWeekdayShortNames.d.ts

@@ -0,0 +1 @@
+export declare function getWeekdayShortNames(lang: string): string[];

package/dist/elements/internal/InternalDateControl/getWeekdayShortNames.js

@@ -0,0 +1,8 @@
+export function getWeekdayShortNames(lang) {
+    return new Array(7).fill(new Date()).map((date, i) => {
+        while (date.getDay() !== i)
+            date.setDate(date.getDate() + 1);
+        return date.toLocaleDateString(lang, { weekday: 'short' });
+    });
+}
+//# sourceMappingURL=getWeekdayShortNames.js.map

package/dist/elements/internal/InternalDateControl/getWeekdayShortNames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getWeekdayShortNames.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalDateControl/getWeekdayShortNames.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,oBAAoB,CAAC,IAAY;IAC/C,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAU,EAAE,CAAC,EAAE,EAAE;QACzD,OAAO,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;YAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;QAC7D,OAAO,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["export function getWeekdayShortNames(lang: string): string[] {\n  return new Array(7).fill(new Date()).map((date: Date, i) => {\n    while (date.getDay() !== i) date.setDate(date.getDate() + 1);\n    return date.toLocaleDateString(lang, { weekday: 'short' });\n  });\n}\n"]}

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

@@ -1,4 +1,5 @@
 import '@vaadin/vaadin-date-picker';
 import '../InternalEditableControl/index';
+import './vaadinStyles';
 import { InternalDateControl as Control } from './InternalDateControl';
 export { Control as InternalDateControl };

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

@@ -1,5 +1,6 @@
 import '@vaadin/vaadin-date-picker';
 import "../InternalEditableControl/index.js";
+import "./vaadinStyles.js";
 import { InternalDateControl as Control } from "./InternalDateControl.js";
 customElements.define('foxy-internal-date-control', Control);
 export { Control as InternalDateControl };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalDateControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,6CAA0C;AAC1C,OAAO,EAAE,mBAAmB,IAAI,OAAO,EAAE,iCAA8B;AAEvE,cAAc,CAAC,MAAM,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-date-picker';\nimport '../InternalEditableControl/index';\nimport { InternalDateControl as Control } from './InternalDateControl';\n\ncustomElements.define('foxy-internal-date-control', Control);\n\nexport { Control as InternalDateControl };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalDateControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,6CAA0C;AAC1C,2BAAwB;AAExB,OAAO,EAAE,mBAAmB,IAAI,OAAO,EAAE,iCAA8B;AAEvE,cAAc,CAAC,MAAM,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-date-picker';\nimport '../InternalEditableControl/index';\nimport './vaadinStyles';\n\nimport { InternalDateControl as Control } from './InternalDateControl';\n\ncustomElements.define('foxy-internal-date-control', Control);\n\nexport { Control as InternalDateControl };\n"]}

package/dist/elements/internal/InternalDateControl/vaadinStyles.d.ts

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

package/dist/elements/internal/InternalDateControl/vaadinStyles.js

@@ -0,0 +1,73 @@
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';
+import { css } from 'lit-element';
+registerStyles('vaadin-date-picker-text-field', css `:host([theme~='summary-item'])::before{
+  display:none;
+}
+
+:host([theme~='summary-item']) .vaadin-text-field-container{
+  display:grid;
+  grid-template-columns:auto 1fr;
+  grid-template-rows:repeat(3, min-content);
+  gap:0 var(--lumo-space-m);
+}
+
+:host([theme~='summary-item']) [part='label']{
+  font:normal var(--lumo-font-size-m) var(--lumo-font-family);
+  color:var(--lumo-body-text-color) !important;
+  grid-row:1;
+  -webkit-text-fill-color:var(--lumo-body-text-color) !important;
+}
+
+:host([theme~='summary-item']) [part='helper-text']{
+  font:normal var(--lumo-font-size-s) var(--lumo-font-family);
+  color:var(--lumo-secondary-text-color) !important;
+  grid-row:2;
+}
+
+:host([theme~='summary-item']) [part='helper-text']::before{
+  display:none;
+}
+
+:host([theme~='summary-item']) [part='error-message']{
+  font:normal var(--lumo-font-size-s) var(--lumo-font-family);
+  color:var(--lumo-error-text-color);
+  grid-row:3;
+}
+
+:host([theme~='summary-item']) [part='error-message'],
+    :host([theme~='summary-item']) [part='helper-text'],
+    :host([theme~='summary-item']) [part='label']{
+  line-height:var(--lumo-line-height-xs);
+  grid-column:1;
+  padding:0;
+}
+
+:host([theme~='summary-item']) [part='input-field']{
+  grid-column:2;
+  grid-row:1;
+  padding:0;
+  background:transparent;
+  align-self:start;
+  height:1em;
+  --lumo-icon-size-m:1rem;
+}
+
+:host([theme~='summary-item']) [part='input-field']::after,
+    :host([theme~='summary-item'][readonly]) [part='input-field'] slot[name='suffix']{
+  display:none;
+}
+
+:host([theme~='summary-item']) [part='value']{
+  line-height:var(--lumo-line-height-xs);
+  text-align:right;
+  min-height:auto;
+  padding:0;
+  margin-right:var(--lumo-space-xs);
+  -webkit-mask-image:none;
+}
+
+:host([theme~='summary-item'][readonly]) [part='value']{
+  margin-right:0;
+}
+  `);
+//# sourceMappingURL=vaadinStyles.js.map

package/dist/elements/internal/InternalDateControl/vaadinStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vaadinStyles.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalDateControl/vaadinStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,cAAc,CACZ,+BAA+B,EAC/B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEF,CACF,CAAC","sourcesContent":["import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\nimport { css } from 'lit-element';\n\nregisterStyles(\n  'vaadin-date-picker-text-field',\n  css`\n    :host([theme~='summary-item'])::before {\n      display: none;\n    }\n\n    :host([theme~='summary-item']) .vaadin-text-field-container {\n      display: grid;\n      grid-template-columns: auto 1fr;\n      grid-template-rows: repeat(3, min-content);\n      gap: 0 var(--lumo-space-m);\n    }\n\n    :host([theme~='summary-item']) [part='label'] {\n      font: normal var(--lumo-font-size-m) var(--lumo-font-family);\n      color: var(--lumo-body-text-color) !important;\n      grid-row: 1;\n      -webkit-text-fill-color: var(--lumo-body-text-color) !important;\n    }\n\n    :host([theme~='summary-item']) [part='helper-text'] {\n      font: normal var(--lumo-font-size-s) var(--lumo-font-family);\n      color: var(--lumo-secondary-text-color) !important;\n      grid-row: 2;\n    }\n\n    :host([theme~='summary-item']) [part='helper-text']::before {\n      display: none;\n    }\n\n    :host([theme~='summary-item']) [part='error-message'] {\n      font: normal var(--lumo-font-size-s) var(--lumo-font-family);\n      color: var(--lumo-error-text-color);\n      grid-row: 3;\n    }\n\n    :host([theme~='summary-item']) [part='error-message'],\n    :host([theme~='summary-item']) [part='helper-text'],\n    :host([theme~='summary-item']) [part='label'] {\n      line-height: var(--lumo-line-height-xs);\n      grid-column: 1;\n      padding: 0;\n    }\n\n    :host([theme~='summary-item']) [part='input-field'] {\n      grid-column: 2;\n      grid-row: 1;\n      padding: 0;\n      background: transparent;\n      align-self: start;\n      height: 1em;\n\n      --lumo-icon-size-m: 1rem;\n    }\n\n    :host([theme~='summary-item']) [part='input-field']::after,\n    :host([theme~='summary-item'][readonly]) [part='input-field'] slot[name='suffix'] {\n      display: none;\n    }\n\n    :host([theme~='summary-item']) [part='value'] {\n      line-height: var(--lumo-line-height-xs);\n      text-align: right;\n      min-height: auto;\n      padding: 0;\n      margin-right: var(--lumo-space-xs);\n      -webkit-mask-image: none;\n    }\n\n    :host([theme~='summary-item'][readonly]) [part='value'] {\n      margin-right: 0;\n    }\n  `\n);\n"]}

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

@@ -2,6 +2,7 @@ import type { PropertyDeclarations } from 'lit-element';
 import type { HALJSONResource } from '../../public/NucleonElement/types';
 import type { TemplateResult } from 'lit-html';
 import type { Status } from './types';
+import { BooleanSelector } from '@foxy.io/sdk/core';
 import { NucleonElement } from '../../public/NucleonElement/NucleonElement';
 declare const Base: typeof NucleonElement & {
     styles: import("lit-element").CSSResultArray;
@@ -34,6 +35,7 @@ export declare class InternalForm<TData extends HALJSONResource> extends Base<TD
     get headerSubtitleOptions(): Record<string, unknown>;
     /** ID that will be written to clipboard when Copy ID button in header is clicked. */
     get headerCopyIdValue(): string | number;
+    get hiddenSelector(): BooleanSelector;
     /**
      * Renders optional form header.
      * - Customize which actions are rendered with `.renderHeaderActions()` method.

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

@@ -1,7 +1,7 @@
+import { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { NucleonElement } from "../../public/NucleonElement/NucleonElement.js";
-import { getResourceId } from '@foxy.io/sdk/core';
 import { classMap } from "../../../utils/class-map.js";
 import { html } from 'lit-html';
 const Base = ConfigurableMixin(ThemeableMixin(NucleonElement));
@@ -58,6 +58,16 @@ export class InternalForm extends Base {
         var _a;
         return this.data ? (_a = getResourceId(this.data._links.self.href)) !== null && _a !== void 0 ? _a : '' : '';
     }
+    get hiddenSelector() {
+        const alwaysMatch = [super.hiddenSelector.toString()];
+        if (this.href)
+            alwaysMatch.unshift('create');
+        if (!this.href)
+            alwaysMatch.unshift('delete', 'timestamps', 'submit');
+        if (!this.in({ idle: { snapshot: 'dirty' } }))
+            alwaysMatch.unshift('undo', 'submit');
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
+    }
     /**
      * Renders optional form header.
      * - Customize which actions are rendered with `.renderHeaderActions()` method.
@@ -130,34 +140,21 @@ export class InternalForm extends Base {
      * don't forget to add `super.renderBody()` to your template.
      */
     renderBody() {
-        if (this.data) {
-            const isSnapshotDirty = this.in({ idle: { snapshot: 'dirty' } });
-            const isDeleteHidden = this.hiddenSelector.matches('delete', true);
-            const actionClass = classMap({ 'transition-opacity': true, 'opacity-0': !isSnapshotDirty });
-            return html `
-        <foxy-internal-timestamps-control infer="timestamps"></foxy-internal-timestamps-control>
-        ${!isDeleteHidden || isSnapshotDirty
-                ? html `
-              <div class="flex gap-s">
-                <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control>
-                <div class="w-full"></div>
-                <foxy-internal-undo-control class=${actionClass} infer="undo">
-                </foxy-internal-undo-control>
-                <foxy-internal-submit-control class=${actionClass} infer="submit">
-                </foxy-internal-submit-control>
-              </div>
-            `
-                : ''}
-      `;
-        }
-        else {
-            return html `
-        <div class="flex">
-          <foxy-internal-submit-control infer="create" theme="primary success" class="ml-auto">
-          </foxy-internal-submit-control>
-        </div>
-      `;
-        }
+        const nested = ['delete', 'undo', 'submit', 'create'];
+        return html `
+      <foxy-internal-timestamps-control infer="timestamps"></foxy-internal-timestamps-control>
+
+      <div class="flex gap-m" ?hidden=${nested.every(v => this.hiddenSelector.matches(v, true))}>
+        <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control>
+
+        <div class="w-full"></div>
+
+        <foxy-internal-undo-control infer="undo"> </foxy-internal-undo-control>
+        <foxy-internal-submit-control infer="submit"> </foxy-internal-submit-control>
+        <foxy-internal-submit-control infer="create" theme="primary success">
+        </foxy-internal-submit-control>
+      </div>
+    `;
     }
     /**
      * Renders the entire form. You should probably implement `.renderBody()`