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

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/subscription-settings-form/en.json

@@ -14,73 +14,97 @@
   "day_plural": "{{ count }} days",
   "day_suffix": "day",
   "day_suffix_plural": "days",
-  "modification-url": {
-    "label": "Modification URL",
-    "placeholder": "https://example.com/edit-subscription",
-    "helper_text": "Enter a full URL or a path to the page under your Store URL where customers can modify their subscription. If present, subscriptions in the Customer Portal will show an Edit link that will send subscribers to this page."
-  },
-  "past-due-amount-handling": {
-    "label": "Past due amount value",
-    "option_increment": "Contains the sum of all missed payments",
-    "option_replace": "Contains the last missed payment amount",
-    "option_ignore": "Doesn't change",
-    "helper_text": "This setting determines how you'd like to handle past due amounts when we try to process a subscription and that subscritpion fails."
-  },
-  "automatically-charge-past-due-amount": {
-    "label": "",
-    "option_checked": "Charge past due amount with subscription payment",
-    "helper_text": ""
-  },
-  "clear-past-due-amounts-on-success": {
-    "label": "",
-    "option_checked": "Clear past due amount on successful payment",
-    "helper_text": ""
-  },
-  "reset-nextdate-on-makeup-payment": {
-    "label": "",
-    "option_checked": "Reset next transaction date on make-up payment",
-    "helper_text": ""
-  },
-  "reattempt-schedule": {
-    "label": "Reattempt schedule",
-    "placeholder": "Period in days, e.g. 14",
+  "past-due-amount-group": {
+    "label": "Past due amount",
     "helper_text": "",
-    "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
-  },
-  "reminder-email-schedule": {
-    "label": "Failed subscription payment email schedule",
-    "placeholder": "Period in days, e.g. 14",
-    "helper_text": "Number of days after the initial failure that an email notification to the customer should be sent. This only happens for active subscriptions which still have a past due amount. If a reattempt is successful, no additional reminder email will be sent.",
-    "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
+    "past-due-amount-handling": {
+      "label": "Past due amount handling",
+      "placeholder": "Select",
+      "option_increment": "Increment on each failure",
+      "option_replace": "Replace on each failure",
+      "helper_text": ""
+    },
+    "automatically-charge-past-due-amount": {
+      "label": "Charge with subscription payment",
+      "helper_text": "If enabled, the past due amount will be included in automatic subscription processing, and will be included in the cart if a customer attempts to update their subscription. If unchecked, any successful subscription payment (automatic or customer-initiated) will clear out the past due amount.",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
+    "reset-nextdate-on-makeup-payment": {
+      "label": "Reset next transaction date on make-up payment",
+      "helper_text": "If enabled, and a past due amount is successfully paid, the next transaction date for the subscription will be reset to be one frequency ahead of the day that the transaction is processed.",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
+    "prevent-customer-cancel-with-past-due": {
+      "label": "Prevent modification or cancellation if past due is present",
+      "helper_text": "If enabled, if the customer has a past due amount and wishes to cancel their subscription using a sub_token through the cart interface, they will be prevented from doing so until they first pay their past due amount.",
+      "checked": "Yes",
+      "unchecked": "No"
+    }
   },
-  "expiring-soon-payment-reminder-schedule": {
-    "label": "Payment method expiration email schedule",
-    "placeholder": "Period in days, e.g. 14",
-    "helper_text": "Number of days until the payment card expires that an email notification should be sent to the customer. This only happens for customers with active subscriptions.",
-    "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
+  "reattempts-group": {
+    "label": "Reattempts",
+    "helper_text": "",
+    "reattempt-bypass-logic": {
+      "label": "Reattempt behavior",
+      "helper_text": "",
+      "placeholder": "Select",
+      "option_reattempt_if_exists": "Reattempt on certain errors",
+      "option_skip_if_exists": "Skip on certain errors",
+      "option_always_reattempt": "Always reattempt"
+    },
+    "reattempt-bypass-strings": {
+      "label": "Reattempt bypass strings",
+      "placeholder": "Add errors...",
+      "helper_text": "Text strings that should prevent or allow (based on the above setting) a rebilling attempt. For example, setting the logic to \"Skip on certain errors\" with a value for the strings field of \"Code: 8\" and \"Code: 37\" would instruct Foxy to not initiate the rebilling process if the last error contained either Code: 8 or Code: 37, but to attempt the rebilling in all other cases.",
+      "v8n_too_long": "This list is too large. Please reduce the number of entries."
+    },
+    "reattempt-schedule": {
+      "label": "Reattempt schedule",
+      "placeholder": "Add period in days, e.g. 14",
+      "helper_text": "List of numbers. Each number represents the number of days after the initial failure that a reattempt should be made. For example, a setting of 1, 3, 5, 15, 30 would direct Foxy to attempt to collect the past-due amount on the 1st, 3rd, 5th, and 15th days after the initial transaction.",
+      "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
+    }
   },
-  "cancellation-schedule": {
-    "label": "Cancel failed subscriptions after",
-    "placeholder": "Don't cancel",
-    "helper_text": "A single number representing the number of days after the initial failure that a subscription should be set to cancel (assuming a successful payment hasn't been made in the meantime)."
+  "emails-group": {
+    "label": "Emails",
+    "helper_text": "",
+    "send-email-receipts-for-automated-billing": {
+      "label": "Send email receipts for automated billing",
+      "helper_text": "When subscriptions run automatically to bill your customers, turning this setting off will prevent the normal receipt emails from being sent for their automated payment.",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
+    "reminder-email-schedule": {
+      "label": "Failed subscription payment email schedule",
+      "placeholder": "Add period in days, e.g. 14",
+      "helper_text": "Number of days after the initial failure that an email notification to the customer should be sent. This only happens for active subscriptions which still have a past due amount. If a reattempt is successful, no additional reminder email will be sent.",
+      "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
+    },
+    "expiring-soon-payment-reminder-schedule": {
+      "label": "Payment method expiration email schedule",
+      "placeholder": "Add period in days, e.g. 14",
+      "helper_text": "Number of days until the payment card expires that an email notification should be sent to the customer. This only happens for customers with active subscriptions.",
+      "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
+    }
   },
-  "send-email-receipts-for-automated-billing": {
-    "label": "",
-    "option_checked": "Send email receipts for automated billing",
-    "helper_text": ""
+  "cancellation-group": {
+    "label": "Cancellation",
+    "helper_text": "A single number representing the number of days after the initial failure that a subscription should be set to cancel (assuming a successful payment hasn't been made in the meantime).",
+    "cancellation-schedule": {
+      "label": "Cancel failed subscriptions after",
+      "helper_text": "",
+      "placeholder": "Don't cancel"
+    }
   },
-  "reattempt-bypass": {
-    "label": "Reattempt behavior",
-    "helper_text": "Determines whether Foxy should reattempt the subscription charge if the transaction's previous error string does or doesn't contain specific text.",
-    "option_reattempt_if_exists": "Reattempt on certain errors",
-    "option_skip_if_exists": "Skip on certain errors",
-    "option_always_reattempt": "Always reattempt",
-    "option_never_reattempt": "Never reattempt",
-    "reattempt-bypass-strings": {
-      "label": "",
-      "placeholder": "Add errors...",
+  "modification-group": {
+    "label": "Modification",
+    "helper_text": "Enter a full URL or a path to the page under your Store URL where customers can modify their subscription. If present, subscriptions in the Customer Portal will show an Edit link that will send subscribers to this page.",
+    "modification-url": {
+      "label": "Modification URL",
       "helper_text": "",
-      "v8n_too_long": "This list is too large. Please reduce the number of entries."
+      "placeholder": "https://example.com/edit-subscription"
     }
   },
   "timestamps": {

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/InternalEditableListControl/InternalEditableListControl.d.ts

@@ -6,6 +6,7 @@ export declare class InternalEditableListControl extends InternalEditableControl
     static get styles(): CSSResultArray;
     inputParams: Record<string, unknown>;
     options: Option[];
+    layout: 'standalone' | 'summary-item' | null;
     units: Unit[];
     range: null | 'optional';
     private __isErrorVisible;

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

@@ -9,6 +9,7 @@ export class InternalEditableListControl extends InternalEditableControl {
         super(...arguments);
         this.inputParams = {};
         this.options = [];
+        this.layout = null;
         this.units = [];
         this.range = null;
         this.__isErrorVisible = false;
@@ -19,6 +20,7 @@ export class InternalEditableListControl extends InternalEditableControl {
             ...super.properties,
             inputParams: { attribute: false },
             options: { type: Array },
+            layout: {},
             units: { type: Array },
             range: {},
             __isErrorVisible: { attribute: false },
@@ -49,19 +51,24 @@ div:has(> select)::after{
     }
     render() {
         var _a, _b;
+        const isSummaryItem = this.layout === 'summary-item';
+        const isInteractive = !this.disabled && !this.readonly;
         const deleteButtonClass = classMap({
-            'w-xs h-xs mr-xs rounded-full transition-colors flex-shrink-0': true,
+            'w-xs h-xs rounded-s transition-colors flex-shrink-0': true,
             'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,
             'text-tertiary hover-bg-error-10 hover-text-error': !this.disabled,
             'cursor-default text-disabled': this.disabled,
             'flex items-center justify-center': !this.readonly,
             'hidden': this.readonly,
+            'mr-xs': !isSummaryItem,
         });
         const itemClass = classMap({
-            'transition-colors h-m ml-s flex items-center': true,
+            'transition-colors flex items-center': true,
             'text-secondary': this.readonly,
             'text-disabled': this.disabled,
-            'group-hover-divide-contrast-20': !this.disabled && !this.readonly,
+            'group-hover-divide-contrast-20': !isSummaryItem && isInteractive,
+            'pl-s border border-contrast-10 rounded-s': isSummaryItem,
+            'ml-s h-m': !isSummaryItem,
         });
         const isAddButtonDisabled = this.disabled || !this.__newItem;
         const addItem = () => {
@@ -84,9 +91,11 @@ div:has(> select)::after{
       <div class="group">
         <div
           class=${classMap({
-            'transition-colors mb-xs font-medium text-s': true,
-            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,
-            'text-disabled': this.disabled,
+            'transition-colors mb-xs': true,
+            'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,
+            'text-disabled': !isSummaryItem && this.disabled,
+            'font-medium text-s': !isSummaryItem,
+            'text-m': isSummaryItem,
         })}
         >
           ${this.label}
@@ -94,11 +103,18 @@ div:has(> select)::after{
 
         <div
           class=${classMap({
-            'border border-contrast-10 rounded transition-colors': true,
-            'group-hover-border-contrast-20': !this.disabled && !this.readonly,
+            'transition-colors': true,
+            'border border-contrast-10 rounded': !isSummaryItem,
+            'group-hover-border-contrast-20': !isSummaryItem && isInteractive,
         })}
         >
-          <ol class="transition-colors divide-y divide-contrast-10 font-medium">
+          <ol
+            class=${classMap({
+            'transition-colors font-medium': true,
+            'divide-y divide-contrast-10': !isSummaryItem,
+            'flex flex-wrap gap-s': isSummaryItem,
+        })}
+          >
             ${repeat(this._value, item => item.value, (item, index) => {
             var _a;
             return html `
@@ -121,16 +137,20 @@ div:has(> select)::after{
           </ol>
 
           <div
-            style=${this._value.length === 0
-            ? 'border-radius: calc(var(--lumo-border-radius-m) - 1px)'
-            : 'border-radius: 0 0 calc(var(--lumo-border-radius-m) - 1px) calc(var(--lumo-border-radius-m) - 1px)'}
+            style=${isSummaryItem
+            ? ''
+            : this._value.length === 0
+                ? 'border-radius: calc(var(--lumo-border-radius-m) - 1px)'
+                : 'border-radius: 0 0 calc(var(--lumo-border-radius-m) - 1px) calc(var(--lumo-border-radius-m) - 1px)'}
             class=${classMap({
             'transition-colors pl-s h-m flex items-center gap-xs': true,
-            'focus-within-ring-2 focus-within-ring-primary-50': true,
-            'bg-contrast-10 group-hover-bg-contrast-20': !this.disabled && !this.readonly,
-            'bg-contrast-5': this.disabled,
+            'focus-within-ring-2 focus-within-ring-primary-50': !isSummaryItem,
+            'bg-contrast-10 group-hover-bg-contrast-20': !isSummaryItem && isInteractive,
+            'bg-contrast-5': !isSummaryItem && this.disabled,
             'flex': !this.readonly,
             'hidden': this.readonly,
+            'rounded-s border border-contrast-10': isSummaryItem,
+            'mt-s': this._value.length > 0,
         })}
           >
             ${this.range
@@ -286,9 +306,10 @@ div:has(> select)::after{
 
         <div
           class=${classMap({
-            'transition-colors mt-xs text-xs': true,
-            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,
-            'text-disabled': this.disabled,
+            'transition-colors text-xs mt-xs': true,
+            'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,
+            'text-disabled': !isSummaryItem && this.disabled,
+            'text-secondary': isSummaryItem,
         })}
           ?hidden=${!this.helperText}
         >