@gurpinderjitsingh/recipe-ui 0.3.0 → 0.5.0
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.
- package/dist/cjs/app-modal_7.cjs.entry.js +104 -13
- package/dist/cjs/app-toast.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/recipe-ui.cjs.js +1 -1
- package/dist/collection/components/app-toast/app-toast.js +1 -1
- package/dist/collection/components/recipe-card/recipe-card.js +1 -1
- package/dist/collection/components/recipe-filter-bar/recipe-filter-bar.js +1 -1
- package/dist/collection/components/recipe-form/recipe-form.css +139 -17
- package/dist/collection/components/recipe-form/recipe-form.js +158 -11
- package/dist/collection/components/recipe-rating/recipe-rating.js +1 -1
- package/dist/collection/components/recipe-search-bar/recipe-search-bar.js +1 -1
- package/dist/components/app-toast.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/{p-vGdzhVB7.js → p-8_BMsNX-.js} +1 -1
- package/dist/components/{p-CWQoij-1.js → p-BUODh8vy.js} +1 -1
- package/dist/components/{p-Ckp6dPOc.js → p-CeTpiLnn.js} +1 -1
- package/dist/components/{p-CoCM6o6z.js → p-DnzGtyGi.js} +1 -1
- package/dist/components/p-HwvFQvUL.js +1 -0
- package/dist/components/{p-BIz6x-m7.js → p-Ux-pnuEm.js} +1 -1
- package/dist/components/recipe-card.js +1 -1
- package/dist/components/recipe-filter-bar.js +1 -1
- package/dist/components/recipe-form.js +1 -1
- package/dist/components/recipe-rating.js +1 -1
- package/dist/components/recipe-search-bar.js +1 -1
- package/dist/esm/app-modal_7.entry.js +104 -13
- package/dist/esm/app-toast.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/recipe-ui.js +1 -1
- package/dist/recipe-ui/p-5a28e09a.entry.js +1 -0
- package/dist/recipe-ui/{p-74151c7f.entry.js → p-8ed4bce8.entry.js} +1 -1
- package/dist/recipe-ui/recipe-ui.esm.js +1 -1
- package/dist/types/components/recipe-form/recipe-form.d.ts +14 -4
- package/dist/types/components.d.ts +26 -4
- package/package.json +1 -1
- package/dist/components/p-xcFZ4dcw.js +0 -1
- package/dist/recipe-ui/p-e912fdc5.entry.js +0 -1
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
|
+
const DEFAULT_CATEGORIES = [
|
|
3
|
+
'Beef', 'Breakfast', 'Chicken', 'Dessert', 'Goat', 'Lamb',
|
|
4
|
+
'Miscellaneous', 'Pasta', 'Pork', 'Seafood', 'Side', 'Starter',
|
|
5
|
+
'Vegan', 'Vegetarian', 'Other',
|
|
6
|
+
];
|
|
2
7
|
const DEFAULT_AREAS = [
|
|
3
8
|
'American', 'British', 'Chinese', 'Croatian', 'Dutch', 'Egyptian',
|
|
4
9
|
'Filipino', 'French', 'Greek', 'Indian', 'Irish', 'Italian', 'Jamaican',
|
|
@@ -8,12 +13,16 @@ const DEFAULT_AREAS = [
|
|
|
8
13
|
];
|
|
9
14
|
export class RecipeForm {
|
|
10
15
|
constructor() {
|
|
11
|
-
|
|
12
|
-
this.
|
|
16
|
+
this.categories = DEFAULT_CATEGORIES;
|
|
17
|
+
this.extraCategories = [];
|
|
18
|
+
this.areas = DEFAULT_AREAS;
|
|
19
|
+
this.extraAreas = [];
|
|
13
20
|
this.title = '';
|
|
14
21
|
this.image = '';
|
|
15
22
|
this.category = '';
|
|
16
|
-
this.
|
|
23
|
+
this.customCategory = '';
|
|
24
|
+
this.area = '';
|
|
25
|
+
this.customArea = '';
|
|
17
26
|
this.ingredients = [''];
|
|
18
27
|
this.instructions = '';
|
|
19
28
|
this.errors = {};
|
|
@@ -21,12 +30,14 @@ export class RecipeForm {
|
|
|
21
30
|
e.preventDefault();
|
|
22
31
|
if (!this.validate())
|
|
23
32
|
return;
|
|
33
|
+
const resolvedCategory = this.category === 'Other' ? this.customCategory.trim() : this.category;
|
|
34
|
+
const resolvedArea = this.area === 'Other' ? this.customArea.trim() : this.area;
|
|
24
35
|
const data = {
|
|
25
36
|
id: this.initialData?.id,
|
|
26
37
|
title: this.title.trim(),
|
|
27
38
|
image: this.image.trim(),
|
|
28
|
-
category:
|
|
29
|
-
|
|
39
|
+
category: resolvedCategory,
|
|
40
|
+
area: resolvedArea,
|
|
30
41
|
ingredients: this.ingredients.map((i) => i.trim()).filter(Boolean),
|
|
31
42
|
instructions: this.instructions.trim(),
|
|
32
43
|
};
|
|
@@ -37,6 +48,9 @@ export class RecipeForm {
|
|
|
37
48
|
};
|
|
38
49
|
this.removeIngredient = (index) => {
|
|
39
50
|
this.ingredients = this.ingredients.filter((_, i) => i !== index);
|
|
51
|
+
const next = this.ingredients.filter((_, i) => i !== index);
|
|
52
|
+
this.ingredients = next;
|
|
53
|
+
this.clearErrorIf('ingredients', next.some((i) => i.trim()));
|
|
40
54
|
};
|
|
41
55
|
}
|
|
42
56
|
componentWillLoad() {
|
|
@@ -45,6 +59,31 @@ export class RecipeForm {
|
|
|
45
59
|
onInitialDataChange() {
|
|
46
60
|
this.loadInitialData();
|
|
47
61
|
}
|
|
62
|
+
mergeList(base, extra) {
|
|
63
|
+
const withoutOther = base.filter((a) => a !== 'Other');
|
|
64
|
+
const merged = [...withoutOther];
|
|
65
|
+
for (const e of extra) {
|
|
66
|
+
if (e && !merged.includes(e))
|
|
67
|
+
merged.push(e);
|
|
68
|
+
}
|
|
69
|
+
merged.push('Other');
|
|
70
|
+
return merged;
|
|
71
|
+
}
|
|
72
|
+
get fullCategoryList() {
|
|
73
|
+
return this.mergeList(this.categories, this.extraCategories);
|
|
74
|
+
}
|
|
75
|
+
get fullAreaList() {
|
|
76
|
+
return this.mergeList(this.areas, this.extraAreas);
|
|
77
|
+
}
|
|
78
|
+
/** Removes a field's error as soon as it becomes valid, without waiting
|
|
79
|
+
* for the next full submit — called from each field's input handler. */
|
|
80
|
+
clearErrorIf(key, isNowValid) {
|
|
81
|
+
if (isNowValid && this.errors[key]) {
|
|
82
|
+
const next = { ...this.errors };
|
|
83
|
+
delete next[key];
|
|
84
|
+
this.errors = next;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
48
87
|
loadInitialData() {
|
|
49
88
|
let data;
|
|
50
89
|
if (typeof this.initialData === 'string' && this.initialData) {
|
|
@@ -61,10 +100,26 @@ export class RecipeForm {
|
|
|
61
100
|
if (data) {
|
|
62
101
|
this.title = data.title ?? '';
|
|
63
102
|
this.image = data.image ?? '';
|
|
64
|
-
this.category = data.category ?? '';
|
|
65
|
-
this.cuisine = data.cuisine ?? '';
|
|
66
103
|
this.ingredients = data.ingredients?.length ? [...data.ingredients] : [''];
|
|
67
104
|
this.instructions = data.instructions ?? '';
|
|
105
|
+
const knownCategories = this.fullCategoryList.filter((a) => a !== 'Other');
|
|
106
|
+
if (data.category && !knownCategories.includes(data.category)) {
|
|
107
|
+
this.category = 'Other';
|
|
108
|
+
this.customCategory = data.category;
|
|
109
|
+
}
|
|
110
|
+
else {
|
|
111
|
+
this.category = data.category ?? '';
|
|
112
|
+
this.customCategory = '';
|
|
113
|
+
}
|
|
114
|
+
const knownAreas = this.fullAreaList.filter((a) => a !== 'Other');
|
|
115
|
+
if (data.area && !knownAreas.includes(data.area)) {
|
|
116
|
+
this.area = 'Other';
|
|
117
|
+
this.customArea = data.area;
|
|
118
|
+
}
|
|
119
|
+
else {
|
|
120
|
+
this.area = data.area ?? '';
|
|
121
|
+
this.customArea = '';
|
|
122
|
+
}
|
|
68
123
|
}
|
|
69
124
|
}
|
|
70
125
|
validate() {
|
|
@@ -76,6 +131,18 @@ export class RecipeForm {
|
|
|
76
131
|
errors.ingredients = 'Add at least one ingredient.';
|
|
77
132
|
if (!this.instructions.trim())
|
|
78
133
|
errors.instructions = 'Instructions are required.';
|
|
134
|
+
if (!this.category.trim()) {
|
|
135
|
+
errors.category = 'Category is required.';
|
|
136
|
+
}
|
|
137
|
+
else if (this.category === 'Other' && !this.customCategory.trim()) {
|
|
138
|
+
errors.customCategory = 'Enter a category name.';
|
|
139
|
+
}
|
|
140
|
+
if (!this.area.trim()) {
|
|
141
|
+
errors.area = 'Cuisine / Area is required.';
|
|
142
|
+
}
|
|
143
|
+
else if (this.area === 'Other' && !this.customArea.trim()) {
|
|
144
|
+
errors.customArea = 'Enter a cuisine name.';
|
|
145
|
+
}
|
|
79
146
|
this.errors = errors;
|
|
80
147
|
return Object.keys(errors).length === 0;
|
|
81
148
|
}
|
|
@@ -83,9 +150,33 @@ export class RecipeForm {
|
|
|
83
150
|
const next = [...this.ingredients];
|
|
84
151
|
next[index] = value;
|
|
85
152
|
this.ingredients = next;
|
|
153
|
+
this.clearErrorIf('ingredients', next.some((i) => i.trim()));
|
|
86
154
|
}
|
|
87
155
|
render() {
|
|
88
|
-
return (h("form", { key: '
|
|
156
|
+
return (h("form", { key: 'a6fd5f89975759b270bd41da834f364d11318033', onSubmit: this.onSubmit }, h("slot", { key: '263cc31f43b151d6c8c0a93d55adefd17a5ea293', name: "header" }), h("label", { key: '096dcfe6a821d4100f5a7988f4d993fb1808bb3e' }, "Title", h("input", { key: '36845960be21b66c2c0b54ae27203a6c778a1477', type: "text", value: this.title, onInput: (e) => {
|
|
157
|
+
(this.title = e.target.value);
|
|
158
|
+
this.clearErrorIf('title', !!this.title.trim());
|
|
159
|
+
} }), this.errors.title && h("span", { key: 'eea845094133a5372df59fd8e808c88c2c8d15d1', class: "error" }, this.errors.title)), h("label", { key: 'ac4aa2f034a22d255501e8de9c2f7ef2bd15cd58' }, "Image URL", h("input", { key: 'd9b1cc9221c842ec4390370e84ed7f7b5328c72f', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), h("div", { key: '2928e819a28ffa96bc3432804edd1c54e54aebdd', class: "row" }, h("label", { key: '57aca8b632ee87bdf546985ce23ee7ab3cd87a53' }, "Category", h("select", { key: '2b2e7d8bf2b6e01a6f1326cd99c60935b6584585', onInput: (e) => {
|
|
160
|
+
(this.category = e.target.value);
|
|
161
|
+
this.clearErrorIf('category', !!this.category);
|
|
162
|
+
if (this.category !== 'Other')
|
|
163
|
+
this.clearErrorIf('customCategory', true);
|
|
164
|
+
} }, h("option", { key: '40e6d1397afd47b58119f48290b2b2916b90958f', value: "", selected: this.category === '' }, "Select a category\u2026"), this.fullCategoryList.map((c) => (h("option", { value: c, selected: c === this.category }, c)))), this.errors.category && h("span", { key: 'd3633212048f29ac38cc7b10aedee51c7d5a0fe4', class: "error" }, this.errors.category)), h("label", { key: '04960f3ef4a8de34652f86d729838bafe2e1644e' }, "Cuisine / Area", h("select", { key: '4aeaedcebbc100d3166aa876bc2ea94ad9b2e74b', onInput: (e) => {
|
|
165
|
+
(this.area = e.target.value);
|
|
166
|
+
this.clearErrorIf('area', !!this.area);
|
|
167
|
+
if (this.area !== 'Other')
|
|
168
|
+
this.clearErrorIf('customArea', true);
|
|
169
|
+
} }, h("option", { key: '4945a5ee9b619807ca5e698fc82abb13b7437846', value: "", selected: this.area === '' }, "Select a cuisine\u2026"), this.fullAreaList.map((a) => (h("option", { value: a, selected: a === this.area }, a)))), this.errors.area && h("span", { key: '0e5f04ad9d214882e3d7e07b4d3f2ad9986f7c17', class: "error" }, this.errors.area))), (this.category === 'Other' || this.area === 'Other') && (h("div", { key: '92f8844bfd4dc85007746eb1d8679e06946922f3', class: "row" }, this.category === 'Other' && (h("label", { key: 'e8528349a8b9fa478b819d84f2f0b21ff87820b3', class: "custom-area-field" }, "Enter category name", h("input", { key: '9aae8f7a261f50ada7a79eeb553149b23d918e75', type: "text", placeholder: "e.g. Brunch", value: this.customCategory, onInput: (e) => {
|
|
170
|
+
(this.customCategory = e.target.value);
|
|
171
|
+
this.customCategory = e.target.value;
|
|
172
|
+
this.clearErrorIf('customCategory', !!this.customCategory.trim());
|
|
173
|
+
} }), this.errors.customCategory && h("span", { key: '9aa2a8ccd0a57816a7a0267e5e0f384d2cbf100f', class: "error" }, this.errors.customCategory))), this.area === 'Other' && (h("label", { key: '1d1f43fc855cf1b62e94b37032cdfe0b264c61f0', class: "custom-area-field" }, "Enter cuisine name", h("input", { key: '8a01e2c5c6168b2061ae95a3ae59611927e8776d', type: "text", placeholder: "e.g. Ethiopian", value: this.customArea, onInput: (e) => {
|
|
174
|
+
this.customArea = e.target.value;
|
|
175
|
+
this.clearErrorIf('customArea', !!this.customArea.trim());
|
|
176
|
+
} }), this.errors.customArea && h("span", { key: '0724a780a6c7f853dbf49aaa7c426abdf9dc763c', class: "error" }, this.errors.customArea))))), h("div", { key: '8eb6642721b9e82ef1e5e4becd0578248df9d6cc', class: "field" }, h("span", { key: 'b7bb449313eec9110c4dde9b63d3df682a7f4d31' }, "Ingredients"), this.ingredients.map((ing, i) => (h("div", { class: "ingredient-row" }, h("input", { type: "text", value: ing, onInput: (e) => this.updateIngredient(i, e.target.value) }), h("button", { type: "button", onClick: () => this.removeIngredient(i), "aria-label": "Remove" }, "\u2715")))), h("button", { key: '4de332018a519148d1fcb2fb32657bda5b706fe7', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && h("span", { key: 'fdddfe5ca60493295cdef4ecb17a17aa40684512', class: "error" }, this.errors.ingredients)), h("label", { key: 'af2b50576e4a53eeba69d4f19c9a6ea5e1e127c5' }, "Instructions", h("textarea", { key: '27e741c9f135c34e8418a596bbf6780a99ff9f95', rows: 5, onInput: (e) => {
|
|
177
|
+
this.instructions = e.target.value;
|
|
178
|
+
this.clearErrorIf('instructions', !!this.instructions.trim());
|
|
179
|
+
} }, this.instructions), this.errors.instructions && h("span", { key: 'db1cb5b3f667fcb3124a1bf418aac8910f5e53ab', class: "error" }, this.errors.instructions)), h("div", { key: '562a94f516173f714a2e5816498fc18de0e1476b', class: "footer" }, h("slot", { key: '3feeebb32283ef5d48652b532df4bfd939d1cafc', name: "footer" }), h("button", { key: 'a1f66c6c39989944b0445750c2d41602e10e60a9', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), h("button", { key: 'd420bf0d1d26319e53517de40df1339ffe68fadc', type: "submit", class: "save-btn" }, "Save Recipe"))));
|
|
89
180
|
}
|
|
90
181
|
static get is() { return "recipe-form"; }
|
|
91
182
|
static get encapsulation() { return "shadow"; }
|
|
@@ -126,7 +217,43 @@ export class RecipeForm {
|
|
|
126
217
|
"reflect": false,
|
|
127
218
|
"attribute": "initial-data"
|
|
128
219
|
},
|
|
129
|
-
"
|
|
220
|
+
"categories": {
|
|
221
|
+
"type": "unknown",
|
|
222
|
+
"mutable": false,
|
|
223
|
+
"complexType": {
|
|
224
|
+
"original": "string[]",
|
|
225
|
+
"resolved": "string[]",
|
|
226
|
+
"references": {}
|
|
227
|
+
},
|
|
228
|
+
"required": false,
|
|
229
|
+
"optional": false,
|
|
230
|
+
"docs": {
|
|
231
|
+
"tags": [],
|
|
232
|
+
"text": ""
|
|
233
|
+
},
|
|
234
|
+
"getter": false,
|
|
235
|
+
"setter": false,
|
|
236
|
+
"defaultValue": "[\n 'Beef', 'Breakfast', 'Chicken', 'Dessert', 'Goat', 'Lamb',\n 'Miscellaneous', 'Pasta', 'Pork', 'Seafood', 'Side', 'Starter',\n 'Vegan', 'Vegetarian', 'Other',\n]"
|
|
237
|
+
},
|
|
238
|
+
"extraCategories": {
|
|
239
|
+
"type": "unknown",
|
|
240
|
+
"mutable": false,
|
|
241
|
+
"complexType": {
|
|
242
|
+
"original": "string[]",
|
|
243
|
+
"resolved": "string[]",
|
|
244
|
+
"references": {}
|
|
245
|
+
},
|
|
246
|
+
"required": false,
|
|
247
|
+
"optional": false,
|
|
248
|
+
"docs": {
|
|
249
|
+
"tags": [],
|
|
250
|
+
"text": ""
|
|
251
|
+
},
|
|
252
|
+
"getter": false,
|
|
253
|
+
"setter": false,
|
|
254
|
+
"defaultValue": "[]"
|
|
255
|
+
},
|
|
256
|
+
"areas": {
|
|
130
257
|
"type": "unknown",
|
|
131
258
|
"mutable": false,
|
|
132
259
|
"complexType": {
|
|
@@ -138,11 +265,29 @@ export class RecipeForm {
|
|
|
138
265
|
"optional": false,
|
|
139
266
|
"docs": {
|
|
140
267
|
"tags": [],
|
|
141
|
-
"text": "
|
|
268
|
+
"text": ""
|
|
142
269
|
},
|
|
143
270
|
"getter": false,
|
|
144
271
|
"setter": false,
|
|
145
272
|
"defaultValue": "[\n 'American', 'British', 'Chinese', 'Croatian', 'Dutch', 'Egyptian',\n 'Filipino', 'French', 'Greek', 'Indian', 'Irish', 'Italian', 'Jamaican',\n 'Japanese', 'Kenyan', 'Malaysian', 'Mexican', 'Moroccan', 'Polish',\n 'Portuguese', 'Russian', 'Spanish', 'Thai', 'Tunisian', 'Turkish',\n 'Vietnamese', 'Other',\n]"
|
|
273
|
+
},
|
|
274
|
+
"extraAreas": {
|
|
275
|
+
"type": "unknown",
|
|
276
|
+
"mutable": false,
|
|
277
|
+
"complexType": {
|
|
278
|
+
"original": "string[]",
|
|
279
|
+
"resolved": "string[]",
|
|
280
|
+
"references": {}
|
|
281
|
+
},
|
|
282
|
+
"required": false,
|
|
283
|
+
"optional": false,
|
|
284
|
+
"docs": {
|
|
285
|
+
"tags": [],
|
|
286
|
+
"text": ""
|
|
287
|
+
},
|
|
288
|
+
"getter": false,
|
|
289
|
+
"setter": false,
|
|
290
|
+
"defaultValue": "[]"
|
|
146
291
|
}
|
|
147
292
|
};
|
|
148
293
|
}
|
|
@@ -151,7 +296,9 @@ export class RecipeForm {
|
|
|
151
296
|
"title": {},
|
|
152
297
|
"image": {},
|
|
153
298
|
"category": {},
|
|
154
|
-
"
|
|
299
|
+
"customCategory": {},
|
|
300
|
+
"area": {},
|
|
301
|
+
"customArea": {},
|
|
155
302
|
"ingredients": {},
|
|
156
303
|
"instructions": {},
|
|
157
304
|
"errors": {}
|
|
@@ -8,7 +8,7 @@ export class RecipeRating {
|
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
10
|
const stars = Array.from({ length: this.max }, (_, i) => i + 1);
|
|
11
|
-
return (h("div", { key: '
|
|
11
|
+
return (h("div", { key: '09bd2482d310e73993faea601d5ab86f20fc6fb7', class: "wrap", role: this.readonly ? undefined : 'radiogroup' }, stars.map((s) => (h("span", { class: { star: true, filled: s <= this.value, clickable: !this.readonly }, onClick: () => !this.readonly && this.ratingChange.emit({ value: s }) }, "\u2605")))));
|
|
12
12
|
}
|
|
13
13
|
static get is() { return "recipe-rating"; }
|
|
14
14
|
static get encapsulation() { return "shadow"; }
|
|
@@ -30,7 +30,7 @@ export class RecipeSearchBar {
|
|
|
30
30
|
this.internalValue = newVal;
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
|
-
return (h("div", { key: '
|
|
33
|
+
return (h("div", { key: '00fa553cd92086a5cac70ca6b13792dfa41fc1dd', class: "wrap" }, h("input", { key: 'a116c51839c228d4daff54347e6b2d56c9dc2579', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), h("button", { key: 'e16a909061abd80889ad7b7646219a7428e4db4d', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
|
|
34
34
|
}
|
|
35
35
|
static get is() { return "recipe-search-bar"; }
|
|
36
36
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as o,d as s}from"./p-
|
|
1
|
+
import{A as o,d as s}from"./p-BUODh8vy.js";const p=o,r=s;export{p as AppToast,r as defineCustomElement}
|
package/dist/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BJU3HdRm.js";export{R as RecipeCard}from"./p-
|
|
1
|
+
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BJU3HdRm.js";export{R as RecipeCard}from"./p-DnzGtyGi.js";export{R as RecipeSearchBar}from"./p-8_BMsNX-.js";export{R as RecipeFilterBar}from"./p-Ux-pnuEm.js";export{R as RecipeRating}from"./p-CeTpiLnn.js";export{R as RecipeForm}from"./p-HwvFQvUL.js";export{M as MealPlanDay}from"./p-S4266va_.js";export{A as AppModal}from"./p-Dp1sKtrN.js";export{A as AppToast}from"./p-BUODh8vy.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e,p as t,H as s,c as
|
|
1
|
+
import{t as e,p as t,H as s,c as a,h as i}from"./p-BJU3HdRm.js";const r=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.search=a(this,"search"),this.placeholder="Search recipes...",this.value="",this.debounceMs=350,this.internalValue="",this.onInput=e=>{this.internalValue=e.target.value,clearTimeout(this.timer),this.timer=setTimeout((()=>{this.search.emit({value:this.internalValue})}),this.debounceMs)},this.onKeyDown=e=>{"Enter"===e.key&&(clearTimeout(this.timer),this.search.emit({value:this.internalValue}))}}componentWillLoad(){this.internalValue=this.value}onValuePropChange(e){this.internalValue=e}render(){return i("div",{key:"00fa553cd92086a5cac70ca6b13792dfa41fc1dd",class:"wrap"},i("input",{key:"a116c51839c228d4daff54347e6b2d56c9dc2579",type:"search",placeholder:this.placeholder,value:this.internalValue,onInput:this.onInput,onKeyDown:this.onKeyDown}),i("button",{key:"e16a909061abd80889ad7b7646219a7428e4db4d",onClick:()=>this.search.emit({value:this.internalValue}),"aria-label":"Search"},"🔍"))}static get watchers(){return{value:[{onValuePropChange:0}]}}static get style(){return":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:6px}input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid #ddd;font-size:14px;outline:none}input:focus{border-color:#ff6b35}button{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:0 16px;cursor:pointer;font-size:15px}"}},[1,"recipe-search-bar",{placeholder:[1],value:[1],debounceMs:[2,"debounce-ms"],internalValue:[32]},void 0,{value:[{onValuePropChange:0}]}]);function o(){"undefined"!=typeof customElements&&["recipe-search-bar"].forEach((t=>{"recipe-search-bar"===t&&(customElements.get(e(t))||customElements.define(e(t),r))}))}o();export{r as R,o as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as s,p as t,H as e,c as
|
|
1
|
+
import{t as s,p as t,H as e,c as a,h as o}from"./p-BJU3HdRm.js";const i=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.dismiss=a(this,"dismiss"),this.message="",this.type="info",this.duration=3e3}componentDidLoad(){this.duration>0&&setTimeout((()=>this.dismiss.emit()),this.duration)}render(){return o("div",{key:"8b34f0098a8d17af8b9384ddf8838c8ad6eaf7f2",class:`toast ${this.type}`},o("span",{key:"652ce04dad64022f77dbd0236ebfc1a0075ba121"},this.message),o("button",{key:"760c2e84e1bf01c3b7a8c43addf983711453be3b",onClick:()=>this.dismiss.emit(),"aria-label":"Dismiss"},"✕"))}static get style(){return":host{font-family:system-ui, sans-serif;display:block}.toast{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;color:#fff;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.15)}.toast.success{background:#2ecc71}.toast.error{background:#e74c3c}.toast.info{background:#3498db}button{border:none;background:none;color:inherit;cursor:pointer;margin-left:auto}"}},[1,"app-toast",{message:[1],type:[1],duration:[2]}]);function n(){"undefined"!=typeof customElements&&["app-toast"].forEach((t=>{"app-toast"===t&&(customElements.get(s(t))||customElements.define(s(t),i))}))}n();export{i as A,n as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as s,p as t,H as e,c as i,h as a}from"./p-BJU3HdRm.js";const r=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.ratingChange=i(this,"ratingChange"),this.value=0,this.readonly=!1,this.max=5}render(){const s=Array.from({length:this.max},((s,t)=>t+1));return a("div",{key:"
|
|
1
|
+
import{t as s,p as t,H as e,c as i,h as a}from"./p-BJU3HdRm.js";const r=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.ratingChange=i(this,"ratingChange"),this.value=0,this.readonly=!1,this.max=5}render(){const s=Array.from({length:this.max},((s,t)=>t+1));return a("div",{key:"09bd2482d310e73993faea601d5ab86f20fc6fb7",class:"wrap",role:this.readonly?void 0:"radiogroup"},s.map((s=>a("span",{class:{star:!0,filled:s<=this.value,clickable:!this.readonly},onClick:()=>!this.readonly&&this.ratingChange.emit({value:s})},"★"))))}static get style(){return":host{display:inline-block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:2px}.star{font-size:18px;color:#ddd}.star.filled{color:#f5a623}.star.clickable{cursor:pointer}"}},[1,"recipe-rating",{value:[2],readonly:[4],max:[2]}]);function l(){"undefined"!=typeof customElements&&["recipe-rating"].forEach((t=>{"recipe-rating"===t&&(customElements.get(s(t))||customElements.define(s(t),r))}))}l();export{r as R,l as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e,p as
|
|
1
|
+
import{t as e,p as t,H as a,c as i,h as s}from"./p-BJU3HdRm.js";const r=t(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.favoriteToggle=i(this,"favoriteToggle"),this.cardClick=i(this,"cardClick"),this.category="",this.favorite=!1,this.onFavoriteClick=e=>{e.stopPropagation(),this.favoriteToggle.emit({favorite:!this.favorite})}}render(){return s("div",{key:"d84f83b5082a49a5a05b93678538bfcfecd92e47",class:"card",onClick:()=>this.cardClick.emit()},s("div",{key:"a0e4f5fae6b7c14c750263f8de9bef9fbd8180a0",class:"image-wrap"},this.image?s("img",{src:this.image,alt:this.recipeTitle}):s("div",{class:"placeholder"}),s("button",{key:"9266af379f6ebeb2624131e5c3f287d64cf4b3a5",class:{"fav-btn":!0,active:this.favorite},onClick:this.onFavoriteClick,"aria-label":"Toggle favorite"},this.favorite?"★":"☆")),s("div",{key:"d0b5fa56b17c14763ecc6301864ef797565c6313",class:"body"},s("h3",{key:"0c67db81d80a820cce2e6bfedd2df2611358d1e8"},this.recipeTitle),this.category&&s("span",{key:"30f89cf328a098be1c109d3e71b8f9f15827c6f1",class:"category"},this.category),s("div",{key:"353b2663855e7ac53817d17acaf7b83908c17d85",class:"actions"},s("slot",{key:"0a04fc5024751df45d744814f579100913dcd1fc",name:"actions"}))))}static get style(){return":host{display:block;font-family:system-ui, sans-serif}.card{border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:box-shadow 0.15s ease, transform 0.15s ease}.card:hover{box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);transform:translateY(-2px)}.image-wrap{position:relative;aspect-ratio:4 / 3;background:#f2f2f2}.image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{width:100%;height:100%;background:linear-gradient(135deg, #eee, #ddd)}.fav-btn{position:absolute;top:8px;right:8px;border:none;background:rgba(255, 255, 255, 0.9);border-radius:50%;width:32px;height:32px;font-size:16px;cursor:pointer;color:#f5a623}.fav-btn.active{color:#ff6b35}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:0.03em}.actions{margin-top:8px}"}},[257,"recipe-card",{recipeTitle:[1,"recipe-title"],image:[1],category:[1],favorite:[4]}]);function c(){"undefined"!=typeof customElements&&["recipe-card"].forEach((t=>{"recipe-card"===t&&(customElements.get(e(t))||customElements.define(e(t),r))}))}c();export{r as R,c as d}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e,p as t,H as i,c as s,h as a}from"./p-BJU3HdRm.js";const r=["Beef","Breakfast","Chicken","Dessert","Goat","Lamb","Miscellaneous","Pasta","Pork","Seafood","Side","Starter","Vegan","Vegetarian","Other"],n=["American","British","Chinese","Croatian","Dutch","Egyptian","Filipino","French","Greek","Indian","Irish","Italian","Jamaican","Japanese","Kenyan","Malaysian","Mexican","Moroccan","Polish","Portuguese","Russian","Spanish","Thai","Tunisian","Turkish","Vietnamese","Other"],o=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.save=s(this,"save"),this.cancel=s(this,"cancel"),this.categories=r,this.extraCategories=[],this.areas=n,this.extraAreas=[],this.title="",this.image="",this.category="",this.customCategory="",this.area="",this.customArea="",this.ingredients=[""],this.instructions="",this.errors={},this.onSubmit=e=>{if(e.preventDefault(),!this.validate())return;const t="Other"===this.category?this.customCategory.trim():this.category,i="Other"===this.area?this.customArea.trim():this.area,s={id:this.initialData?.id,title:this.title.trim(),image:this.image.trim(),category:t,area:i,ingredients:this.ingredients.map((e=>e.trim())).filter(Boolean),instructions:this.instructions.trim()};this.save.emit(s)},this.addIngredient=()=>{this.ingredients=[...this.ingredients,""]},this.removeIngredient=e=>{this.ingredients=this.ingredients.filter(((t,i)=>i!==e));const t=this.ingredients.filter(((t,i)=>i!==e));this.ingredients=t,this.clearErrorIf("ingredients",t.some((e=>e.trim())))}}componentWillLoad(){this.loadInitialData()}onInitialDataChange(){this.loadInitialData()}mergeList(e,t){const i=[...e.filter((e=>"Other"!==e))];for(const e of t)e&&!i.includes(e)&&i.push(e);return i.push("Other"),i}get fullCategoryList(){return this.mergeList(this.categories,this.extraCategories)}get fullAreaList(){return this.mergeList(this.areas,this.extraAreas)}clearErrorIf(e,t){if(t&&this.errors[e]){const t={...this.errors};delete t[e],this.errors=t}}loadInitialData(){let e;if("string"==typeof this.initialData&&this.initialData)try{e=JSON.parse(this.initialData)}catch{e=void 0}else this.initialData&&"object"==typeof this.initialData&&(e=this.initialData);if(e){this.title=e.title??"",this.image=e.image??"",this.ingredients=e.ingredients?.length?[...e.ingredients]:[""],this.instructions=e.instructions??"";const t=this.fullCategoryList.filter((e=>"Other"!==e));e.category&&!t.includes(e.category)?(this.category="Other",this.customCategory=e.category):(this.category=e.category??"",this.customCategory="");const i=this.fullAreaList.filter((e=>"Other"!==e));e.area&&!i.includes(e.area)?(this.area="Other",this.customArea=e.area):(this.area=e.area??"",this.customArea="")}}validate(){const e={};return this.title.trim()||(e.title="Title is required."),0===this.ingredients.map((e=>e.trim())).filter(Boolean).length&&(e.ingredients="Add at least one ingredient."),this.instructions.trim()||(e.instructions="Instructions are required."),this.category.trim()?"Other"!==this.category||this.customCategory.trim()||(e.customCategory="Enter a category name."):e.category="Category is required.",this.area.trim()?"Other"!==this.area||this.customArea.trim()||(e.customArea="Enter a cuisine name."):e.area="Cuisine / Area is required.",this.errors=e,0===Object.keys(e).length}updateIngredient(e,t){const i=[...this.ingredients];i[e]=t,this.ingredients=i,this.clearErrorIf("ingredients",i.some((e=>e.trim())))}render(){return a("form",{key:"a6fd5f89975759b270bd41da834f364d11318033",onSubmit:this.onSubmit},a("slot",{key:"263cc31f43b151d6c8c0a93d55adefd17a5ea293",name:"header"}),a("label",{key:"096dcfe6a821d4100f5a7988f4d993fb1808bb3e"},"Title",a("input",{key:"36845960be21b66c2c0b54ae27203a6c778a1477",type:"text",value:this.title,onInput:e=>{this.title=e.target.value,this.clearErrorIf("title",!!this.title.trim())}}),this.errors.title&&a("span",{key:"eea845094133a5372df59fd8e808c88c2c8d15d1",class:"error"},this.errors.title)),a("label",{key:"ac4aa2f034a22d255501e8de9c2f7ef2bd15cd58"},"Image URL",a("input",{key:"d9b1cc9221c842ec4390370e84ed7f7b5328c72f",type:"text",value:this.image,onInput:e=>this.image=e.target.value})),a("div",{key:"2928e819a28ffa96bc3432804edd1c54e54aebdd",class:"row"},a("label",{key:"57aca8b632ee87bdf546985ce23ee7ab3cd87a53"},"Category",a("select",{key:"2b2e7d8bf2b6e01a6f1326cd99c60935b6584585",onInput:e=>{this.category=e.target.value,this.clearErrorIf("category",!!this.category),"Other"!==this.category&&this.clearErrorIf("customCategory",!0)}},a("option",{key:"40e6d1397afd47b58119f48290b2b2916b90958f",value:"",selected:""===this.category},"Select a category…"),this.fullCategoryList.map((e=>a("option",{value:e,selected:e===this.category},e)))),this.errors.category&&a("span",{key:"d3633212048f29ac38cc7b10aedee51c7d5a0fe4",class:"error"},this.errors.category)),a("label",{key:"04960f3ef4a8de34652f86d729838bafe2e1644e"},"Cuisine / Area",a("select",{key:"4aeaedcebbc100d3166aa876bc2ea94ad9b2e74b",onInput:e=>{this.area=e.target.value,this.clearErrorIf("area",!!this.area),"Other"!==this.area&&this.clearErrorIf("customArea",!0)}},a("option",{key:"4945a5ee9b619807ca5e698fc82abb13b7437846",value:"",selected:""===this.area},"Select a cuisine…"),this.fullAreaList.map((e=>a("option",{value:e,selected:e===this.area},e)))),this.errors.area&&a("span",{key:"0e5f04ad9d214882e3d7e07b4d3f2ad9986f7c17",class:"error"},this.errors.area))),("Other"===this.category||"Other"===this.area)&&a("div",{key:"92f8844bfd4dc85007746eb1d8679e06946922f3",class:"row"},"Other"===this.category&&a("label",{key:"e8528349a8b9fa478b819d84f2f0b21ff87820b3",class:"custom-area-field"},"Enter category name",a("input",{key:"9aae8f7a261f50ada7a79eeb553149b23d918e75",type:"text",placeholder:"e.g. Brunch",value:this.customCategory,onInput:e=>{this.customCategory=e.target.value,this.customCategory=e.target.value,this.clearErrorIf("customCategory",!!this.customCategory.trim())}}),this.errors.customCategory&&a("span",{key:"9aa2a8ccd0a57816a7a0267e5e0f384d2cbf100f",class:"error"},this.errors.customCategory)),"Other"===this.area&&a("label",{key:"1d1f43fc855cf1b62e94b37032cdfe0b264c61f0",class:"custom-area-field"},"Enter cuisine name",a("input",{key:"8a01e2c5c6168b2061ae95a3ae59611927e8776d",type:"text",placeholder:"e.g. Ethiopian",value:this.customArea,onInput:e=>{this.customArea=e.target.value,this.clearErrorIf("customArea",!!this.customArea.trim())}}),this.errors.customArea&&a("span",{key:"0724a780a6c7f853dbf49aaa7c426abdf9dc763c",class:"error"},this.errors.customArea))),a("div",{key:"8eb6642721b9e82ef1e5e4becd0578248df9d6cc",class:"field"},a("span",{key:"b7bb449313eec9110c4dde9b63d3df682a7f4d31"},"Ingredients"),this.ingredients.map(((e,t)=>a("div",{class:"ingredient-row"},a("input",{type:"text",value:e,onInput:e=>this.updateIngredient(t,e.target.value)}),a("button",{type:"button",onClick:()=>this.removeIngredient(t),"aria-label":"Remove"},"✕")))),a("button",{key:"4de332018a519148d1fcb2fb32657bda5b706fe7",type:"button",class:"add-btn",onClick:this.addIngredient},"+ Add ingredient"),this.errors.ingredients&&a("span",{key:"fdddfe5ca60493295cdef4ecb17a17aa40684512",class:"error"},this.errors.ingredients)),a("label",{key:"af2b50576e4a53eeba69d4f19c9a6ea5e1e127c5"},"Instructions",a("textarea",{key:"27e741c9f135c34e8418a596bbf6780a99ff9f95",rows:5,onInput:e=>{this.instructions=e.target.value,this.clearErrorIf("instructions",!!this.instructions.trim())}},this.instructions),this.errors.instructions&&a("span",{key:"db1cb5b3f667fcb3124a1bf418aac8910f5e53ab",class:"error"},this.errors.instructions)),a("div",{key:"562a94f516173f714a2e5816498fc18de0e1476b",class:"footer"},a("slot",{key:"3feeebb32283ef5d48652b532df4bfd939d1cafc",name:"footer"}),a("button",{key:"a1f66c6c39989944b0445750c2d41602e10e60a9",type:"button",class:"cancel-btn",onClick:()=>this.cancel.emit()},"Cancel"),a("button",{key:"d420bf0d1d26319e53517de40df1339ffe68fadc",type:"submit",class:"save-btn"},"Save Recipe")))}static get watchers(){return{initialData:[{onInitialDataChange:0}]}}static get style(){return":host{display:block;font-family:system-ui, sans-serif}form{display:flex;flex-direction:column;gap:14px}label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#333;font-weight:600}input,textarea,select{font-weight:400;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit;background:#fff;transition:border-color 0.15s ease, box-shadow 0.15s ease}input:focus,textarea:focus,select:focus{outline:none;border-color:#ff6b35;box-shadow:0 0 0 3px rgba(255, 107, 53, 0.14)}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:34px;cursor:pointer;color:#1f2937;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:14px}select:hover{border-color:#bbb}select:invalid,select option[value=\"\"]{color:#9ca3af}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width: 480px){.row{grid-template-columns:1fr}}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.ingredient-row{display:flex;gap:6px}.ingredient-row input{flex:1}.ingredient-row button{border:none;background:#f4f4f4;border-radius:6px;cursor:pointer;width:30px}.add-btn{align-self:flex-start;border:1px dashed #bbb;background:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;color:#555}.error{color:#e74c3c;font-size:12px;font-weight:400}.footer{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}.cancel-btn{border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 16px;cursor:pointer}.save-btn{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:8px 18px;cursor:pointer;font-weight:600}"}},[257,"recipe-form",{initialData:[1,"initial-data"],categories:[16],extraCategories:[16],areas:[16],extraAreas:[16],title:[32],image:[32],category:[32],customCategory:[32],area:[32],customArea:[32],ingredients:[32],instructions:[32],errors:[32]},void 0,{initialData:[{onInitialDataChange:0}]}]);function c(){"undefined"!=typeof customElements&&["recipe-form"].forEach((t=>{"recipe-form"===t&&(customElements.get(e(t))||customElements.define(e(t),o))}))}c();export{o as R,c as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e,p as s,H as t,c as i,h as r}from"./p-BJU3HdRm.js";const c=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.filterChange=i(this,"filterChange"),this.categories=[],this.active=""}select(e){this.filterChange.emit({value:e})}render(){const e=Array.isArray(this.categories)?this.categories:[];return r("div",{key:"
|
|
1
|
+
import{t as e,p as s,H as t,c as i,h as r}from"./p-BJU3HdRm.js";const c=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.filterChange=i(this,"filterChange"),this.categories=[],this.active=""}select(e){this.filterChange.emit({value:e})}render(){const e=Array.isArray(this.categories)?this.categories:[];return r("div",{key:"3088a84e81d49c06a12f93e491d4ae3e7022635f",class:"wrap"},r("button",{key:"0e8b7455b1364eb76721d4f6c227a0803750c466",class:{chip:!0,active:""===this.active},onClick:()=>this.select("")},"All"),e.map((e=>r("button",{class:{chip:!0,active:this.active===e},onClick:()=>this.select(e)},e))))}static get style(){return":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid #ddd;background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;color:#444}.chip.active{background:#ff6b35;border-color:#ff6b35;color:#fff}"}},[1,"recipe-filter-bar",{categories:[16],active:[1]}]);function a(){"undefined"!=typeof customElements&&["recipe-filter-bar"].forEach((s=>{"recipe-filter-bar"===s&&(customElements.get(e(s))||customElements.define(e(s),c))}))}a();export{c as R,a as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{R as o,d as s}from"./p-
|
|
1
|
+
import{R as o,d as s}from"./p-DnzGtyGi.js";const t=o,p=s;export{t as RecipeCard,p as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{R as o,d as
|
|
1
|
+
import{R as o,d as p}from"./p-Ux-pnuEm.js";const s=o,m=p;export{s as RecipeFilterBar,m as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{R as o,d as s}from"./p-
|
|
1
|
+
import{R as o,d as s}from"./p-HwvFQvUL.js";const p=o,r=s;export{p as RecipeForm,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{R as o,d as p}from"./p-
|
|
1
|
+
import{R as o,d as p}from"./p-CeTpiLnn.js";const s=o,n=p;export{s as RecipeRating,n as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{R as
|
|
1
|
+
import{R as s,d as o}from"./p-8_BMsNX-.js";const p=s,r=o;export{p as RecipeSearchBar,r as defineCustomElement}
|