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

package/dist/cdn/{shared-70a5fad6.js → shared-f8723f3f.js}

@@ -1 +1 @@
-import"./shared-df00a537.js";import"./shared-3e03c988.js";import"./shared-339bbd50.js";import"./shared-e2a61f69.js";import"./shared-797ba64a.js";import{I as e}from"./shared-7b8ad9c1.js";import{_ as t}from"./shared-0f6e4584.js";import{c as i,h as a,s}from"./shared-dc73b9a5.js";import{i as l}from"./shared-9803aa7c.js";import{c as o}from"./shared-4e709717.js";let n,r,d,h,u,c,p=e=>e;customElements.define("foxy-internal-frequency-control",class extends e{constructor(){super(...arguments),this.allowTwiceAMonth=!1,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:e=>e.join(""),parseValue:e=>{var t;const i=e.startsWith(".")?`0${e}`:e,a=parseFloat(e.substring(0,Math.max(i.length-1,0))),s=null!==(t=i[i.length-1])&&void 0!==t?t:"";return isNaN(a)?["0",""]:[a.toString(),s]}}}static get properties(){return t(t({},super.properties),{},{allowTwiceAMonth:{type:Boolean,attribute:"allow-twice-a-month"},options:{attribute:!1},layout:{},max:{type:Number}})}static get styles(){return[super.styles,i(n||(n=p`:host{display:block}vaadin-custom-field{width:100%;font-size:0;line-height:0;padding-top:0!important}vaadin-custom-field::part(label){padding-bottom:var(--lumo-space-s)}vaadin-custom-field::part(error-message)[aria-hidden=false]{padding-top:var(--lumo-space-xs)}vaadin-combo-box,vaadin-integer-field{width:calc(50% - (var(--lumo-space-s)/ 2))}vaadin-integer-field{margin-right:var(--lumo-space-s);padding:0}vaadin-combo-box::part(text-field){padding:0}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input{-moz-appearance:textfield}`))]}renderControl(){var e,t;if("summary-item"===this.layout)return this.__renderSummaryItemLayout();const i=null!==(e=this._value)&&void 0!==e?e:"",s=parseFloat(this.__i18n.parseValue(i)[0]),o=this.options.map((({value:e,label:t})=>({label:this.t(t,{count:s}),value:e})));return a(r||(r=p` <vaadin-custom-field ?disabled="${0}" ?readonly="${0}" .checkValidity="${0}" .errorMessage="${0}" .helperText="${0}" .label="${0}" .value="${0}" .i18n="${0}" @change="${0}"> <vaadin-integer-field max="${0}" min="1" prevent-invalid-input has-controls ?disabled="${0}" ?readonly="${0}" ?invalid="${0}" @keydown="${0}"> </vaadin-integer-field> <vaadin-combo-box item-value-path="value" item-label-path="label" ?disabled="${0}" ?readonly="${0}" ?invalid="${0}" .items="${0}" @keydown="${0}"> </vaadin-combo-box> </vaadin-custom-field> `),this.disabled,this.readonly,this._checkValidity,null!==(t=this._errorMessage)&&void 0!==t?t:"",this.helperText,this.label,i,this.__i18n,(e=>{const t=e.currentTarget;this._value=t.value}),l(this.max||void 0),this.disabled,this.readonly,!this._checkValidity(),(e=>{var t;return"Enter"===e.key&&(null===(t=this.nucleon)||void 0===t?void 0:t.submit())}),this.disabled,this.readonly,!this._checkValidity(),o,(e=>{var t;return"Enter"===e.key&&(null===(t=this.nucleon)||void 0===t?void 0:t.submit())}))}updated(e){var t;super.updated(e);const i=this.renderRoot.querySelector("vaadin-custom-field");i&&i.value!==this._value&&(i.value=null!==(t=this._value)&&void 0!==t?t:"")}__renderSummaryItemLayout(){var e,t;const i=null!==(e=this._value)&&void 0!==e?e:"",[n,r]=this.__i18n.parseValue(i),m=parseFloat(n),v=".5m"!==this._value||this.allowTwiceAMonth?this.options.find((e=>e.value===r)):void 0;return a(d||(d=p` <div class="flex items-start gap-m leading-xs"> <div> <label class="text-m text-body" for="input">${0}</label> <p class="text-s text-secondary">${0}</p> <p class="text-s text-error" ?hidden="${0}"> ${0} </p> </div> <div class="flex-1 flex items-center gap-xs"> <input placeholder="${0}" inputmode="numeric" style="min-width:10ch" class="${0}" type="number" step="1" min="1" max="${0}" id="input" .value="${0}" ?disabled="${0}" ?readonly="${0}" @keydown="${0}" @input="${0}"> <div class="${0}"> <div class="flex items-center gap-xs"> <div class="whitespace-nowrap"> ${0} </div> ${0} </div> <select class="${0}" id="select" ?disabled="${0}" ?hidden="${0}" @change="${0}"> <option value="" ?selected="${0}" disabled="disabled" hidden>${0}</option> ${0} ${0} </select> </div> </div> </div> `),this.label,this.helperText,this.disabled||this.readonly,this._errorMessage,this.placeholder,o({"w-full appearance-none text-right bg-transparent transition-colors":!0,"text-m rounded-s focus-outline-none":!0,"text-secondary":this.readonly,"text-disabled":this.disabled,"font-medium":!this.readonly}),l(null!==(t=this.max)&&void 0!==t?t:void 0),".5m"===i?this.allowTwiceAMonth?2:"":m,this.disabled,this.readonly,(e=>{var t;return"Enter"===e.key&&(null===(t=this.nucleon)||void 0===t?void 0:t.submit())}),(e=>{e.stopPropagation();const t=e.currentTarget;this._value=this.__i18n.formatValue([t.value,r])}),o({"relative rounded-s transition-colors transition-opacity":!0,"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}),".5m"===i?this.t("times_a_month"):v?this.t(v.label,{count:m}):this.t("select"),this.readonly?"":s(h||(h=p`<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>`)),o({"absolute inset-0 opacity-0":!0,"cursor-pointer":!this.disabled&&!this.readonly}),this.disabled,this.readonly,(e=>{e.stopPropagation();const t=e.currentTarget.value;this._value="times_a_month"===t?".5m":this.__i18n.formatValue([m,t])}),!v,this.t("select"),!this.allowTwiceAMonth||2!==m&&".5m"!==i?"":a(u||(u=p` <option value="times_a_month" ?selected="${0}"> ${0} </option> `),".5m"===i,this.t("times_a_month")),this.options.map((e=>a(c||(c=p` <option value="${0}" ?selected="${0}"> ${0} </option> `),e.value,".5m"!==i&&e.value===(null==v?void 0:v.value),this.t(e.label,{count:m})))))}});
+import"./shared-df00a537.js";import"./shared-3e03c988.js";import"./shared-339bbd50.js";import"./shared-e2a61f69.js";import"./shared-797ba64a.js";import{I as e}from"./shared-7b8ad9c1.js";import{_ as t}from"./shared-0f6e4584.js";import{c as i,h as a,s}from"./shared-dc73b9a5.js";import{i as l}from"./shared-9803aa7c.js";import{c as o}from"./shared-4e709717.js";let n,r,d,h,u,c,p=e=>e;customElements.define("foxy-internal-frequency-control",class extends e{constructor(){super(...arguments),this.allowTwiceAMonth=!1,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:e=>e.join(""),parseValue:e=>{var t;const i=e.startsWith(".")?`0${e}`:e,a=parseFloat(e.substring(0,Math.max(i.length-1,0))),s=null!==(t=i[i.length-1])&&void 0!==t?t:"";return isNaN(a)?["0",""]:[a.toString(),s]}}}static get properties(){return t(t({},super.properties),{},{allowTwiceAMonth:{type:Boolean,attribute:"allow-twice-a-month"},options:{attribute:!1},layout:{},max:{type:Number}})}static get styles(){return[super.styles,i(n||(n=p`:host{display:block}vaadin-custom-field{width:100%;font-size:0;line-height:0;padding-top:0!important}vaadin-custom-field::part(label){padding-bottom:var(--lumo-space-s)}vaadin-custom-field::part(error-message)[aria-hidden=false]{padding-top:var(--lumo-space-xs)}vaadin-combo-box,vaadin-integer-field{width:calc(50% - (var(--lumo-space-s)/ 2))}vaadin-integer-field{margin-right:var(--lumo-space-s);padding:0}vaadin-combo-box::part(text-field){padding:0}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input{-moz-appearance:textfield}`))]}renderControl(){var e,t;if("summary-item"===this.layout)return this.__renderSummaryItemLayout();const i=null!==(e=this._value)&&void 0!==e?e:"",s=parseFloat(this.__i18n.parseValue(i)[0]),o=this.options.map((({value:e,label:t})=>({label:this.t(t,{count:s}),value:e})));return a(r||(r=p` <vaadin-custom-field ?disabled="${0}" ?readonly="${0}" .checkValidity="${0}" .errorMessage="${0}" .helperText="${0}" .label="${0}" .value="${0}" .i18n="${0}" @change="${0}"> <vaadin-integer-field max="${0}" min="1" prevent-invalid-input has-controls ?disabled="${0}" ?readonly="${0}" ?invalid="${0}" @keydown="${0}"> </vaadin-integer-field> <vaadin-combo-box item-value-path="value" item-label-path="label" ?disabled="${0}" ?readonly="${0}" ?invalid="${0}" .items="${0}" @keydown="${0}"> </vaadin-combo-box> </vaadin-custom-field> `),this.disabled,this.readonly,this._checkValidity,null!==(t=this._errorMessage)&&void 0!==t?t:"",this.helperText,this.label,i,this.__i18n,(e=>{const t=e.currentTarget;this._value=t.value}),l(this.max||void 0),this.disabled,this.readonly,!this._checkValidity(),(e=>{var t;return"Enter"===e.key&&(null===(t=this.nucleon)||void 0===t?void 0:t.submit())}),this.disabled,this.readonly,!this._checkValidity(),o,(e=>{var t;return"Enter"===e.key&&(null===(t=this.nucleon)||void 0===t?void 0:t.submit())}))}updated(e){var t;super.updated(e);const i=this.renderRoot.querySelector("vaadin-custom-field");i&&i.value!==this._value&&(i.value=null!==(t=this._value)&&void 0!==t?t:"")}__renderSummaryItemLayout(){var e,t;const i=null!==(e=this._value)&&void 0!==e?e:"",[n,r]=this.__i18n.parseValue(i),m=parseFloat(n),v=".5m"!==this._value||this.allowTwiceAMonth?this.options.find((e=>e.value===r)):void 0;return a(d||(d=p` <div class="flex items-start gap-m leading-xs"> <div> <label class="text-m text-body" for="input">${0}</label> <p class="text-xs text-secondary">${0}</p> <p class="text-xs text-error" ?hidden="${0}"> ${0} </p> </div> <div class="flex-1 flex items-center gap-xs"> <input placeholder="${0}" inputmode="numeric" style="min-width:10ch" class="${0}" type="number" step="1" min="1" max="${0}" id="input" .value="${0}" ?disabled="${0}" ?readonly="${0}" @keydown="${0}" @input="${0}"> <div class="${0}"> <div class="flex items-center gap-xs"> <div class="whitespace-nowrap"> ${0} </div> ${0} </div> <select class="${0}" id="select" ?disabled="${0}" ?hidden="${0}" @change="${0}"> <option value="" ?selected="${0}" disabled="disabled" hidden>${0}</option> ${0} ${0} </select> </div> </div> </div> `),this.label,this.helperText,this.disabled||this.readonly,this._errorMessage,this.placeholder,o({"w-full appearance-none text-right bg-transparent transition-colors":!0,"text-m rounded-s focus-outline-none":!0,"text-secondary":this.readonly,"text-disabled":this.disabled,"font-medium":!this.readonly}),l(null!==(t=this.max)&&void 0!==t?t:void 0),".5m"===i?this.allowTwiceAMonth?2:"":m,this.disabled,this.readonly,(e=>{var t;return"Enter"===e.key&&(null===(t=this.nucleon)||void 0===t?void 0:t.submit())}),(e=>{e.stopPropagation();const t=e.currentTarget;this._value=this.__i18n.formatValue([t.value,r])}),o({"relative rounded-s transition-colors transition-opacity":!0,"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}),".5m"===i?this.t("times_a_month"):v?this.t(v.label,{count:m}):this.t("select"),this.readonly?"":s(h||(h=p`<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>`)),o({"absolute inset-0 opacity-0":!0,"cursor-pointer":!this.disabled&&!this.readonly}),this.disabled,this.readonly,(e=>{e.stopPropagation();const t=e.currentTarget.value;this._value="times_a_month"===t?".5m":this.__i18n.formatValue([m,t])}),!v,this.t("select"),!this.allowTwiceAMonth||2!==m&&".5m"!==i?"":a(u||(u=p` <option value="times_a_month" ?selected="${0}"> ${0} </option> `),".5m"===i,this.t("times_a_month")),this.options.map((e=>a(c||(c=p` <option value="${0}" ?selected="${0}"> ${0} </option> `),e.value,".5m"!==i&&e.value===(null==v?void 0:v.value),this.t(e.label,{count:m})))))}});

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/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}
         >

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

@@ -1 +1 @@
-{"version":3,"file":"InternalEditableListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Item, Option, Unit } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { spread } from '@open-wc/lit-helpers';\nimport { live } from 'lit-html/directives/live';\n\nexport class InternalEditableListControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      inputParams: { attribute: false },\n      options: { type: Array },\n      units: { type: Array },\n      range: {},\n      __isErrorVisible: { attribute: false },\n      __newItem: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        div:has(> select) {\n          position: relative;\n        }\n\n        div:has(> select)::after {\n          content: ' ';\n          position: absolute;\n          top: 50%;\n          margin-top: -2px;\n          right: 10px;\n          width: 0;\n          height: 0;\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-top: 5px solid currentColor;\n        }\n      `,\n    ];\n  }\n\n  inputParams: Record<string, unknown> = {};\n\n  options: Option[] = [];\n\n  units: Unit[] = [];\n\n  range: null | 'optional' = null;\n\n  private __isErrorVisible = false;\n\n  private __newItem = '';\n\n  render(): TemplateResult {\n    const deleteButtonClass = classMap({\n      'w-xs h-xs mr-xs rounded-full transition-colors flex-shrink-0': true,\n      'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,\n      'text-tertiary hover-bg-error-10 hover-text-error': !this.disabled,\n      'cursor-default text-disabled': this.disabled,\n      'flex items-center justify-center': !this.readonly,\n      'hidden': this.readonly,\n    });\n\n    const itemClass = classMap({\n      'transition-colors h-m ml-s flex items-center': true,\n      'text-secondary': this.readonly,\n      'text-disabled': this.disabled,\n      'group-hover-divide-contrast-20': !this.disabled && !this.readonly,\n    });\n\n    const isAddButtonDisabled = this.disabled || !this.__newItem;\n\n    const addItem = () => {\n      const newValue = [...this._value];\n      const unit = this.renderRoot.querySelector('select')?.value;\n\n      this.__newItem\n        .split('\\n')\n        .map(code => code.trim())\n        .filter(code => code.length > 0)\n        .forEach(value => {\n          if (!newValue.some(item => item.value === value)) {\n            newValue.push({ value, unit });\n          }\n        });\n\n      this._value = newValue;\n      this.__newItem = '';\n    };\n\n    return html`\n      <div class=\"group\">\n        <div\n          class=${classMap({\n            'transition-colors mb-xs font-medium text-s': true,\n            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n            'text-disabled': this.disabled,\n          })}\n        >\n          ${this.label}\n        </div>\n\n        <div\n          class=${classMap({\n            'border border-contrast-10 rounded transition-colors': true,\n            'group-hover-border-contrast-20': !this.disabled && !this.readonly,\n          })}\n        >\n          <ol class=\"transition-colors divide-y divide-contrast-10 font-medium\">\n            ${repeat(\n              this._value,\n              item => item.value,\n              (item, index) => {\n                return html`\n                  <li class=${itemClass}>\n                    <div class=\"flex-1 mr-s\">${item.label ?? item.value}</div>\n\n                    <button\n                      aria-label=${this.t('delete')}\n                      class=${deleteButtonClass}\n                      ?disabled=${this.disabled}\n                      @click=${() => {\n                        this._value = this._value.filter((_, i) => i !== index);\n                      }}\n                    >\n                      <iron-icon icon=\"lumo:cross\" class=\"icon-inline text-xl\"></iron-icon>\n                    </button>\n                  </li>\n                `;\n              }\n            )}\n          </ol>\n\n          <div\n            style=${this._value.length === 0\n              ? 'border-radius: calc(var(--lumo-border-radius-m) - 1px)'\n              : 'border-radius: 0 0 calc(var(--lumo-border-radius-m) - 1px) calc(var(--lumo-border-radius-m) - 1px)'}\n            class=${classMap({\n              'transition-colors pl-s h-m flex items-center gap-xs': true,\n              'focus-within-ring-2 focus-within-ring-primary-50': true,\n              'bg-contrast-10 group-hover-bg-contrast-20': !this.disabled && !this.readonly,\n              'bg-contrast-5': this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n            })}\n          >\n            ${this.range\n              ? html`\n                  <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_from\">\n                  </foxy-i18n>\n\n                  <input\n                    placeholder=${this.placeholder}\n                    class=${classMap({\n                      'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n                      'text-disabled': this.disabled,\n                    })}\n                    list=\"list\"\n                    ...=${spread(this.inputParams)}\n                    .value=${live(this.__newItem.split('..')[0] ?? '')}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                    @change=${(evt: Event) => evt.stopPropagation()}\n                    @input=${(evt: InputEvent) => {\n                      const newFrom = (evt.currentTarget as HTMLInputElement).value.trim();\n                      const oldTo = this.__newItem.split('..')[1] ?? '';\n                      this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n                    }}\n                    @paste=${(evt: ClipboardEvent) => {\n                      evt.preventDefault();\n\n                      const newFrom = evt.clipboardData?.getData('text') ?? '';\n                      const oldTo = this.__newItem.split('..')[1] ?? '';\n                      this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n\n                      addItem();\n                    }}\n                    @blur=${() => {\n                      this.__isErrorVisible = true;\n                    }}\n                  />\n\n                  <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_to\"></foxy-i18n>\n\n                  <input\n                    placeholder=${this.placeholder}\n                    class=${classMap({\n                      'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n                      'text-disabled': this.disabled,\n                    })}\n                    list=\"list\"\n                    ...=${spread(this.inputParams)}\n                    .value=${live(this.__newItem.split('..')[1] ?? '')}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                    @change=${(evt: Event) => evt.stopPropagation()}\n                    @input=${(evt: InputEvent) => {\n                      const newTo = (evt.currentTarget as HTMLInputElement).value.trim();\n                      const oldFrom = this.__newItem.split('..')[0] ?? '';\n                      this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n                    }}\n                    @paste=${(evt: ClipboardEvent) => {\n                      evt.preventDefault();\n\n                      const newTo = evt.clipboardData?.getData('text') ?? '';\n                      const oldFrom = this.__newItem.split('..')[0] ?? '';\n                      this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n\n                      addItem();\n                    }}\n                    @blur=${() => {\n                      this.__isErrorVisible = true;\n                    }}\n                  />\n                `\n              : html`\n                  <input\n                    placeholder=${this.placeholder}\n                    class=${classMap({\n                      'w-full bg-transparent appearance-none h-m font-medium focus-outline-none':\n                        true,\n                      'text-disabled': this.disabled,\n                    })}\n                    list=\"list\"\n                    ...=${spread(this.inputParams)}\n                    .value=${live(this.__newItem)}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                    @change=${(evt: Event) => evt.stopPropagation()}\n                    @input=${(evt: InputEvent) => {\n                      this.__newItem = (evt.currentTarget as HTMLInputElement).value.trim();\n                    }}\n                    @paste=${(evt: ClipboardEvent) => {\n                      evt.preventDefault();\n                      this.__newItem = evt.clipboardData?.getData('text') ?? '';\n                      addItem();\n                    }}\n                    @blur=${() => {\n                      this.__isErrorVisible = true;\n                    }}\n                  />\n                `}\n\n            <div\n              class=${classMap({\n                'relative': true,\n                'hover-text-base focus-within-text-primary-contrast': !this.disabled,\n                'text-disabled': this.disabled,\n              })}\n              ?hidden=${this.units.length === 0}\n            >\n              <select\n                style=\"min-width: 8rem\"\n                class=${classMap({\n                  'transition-colors rounded-s mx-xs px-s': true,\n                  'bg-contrast-5 appearance-none h-xs font-medium focus-outline-none': true,\n                  'hover-bg-contrast focus-bg-primary': !this.disabled,\n                })}\n                ?disabled=${this.disabled}\n              >\n                ${this.units.map(({ label, value }) => {\n                  return html`<option value=${value}>${label ?? value}</option>`;\n                })}\n              </select>\n            </div>\n\n            <datalist id=\"list\">\n              ${this.options.map(({ label, value }) => {\n                if (this._value.some(item => item.value === value)) return;\n                return html`<option value=${value}>${label ?? value}</option>`;\n              })}\n            </datalist>\n\n            <div class=\"mr-xs ml-auto\" ?hidden=${!this.__newItem}>\n              <button\n                aria-label=${this.t('submit')}\n                class=${classMap({\n                  'w-xs h-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none': true,\n                  'flex items-center justify-center rounded-s transition-colors': true,\n                  'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,\n                  'bg-contrast-5 text-body cursor-pointer': !isAddButtonDisabled,\n                  'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,\n                  'focus-ring-2': !isAddButtonDisabled,\n                })}\n                ?disabled=${isAddButtonDisabled}\n                @click=${addItem}\n              >\n                <iron-icon icon=\"lumo:plus\" class=\"icon-inline text-l\"></iron-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=${classMap({\n            'transition-colors mt-xs text-xs': true,\n            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n            'text-disabled': this.disabled,\n          })}\n          ?hidden=${!this.helperText}\n        >\n          ${this.helperText}\n        </div>\n\n        <div\n          class=\"mt-xs text-xs leading-xs text-error\"\n          ?hidden=${!this.__isErrorVisible || !this._errorMessage || this.disabled || this.readonly}\n        >\n          ${this._errorMessage}\n        </div>\n      </div>\n    `;\n  }\n\n  protected get _value(): Item[] {\n    return (super._value ?? []) as Item[];\n  }\n\n  protected set _value(newValue: Item[]) {\n    super._value = newValue;\n  }\n}\n"]}
+{"version":3,"file":"InternalEditableListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Item, Option, Unit } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { spread } from '@open-wc/lit-helpers';\nimport { live } from 'lit-html/directives/live';\n\nexport class InternalEditableListControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      inputParams: { attribute: false },\n      options: { type: Array },\n      layout: {},\n      units: { type: Array },\n      range: {},\n      __isErrorVisible: { attribute: false },\n      __newItem: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        div:has(> select) {\n          position: relative;\n        }\n\n        div:has(> select)::after {\n          content: ' ';\n          position: absolute;\n          top: 50%;\n          margin-top: -2px;\n          right: 10px;\n          width: 0;\n          height: 0;\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-top: 5px solid currentColor;\n        }\n      `,\n    ];\n  }\n\n  inputParams: Record<string, unknown> = {};\n\n  options: Option[] = [];\n\n  layout: 'standalone' | 'summary-item' | null = null;\n\n  units: Unit[] = [];\n\n  range: null | 'optional' = null;\n\n  private __isErrorVisible = false;\n\n  private __newItem = '';\n\n  render(): TemplateResult {\n    const isSummaryItem = this.layout === 'summary-item';\n    const isInteractive = !this.disabled && !this.readonly;\n\n    const deleteButtonClass = classMap({\n      'w-xs h-xs rounded-s transition-colors flex-shrink-0': true,\n      'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,\n      'text-tertiary hover-bg-error-10 hover-text-error': !this.disabled,\n      'cursor-default text-disabled': this.disabled,\n      'flex items-center justify-center': !this.readonly,\n      'hidden': this.readonly,\n      'mr-xs': !isSummaryItem,\n    });\n\n    const itemClass = classMap({\n      'transition-colors flex items-center': true,\n      'text-secondary': this.readonly,\n      'text-disabled': this.disabled,\n      'group-hover-divide-contrast-20': !isSummaryItem && isInteractive,\n      'pl-s border border-contrast-10 rounded-s': isSummaryItem,\n      'ml-s h-m': !isSummaryItem,\n    });\n\n    const isAddButtonDisabled = this.disabled || !this.__newItem;\n\n    const addItem = () => {\n      const newValue = [...this._value];\n      const unit = this.renderRoot.querySelector('select')?.value;\n\n      this.__newItem\n        .split('\\n')\n        .map(code => code.trim())\n        .filter(code => code.length > 0)\n        .forEach(value => {\n          if (!newValue.some(item => item.value === value)) {\n            newValue.push({ value, unit });\n          }\n        });\n\n      this._value = newValue;\n      this.__newItem = '';\n    };\n\n    return html`\n      <div class=\"group\">\n        <div\n          class=${classMap({\n            'transition-colors mb-xs': true,\n            'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,\n            'text-disabled': !isSummaryItem && this.disabled,\n            'font-medium text-s': !isSummaryItem,\n            'text-m': isSummaryItem,\n          })}\n        >\n          ${this.label}\n        </div>\n\n        <div\n          class=${classMap({\n            'transition-colors': true,\n            'border border-contrast-10 rounded': !isSummaryItem,\n            'group-hover-border-contrast-20': !isSummaryItem && isInteractive,\n          })}\n        >\n          <ol\n            class=${classMap({\n              'transition-colors font-medium': true,\n              'divide-y divide-contrast-10': !isSummaryItem,\n              'flex flex-wrap gap-s': isSummaryItem,\n            })}\n          >\n            ${repeat(\n              this._value,\n              item => item.value,\n              (item, index) => {\n                return html`\n                  <li class=${itemClass}>\n                    <div class=\"flex-1 mr-s\">${item.label ?? item.value}</div>\n\n                    <button\n                      aria-label=${this.t('delete')}\n                      class=${deleteButtonClass}\n                      ?disabled=${this.disabled}\n                      @click=${() => {\n                        this._value = this._value.filter((_, i) => i !== index);\n                      }}\n                    >\n                      <iron-icon icon=\"lumo:cross\" class=\"icon-inline text-xl\"></iron-icon>\n                    </button>\n                  </li>\n                `;\n              }\n            )}\n          </ol>\n\n          <div\n            style=${isSummaryItem\n              ? ''\n              : this._value.length === 0\n              ? 'border-radius: calc(var(--lumo-border-radius-m) - 1px)'\n              : 'border-radius: 0 0 calc(var(--lumo-border-radius-m) - 1px) calc(var(--lumo-border-radius-m) - 1px)'}\n            class=${classMap({\n              'transition-colors pl-s h-m flex items-center gap-xs': true,\n              'focus-within-ring-2 focus-within-ring-primary-50': !isSummaryItem,\n              'bg-contrast-10 group-hover-bg-contrast-20': !isSummaryItem && isInteractive,\n              'bg-contrast-5': !isSummaryItem && this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n              'rounded-s border border-contrast-10': isSummaryItem,\n              'mt-s': this._value.length > 0,\n            })}\n          >\n            ${this.range\n              ? html`\n                  <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_from\">\n                  </foxy-i18n>\n\n                  <input\n                    placeholder=${this.placeholder}\n                    class=${classMap({\n                      'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n                      'text-disabled': this.disabled,\n                    })}\n                    list=\"list\"\n                    ...=${spread(this.inputParams)}\n                    .value=${live(this.__newItem.split('..')[0] ?? '')}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                    @change=${(evt: Event) => evt.stopPropagation()}\n                    @input=${(evt: InputEvent) => {\n                      const newFrom = (evt.currentTarget as HTMLInputElement).value.trim();\n                      const oldTo = this.__newItem.split('..')[1] ?? '';\n                      this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n                    }}\n                    @paste=${(evt: ClipboardEvent) => {\n                      evt.preventDefault();\n\n                      const newFrom = evt.clipboardData?.getData('text') ?? '';\n                      const oldTo = this.__newItem.split('..')[1] ?? '';\n                      this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n\n                      addItem();\n                    }}\n                    @blur=${() => {\n                      this.__isErrorVisible = true;\n                    }}\n                  />\n\n                  <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_to\"></foxy-i18n>\n\n                  <input\n                    placeholder=${this.placeholder}\n                    class=${classMap({\n                      'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n                      'text-disabled': this.disabled,\n                    })}\n                    list=\"list\"\n                    ...=${spread(this.inputParams)}\n                    .value=${live(this.__newItem.split('..')[1] ?? '')}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                    @change=${(evt: Event) => evt.stopPropagation()}\n                    @input=${(evt: InputEvent) => {\n                      const newTo = (evt.currentTarget as HTMLInputElement).value.trim();\n                      const oldFrom = this.__newItem.split('..')[0] ?? '';\n                      this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n                    }}\n                    @paste=${(evt: ClipboardEvent) => {\n                      evt.preventDefault();\n\n                      const newTo = evt.clipboardData?.getData('text') ?? '';\n                      const oldFrom = this.__newItem.split('..')[0] ?? '';\n                      this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n\n                      addItem();\n                    }}\n                    @blur=${() => {\n                      this.__isErrorVisible = true;\n                    }}\n                  />\n                `\n              : html`\n                  <input\n                    placeholder=${this.placeholder}\n                    class=${classMap({\n                      'w-full bg-transparent appearance-none h-m font-medium focus-outline-none':\n                        true,\n                      'text-disabled': this.disabled,\n                    })}\n                    list=\"list\"\n                    ...=${spread(this.inputParams)}\n                    .value=${live(this.__newItem)}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                    @change=${(evt: Event) => evt.stopPropagation()}\n                    @input=${(evt: InputEvent) => {\n                      this.__newItem = (evt.currentTarget as HTMLInputElement).value.trim();\n                    }}\n                    @paste=${(evt: ClipboardEvent) => {\n                      evt.preventDefault();\n                      this.__newItem = evt.clipboardData?.getData('text') ?? '';\n                      addItem();\n                    }}\n                    @blur=${() => {\n                      this.__isErrorVisible = true;\n                    }}\n                  />\n                `}\n\n            <div\n              class=${classMap({\n                'relative': true,\n                'hover-text-base focus-within-text-primary-contrast': !this.disabled,\n                'text-disabled': this.disabled,\n              })}\n              ?hidden=${this.units.length === 0}\n            >\n              <select\n                style=\"min-width: 8rem\"\n                class=${classMap({\n                  'transition-colors rounded-s mx-xs px-s': true,\n                  'bg-contrast-5 appearance-none h-xs font-medium focus-outline-none': true,\n                  'hover-bg-contrast focus-bg-primary': !this.disabled,\n                })}\n                ?disabled=${this.disabled}\n              >\n                ${this.units.map(({ label, value }) => {\n                  return html`<option value=${value}>${label ?? value}</option>`;\n                })}\n              </select>\n            </div>\n\n            <datalist id=\"list\">\n              ${this.options.map(({ label, value }) => {\n                if (this._value.some(item => item.value === value)) return;\n                return html`<option value=${value}>${label ?? value}</option>`;\n              })}\n            </datalist>\n\n            <div class=\"mr-xs ml-auto\" ?hidden=${!this.__newItem}>\n              <button\n                aria-label=${this.t('submit')}\n                class=${classMap({\n                  'w-xs h-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none': true,\n                  'flex items-center justify-center rounded-s transition-colors': true,\n                  'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,\n                  'bg-contrast-5 text-body cursor-pointer': !isAddButtonDisabled,\n                  'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,\n                  'focus-ring-2': !isAddButtonDisabled,\n                })}\n                ?disabled=${isAddButtonDisabled}\n                @click=${addItem}\n              >\n                <iron-icon icon=\"lumo:plus\" class=\"icon-inline text-l\"></iron-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=${classMap({\n            'transition-colors text-xs mt-xs': true,\n            'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,\n            'text-disabled': !isSummaryItem && this.disabled,\n            'text-secondary': isSummaryItem,\n          })}\n          ?hidden=${!this.helperText}\n        >\n          ${this.helperText}\n        </div>\n\n        <div\n          class=\"mt-xs text-xs leading-xs text-error\"\n          ?hidden=${!this.__isErrorVisible || !this._errorMessage || this.disabled || this.readonly}\n        >\n          ${this._errorMessage}\n        </div>\n      </div>\n    `;\n  }\n\n  protected get _value(): Item[] {\n    return (super._value ?? []) as Item[];\n  }\n\n  protected set _value(newValue: Item[]) {\n    super._value = newValue;\n  }\n}\n"]}

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

@@ -1,3 +1,4 @@
+import '@vaadin-component-factory/vcf-tooltip';
 import '@vaadin/vaadin-icons';
 import '@polymer/iron-icon';
 import '../InternalEditableControl/index';

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

@@ -1,3 +1,4 @@
+import '@vaadin-component-factory/vcf-tooltip';
 import '@vaadin/vaadin-icons';
 import '@polymer/iron-icon';
 import "../InternalEditableControl/index.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,oBAAoB,CAAC;AAE5B,6CAA0C;AAE1C,OAAO,EAAE,2BAA2B,EAAE,yCAAsC;AAE5E,cAAc,CAAC,MAAM,CAAC,qCAAqC,EAAE,2BAA2B,CAAC,CAAC;AAE1F,OAAO,EAAE,2BAA2B,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-icons';\nimport '@polymer/iron-icon';\n\nimport '../InternalEditableControl/index';\n\nimport { InternalEditableListControl } from './InternalEditableListControl';\n\ncustomElements.define('foxy-internal-editable-list-control', InternalEditableListControl);\n\nexport { InternalEditableListControl };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,uCAAuC,CAAC;AAC/C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,oBAAoB,CAAC;AAE5B,6CAA0C;AAE1C,OAAO,EAAE,2BAA2B,EAAE,yCAAsC;AAE5E,cAAc,CAAC,MAAM,CAAC,qCAAqC,EAAE,2BAA2B,CAAC,CAAC;AAE1F,OAAO,EAAE,2BAA2B,EAAE,CAAC","sourcesContent":["import '@vaadin-component-factory/vcf-tooltip';\nimport '@vaadin/vaadin-icons';\nimport '@polymer/iron-icon';\n\nimport '../InternalEditableControl/index';\n\nimport { InternalEditableListControl } from './InternalEditableListControl';\n\ncustomElements.define('foxy-internal-editable-list-control', InternalEditableListControl);\n\nexport { InternalEditableListControl };\n"]}

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

@@ -157,8 +157,8 @@ input{
       <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}>
+          <p class="text-xs text-secondary">${this.helperText}</p>
+          <p class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
             ${this._errorMessage}
           </p>
         </div>

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

@@ -1 +1 @@
-{"version":3,"file":"InternalFrequencyControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CustomFieldElement, CustomFieldI18n } from '@vaadin/vaadin-custom-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { css, html, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\n\n/**\n * Internal control displaying a custom field for frequency input.\n *\n * @since 1.17.0\n * @element foxy-internal-frequency-control\n */\nexport class InternalFrequencyControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      allowTwiceAMonth: { type: Boolean, attribute: 'allow-twice-a-month' },\n      options: { attribute: false },\n      layout: {},\n      max: { type: Number },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        :host {\n          display: block;\n        }\n\n        vaadin-custom-field {\n          width: 100%;\n          font-size: 0;\n          line-height: 0;\n          padding-top: 0 !important;\n        }\n\n        vaadin-custom-field::part(label) {\n          padding-bottom: var(--lumo-space-s);\n        }\n\n        vaadin-custom-field::part(error-message)[aria-hidden='false'] {\n          padding-top: var(--lumo-space-xs);\n        }\n\n        vaadin-integer-field,\n        vaadin-combo-box {\n          width: calc(50% - (var(--lumo-space-s) / 2));\n        }\n\n        vaadin-integer-field {\n          margin-right: var(--lumo-space-s);\n          padding: 0;\n        }\n\n        vaadin-combo-box::part(text-field) {\n          padding: 0;\n        }\n\n        input::-webkit-outer-spin-button,\n        input::-webkit-inner-spin-button {\n          -webkit-appearance: none;\n          margin: 0;\n        }\n\n        input {\n          -moz-appearance: textfield;\n        }\n      `,\n    ];\n  }\n\n  allowTwiceAMonth = false;\n\n  options = [\n    { value: 'd', label: 'day' },\n    { value: 'w', label: 'week' },\n    { value: 'm', label: 'month' },\n    { value: 'y', label: 'year' },\n  ];\n\n  layout: 'summary-item' | 'standalone' | null = null;\n\n  max: number | null = 999;\n\n  private __i18n: CustomFieldI18n = {\n    formatValue: inputValues => inputValues.join(''),\n    parseValue: value => {\n      const normalizedValue = value.startsWith('.') ? `0${value}` : value;\n      const count = parseFloat(value.substring(0, Math.max(normalizedValue.length - 1, 0)));\n      const units = normalizedValue[normalizedValue.length - 1] ?? '';\n\n      return isNaN(count) ? ['0', ''] : [count.toString(), units];\n    },\n  };\n\n  renderControl(): TemplateResult {\n    if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n    const value = (this._value ?? '') as string;\n    const count = parseFloat(this.__i18n.parseValue(value)[0] as string);\n    const items = this.options.map(({ value, label }) => ({\n      label: this.t(label, { count }),\n      value,\n    }));\n\n    return html`\n      <vaadin-custom-field\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .errorMessage=${this._errorMessage ?? ''}\n        .helperText=${this.helperText}\n        .label=${this.label}\n        .value=${value}\n        .i18n=${this.__i18n}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as CustomFieldElement;\n          this._value = field.value as string;\n        }}\n      >\n        <vaadin-integer-field\n          max=${ifDefined(this.max || undefined)}\n          min=\"1\"\n          prevent-invalid-input\n          has-controls\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?invalid=${!this._checkValidity()}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        >\n        </vaadin-integer-field>\n\n        <vaadin-combo-box\n          item-value-path=\"value\"\n          item-label-path=\"label\"\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?invalid=${!this._checkValidity()}\n          .items=${items}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        >\n        </vaadin-combo-box>\n      </vaadin-custom-field>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    const field = this.renderRoot.querySelector('vaadin-custom-field');\n    if (field && field.value !== this._value) field.value = (this._value ?? '') as string;\n  }\n\n  private __renderSummaryItemLayout() {\n    const value = (this._value ?? '') as string;\n    const [strCount, units] = this.__i18n.parseValue(value);\n    const count = parseFloat(strCount as string);\n    const selection =\n      this._value === '.5m' && !this.allowTwiceAMonth\n        ? undefined\n        : this.options.find(v => v.value === units);\n\n    return html`\n      <div class=\"flex items-start gap-m leading-xs\">\n        <div>\n          <label class=\"text-m text-body\" for=\"input\">${this.label}</label>\n          <p class=\"text-s text-secondary\">${this.helperText}</p>\n          <p class=\"text-s text-error\" ?hidden=${this.disabled || this.readonly}>\n            ${this._errorMessage}\n          </p>\n        </div>\n\n        <div class=\"flex-1 flex items-center gap-xs\">\n          <input\n            placeholder=${this.placeholder}\n            inputmode=\"numeric\"\n            style=\"min-width: 10ch\"\n            class=${classMap({\n              'w-full appearance-none text-right bg-transparent transition-colors': true,\n              'text-m rounded-s focus-outline-none': true,\n              'text-secondary': this.readonly,\n              'text-disabled': this.disabled,\n              'font-medium': !this.readonly,\n            })}\n            type=\"number\"\n            step=\"1\"\n            min=\"1\"\n            max=${ifDefined(this.max ?? void 0)}\n            id=\"input\"\n            .value=${value === '.5m' ? (this.allowTwiceAMonth ? 2 : '') : count}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n            @input=${(evt: Event) => {\n              evt.stopPropagation();\n              const input = evt.currentTarget as HTMLInputElement;\n              this._value = this.__i18n.formatValue([input.value, units]);\n            }}\n          />\n\n          <div\n            class=${classMap({\n              'relative rounded-s transition-colors transition-opacity': true,\n              'focus-within-ring-2 focus-within-ring-primary-50': !this.disabled && !this.readonly,\n              'text-body hover-opacity-80 cursor-pointer': !this.disabled && !this.readonly,\n              'text-secondary': this.readonly,\n              'text-disabled': this.disabled,\n              'font-medium': !this.readonly,\n            })}\n          >\n            <div class=\"flex items-center gap-xs\">\n              <div class=\"whitespace-nowrap\">\n                ${value === '.5m'\n                  ? this.t('times_a_month')\n                  : selection\n                  ? this.t(selection.label, { count })\n                  : this.t('select')}\n              </div>\n              ${this.readonly\n                ? ''\n                : svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25)\"><path fill-rule=\"evenodd\" d=\"M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z\" clip-rule=\"evenodd\" /></svg>`}\n            </div>\n\n            <select\n              class=${classMap({\n                'absolute inset-0 opacity-0': true,\n                'cursor-pointer': !this.disabled && !this.readonly,\n              })}\n              id=\"select\"\n              ?disabled=${this.disabled}\n              ?hidden=${this.readonly}\n              @change=${(evt: Event) => {\n                evt.stopPropagation();\n                const value = (evt.currentTarget as HTMLSelectElement).value;\n                if (value === 'times_a_month') {\n                  this._value = '.5m';\n                } else {\n                  this._value = this.__i18n.formatValue([count, value]);\n                }\n              }}\n            >\n              <option value=\"\" ?selected=${!selection} disabled hidden>${this.t('select')}</option>\n              ${this.allowTwiceAMonth && (count === 2 || value === '.5m')\n                ? html`\n                    <option value=\"times_a_month\" ?selected=${value === '.5m'}>\n                      ${this.t('times_a_month')}\n                    </option>\n                  `\n                : ''}\n              ${this.options.map(\n                option =>\n                  html`\n                    <option\n                      value=${option.value}\n                      ?selected=${value !== '.5m' && option.value === selection?.value}\n                    >\n                      ${this.t(option.label, { count })}\n                    </option>\n                  `\n              )}\n            </select>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalFrequencyControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,wBAAyB,SAAQ,uBAAuB;IAArE;;QA6DE,qBAAgB,GAAG,KAAK,CAAC;QAEzB,YAAO,GAAG;YACR,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;YAC5B,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE;YAC7B,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE;YAC9B,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE;SAC9B,CAAC;QAEF,WAAM,GAAyC,IAAI,CAAC;QAEpD,QAAG,GAAkB,GAAG,CAAC;QAEjB,WAAM,GAAoB;YAChC,WAAW,EAAE,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;YAChD,UAAU,EAAE,KAAK,CAAC,EAAE;;gBAClB,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;gBACpE,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACtF,MAAM,KAAK,SAAG,eAAe,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,mCAAI,EAAE,CAAC;gBAEhE,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC,CAAC;YAC9D,CAAC;SACF,CAAC;IA4KJ,CAAC;IA9PC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,gBAAgB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE;YACrE,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;YAC7B,MAAM,EAAE,EAAE;YACV,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACtB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,KAAK,CAAC,MAAM;YACZ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2CF;SACF,CAAC;IACJ,CAAC;IA0BD,aAAa;;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,cAAc;YAAE,OAAO,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAE5E,MAAM,KAAK,GAAG,OAAC,IAAI,CAAC,MAAM,mCAAI,EAAE,CAAW,CAAC;QAC5C,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAW,CAAC,CAAC;QACrE,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YACpD,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC;YAC/B,KAAK;SACN,CAAC,CAAC,CAAC;QAEJ,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;wBACpB,MAAA,IAAI,CAAC,aAAa,mCAAI,EAAE;sBAC1B,IAAI,CAAC,UAAU;iBACpB,IAAI,CAAC,KAAK;iBACV,KAAK;gBACN,IAAI,CAAC,MAAM;kBACT,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAmC,CAAC;YACtD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAe,CAAC;QACtC,CAAC;;;gBAGO,SAAS,CAAC,IAAI,CAAC,GAAG,IAAI,SAAS,CAAC;;;;sBAI1B,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;qBACd,CAAC,IAAI,CAAC,cAAc,EAAE;qBACtB,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;;;;;;;sBAOpE,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;qBACd,CAAC,IAAI,CAAC,cAAc,EAAE;mBACxB,KAAK;qBACH,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;;;;KAIrF,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAiC;;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QACnE,IAAI,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM;YAAE,KAAK,CAAC,KAAK,GAAG,OAAC,IAAI,CAAC,MAAM,mCAAI,EAAE,CAAW,CAAC;IACxF,CAAC;IAEO,yBAAyB;;QAC/B,MAAM,KAAK,GAAG,OAAC,IAAI,CAAC,MAAM,mCAAI,EAAE,CAAW,CAAC;QAC5C,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACxD,MAAM,KAAK,GAAG,UAAU,CAAC,QAAkB,CAAC,CAAC;QAC7C,MAAM,SAAS,GACb,IAAI,CAAC,MAAM,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAC7C,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QAEhD,OAAO,IAAI,CAAA;;;wDAGyC,IAAI,CAAC,KAAK;8CACpB,IAAI,CAAC,UAAU;kDACX,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;cAClE,IAAI,CAAC,aAAa;;;;;;0BAMN,IAAI,CAAC,WAAW;;;oBAGtB,QAAQ,CAAC;YACf,oEAAoE,EAAE,IAAI;YAC1E,qCAAqC,EAAE,IAAI;YAC3C,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,aAAa,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC9B,CAAC;;;;kBAII,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,KAAK,CAAC,CAAC;;qBAE1B,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK;wBACvD,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,QAAQ;uBACd,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;qBACvE,CAAC,GAAU,EAAE,EAAE;YACtB,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,MAAM,KAAK,GAAG,GAAG,CAAC,aAAiC,CAAC;YACpD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;QAC9D,CAAC;;;;oBAIO,QAAQ,CAAC;YACf,yDAAyD,EAAE,IAAI;YAC/D,kDAAkD,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YACpF,2CAA2C,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC7E,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,aAAa,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC9B,CAAC;;;;kBAII,KAAK,KAAK,KAAK;YACf,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC;YACzB,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC;gBACpC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;;gBAEpB,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,GAAG,CAAA,gbAAgb;;;;sBAI/a,QAAQ,CAAC;YACf,4BAA4B,EAAE,IAAI;YAClC,gBAAgB,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC;;0BAEU,IAAI,CAAC,QAAQ;wBACf,IAAI,CAAC,QAAQ;wBACb,CAAC,GAAU,EAAE,EAAE;YACvB,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,MAAM,KAAK,GAAI,GAAG,CAAC,aAAmC,CAAC,KAAK,CAAC;YAC7D,IAAI,KAAK,KAAK,eAAe,EAAE;gBAC7B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACrB;iBAAM;gBACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;aACvD;QACH,CAAC;;2CAE4B,CAAC,SAAS,oBAAoB,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;gBACzE,IAAI,CAAC,gBAAgB,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,KAAK,CAAC;YACzD,CAAC,CAAC,IAAI,CAAA;8DACwC,KAAK,KAAK,KAAK;wBACrD,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC;;mBAE5B;YACH,CAAC,CAAC,EAAE;gBACJ,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;;8BAEQ,MAAM,CAAC,KAAK;kCACR,KAAK,KAAK,KAAK,IAAI,MAAM,CAAC,KAAK,MAAK,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,CAAA;;wBAE9D,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC;;mBAEpC,CACJ;;;;;KAKV,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CustomFieldElement, CustomFieldI18n } from '@vaadin/vaadin-custom-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { css, html, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\n\n/**\n * Internal control displaying a custom field for frequency input.\n *\n * @since 1.17.0\n * @element foxy-internal-frequency-control\n */\nexport class InternalFrequencyControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      allowTwiceAMonth: { type: Boolean, attribute: 'allow-twice-a-month' },\n      options: { attribute: false },\n      layout: {},\n      max: { type: Number },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        :host {\n          display: block;\n        }\n\n        vaadin-custom-field {\n          width: 100%;\n          font-size: 0;\n          line-height: 0;\n          padding-top: 0 !important;\n        }\n\n        vaadin-custom-field::part(label) {\n          padding-bottom: var(--lumo-space-s);\n        }\n\n        vaadin-custom-field::part(error-message)[aria-hidden='false'] {\n          padding-top: var(--lumo-space-xs);\n        }\n\n        vaadin-integer-field,\n        vaadin-combo-box {\n          width: calc(50% - (var(--lumo-space-s) / 2));\n        }\n\n        vaadin-integer-field {\n          margin-right: var(--lumo-space-s);\n          padding: 0;\n        }\n\n        vaadin-combo-box::part(text-field) {\n          padding: 0;\n        }\n\n        input::-webkit-outer-spin-button,\n        input::-webkit-inner-spin-button {\n          -webkit-appearance: none;\n          margin: 0;\n        }\n\n        input {\n          -moz-appearance: textfield;\n        }\n      `,\n    ];\n  }\n\n  allowTwiceAMonth = false;\n\n  options = [\n    { value: 'd', label: 'day' },\n    { value: 'w', label: 'week' },\n    { value: 'm', label: 'month' },\n    { value: 'y', label: 'year' },\n  ];\n\n  layout: 'summary-item' | 'standalone' | null = null;\n\n  max: number | null = 999;\n\n  private __i18n: CustomFieldI18n = {\n    formatValue: inputValues => inputValues.join(''),\n    parseValue: value => {\n      const normalizedValue = value.startsWith('.') ? `0${value}` : value;\n      const count = parseFloat(value.substring(0, Math.max(normalizedValue.length - 1, 0)));\n      const units = normalizedValue[normalizedValue.length - 1] ?? '';\n\n      return isNaN(count) ? ['0', ''] : [count.toString(), units];\n    },\n  };\n\n  renderControl(): TemplateResult {\n    if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n    const value = (this._value ?? '') as string;\n    const count = parseFloat(this.__i18n.parseValue(value)[0] as string);\n    const items = this.options.map(({ value, label }) => ({\n      label: this.t(label, { count }),\n      value,\n    }));\n\n    return html`\n      <vaadin-custom-field\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .errorMessage=${this._errorMessage ?? ''}\n        .helperText=${this.helperText}\n        .label=${this.label}\n        .value=${value}\n        .i18n=${this.__i18n}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as CustomFieldElement;\n          this._value = field.value as string;\n        }}\n      >\n        <vaadin-integer-field\n          max=${ifDefined(this.max || undefined)}\n          min=\"1\"\n          prevent-invalid-input\n          has-controls\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?invalid=${!this._checkValidity()}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        >\n        </vaadin-integer-field>\n\n        <vaadin-combo-box\n          item-value-path=\"value\"\n          item-label-path=\"label\"\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?invalid=${!this._checkValidity()}\n          .items=${items}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        >\n        </vaadin-combo-box>\n      </vaadin-custom-field>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    const field = this.renderRoot.querySelector('vaadin-custom-field');\n    if (field && field.value !== this._value) field.value = (this._value ?? '') as string;\n  }\n\n  private __renderSummaryItemLayout() {\n    const value = (this._value ?? '') as string;\n    const [strCount, units] = this.__i18n.parseValue(value);\n    const count = parseFloat(strCount as string);\n    const selection =\n      this._value === '.5m' && !this.allowTwiceAMonth\n        ? undefined\n        : this.options.find(v => v.value === units);\n\n    return html`\n      <div class=\"flex items-start gap-m leading-xs\">\n        <div>\n          <label class=\"text-m text-body\" for=\"input\">${this.label}</label>\n          <p class=\"text-xs text-secondary\">${this.helperText}</p>\n          <p class=\"text-xs text-error\" ?hidden=${this.disabled || this.readonly}>\n            ${this._errorMessage}\n          </p>\n        </div>\n\n        <div class=\"flex-1 flex items-center gap-xs\">\n          <input\n            placeholder=${this.placeholder}\n            inputmode=\"numeric\"\n            style=\"min-width: 10ch\"\n            class=${classMap({\n              'w-full appearance-none text-right bg-transparent transition-colors': true,\n              'text-m rounded-s focus-outline-none': true,\n              'text-secondary': this.readonly,\n              'text-disabled': this.disabled,\n              'font-medium': !this.readonly,\n            })}\n            type=\"number\"\n            step=\"1\"\n            min=\"1\"\n            max=${ifDefined(this.max ?? void 0)}\n            id=\"input\"\n            .value=${value === '.5m' ? (this.allowTwiceAMonth ? 2 : '') : count}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n            @input=${(evt: Event) => {\n              evt.stopPropagation();\n              const input = evt.currentTarget as HTMLInputElement;\n              this._value = this.__i18n.formatValue([input.value, units]);\n            }}\n          />\n\n          <div\n            class=${classMap({\n              'relative rounded-s transition-colors transition-opacity': true,\n              'focus-within-ring-2 focus-within-ring-primary-50': !this.disabled && !this.readonly,\n              'text-body hover-opacity-80 cursor-pointer': !this.disabled && !this.readonly,\n              'text-secondary': this.readonly,\n              'text-disabled': this.disabled,\n              'font-medium': !this.readonly,\n            })}\n          >\n            <div class=\"flex items-center gap-xs\">\n              <div class=\"whitespace-nowrap\">\n                ${value === '.5m'\n                  ? this.t('times_a_month')\n                  : selection\n                  ? this.t(selection.label, { count })\n                  : this.t('select')}\n              </div>\n              ${this.readonly\n                ? ''\n                : svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25)\"><path fill-rule=\"evenodd\" d=\"M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z\" clip-rule=\"evenodd\" /></svg>`}\n            </div>\n\n            <select\n              class=${classMap({\n                'absolute inset-0 opacity-0': true,\n                'cursor-pointer': !this.disabled && !this.readonly,\n              })}\n              id=\"select\"\n              ?disabled=${this.disabled}\n              ?hidden=${this.readonly}\n              @change=${(evt: Event) => {\n                evt.stopPropagation();\n                const value = (evt.currentTarget as HTMLSelectElement).value;\n                if (value === 'times_a_month') {\n                  this._value = '.5m';\n                } else {\n                  this._value = this.__i18n.formatValue([count, value]);\n                }\n              }}\n            >\n              <option value=\"\" ?selected=${!selection} disabled hidden>${this.t('select')}</option>\n              ${this.allowTwiceAMonth && (count === 2 || value === '.5m')\n                ? html`\n                    <option value=\"times_a_month\" ?selected=${value === '.5m'}>\n                      ${this.t('times_a_month')}\n                    </option>\n                  `\n                : ''}\n              ${this.options.map(\n                option =>\n                  html`\n                    <option\n                      value=${option.value}\n                      ?selected=${value !== '.5m' && option.value === selection?.value}\n                    >\n                      ${this.t(option.label, { count })}\n                    </option>\n                  `\n              )}\n            </select>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -30,7 +30,15 @@ export class InternalNumberControl extends InternalEditableControl {
     static get styles() {
         return [
             ...super.styles,
-            css `input::-webkit-outer-spin-button,
+            css `input::-webkit-contacts-auto-fill-button{
+  visibility:hidden;
+  display:none !important;
+  pointer-events:none;
+  position:absolute;
+  right:0;
+}
+
+input::-webkit-outer-spin-button,
         input::-webkit-inner-spin-button{
   -webkit-appearance:none;
   margin:0;
@@ -82,8 +90,8 @@ input{
       <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}>
+          <p class="text-xs text-secondary">${this.helperText}</p>
+          <p class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
             ${this._errorMessage}
           </p>
         </div>
@@ -107,7 +115,7 @@ input{
             min=${ifDefined((_a = this.min) !== null && _a !== void 0 ? _a : void 0)}
             max=${ifDefined((_b = this.max) !== null && _b !== void 0 ? _b : void 0)}
             id="input"
-            .value=${this._value}
+            .value=${this._value === 0 ? '' : this._value}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
@@ -131,7 +139,7 @@ input{
         })}
             style="width: 1em; height: 1em;"
             ?disabled=${this.disabled}
-            ?hidden=${this.readonly}
+            ?hidden=${this.readonly || !this._value}
             @click=${() => {
             this._value = 0;
             this.dispatchEvent(new CustomEvent('clear'));