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

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

@@ -142,11 +142,11 @@
       "value_empty": "Not set",
       "value_busy": "Loading...",
       "value_fail": "Failed to load",
-      "placeholder": "Not set",
       "edit": "Edit",
       "dialog": {
         "cancel": "Cancel",
         "close": "Close",
+        "save": "Save",
         "header": "Payment method",
         "or": "or",
         "select_previous": "Select previous",

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/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.js

@@ -65,7 +65,7 @@ export class InternalForm extends Base {
         if (!this.href)
             alwaysMatch.unshift('delete', 'timestamps', 'submit');
         if (!this.in({ idle: { snapshot: 'dirty' } }))
-            alwaysMatch.unshift('undo');
+            alwaysMatch.unshift('undo', 'submit');
         return new BooleanSelector(alwaysMatch.join(' ').trim());
     }
     /**

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 { 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');\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"]}
+{"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