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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/dist/cdn/foxy-address-form.js +1 -1
  2. package/dist/cdn/foxy-admin-subscription-form.js +1 -1
  3. package/dist/cdn/foxy-applied-coupon-code-form.js +1 -1
  4. package/dist/cdn/foxy-cart-form.js +2 -2
  5. package/dist/cdn/foxy-client-form.js +1 -1
  6. package/dist/cdn/foxy-coupon-code-form.js +1 -1
  7. package/dist/cdn/foxy-coupon-form.js +1 -1
  8. package/dist/cdn/foxy-customer-form.js +1 -1
  9. package/dist/cdn/foxy-customer-portal.js +1 -1
  10. package/dist/cdn/foxy-customer.js +1 -1
  11. package/dist/cdn/foxy-downloadable-form.js +1 -1
  12. package/dist/cdn/foxy-email-template-form.js +1 -1
  13. package/dist/cdn/foxy-filter-attribute-form.js +1 -1
  14. package/dist/cdn/foxy-generate-codes-form.js +1 -1
  15. package/dist/cdn/foxy-gift-card-code-form.js +1 -1
  16. package/dist/cdn/foxy-gift-card-codes-form.js +1 -1
  17. package/dist/cdn/foxy-gift-card-form.js +1 -1
  18. package/dist/cdn/foxy-integration-form.js +1 -1
  19. package/dist/cdn/foxy-item-category-form.js +1 -1
  20. package/dist/cdn/foxy-item-form.js +1 -1
  21. package/dist/cdn/foxy-item-option-form.js +1 -1
  22. package/dist/cdn/foxy-native-integration-form.js +1 -1
  23. package/dist/cdn/foxy-passkey-form.js +1 -1
  24. package/dist/cdn/foxy-payments-api-fraud-protection-form.js +1 -1
  25. package/dist/cdn/foxy-payments-api-payment-method-form.js +1 -1
  26. package/dist/cdn/foxy-payments-api-payment-preset-form.js +1 -1
  27. package/dist/cdn/foxy-store-form.js +1 -1
  28. package/dist/cdn/foxy-store-shipping-method-form.js +1 -1
  29. package/dist/cdn/foxy-subscription-form.js +1 -1
  30. package/dist/cdn/foxy-subscription-settings-form.js +1 -1
  31. package/dist/cdn/foxy-template-set-form.js +1 -1
  32. package/dist/cdn/foxy-transaction.js +1 -1
  33. package/dist/cdn/foxy-user-form.js +1 -1
  34. package/dist/cdn/foxy-users-table.js +1 -1
  35. package/dist/cdn/foxy-webhook-form.js +1 -1
  36. package/dist/cdn/shared-3ea78c8d.js +1 -0
  37. package/dist/cdn/shared-a8170f94.js +1 -0
  38. package/dist/cdn/shared-cdf20ded.js +1 -0
  39. package/dist/cdn/shared-e96c5384.js +1 -0
  40. package/dist/cdn/shared-f07d15d6.js +1 -0
  41. package/dist/cdn/translations/item-category-form/en.json +181 -148
  42. package/dist/elements/internal/InternalNumberControl/InternalNumberControl.d.ts +3 -0
  43. package/dist/elements/internal/InternalNumberControl/InternalNumberControl.js +23 -8
  44. package/dist/elements/internal/InternalNumberControl/InternalNumberControl.js.map +1 -1
  45. package/dist/elements/internal/InternalSelectControl/InternalSelectControl.d.ts +2 -0
  46. package/dist/elements/internal/InternalSelectControl/InternalSelectControl.js +11 -1
  47. package/dist/elements/internal/InternalSelectControl/InternalSelectControl.js.map +1 -1
  48. package/dist/elements/internal/InternalTextControl/InternalTextControl.d.ts +2 -0
  49. package/dist/elements/internal/InternalTextControl/InternalTextControl.js +13 -2
  50. package/dist/elements/internal/InternalTextControl/InternalTextControl.js.map +1 -1
  51. package/dist/elements/public/ItemCategoryForm/ItemCategoryForm.d.ts +1 -7
  52. package/dist/elements/public/ItemCategoryForm/ItemCategoryForm.js +109 -135
  53. package/dist/elements/public/ItemCategoryForm/ItemCategoryForm.js.map +1 -1
  54. package/dist/elements/public/ItemCategoryForm/index.d.ts +4 -3
  55. package/dist/elements/public/ItemCategoryForm/index.js +4 -3
  56. package/dist/elements/public/ItemCategoryForm/index.js.map +1 -1
  57. package/package.json +1 -1
  58. package/dist/cdn/shared-18cb3cfc.js +0 -1
  59. package/dist/cdn/shared-588c6b15.js +0 -1
  60. package/dist/cdn/shared-666bdabd.js +0 -1
  61. package/dist/cdn/shared-b9138e9f.js +0 -1
@@ -16,19 +16,23 @@
16
16
  "done": "Copied to clipboard"
17
17
  }
18
18
  },
19
- "name": {
20
- "label": "Name",
21
- "placeholder": "Books",
22
- "helper_text": "Category description for admins.",
23
- "v8n_required": "Item category name is required",
24
- "v8n_too_long": "Item category name can't exceed 50 characters"
25
- },
26
- "code": {
27
- "label": "Code",
28
- "placeholder": "MY_BOOKS_CATEGORY",
29
- "helper_text": "Unique identifier for the cart.",
30
- "v8n_required": "Item category code is required",
31
- "v8n_too_long": "Item categoty code can't exceed 50 characters"
19
+ "general": {
20
+ "label": "",
21
+ "helper_text": "",
22
+ "name": {
23
+ "label": "Name",
24
+ "placeholder": "Books",
25
+ "helper_text": "",
26
+ "v8n_required": "Item category name is required",
27
+ "v8n_too_long": "Item category name can't exceed 50 characters"
28
+ },
29
+ "code": {
30
+ "label": "Code",
31
+ "placeholder": "MY_BOOKS_CATEGORY",
32
+ "helper_text": "",
33
+ "v8n_required": "Item category code is required",
34
+ "v8n_too_long": "Item categoty code can't exceed 50 characters"
35
+ }
32
36
  },
33
37
  "taxes": {
34
38
  "label": "Taxes",
@@ -54,146 +58,175 @@
54
58
  },
55
59
  "helper_text": "Select taxes that will apply to the products in this category. Changes here are saved immediately."
56
60
  },
57
- "item-delivery-type": {
58
- "label": "Delivery",
59
- "option_shipped": "Shipped using live rates",
60
- "option_flat_rate": "Shipped using a flat rate",
61
- "option_downloaded": "Downloaded by the customer",
62
- "option_pickup": "Picked up by the customer",
63
- "option_notshipped": "Not shipped",
64
- "placeholder": "Select...",
65
- "helper_text": "",
66
- "v8n_required": "Please select a delivery type"
67
- },
68
- "default-weight": {
69
- "label": "Default weight",
70
- "placeholder": "1",
71
- "helper_text": "",
72
- "v8n_required": "This field is required",
73
- "v8n_negative": "Please enter a positive number"
74
- },
75
- "default-weight-unit": {
76
- "label": "Default weight unit",
77
- "placeholder": "Select...",
78
- "option_kgs": "KG",
79
- "option_lbs": "LG",
80
- "helper_text": "",
81
- "v8n_required": "Please select a unit"
82
- },
83
- "default-length-unit": {
84
- "label": "Default length unit",
85
- "placeholder": "Select...",
86
- "option_cm": "CM",
87
- "option_in": "IN",
88
- "helper_text": "",
89
- "v8n_required": "Please select a unit"
90
- },
91
- "max-downloads-per-customer": {
92
- "label": "Max downloads",
93
- "placeholder": "3",
94
- "helper_text": "",
95
- "v8n_required": "This field is required",
96
- "v8n_negative": "Please enter a positive number"
97
- },
98
- "max-downloads-time-period": {
99
- "label": "Access duration (hrs)",
100
- "placeholder": "24",
101
- "helper_text": "",
102
- "v8n_required": "This field is required",
103
- "v8n_negative": "Please enter a positive number"
104
- },
105
- "shipping-flat-rate": {
106
- "label": "Rate",
107
- "placeholder": "0",
108
- "helper_text": "",
109
- "v8n_required": "This field is required",
110
- "v8n_negative": "Please enter a positive number"
111
- },
112
- "shipping-flat-rate-type": {
113
- "label": "Applies",
114
- "placeholder": "Select...",
115
- "option_per_order": "Per order",
116
- "option_per_shipment": "Per shipment",
117
- "helper_text": "",
118
- "v8n_required": "Please select a value"
119
- },
120
- "customs-value": {
121
- "label": "Customs value",
122
- "placeholder": "0",
123
- "helper_text": "Enter a dollar amount here for the declared customs value for international shipments. If you leave this blank, the sale price of the item will be used.",
124
- "v8n_negative": "Please enter a positive number"
125
- },
126
- "handling-fee-type": {
127
- "label": "Handling fee",
128
- "option_none": "No handling fee",
129
- "option_flat_per_order": "Flat fee per shipment",
130
- "option_flat_per_item": "Flat fee per product",
131
- "option_flat_percent": "Flat fee per shipment + % of price",
132
- "option_flat_percent_with_minimum": "Flat fee per shipment or % of price, whichever is greater",
133
- "placeholder": "Select...",
134
- "helper_text": "",
135
- "v8n_required": "Please select a value"
136
- },
137
- "handling-fee": {
138
- "label": "Amount",
139
- "placeholder": "0",
140
- "helper_text": "",
141
- "v8n_required": "This field is required",
142
- "v8n_negative": "Please enter a positive number"
143
- },
144
- "handling-fee-minimum": {
145
- "label": "Minimum fee",
146
- "placeholder": "0",
61
+ "delivery": {
62
+ "label": "Delivery Options",
147
63
  "helper_text": "",
148
- "v8n_required": "This field is required",
149
- "v8n_negative": "Please enter a positive number"
64
+ "item-delivery-type": {
65
+ "label": "Delivery type",
66
+ "option_shipped": "Shipped using live rates",
67
+ "option_flat_rate": "Shipped using a flat rate",
68
+ "option_downloaded": "Downloaded by the customer",
69
+ "option_pickup": "Picked up by the customer",
70
+ "option_notshipped": "Not shipped",
71
+ "placeholder": "Select...",
72
+ "helper_text": "",
73
+ "v8n_required": "Please select a delivery type"
74
+ },
75
+ "max-downloads-per-customer": {
76
+ "label": "Max downloads",
77
+ "placeholder": "3",
78
+ "helper_text": "",
79
+ "v8n_required": "This field is required",
80
+ "v8n_negative": "Please enter a positive number"
81
+ },
82
+ "max-downloads-time-period": {
83
+ "label": "Access duration (hrs)",
84
+ "placeholder": "24",
85
+ "helper_text": "",
86
+ "v8n_required": "This field is required",
87
+ "v8n_negative": "Please enter a positive number"
88
+ },
89
+ "shipping-flat-rate": {
90
+ "label": "Shipping rate",
91
+ "placeholder": "0",
92
+ "helper_text": "",
93
+ "v8n_required": "This field is required",
94
+ "v8n_negative": "Please enter a positive number"
95
+ },
96
+ "shipping-flat-rate-type": {
97
+ "label": "Flat rate applies",
98
+ "placeholder": "Select...",
99
+ "option_per_order": "Per order",
100
+ "option_per_shipment": "Per shipment",
101
+ "helper_text": "",
102
+ "v8n_required": "Please select a value"
103
+ },
104
+ "customs-value": {
105
+ "label": "Customs value",
106
+ "placeholder": "0",
107
+ "helper_text": "Enter a dollar amount here for the declared customs value for international shipments. If you leave this blank, the sale price of the item will be used.",
108
+ "v8n_negative": "Please enter a positive number"
109
+ },
110
+ "default-weight": {
111
+ "label": "Default weight",
112
+ "placeholder": "1",
113
+ "helper_text": "",
114
+ "v8n_required": "This field is required",
115
+ "v8n_negative": "Please enter a positive number"
116
+ },
117
+ "default-weight-unit": {
118
+ "label": "Default weight unit",
119
+ "placeholder": "Select...",
120
+ "option_kgs": "KG",
121
+ "option_lbs": "LG",
122
+ "helper_text": "",
123
+ "v8n_required": "Please select a unit"
124
+ },
125
+ "default-length-unit": {
126
+ "label": "Default length unit",
127
+ "placeholder": "Select...",
128
+ "option_cm": "CM",
129
+ "option_in": "IN",
130
+ "helper_text": "",
131
+ "v8n_required": "Please select a unit"
132
+ }
150
133
  },
151
- "handling-fee-percentage": {
152
- "label": "Percentage of price",
153
- "placeholder": "0",
134
+ "handling-and-discount": {
135
+ "label": "Handling Fees and Discounts",
154
136
  "helper_text": "",
155
- "v8n_required": "This field is required",
156
- "v8n_negative": "Please enter a positive number"
157
- },
158
- "discount-name": {
159
- "label": "Discount",
160
- "placeholder": "Name your discount to open the builder",
161
- "helper_text": ""
162
- },
163
- "discount-builder": {
164
- "tier": "Tier",
165
- "tier_by": "by",
166
- "tier_if": "if",
167
- "tier_allunits": "price of each item",
168
- "tier_incremental": "price of additional items",
169
- "tier_repeat": "price of next item",
170
- "tier_single": "order total",
171
- "tier_then": "then",
172
- "quantity": "quantity",
173
- "total": "total",
174
- "reduce": "reduce",
175
- "increase": "increase"
176
- },
177
- "admin-email-template-uri": {
178
- "label": "Message to admin",
179
- "placeholder": "None (don't send)",
180
- "helper_text": ""
137
+ "handling-fee-type": {
138
+ "label": "Handling fee type",
139
+ "option_none": "No handling fee",
140
+ "option_flat_per_order": "Flat fee per shipment",
141
+ "option_flat_per_item": "Flat fee per product",
142
+ "option_flat_percent": "Flat fee per shipment + % of price",
143
+ "option_flat_percent_with_minimum": "Flat fee per shipment or % of price, whichever is greater",
144
+ "placeholder": "Select...",
145
+ "helper_text": "",
146
+ "v8n_required": "Please select a value"
147
+ },
148
+ "handling-fee": {
149
+ "label": "Handling fee amount",
150
+ "placeholder": "0",
151
+ "helper_text": "",
152
+ "v8n_required": "This field is required",
153
+ "v8n_negative": "Please enter a positive number"
154
+ },
155
+ "handling-fee-minimum": {
156
+ "label": "Minimum fee",
157
+ "placeholder": "0",
158
+ "helper_text": "",
159
+ "v8n_required": "This field is required",
160
+ "v8n_negative": "Please enter a positive number"
161
+ },
162
+ "handling-fee-percentage": {
163
+ "label": "Percentage of price",
164
+ "placeholder": "0",
165
+ "helper_text": "",
166
+ "v8n_required": "This field is required",
167
+ "v8n_negative": "Please enter a positive number"
168
+ },
169
+ "discount-name": {
170
+ "label": "Discount",
171
+ "placeholder": "None",
172
+ "helper_text": "Enter a name for the discount to open the discount builder."
173
+ },
174
+ "discount-builder": {
175
+ "tier": "Tier",
176
+ "tier_by": "by",
177
+ "tier_if": "if",
178
+ "tier_allunits": "price of each item",
179
+ "tier_incremental": "price of additional items",
180
+ "tier_repeat": "price of next item",
181
+ "tier_single": "order total",
182
+ "tier_then": "then",
183
+ "quantity": "quantity",
184
+ "total": "total",
185
+ "reduce": "reduce",
186
+ "increase": "increase"
187
+ }
181
188
  },
182
- "admin-email": {
183
- "label": "Send to",
184
- "placeholder": "admin@example.com",
189
+ "emails": {
190
+ "label": "Emails",
185
191
  "helper_text": "",
186
- "v8n_required": "Please enter an email"
187
- },
188
- "customer-email-template-uri": {
189
- "label": "Message to customer",
190
- "placeholder": "None (don't send)",
191
- "helper_text": ""
192
- },
193
- "gift-recipient-email-template-uri": {
194
- "label": "Message to gift recipient",
195
- "placeholder": "None (don't send)",
196
- "helper_text": ""
192
+ "wip_message": "We are making changes to our API to support setting email messages for admin and customers from the category. For now, please use the legacy Foxy administration to make changes to category-specific emails for admins and customers.",
193
+ "gift-recipient-email-template-uri": {
194
+ "label": "Message to gift recipient",
195
+ "helper_text": "",
196
+ "value": "{{ resource.description }}",
197
+ "value_busy": "Loading...",
198
+ "value_fail": "Failed to load",
199
+ "placeholder": "None",
200
+ "dialog": {
201
+ "cancel": "Cancel",
202
+ "close": "Close",
203
+ "header": "Select an email template",
204
+ "selection": {
205
+ "label": "Email templates",
206
+ "helper_text": "",
207
+ "pagination": {
208
+ "search_button_text": "Search",
209
+ "first": "First",
210
+ "last": "Last",
211
+ "next": "Next",
212
+ "pagination": "{{from}}-{{to}} out of {{total}}",
213
+ "previous": "Previous",
214
+ "card": {
215
+ "type_custom_url": "Custom (URL)",
216
+ "type_custom_text": "Custom (Text)",
217
+ "type_custom_html": "Custom (HTML)",
218
+ "type_mixed": "Mixed",
219
+ "type_default": "Default",
220
+ "spinner": {
221
+ "loading_busy": "Loading",
222
+ "loading_empty": "No email templates found",
223
+ "loading_error": "Unknown error"
224
+ }
225
+ }
226
+ }
227
+ }
228
+ }
229
+ }
197
230
  },
198
231
  "timestamps": {
199
232
  "date_created": "Created on",
@@ -12,8 +12,11 @@ export declare class InternalNumberControl extends InternalEditableControl {
12
12
  layout: 'summary-item' | 'standalone' | null;
13
13
  prefix: string | null;
14
14
  suffix: string | null;
15
+ step: number | null;
15
16
  min: number | null;
16
17
  max: number | null;
18
+ private __isErrorVisible;
19
+ reportValidity(): void;
17
20
  renderControl(): TemplateResult;
18
21
  private __renderSummaryItemLayout;
19
22
  }
@@ -14,8 +14,10 @@ export class InternalNumberControl extends InternalEditableControl {
14
14
  this.layout = null;
15
15
  this.prefix = null;
16
16
  this.suffix = null;
17
+ this.step = null;
17
18
  this.min = null;
18
19
  this.max = null;
20
+ this.__isErrorVisible = false;
19
21
  }
20
22
  static get properties() {
21
23
  return {
@@ -23,8 +25,10 @@ export class InternalNumberControl extends InternalEditableControl {
23
25
  layout: {},
24
26
  prefix: {},
25
27
  suffix: {},
28
+ step: { type: Number },
26
29
  min: { type: Number },
27
30
  max: { type: Number },
31
+ __isErrorVisible: { attribute: false },
28
32
  };
29
33
  }
30
34
  static get styles() {
@@ -50,8 +54,12 @@ input{
50
54
  `,
51
55
  ];
52
56
  }
57
+ reportValidity() {
58
+ this.__isErrorVisible = true;
59
+ super.reportValidity();
60
+ }
53
61
  renderControl() {
54
- var _a, _b;
62
+ var _a, _b, _c;
55
63
  if (this.layout === 'summary-item')
56
64
  return this.__renderSummaryItemLayout();
57
65
  return html `
@@ -61,8 +69,9 @@ input{
61
69
  helper-text=${this.helperText}
62
70
  label=${this.label}
63
71
  class="w-full"
64
- min=${ifDefined((_a = this.min) !== null && _a !== void 0 ? _a : undefined)}
65
- max=${ifDefined((_b = this.max) !== null && _b !== void 0 ? _b : undefined)}
72
+ step=${ifDefined((_a = this.step) !== null && _a !== void 0 ? _a : undefined)}
73
+ min=${ifDefined((_b = this.min) !== null && _b !== void 0 ? _b : undefined)}
74
+ max=${ifDefined((_c = this.max) !== null && _c !== void 0 ? _c : undefined)}
66
75
  ?disabled=${this.disabled}
67
76
  ?readonly=${this.readonly}
68
77
  .checkValidity=${this._checkValidity}
@@ -80,7 +89,7 @@ input{
80
89
  `;
81
90
  }
82
91
  __renderSummaryItemLayout() {
83
- var _a, _b;
92
+ var _a, _b, _c;
84
93
  const sharedTextStyles = {
85
94
  'text-disabled': this.disabled,
86
95
  'text-tertiary': !this.readonly && !this.disabled,
@@ -91,7 +100,10 @@ input{
91
100
  <div>
92
101
  <label class="text-m text-body" for="input">${this.label}</label>
93
102
  <p class="text-xs text-secondary">${this.helperText}</p>
94
- <p class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
103
+ <p
104
+ class="text-xs text-error"
105
+ ?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}
106
+ >
95
107
  ${this._errorMessage}
96
108
  </p>
97
109
  </div>
@@ -112,16 +124,19 @@ input{
112
124
  'font-medium': !this.readonly,
113
125
  })}
114
126
  type="number"
115
- min=${ifDefined((_a = this.min) !== null && _a !== void 0 ? _a : void 0)}
116
- max=${ifDefined((_b = this.max) !== null && _b !== void 0 ? _b : void 0)}
127
+ step=${ifDefined((_a = this.step) !== null && _a !== void 0 ? _a : void 0)}
128
+ min=${ifDefined((_b = this.min) !== null && _b !== void 0 ? _b : void 0)}
129
+ max=${ifDefined((_c = this.max) !== null && _c !== void 0 ? _c : void 0)}
117
130
  id="input"
118
131
  .value=${this._value === 0 ? '' : this._value}
119
132
  ?disabled=${this.disabled}
120
133
  ?readonly=${this.readonly}
121
134
  @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
135
+ @blur=${() => (this.__isErrorVisible = true)}
122
136
  @input=${(evt) => {
123
137
  evt.stopPropagation();
124
- this._value = evt.target.value;
138
+ const newValue = parseFloat(evt.target.value);
139
+ this._value = isNaN(newValue) ? 0 : newValue;
125
140
  }}
126
141
  />
127
142
 
@@ -1 +1 @@
1
- {"version":3,"file":"InternalNumberControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalNumberControl/InternalNumberControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { NumberFieldElement } from '@vaadin/vaadin-text-field/vaadin-number-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\n\n/**\n * Internal control displaying a basic number box.\n *\n * @since 1.17.0\n * @element foxy-internal-number-control\n */\nexport class InternalNumberControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n layout: {},\n prefix: {},\n suffix: {},\n min: { type: Number },\n max: { type: Number },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n ...super.styles,\n css`\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n display: none !important;\n pointer-events: none;\n position: absolute;\n right: 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 layout: 'summary-item' | 'standalone' | null = null;\n\n prefix: string | null = null;\n\n suffix: string | null = null;\n\n min: number | null = null;\n\n max: number | null = null;\n\n renderControl(): TemplateResult {\n if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n return html`\n <vaadin-number-field\n error-message=${ifDefined(this._errorMessage)}\n placeholder=${this.placeholder}\n helper-text=${this.helperText}\n label=${this.label}\n class=\"w-full\"\n min=${ifDefined(this.min ?? undefined)}\n max=${ifDefined(this.max ?? undefined)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n .checkValidity=${this._checkValidity}\n .value=${this._value}\n clear-button-visible\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @change=${(evt: CustomEvent) => {\n const field = evt.currentTarget as NumberFieldElement;\n this._value = parseFloat(field.value);\n }}\n >\n ${this.prefix ? html`<div slot=\"prefix\">${this.prefix}</div>` : ''}\n ${this.suffix ? html`<div class=\"pr-s font-medium\" slot=\"suffix\">${this.suffix}</div>` : ''}\n </vaadin-number-field>\n `;\n }\n\n private __renderSummaryItemLayout() {\n const sharedTextStyles = {\n 'text-disabled': this.disabled,\n 'text-tertiary': !this.readonly && !this.disabled,\n 'font-medium': !this.readonly,\n };\n return html`\n <div class=\"flex items-start gap-m leading-xs\">\n <div>\n <label class=\"text-m text-body\" for=\"input\">${this.label}</label>\n <p class=\"text-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 <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>\n ${this.prefix}\n </span>\n\n <input\n placeholder=${this.placeholder}\n style=\"min-width: 10ch\"\n class=${classMap({\n 'w-full appearance-none text-right bg-transparent transition-colors': true,\n 'text-m rounded-s focus-outline-none': true,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'font-medium': !this.readonly,\n })}\n type=\"number\"\n min=${ifDefined(this.min ?? void 0)}\n max=${ifDefined(this.max ?? void 0)}\n id=\"input\"\n .value=${this._value === 0 ? '' : this._value}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @input=${(evt: Event) => {\n evt.stopPropagation();\n this._value = (evt.target as HTMLInputElement).value;\n }}\n />\n\n <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>\n ${this.suffix}\n </span>\n\n <button\n aria-label=${this.t('clear')}\n class=${classMap({\n 'flex-shrink-0 rounded-full transition-colors': true,\n 'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n 'cursor-pointer text-tertiary hover-text-body': !this.disabled,\n 'cursor-default text-disabled': this.disabled,\n })}\n style=\"width: 1em; height: 1em;\"\n ?disabled=${this.disabled}\n ?hidden=${this.readonly || !this._value}\n @click=${() => {\n this._value = 0;\n this.dispatchEvent(new CustomEvent('clear'));\n }}\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em\"><path d=\"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" /></svg>`}\n </button>\n </div>\n </div>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"InternalNumberControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalNumberControl/InternalNumberControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { NumberFieldElement } from '@vaadin/vaadin-text-field/vaadin-number-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\n\n/**\n * Internal control displaying a basic number box.\n *\n * @since 1.17.0\n * @element foxy-internal-number-control\n */\nexport class InternalNumberControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n layout: {},\n prefix: {},\n suffix: {},\n step: { type: Number },\n min: { type: Number },\n max: { type: Number },\n __isErrorVisible: { attribute: false },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n ...super.styles,\n css`\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n display: none !important;\n pointer-events: none;\n position: absolute;\n right: 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 layout: 'summary-item' | 'standalone' | null = null;\n\n prefix: string | null = null;\n\n suffix: string | null = null;\n\n step: number | null = null;\n\n min: number | null = null;\n\n max: number | null = null;\n\n private __isErrorVisible = false;\n\n reportValidity(): void {\n this.__isErrorVisible = true;\n super.reportValidity();\n }\n\n renderControl(): TemplateResult {\n if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n return html`\n <vaadin-number-field\n error-message=${ifDefined(this._errorMessage)}\n placeholder=${this.placeholder}\n helper-text=${this.helperText}\n label=${this.label}\n class=\"w-full\"\n step=${ifDefined(this.step ?? undefined)}\n min=${ifDefined(this.min ?? undefined)}\n max=${ifDefined(this.max ?? undefined)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n .checkValidity=${this._checkValidity}\n .value=${this._value}\n clear-button-visible\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @change=${(evt: CustomEvent) => {\n const field = evt.currentTarget as NumberFieldElement;\n this._value = parseFloat(field.value);\n }}\n >\n ${this.prefix ? html`<div slot=\"prefix\">${this.prefix}</div>` : ''}\n ${this.suffix ? html`<div class=\"pr-s font-medium\" slot=\"suffix\">${this.suffix}</div>` : ''}\n </vaadin-number-field>\n `;\n }\n\n private __renderSummaryItemLayout() {\n const sharedTextStyles = {\n 'text-disabled': this.disabled,\n 'text-tertiary': !this.readonly && !this.disabled,\n 'font-medium': !this.readonly,\n };\n return html`\n <div class=\"flex items-start gap-m leading-xs\">\n <div>\n <label class=\"text-m text-body\" for=\"input\">${this.label}</label>\n <p class=\"text-xs text-secondary\">${this.helperText}</p>\n <p\n class=\"text-xs text-error\"\n ?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}\n >\n ${this._errorMessage}\n </p>\n </div>\n\n <div class=\"flex-1 flex items-center gap-xs\">\n <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>\n ${this.prefix}\n </span>\n\n <input\n placeholder=${this.placeholder}\n style=\"min-width: 10ch\"\n class=${classMap({\n 'w-full appearance-none text-right bg-transparent transition-colors': true,\n 'text-m rounded-s focus-outline-none': true,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'font-medium': !this.readonly,\n })}\n type=\"number\"\n step=${ifDefined(this.step ?? void 0)}\n min=${ifDefined(this.min ?? void 0)}\n max=${ifDefined(this.max ?? void 0)}\n id=\"input\"\n .value=${this._value === 0 ? '' : this._value}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @blur=${() => (this.__isErrorVisible = true)}\n @input=${(evt: Event) => {\n evt.stopPropagation();\n const newValue = parseFloat((evt.target as HTMLInputElement).value);\n this._value = isNaN(newValue) ? 0 : newValue;\n }}\n />\n\n <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>\n ${this.suffix}\n </span>\n\n <button\n aria-label=${this.t('clear')}\n class=${classMap({\n 'flex-shrink-0 rounded-full transition-colors': true,\n 'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n 'cursor-pointer text-tertiary hover-text-body': !this.disabled,\n 'cursor-default text-disabled': this.disabled,\n })}\n style=\"width: 1em; height: 1em;\"\n ?disabled=${this.disabled}\n ?hidden=${this.readonly || !this._value}\n @click=${() => {\n this._value = 0;\n this.dispatchEvent(new CustomEvent('clear'));\n }}\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em\"><path d=\"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" /></svg>`}\n </button>\n </div>\n </div>\n `;\n }\n}\n"]}
@@ -15,7 +15,9 @@ export declare class InternalSelectControl extends InternalEditableControl {
15
15
  layout: 'summary-item' | 'standalone' | null;
16
16
  /** Same as the "theme" attribute/property of `vaadin-combo-box`. */
17
17
  theme: string | null;
18
+ private __isErrorVisible;
18
19
  renderControl(): TemplateResult;
20
+ reportValidity(): void;
19
21
  updated(changes: Map<keyof this, unknown>): void;
20
22
  private __renderSummaryItemLayout;
21
23
  }
@@ -17,6 +17,7 @@ export class InternalSelectControl extends InternalEditableControl {
17
17
  this.layout = null;
18
18
  /** Same as the "theme" attribute/property of `vaadin-combo-box`. */
19
19
  this.theme = null;
20
+ this.__isErrorVisible = false;
20
21
  }
21
22
  static get properties() {
22
23
  return {
@@ -24,6 +25,7 @@ export class InternalSelectControl extends InternalEditableControl {
24
25
  options: { type: Array },
25
26
  layout: {},
26
27
  theme: { type: String },
28
+ __isErrorVisible: { attribute: false },
27
29
  };
28
30
  }
29
31
  renderControl() {
@@ -60,6 +62,10 @@ export class InternalSelectControl extends InternalEditableControl {
60
62
  </vaadin-combo-box>
61
63
  `;
62
64
  }
65
+ reportValidity() {
66
+ this.__isErrorVisible = true;
67
+ super.reportValidity();
68
+ }
63
69
  updated(changes) {
64
70
  super.updated(changes);
65
71
  const comboBox = this.renderRoot.querySelector('vaadin-combo-box');
@@ -73,7 +79,10 @@ export class InternalSelectControl extends InternalEditableControl {
73
79
  <div class="flex-1">
74
80
  <label class="text-m text-body" for="select">${this.label}</label>
75
81
  <p class="text-xs text-secondary">${this.helperText}</p>
76
- <p class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
82
+ <p
83
+ class="text-xs text-error"
84
+ ?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}
85
+ >
77
86
  ${this._errorMessage}
78
87
  </p>
79
88
  </div>
@@ -109,6 +118,7 @@ export class InternalSelectControl extends InternalEditableControl {
109
118
  id="select"
110
119
  ?disabled=${this.disabled}
111
120
  ?hidden=${this.readonly}
121
+ @blur=${() => (this.__isErrorVisible = true)}
112
122
  @change=${(evt) => {
113
123
  evt.stopPropagation();
114
124
  this._value = evt.target.value;
@@ -1 +1 @@
1
- {"version":3,"file":"InternalSelectControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSelectControl/InternalSelectControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,uBAAuB;IAAlE;;QAUE,uCAAuC;QACvC,YAAO,GAAa,EAAE,CAAC;QAEvB,kGAAkG;QAClG,WAAM,GAAyC,IAAI,CAAC;QAEpD,oEAAoE;QACpE,UAAK,GAAkB,IAAI,CAAC;IA4G9B,CAAC;IA5HC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAWD,aAAa;;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,cAAc;YAAE,OAAO,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAE5E,OAAO,IAAI,CAAA;;;;wBAIS,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;;sBAE/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;gBAEV,SAAS,OAAC,IAAI,CAAC,KAAK,mCAAI,SAAS,CAAC;oBAC9B,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;;yBAER,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACnC,KAAK,EAAE,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;YACjE,KAAK,EAAE,MAAM,CAAC,KAAK;SACpB,CAAC,CAAC;iBACM,IAAI,CAAC,MAAM;kBACV,CAAC,GAAgB,EAAE,EAAE;YAC7B,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAgC,CAAC;YACtD,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC;YAC7B,QAAQ,CAAC,QAAQ,EAAE,CAAC;QACtB,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAiC;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACnE,IAAI,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM;YAAE,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,MAAgB,CAAC;IACzF,CAAC;IAEO,yBAAyB;QAC/B,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC;QAElE,OAAO,IAAI,CAAA;;;yDAG0C,IAAI,CAAC,KAAK;8CACrB,IAAI,CAAC,UAAU;kDACX,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;cAClE,IAAI,CAAC,aAAa;;;;;kBAKd,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;;;;gBAII,SAAS;YACT,CAAC,CAAC,OAAO,IAAI,SAAS;gBACpB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;gBACzB,CAAC,CAAC,SAAS,CAAC,QAAQ;YACtB,CAAC,CAAC,IAAI,CAAC,WAAW;;cAEpB,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,GAAG,CAAA,gbAAgb;;;;oBAI/a,QAAQ,CAAC;YACf,4BAA4B,EAAE,IAAI;YAClC,gBAAgB,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC;;wBAEU,IAAI,CAAC,QAAQ;sBACf,IAAI,CAAC,QAAQ;sBACb,CAAC,GAAU,EAAE,EAAE;YACvB,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,IAAI,CAAC,MAAM,GAAI,GAAG,CAAC,MAA4B,CAAC,KAAK,CAAC;QACxD,CAAC;;yCAE4B,CAAC,SAAS,oBAAoB,IAAI,CAAC,WAAW;cACzE,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;;4BAEQ,MAAM,CAAC,KAAK;gCACR,SAAS,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM;;sBAEnD,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;;iBAE/D,CACJ;;;;KAIR,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { ComboBoxElement } from '@vaadin/vaadin-combo-box';\nimport type { Option } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\n\n/**\n * Internal control wrapper for select elements.\n *\n * @since 1.21.0\n * @element foxy-internal-select-control\n */\nexport class InternalSelectControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n options: { type: Array },\n layout: {},\n theme: { type: String },\n };\n }\n\n /** List of radio buttons to render. */\n options: Option[] = [];\n\n /** Standalone renders Vaadin Combo Box. Summary item renders a special UI for summary control. */\n layout: 'summary-item' | 'standalone' | null = null;\n\n /** Same as the \"theme\" attribute/property of `vaadin-combo-box`. */\n theme: string | null = null;\n\n renderControl(): TemplateResult {\n if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n return html`\n <vaadin-combo-box\n item-value-path=\"value\"\n item-label-path=\"label\"\n error-message=${ifDefined(this._errorMessage)}\n item-id-path=\"value\"\n helper-text=${this.helperText}\n placeholder=${this.placeholder}\n label=${this.label}\n class=\"w-full\"\n theme=${ifDefined(this.theme ?? undefined)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n clear-button-visible\n .checkValidity=${this._checkValidity}\n .items=${this.options.map(option => ({\n label: 'label' in option ? this.t(option.label) : option.rawLabel,\n value: option.value,\n }))}\n .value=${this._value}\n @change=${(evt: CustomEvent) => {\n evt.stopPropagation();\n const comboBox = evt.currentTarget as ComboBoxElement;\n this._value = comboBox.value;\n comboBox.validate();\n }}\n >\n </vaadin-combo-box>\n `;\n }\n\n updated(changes: Map<keyof this, unknown>): void {\n super.updated(changes);\n const comboBox = this.renderRoot.querySelector('vaadin-combo-box');\n if (comboBox && comboBox.value !== this._value) comboBox.value = this._value as string;\n }\n\n private __renderSummaryItemLayout() {\n const selection = this.options.find(v => v.value === this._value);\n\n return html`\n <div class=\"flex items-start leading-xs\">\n <div class=\"flex-1\">\n <label class=\"text-m text-body\" for=\"select\">${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\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>\n ${selection\n ? 'label' in selection\n ? this.t(selection.label)\n : selection.rawLabel\n : this.placeholder}\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 this._value = (evt.target as HTMLSelectElement).value;\n }}\n >\n <option value=\"\" ?selected=${!selection} disabled hidden>${this.placeholder}</option>\n ${this.options.map(\n option =>\n html`\n <option\n value=${option.value}\n ?selected=${selection && option.value === this._value}\n >\n ${'label' in option ? this.t(option.label) : option.rawLabel}\n </option>\n `\n )}\n </select>\n </div>\n </div>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"InternalSelectControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSelectControl/InternalSelectControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,uBAAuB;IAAlE;;QAWE,uCAAuC;QACvC,YAAO,GAAa,EAAE,CAAC;QAEvB,kGAAkG;QAClG,WAAM,GAAyC,IAAI,CAAC;QAEpD,oEAAoE;QACpE,UAAK,GAAkB,IAAI,CAAC;QAEpB,qBAAgB,GAAG,KAAK,CAAC;IAqHnC,CAAC;IAxIC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,gBAAgB,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SACvC,CAAC;IACJ,CAAC;IAaD,aAAa;;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,cAAc;YAAE,OAAO,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAE5E,OAAO,IAAI,CAAA;;;;wBAIS,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;;sBAE/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;gBAEV,SAAS,OAAC,IAAI,CAAC,KAAK,mCAAI,SAAS,CAAC;oBAC9B,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;;yBAER,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACnC,KAAK,EAAE,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;YACjE,KAAK,EAAE,MAAM,CAAC,KAAK;SACpB,CAAC,CAAC;iBACM,IAAI,CAAC,MAAM;kBACV,CAAC,GAAgB,EAAE,EAAE;YAC7B,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAgC,CAAC;YACtD,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC;YAC7B,QAAQ,CAAC,QAAQ,EAAE,CAAC;QACtB,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC;IAED,OAAO,CAAC,OAAiC;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACnE,IAAI,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM;YAAE,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,MAAgB,CAAC;IACzF,CAAC;IAEO,yBAAyB;QAC/B,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC;QAElE,OAAO,IAAI,CAAA;;;yDAG0C,IAAI,CAAC,KAAK;8CACrB,IAAI,CAAC,UAAU;;;sBAGvC,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;;cAEhE,IAAI,CAAC,aAAa;;;;;kBAKd,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;;;;gBAII,SAAS;YACT,CAAC,CAAC,OAAO,IAAI,SAAS;gBACpB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;gBACzB,CAAC,CAAC,SAAS,CAAC,QAAQ;YACtB,CAAC,CAAC,IAAI,CAAC,WAAW;;cAEpB,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,GAAG,CAAA,gbAAgb;;;;oBAI/a,QAAQ,CAAC;YACf,4BAA4B,EAAE,IAAI;YAClC,gBAAgB,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC;;wBAEU,IAAI,CAAC,QAAQ;sBACf,IAAI,CAAC,QAAQ;oBACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;sBAClC,CAAC,GAAU,EAAE,EAAE;YACvB,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,IAAI,CAAC,MAAM,GAAI,GAAG,CAAC,MAA4B,CAAC,KAAK,CAAC;QACxD,CAAC;;yCAE4B,CAAC,SAAS,oBAAoB,IAAI,CAAC,WAAW;cACzE,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;;4BAEQ,MAAM,CAAC,KAAK;gCACR,SAAS,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM;;sBAEnD,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;;iBAE/D,CACJ;;;;KAIR,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { ComboBoxElement } from '@vaadin/vaadin-combo-box';\nimport type { Option } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\n\n/**\n * Internal control wrapper for select elements.\n *\n * @since 1.21.0\n * @element foxy-internal-select-control\n */\nexport class InternalSelectControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n options: { type: Array },\n layout: {},\n theme: { type: String },\n __isErrorVisible: { attribute: false },\n };\n }\n\n /** List of radio buttons to render. */\n options: Option[] = [];\n\n /** Standalone renders Vaadin Combo Box. Summary item renders a special UI for summary control. */\n layout: 'summary-item' | 'standalone' | null = null;\n\n /** Same as the \"theme\" attribute/property of `vaadin-combo-box`. */\n theme: string | null = null;\n\n private __isErrorVisible = false;\n\n renderControl(): TemplateResult {\n if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n return html`\n <vaadin-combo-box\n item-value-path=\"value\"\n item-label-path=\"label\"\n error-message=${ifDefined(this._errorMessage)}\n item-id-path=\"value\"\n helper-text=${this.helperText}\n placeholder=${this.placeholder}\n label=${this.label}\n class=\"w-full\"\n theme=${ifDefined(this.theme ?? undefined)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n clear-button-visible\n .checkValidity=${this._checkValidity}\n .items=${this.options.map(option => ({\n label: 'label' in option ? this.t(option.label) : option.rawLabel,\n value: option.value,\n }))}\n .value=${this._value}\n @change=${(evt: CustomEvent) => {\n evt.stopPropagation();\n const comboBox = evt.currentTarget as ComboBoxElement;\n this._value = comboBox.value;\n comboBox.validate();\n }}\n >\n </vaadin-combo-box>\n `;\n }\n\n reportValidity(): void {\n this.__isErrorVisible = true;\n super.reportValidity();\n }\n\n updated(changes: Map<keyof this, unknown>): void {\n super.updated(changes);\n const comboBox = this.renderRoot.querySelector('vaadin-combo-box');\n if (comboBox && comboBox.value !== this._value) comboBox.value = this._value as string;\n }\n\n private __renderSummaryItemLayout() {\n const selection = this.options.find(v => v.value === this._value);\n\n return html`\n <div class=\"flex items-start leading-xs\">\n <div class=\"flex-1\">\n <label class=\"text-m text-body\" for=\"select\">${this.label}</label>\n <p class=\"text-xs text-secondary\">${this.helperText}</p>\n <p\n class=\"text-xs text-error\"\n ?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}\n >\n ${this._errorMessage}\n </p>\n </div>\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>\n ${selection\n ? 'label' in selection\n ? this.t(selection.label)\n : selection.rawLabel\n : this.placeholder}\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 @blur=${() => (this.__isErrorVisible = true)}\n @change=${(evt: Event) => {\n evt.stopPropagation();\n this._value = (evt.target as HTMLSelectElement).value;\n }}\n >\n <option value=\"\" ?selected=${!selection} disabled hidden>${this.placeholder}</option>\n ${this.options.map(\n option =>\n html`\n <option\n value=${option.value}\n ?selected=${selection && option.value === this._value}\n >\n ${'label' in option ? this.t(option.label) : option.rawLabel}\n </option>\n `\n )}\n </select>\n </div>\n </div>\n `;\n }\n}\n"]}
@@ -12,6 +12,8 @@ export declare class InternalTextControl extends InternalEditableControl {
12
12
  layout: 'summary-item' | 'standalone' | null;
13
13
  prefix: string | null;
14
14
  suffix: string | null;
15
+ private __isErrorVisible;
16
+ reportValidity(): void;
15
17
  renderControl(): TemplateResult;
16
18
  protected get _value(): string;
17
19
  protected set _value(newValue: string);