@gurpinderjitsingh/recipe-ui 0.7.0 → 0.8.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 +11 -7
- 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.css +68 -14
- package/dist/collection/components/recipe-card/recipe-card.js +25 -3
- package/dist/collection/components/recipe-filter-bar/recipe-filter-bar.js +1 -1
- package/dist/collection/components/recipe-form/recipe-form.css +1 -1
- package/dist/collection/components/recipe-rating/recipe-rating.js +1 -1
- package/dist/collection/components/recipe-search-bar/recipe-search-bar.js +23 -1
- package/dist/components/app-toast.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/{p-DzfkrPp9.js → p-CDsXcD4i.js} +1 -1
- package/dist/components/{p-Ux-pnuEm.js → p-Cug7zee9.js} +1 -1
- package/dist/components/p-DFwmqhHV.js +1 -0
- package/dist/components/{p-BUODh8vy.js → p-DMeman7N.js} +1 -1
- package/dist/components/p-Dn6SSsDo.js +1 -0
- package/dist/components/{p-CeTpiLnn.js → p-Xr9vrvZS.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 +11 -7
- 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-8ed4bce8.entry.js → p-2a38e7c3.entry.js} +1 -1
- package/dist/recipe-ui/p-75b34f68.entry.js +1 -0
- package/dist/recipe-ui/recipe-ui.esm.js +1 -1
- package/dist/types/components/recipe-card/recipe-card.d.ts +3 -1
- package/dist/types/components/recipe-search-bar/recipe-search-bar.d.ts +1 -0
- package/dist/types/components.d.ts +22 -2
- package/package.json +1 -1
- package/dist/components/p-8_BMsNX-.js +0 -1
- package/dist/components/p-DnzGtyGi.js +0 -1
- package/dist/recipe-ui/p-287982b1.entry.js +0 -1
|
@@ -2,15 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-CRcwY0Fb.js');
|
|
4
4
|
|
|
5
|
-
const recipeCardCss = () => `: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
|
|
5
|
+
const recipeCardCss = () => `: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:rgb(255, 107, 53)}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category,.cuisine{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:0.03em}.actions{margin-top:8px}`;
|
|
6
6
|
|
|
7
7
|
const RecipeCard = class {
|
|
8
8
|
constructor(hostRef) {
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
this.favoriteToggle = index.createEvent(this, "favoriteToggle");
|
|
11
11
|
this.cardClick = index.createEvent(this, "cardClick");
|
|
12
|
-
/** Category
|
|
12
|
+
/** Category label */
|
|
13
13
|
this.category = '';
|
|
14
|
+
/** Cuisine label */
|
|
15
|
+
this.cuisine = '';
|
|
14
16
|
/** Whether this recipe is currently favorited */
|
|
15
17
|
this.favorite = false;
|
|
16
18
|
this.onFavoriteClick = (e) => {
|
|
@@ -19,7 +21,7 @@ const RecipeCard = class {
|
|
|
19
21
|
};
|
|
20
22
|
}
|
|
21
23
|
render() {
|
|
22
|
-
return (index.h("div", { key: '
|
|
24
|
+
return (index.h("div", { key: '64d7f6fb92a01c650f3972c4c0f0164f1904d959', class: "card", onClick: () => this.cardClick.emit() }, index.h("div", { key: 'b9d014e3fc77346eaa76e6feb15369e9fb622624', class: "image-wrap" }, this.image ? index.h("img", { src: this.image, alt: this.recipeTitle }) : index.h("div", { class: "placeholder" }), index.h("button", { key: '1690299a371310ad5e6b0e0cc238853fb3e9f439', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), index.h("div", { key: '52e02f3b16c2ab51209c6812aa94b4642504836a', class: "body" }, index.h("h3", { key: '6df2f0f3146dd8ef5f91cce8e29f0dca00ffbd0a' }, this.recipeTitle), this.category && index.h("span", { key: 'b0375016c50928cb25c070433460991b97aa2986', class: "category" }, this.category), this.cuisine && index.h("span", { key: '48a269aceb970fab1a50ab6b669efb99fb5e3f1e', class: "cuisine" }, this.cuisine), index.h("div", { key: '22330af217cf33e8f15bbc5406509322471c783f', class: "actions" }, index.h("slot", { key: 'd234fc51abd28735888419723c570b7ddf5a6b5a', name: "actions" })))));
|
|
23
25
|
}
|
|
24
26
|
};
|
|
25
27
|
RecipeCard.style = recipeCardCss();
|
|
@@ -33,6 +35,7 @@ const RecipeSearchBar = class {
|
|
|
33
35
|
this.placeholder = 'Search recipes...';
|
|
34
36
|
this.value = '';
|
|
35
37
|
this.debounceMs = 350;
|
|
38
|
+
this.showSearchButton = true;
|
|
36
39
|
this.internalValue = '';
|
|
37
40
|
this.onInput = (e) => {
|
|
38
41
|
this.internalValue = e.target.value;
|
|
@@ -55,7 +58,8 @@ const RecipeSearchBar = class {
|
|
|
55
58
|
this.internalValue = newVal;
|
|
56
59
|
}
|
|
57
60
|
render() {
|
|
58
|
-
return (index.h("div", { key: '
|
|
61
|
+
return (index.h("div", { key: '59f5e53b0b165e7059087bb8e845f49a71e56a66', class: "wrap" }, index.h("input", { key: 'aba792ff621e372c9f248f5269712d008833475e', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), this.showSearchButton &&
|
|
62
|
+
index.h("button", { key: 'b23addee9d67ef8c20c76242118e3dea50c64484', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
|
|
59
63
|
}
|
|
60
64
|
static get watchers() { return {
|
|
61
65
|
"value": [{
|
|
@@ -79,7 +83,7 @@ const RecipeFilterBar = class {
|
|
|
79
83
|
}
|
|
80
84
|
render() {
|
|
81
85
|
const cats = Array.isArray(this.categories) ? this.categories : [];
|
|
82
|
-
return (index.h("div", { key: '
|
|
86
|
+
return (index.h("div", { key: '4854462a06a4c7b7495f2a2c215d079a4d9b1506', class: "wrap" }, index.h("button", { key: '6e210a28a631b7311aeec665209ca5266eb5b8fc', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (index.h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
|
|
83
87
|
}
|
|
84
88
|
};
|
|
85
89
|
RecipeFilterBar.style = recipeFilterBarCss();
|
|
@@ -96,12 +100,12 @@ const RecipeRating = class {
|
|
|
96
100
|
}
|
|
97
101
|
render() {
|
|
98
102
|
const stars = Array.from({ length: this.max }, (_, i) => i + 1);
|
|
99
|
-
return (index.h("div", { key: '
|
|
103
|
+
return (index.h("div", { key: 'd9fe9609656b70a10c1be40a16913e8cb839e7df', class: "wrap", role: this.readonly ? undefined : 'radiogroup' }, stars.map((s) => (index.h("span", { class: { star: true, filled: s <= this.value, clickable: !this.readonly }, onClick: () => !this.readonly && this.ratingChange.emit({ value: s }) }, "\u2605")))));
|
|
100
104
|
}
|
|
101
105
|
};
|
|
102
106
|
RecipeRating.style = recipeRatingCss();
|
|
103
107
|
|
|
104
|
-
const recipeFormCss = () => `: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
|
|
108
|
+
const recipeFormCss = () => `: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:rgb(255, 107, 53);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}`;
|
|
105
109
|
|
|
106
110
|
const DEFAULT_CATEGORIES = [
|
|
107
111
|
'Beef', 'Breakfast', 'Chicken', 'Dessert', 'Goat', 'Lamb',
|
|
@@ -18,7 +18,7 @@ const AppToast = class {
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
|
-
return (index.h("div", { key: '
|
|
21
|
+
return (index.h("div", { key: 'a21609114632b770771cfa5d548144c86e12d282', class: `toast ${this.type}` }, index.h("span", { key: '82a7e0f850a079b789f9591b1a64a82bd3520284' }, this.message), index.h("button", { key: 'cb89422d91724c90642c8b5427401040a6377d7d', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
24
|
AppToast.style = appToastCss();
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
|
6
6
|
const defineCustomElements = async (win, options) => {
|
|
7
7
|
if (typeof window === 'undefined') return undefined;
|
|
8
8
|
await appGlobals.globalScripts();
|
|
9
|
-
return index.bootstrapLazy([["app-modal_7.cjs",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[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]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast.cjs",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
|
|
9
|
+
return index.bootstrapLazy([["app-modal_7.cjs",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"cuisine":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[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]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"showSearchButton":[4,"show-search-button"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast.cjs",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["app-modal_7.cjs",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[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]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast.cjs",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
|
|
22
|
+
return index.bootstrapLazy([["app-modal_7.cjs",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"cuisine":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[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]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"showSearchButton":[4,"show-search-button"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast.cjs",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -12,7 +12,7 @@ export class AppToast {
|
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (h("div", { key: '
|
|
15
|
+
return (h("div", { key: 'a21609114632b770771cfa5d548144c86e12d282', class: `toast ${this.type}` }, h("span", { key: '82a7e0f850a079b789f9591b1a64a82bd3520284' }, this.message), h("button", { key: 'cb89422d91724c90642c8b5427401040a6377d7d', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
|
|
16
16
|
}
|
|
17
17
|
static get is() { return "app-toast"; }
|
|
18
18
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
:host {
|
|
1
|
+
:host {
|
|
2
|
+
display: block;
|
|
3
|
+
font-family: system-ui, sans-serif;
|
|
4
|
+
}
|
|
5
|
+
|
|
2
6
|
.card {
|
|
3
7
|
border: 1px solid #e5e5e5;
|
|
4
8
|
border-radius: 12px;
|
|
@@ -7,17 +11,67 @@
|
|
|
7
11
|
background: #fff;
|
|
8
12
|
transition: box-shadow 0.15s ease, transform 0.15s ease;
|
|
9
13
|
}
|
|
10
|
-
|
|
11
|
-
.
|
|
12
|
-
|
|
13
|
-
|
|
14
|
+
|
|
15
|
+
.card:hover {
|
|
16
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
|
17
|
+
transform: translateY(-2px);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.image-wrap {
|
|
21
|
+
position: relative;
|
|
22
|
+
aspect-ratio: 4 / 3;
|
|
23
|
+
background: #f2f2f2;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.image-wrap img {
|
|
27
|
+
width: 100%;
|
|
28
|
+
height: 100%;
|
|
29
|
+
object-fit: cover;
|
|
30
|
+
display: block;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.placeholder {
|
|
34
|
+
width: 100%;
|
|
35
|
+
height: 100%;
|
|
36
|
+
background: linear-gradient(135deg, #eee, #ddd);
|
|
37
|
+
}
|
|
38
|
+
|
|
14
39
|
.fav-btn {
|
|
15
|
-
position: absolute;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
40
|
+
position: absolute;
|
|
41
|
+
top: 8px;
|
|
42
|
+
right: 8px;
|
|
43
|
+
border: none;
|
|
44
|
+
background: rgba(255, 255, 255, 0.9);
|
|
45
|
+
border-radius: 50%;
|
|
46
|
+
width: 32px;
|
|
47
|
+
height: 32px;
|
|
48
|
+
font-size: 16px;
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
color: #f5a623;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.fav-btn.active {
|
|
54
|
+
color: rgb(255, 107, 53);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.body {
|
|
58
|
+
padding: 12px 14px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
h3 {
|
|
62
|
+
margin: 0 0 4px;
|
|
63
|
+
font-size: 15px;
|
|
64
|
+
line-height: 1.3;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.category,
|
|
68
|
+
.cuisine {
|
|
69
|
+
font-size: 12px;
|
|
70
|
+
color: #777;
|
|
71
|
+
text-transform: uppercase;
|
|
72
|
+
letter-spacing: 0.03em;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.actions {
|
|
76
|
+
margin-top: 8px;
|
|
77
|
+
}
|
|
@@ -7,8 +7,10 @@ import { h } from "@stencil/core";
|
|
|
7
7
|
*/
|
|
8
8
|
export class RecipeCard {
|
|
9
9
|
constructor() {
|
|
10
|
-
/** Category
|
|
10
|
+
/** Category label */
|
|
11
11
|
this.category = '';
|
|
12
|
+
/** Cuisine label */
|
|
13
|
+
this.cuisine = '';
|
|
12
14
|
/** Whether this recipe is currently favorited */
|
|
13
15
|
this.favorite = false;
|
|
14
16
|
this.onFavoriteClick = (e) => {
|
|
@@ -17,7 +19,7 @@ export class RecipeCard {
|
|
|
17
19
|
};
|
|
18
20
|
}
|
|
19
21
|
render() {
|
|
20
|
-
return (h("div", { key: '
|
|
22
|
+
return (h("div", { key: '64d7f6fb92a01c650f3972c4c0f0164f1904d959', class: "card", onClick: () => this.cardClick.emit() }, h("div", { key: 'b9d014e3fc77346eaa76e6feb15369e9fb622624', class: "image-wrap" }, this.image ? h("img", { src: this.image, alt: this.recipeTitle }) : h("div", { class: "placeholder" }), h("button", { key: '1690299a371310ad5e6b0e0cc238853fb3e9f439', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), h("div", { key: '52e02f3b16c2ab51209c6812aa94b4642504836a', class: "body" }, h("h3", { key: '6df2f0f3146dd8ef5f91cce8e29f0dca00ffbd0a' }, this.recipeTitle), this.category && h("span", { key: 'b0375016c50928cb25c070433460991b97aa2986', class: "category" }, this.category), this.cuisine && h("span", { key: '48a269aceb970fab1a50ab6b669efb99fb5e3f1e', class: "cuisine" }, this.cuisine), h("div", { key: '22330af217cf33e8f15bbc5406509322471c783f', class: "actions" }, h("slot", { key: 'd234fc51abd28735888419723c570b7ddf5a6b5a', name: "actions" })))));
|
|
21
23
|
}
|
|
22
24
|
static get is() { return "recipe-card"; }
|
|
23
25
|
static get encapsulation() { return "shadow"; }
|
|
@@ -83,7 +85,7 @@ export class RecipeCard {
|
|
|
83
85
|
"optional": false,
|
|
84
86
|
"docs": {
|
|
85
87
|
"tags": [],
|
|
86
|
-
"text": "Category
|
|
88
|
+
"text": "Category label"
|
|
87
89
|
},
|
|
88
90
|
"getter": false,
|
|
89
91
|
"setter": false,
|
|
@@ -91,6 +93,26 @@ export class RecipeCard {
|
|
|
91
93
|
"attribute": "category",
|
|
92
94
|
"defaultValue": "''"
|
|
93
95
|
},
|
|
96
|
+
"cuisine": {
|
|
97
|
+
"type": "string",
|
|
98
|
+
"mutable": false,
|
|
99
|
+
"complexType": {
|
|
100
|
+
"original": "string",
|
|
101
|
+
"resolved": "string",
|
|
102
|
+
"references": {}
|
|
103
|
+
},
|
|
104
|
+
"required": false,
|
|
105
|
+
"optional": false,
|
|
106
|
+
"docs": {
|
|
107
|
+
"tags": [],
|
|
108
|
+
"text": "Cuisine label"
|
|
109
|
+
},
|
|
110
|
+
"getter": false,
|
|
111
|
+
"setter": false,
|
|
112
|
+
"reflect": false,
|
|
113
|
+
"attribute": "cuisine",
|
|
114
|
+
"defaultValue": "''"
|
|
115
|
+
},
|
|
94
116
|
"favorite": {
|
|
95
117
|
"type": "boolean",
|
|
96
118
|
"mutable": false,
|
|
@@ -15,7 +15,7 @@ export class RecipeFilterBar {
|
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
17
|
const cats = Array.isArray(this.categories) ? this.categories : [];
|
|
18
|
-
return (h("div", { key: '
|
|
18
|
+
return (h("div", { key: '4854462a06a4c7b7495f2a2c215d079a4d9b1506', class: "wrap" }, h("button", { key: '6e210a28a631b7311aeec665209ca5266eb5b8fc', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
|
|
19
19
|
}
|
|
20
20
|
static get is() { return "recipe-filter-bar"; }
|
|
21
21
|
static get encapsulation() { return "shadow"; }
|
|
@@ -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: 'd9fe9609656b70a10c1be40a16913e8cb839e7df', 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"; }
|
|
@@ -8,6 +8,7 @@ export class RecipeSearchBar {
|
|
|
8
8
|
this.placeholder = 'Search recipes...';
|
|
9
9
|
this.value = '';
|
|
10
10
|
this.debounceMs = 350;
|
|
11
|
+
this.showSearchButton = true;
|
|
11
12
|
this.internalValue = '';
|
|
12
13
|
this.onInput = (e) => {
|
|
13
14
|
this.internalValue = e.target.value;
|
|
@@ -30,7 +31,8 @@ export class RecipeSearchBar {
|
|
|
30
31
|
this.internalValue = newVal;
|
|
31
32
|
}
|
|
32
33
|
render() {
|
|
33
|
-
return (h("div", { key: '
|
|
34
|
+
return (h("div", { key: '59f5e53b0b165e7059087bb8e845f49a71e56a66', class: "wrap" }, h("input", { key: 'aba792ff621e372c9f248f5269712d008833475e', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), this.showSearchButton &&
|
|
35
|
+
h("button", { key: 'b23addee9d67ef8c20c76242118e3dea50c64484', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
|
|
34
36
|
}
|
|
35
37
|
static get is() { return "recipe-search-bar"; }
|
|
36
38
|
static get encapsulation() { return "shadow"; }
|
|
@@ -105,6 +107,26 @@ export class RecipeSearchBar {
|
|
|
105
107
|
"reflect": false,
|
|
106
108
|
"attribute": "debounce-ms",
|
|
107
109
|
"defaultValue": "350"
|
|
110
|
+
},
|
|
111
|
+
"showSearchButton": {
|
|
112
|
+
"type": "boolean",
|
|
113
|
+
"mutable": false,
|
|
114
|
+
"complexType": {
|
|
115
|
+
"original": "boolean",
|
|
116
|
+
"resolved": "boolean",
|
|
117
|
+
"references": {}
|
|
118
|
+
},
|
|
119
|
+
"required": false,
|
|
120
|
+
"optional": false,
|
|
121
|
+
"docs": {
|
|
122
|
+
"tags": [],
|
|
123
|
+
"text": ""
|
|
124
|
+
},
|
|
125
|
+
"getter": false,
|
|
126
|
+
"setter": false,
|
|
127
|
+
"reflect": false,
|
|
128
|
+
"attribute": "show-search-button",
|
|
129
|
+
"defaultValue": "true"
|
|
108
130
|
}
|
|
109
131
|
};
|
|
110
132
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as o,d as s}from"./p-
|
|
1
|
+
import{A as o,d as s}from"./p-DMeman7N.js";const a=o,m=s;export{a as AppToast,m 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-Dn6SSsDo.js";export{R as RecipeSearchBar}from"./p-DFwmqhHV.js";export{R as RecipeFilterBar}from"./p-Cug7zee9.js";export{R as RecipeRating}from"./p-Xr9vrvZS.js";export{R as RecipeForm}from"./p-CDsXcD4i.js";export{M as MealPlanDay}from"./p-S4266va_.js";export{A as AppModal}from"./p-Dp1sKtrN.js";export{A as AppToast}from"./p-DMeman7N.js";
|
|
@@ -1 +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,cuisine: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.cuisine&&!i.includes(e.cuisine)?(this.area="Other",this.customArea=e.cuisine):(this.area=e.cuisine??"",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:"c29ab62af9db4a95e11b75f25a2dd4c23e699dad",onSubmit:this.onSubmit},a("slot",{key:"ece02ab46a1075eaef912e8953e70faa11bc8d8d",name:"header"}),a("label",{key:"9e17e9ba311350d9235f5ec01c32743dfbf55b0e"},"Title",a("input",{key:"2b8d632bc22eb5cde52198287ea2b19d87567dba",type:"text",value:this.title,onInput:e=>{this.title=e.target.value,this.clearErrorIf("title",!!this.title.trim())}}),this.errors.title&&a("span",{key:"3a34d1f5e1f43ef190983dd0883f16eb6775f07c",class:"error"},this.errors.title)),a("label",{key:"6acda6ccaff2e0315cc1964ae30c18647fe97bd1"},"Image URL",a("input",{key:"6bdc06a2bebd6b5ae984865aefe292426fbe38cb",type:"text",value:this.image,onInput:e=>this.image=e.target.value})),a("div",{key:"f6ef49aaace211659296e93b4b5b47b29db73ac6",class:"row"},a("label",{key:"9610c81a85ebddc2da4bdadcdee68ddea78e28d4"},"Category",a("select",{key:"46542ff9e2c0f15d60be6744e063f3c860475772",onInput:e=>{this.category=e.target.value,this.clearErrorIf("category",!!this.category),"Other"!==this.category&&this.clearErrorIf("customCategory",!0)}},a("option",{key:"2741b90edd32cb12903e877cbfa2db3b5ff04071",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:"dc8e7ab5a6decdece1b4559af856997251335abf",class:"error"},this.errors.category)),a("label",{key:"792cb1c4fd6052f9d88c52649c6eb4dc064f0071"},"Cuisine / Area",a("select",{key:"06a917ac951a4c6d3e8390534690545a1967581a",onInput:e=>{this.area=e.target.value,this.clearErrorIf("area",!!this.area),"Other"!==this.area&&this.clearErrorIf("customArea",!0)}},a("option",{key:"264c39814065b3f07626975b96eca6b7e1c9bb83",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:"f1a562402420fb7a813dd4184b439c03c71d93d9",class:"error"},this.errors.area))),("Other"===this.category||"Other"===this.area)&&a("div",{key:"3c20e6b5b678027d711c7976c60e3be92d02fae3",class:"row"},"Other"===this.category&&a("label",{key:"4cd14baeff186c7db8fabe57b21b241567528437",class:"custom-area-field"},"Enter category name",a("input",{key:"b1880e7aaadb3ade3c980c7f44d6b0a8d4fc3923",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:"abd5094a23a182458ff2b76a58b55d65a9540c83",class:"error"},this.errors.customCategory)),"Other"===this.area&&a("label",{key:"696c0cc6af2cf16df8559da441e38635d8e0012c",class:"custom-area-field"},"Enter cuisine name",a("input",{key:"663fee3941527c736d953cc993b886746dabab23",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:"6e1b7ebfac7166fb1120b0d8f914bb076f5e40ee",class:"error"},this.errors.customArea))),a("div",{key:"fe85b73291a5ee955d069f20ddf33835d09b95bd",class:"field"},a("span",{key:"fd010d7b12306bd4306caf03ebd972feb1e0ebb9"},"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:"8168f7e7f4bef8be1e74d1adf377b5471701c0ff",type:"button",class:"add-btn",onClick:this.addIngredient},"+ Add ingredient"),this.errors.ingredients&&a("span",{key:"3e35a8fe02833b27a333fa157548b88b3f5e3842",class:"error"},this.errors.ingredients)),a("label",{key:"c5c583cba5363ce35e6d41f95917bc49e3cca02d"},"Instructions",a("textarea",{key:"514c219989a01cf1ad77739bd6c0df066362c689",rows:5,onInput:e=>{this.instructions=e.target.value,this.clearErrorIf("instructions",!!this.instructions.trim())}},this.instructions),this.errors.instructions&&a("span",{key:"89881e3b0d4f864f7ccc835d86b094f367b54b2e",class:"error"},this.errors.instructions)),a("div",{key:"b9a812287af44062e1c68034881ba62321b0e660",class:"footer"},a("slot",{key:"a8307179d95cfd713d8f5fbe6e996fefb1d54907",name:"footer"}),a("button",{key:"aa75decaf67c74a183af182864a37a6cd37b56ff",type:"button",class:"cancel-btn",onClick:()=>this.cancel.emit()},"Cancel"),a("button",{key:"13ea35b114f1a7721347f986c6c4e64968583025",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
|
+
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,cuisine: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.cuisine&&!i.includes(e.cuisine)?(this.area="Other",this.customArea=e.cuisine):(this.area=e.cuisine??"",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:"c29ab62af9db4a95e11b75f25a2dd4c23e699dad",onSubmit:this.onSubmit},a("slot",{key:"ece02ab46a1075eaef912e8953e70faa11bc8d8d",name:"header"}),a("label",{key:"9e17e9ba311350d9235f5ec01c32743dfbf55b0e"},"Title",a("input",{key:"2b8d632bc22eb5cde52198287ea2b19d87567dba",type:"text",value:this.title,onInput:e=>{this.title=e.target.value,this.clearErrorIf("title",!!this.title.trim())}}),this.errors.title&&a("span",{key:"3a34d1f5e1f43ef190983dd0883f16eb6775f07c",class:"error"},this.errors.title)),a("label",{key:"6acda6ccaff2e0315cc1964ae30c18647fe97bd1"},"Image URL",a("input",{key:"6bdc06a2bebd6b5ae984865aefe292426fbe38cb",type:"text",value:this.image,onInput:e=>this.image=e.target.value})),a("div",{key:"f6ef49aaace211659296e93b4b5b47b29db73ac6",class:"row"},a("label",{key:"9610c81a85ebddc2da4bdadcdee68ddea78e28d4"},"Category",a("select",{key:"46542ff9e2c0f15d60be6744e063f3c860475772",onInput:e=>{this.category=e.target.value,this.clearErrorIf("category",!!this.category),"Other"!==this.category&&this.clearErrorIf("customCategory",!0)}},a("option",{key:"2741b90edd32cb12903e877cbfa2db3b5ff04071",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:"dc8e7ab5a6decdece1b4559af856997251335abf",class:"error"},this.errors.category)),a("label",{key:"792cb1c4fd6052f9d88c52649c6eb4dc064f0071"},"Cuisine / Area",a("select",{key:"06a917ac951a4c6d3e8390534690545a1967581a",onInput:e=>{this.area=e.target.value,this.clearErrorIf("area",!!this.area),"Other"!==this.area&&this.clearErrorIf("customArea",!0)}},a("option",{key:"264c39814065b3f07626975b96eca6b7e1c9bb83",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:"f1a562402420fb7a813dd4184b439c03c71d93d9",class:"error"},this.errors.area))),("Other"===this.category||"Other"===this.area)&&a("div",{key:"3c20e6b5b678027d711c7976c60e3be92d02fae3",class:"row"},"Other"===this.category&&a("label",{key:"4cd14baeff186c7db8fabe57b21b241567528437",class:"custom-area-field"},"Enter category name",a("input",{key:"b1880e7aaadb3ade3c980c7f44d6b0a8d4fc3923",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:"abd5094a23a182458ff2b76a58b55d65a9540c83",class:"error"},this.errors.customCategory)),"Other"===this.area&&a("label",{key:"696c0cc6af2cf16df8559da441e38635d8e0012c",class:"custom-area-field"},"Enter cuisine name",a("input",{key:"663fee3941527c736d953cc993b886746dabab23",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:"6e1b7ebfac7166fb1120b0d8f914bb076f5e40ee",class:"error"},this.errors.customArea))),a("div",{key:"fe85b73291a5ee955d069f20ddf33835d09b95bd",class:"field"},a("span",{key:"fd010d7b12306bd4306caf03ebd972feb1e0ebb9"},"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:"8168f7e7f4bef8be1e74d1adf377b5471701c0ff",type:"button",class:"add-btn",onClick:this.addIngredient},"+ Add ingredient"),this.errors.ingredients&&a("span",{key:"3e35a8fe02833b27a333fa157548b88b3f5e3842",class:"error"},this.errors.ingredients)),a("label",{key:"c5c583cba5363ce35e6d41f95917bc49e3cca02d"},"Instructions",a("textarea",{key:"514c219989a01cf1ad77739bd6c0df066362c689",rows:5,onInput:e=>{this.instructions=e.target.value,this.clearErrorIf("instructions",!!this.instructions.trim())}},this.instructions),this.errors.instructions&&a("span",{key:"89881e3b0d4f864f7ccc835d86b094f367b54b2e",class:"error"},this.errors.instructions)),a("div",{key:"b9a812287af44062e1c68034881ba62321b0e660",class:"footer"},a("slot",{key:"a8307179d95cfd713d8f5fbe6e996fefb1d54907",name:"footer"}),a("button",{key:"aa75decaf67c74a183af182864a37a6cd37b56ff",type:"button",class:"cancel-btn",onClick:()=>this.cancel.emit()},"Cancel"),a("button",{key:"13ea35b114f1a7721347f986c6c4e64968583025",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:rgb(255, 107, 53);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
|
|
1
|
+
import{t as e,p as s,H as t,c as i,h as r}from"./p-BJU3HdRm.js";const a=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:"4854462a06a4c7b7495f2a2c215d079a4d9b1506",class:"wrap"},r("button",{key:"6e210a28a631b7311aeec665209ca5266eb5b8fc",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 c(){"undefined"!=typeof customElements&&["recipe-filter-bar"].forEach((s=>{"recipe-filter-bar"===s&&(customElements.get(e(s))||customElements.define(e(s),a))}))}c();export{a as R,c as d}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e,p as t,H as s,c as i,h as a}from"./p-BJU3HdRm.js";const r=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.search=i(this,"search"),this.placeholder="Search recipes...",this.value="",this.debounceMs=350,this.showSearchButton=!0,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 a("div",{key:"59f5e53b0b165e7059087bb8e845f49a71e56a66",class:"wrap"},a("input",{key:"aba792ff621e372c9f248f5269712d008833475e",type:"search",placeholder:this.placeholder,value:this.internalValue,onInput:this.onInput,onKeyDown:this.onKeyDown}),this.showSearchButton&&a("button",{key:"b23addee9d67ef8c20c76242118e3dea50c64484",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"],showSearchButton:[4,"show-search-button"],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
|
|
1
|
+
import{t as s,p as t,H as o,c as e,h as a}from"./p-BJU3HdRm.js";const i=t(class extends o{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.dismiss=e(this,"dismiss"),this.message="",this.type="info",this.duration=3e3}componentDidLoad(){this.duration>0&&setTimeout((()=>this.dismiss.emit()),this.duration)}render(){return a("div",{key:"a21609114632b770771cfa5d548144c86e12d282",class:`toast ${this.type}`},a("span",{key:"82a7e0f850a079b789f9591b1a64a82bd3520284"},this.message),a("button",{key:"cb89422d91724c90642c8b5427401040a6377d7d",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}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e,p as a,H as t,c as i,h as s}from"./p-BJU3HdRm.js";const r=a(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.favoriteToggle=i(this,"favoriteToggle"),this.cardClick=i(this,"cardClick"),this.category="",this.cuisine="",this.favorite=!1,this.onFavoriteClick=e=>{e.stopPropagation(),this.favoriteToggle.emit({favorite:!this.favorite})}}render(){return s("div",{key:"64d7f6fb92a01c650f3972c4c0f0164f1904d959",class:"card",onClick:()=>this.cardClick.emit()},s("div",{key:"b9d014e3fc77346eaa76e6feb15369e9fb622624",class:"image-wrap"},this.image?s("img",{src:this.image,alt:this.recipeTitle}):s("div",{class:"placeholder"}),s("button",{key:"1690299a371310ad5e6b0e0cc238853fb3e9f439",class:{"fav-btn":!0,active:this.favorite},onClick:this.onFavoriteClick,"aria-label":"Toggle favorite"},this.favorite?"★":"☆")),s("div",{key:"52e02f3b16c2ab51209c6812aa94b4642504836a",class:"body"},s("h3",{key:"6df2f0f3146dd8ef5f91cce8e29f0dca00ffbd0a"},this.recipeTitle),this.category&&s("span",{key:"b0375016c50928cb25c070433460991b97aa2986",class:"category"},this.category),this.cuisine&&s("span",{key:"48a269aceb970fab1a50ab6b669efb99fb5e3f1e",class:"cuisine"},this.cuisine),s("div",{key:"22330af217cf33e8f15bbc5406509322471c783f",class:"actions"},s("slot",{key:"d234fc51abd28735888419723c570b7ddf5a6b5a",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:rgb(255, 107, 53)}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category,.cuisine{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],cuisine:[1],favorite:[4]}]);function c(){"undefined"!=typeof customElements&&["recipe-card"].forEach((a=>{"recipe-card"===a&&(customElements.get(e(a))||customElements.define(e(a),r))}))}c();export{r as R,c 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:"d9fe9609656b70a10c1be40a16913e8cb839e7df",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{R as o,d as s}from"./p-
|
|
1
|
+
import{R as o,d as s}from"./p-Dn6SSsDo.js";const p=o,r=s;export{p as RecipeCard,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{R as o,d as
|
|
1
|
+
import{R as o,d as s}from"./p-Cug7zee9.js";const e=o,p=s;export{e as RecipeFilterBar,p as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{R as
|
|
1
|
+
import{R as s,d as o}from"./p-CDsXcD4i.js";const p=s,r=o;export{p as RecipeForm,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{R as
|
|
1
|
+
import{R as r,d as o}from"./p-Xr9vrvZS.js";const s=r,p=o;export{s as RecipeRating,p as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{R as
|
|
1
|
+
import{R as o,d as s}from"./p-DFwmqhHV.js";const m=o,p=s;export{m as RecipeSearchBar,p as defineCustomElement}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h } from './index-CrZUP9M-.js';
|
|
2
2
|
|
|
3
|
-
const recipeCardCss = () => `: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
|
|
3
|
+
const recipeCardCss = () => `: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:rgb(255, 107, 53)}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category,.cuisine{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:0.03em}.actions{margin-top:8px}`;
|
|
4
4
|
|
|
5
5
|
const RecipeCard = class {
|
|
6
6
|
constructor(hostRef) {
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
this.favoriteToggle = createEvent(this, "favoriteToggle");
|
|
9
9
|
this.cardClick = createEvent(this, "cardClick");
|
|
10
|
-
/** Category
|
|
10
|
+
/** Category label */
|
|
11
11
|
this.category = '';
|
|
12
|
+
/** Cuisine label */
|
|
13
|
+
this.cuisine = '';
|
|
12
14
|
/** Whether this recipe is currently favorited */
|
|
13
15
|
this.favorite = false;
|
|
14
16
|
this.onFavoriteClick = (e) => {
|
|
@@ -17,7 +19,7 @@ const RecipeCard = class {
|
|
|
17
19
|
};
|
|
18
20
|
}
|
|
19
21
|
render() {
|
|
20
|
-
return (h("div", { key: '
|
|
22
|
+
return (h("div", { key: '64d7f6fb92a01c650f3972c4c0f0164f1904d959', class: "card", onClick: () => this.cardClick.emit() }, h("div", { key: 'b9d014e3fc77346eaa76e6feb15369e9fb622624', class: "image-wrap" }, this.image ? h("img", { src: this.image, alt: this.recipeTitle }) : h("div", { class: "placeholder" }), h("button", { key: '1690299a371310ad5e6b0e0cc238853fb3e9f439', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), h("div", { key: '52e02f3b16c2ab51209c6812aa94b4642504836a', class: "body" }, h("h3", { key: '6df2f0f3146dd8ef5f91cce8e29f0dca00ffbd0a' }, this.recipeTitle), this.category && h("span", { key: 'b0375016c50928cb25c070433460991b97aa2986', class: "category" }, this.category), this.cuisine && h("span", { key: '48a269aceb970fab1a50ab6b669efb99fb5e3f1e', class: "cuisine" }, this.cuisine), h("div", { key: '22330af217cf33e8f15bbc5406509322471c783f', class: "actions" }, h("slot", { key: 'd234fc51abd28735888419723c570b7ddf5a6b5a', name: "actions" })))));
|
|
21
23
|
}
|
|
22
24
|
};
|
|
23
25
|
RecipeCard.style = recipeCardCss();
|
|
@@ -31,6 +33,7 @@ const RecipeSearchBar = class {
|
|
|
31
33
|
this.placeholder = 'Search recipes...';
|
|
32
34
|
this.value = '';
|
|
33
35
|
this.debounceMs = 350;
|
|
36
|
+
this.showSearchButton = true;
|
|
34
37
|
this.internalValue = '';
|
|
35
38
|
this.onInput = (e) => {
|
|
36
39
|
this.internalValue = e.target.value;
|
|
@@ -53,7 +56,8 @@ const RecipeSearchBar = class {
|
|
|
53
56
|
this.internalValue = newVal;
|
|
54
57
|
}
|
|
55
58
|
render() {
|
|
56
|
-
return (h("div", { key: '
|
|
59
|
+
return (h("div", { key: '59f5e53b0b165e7059087bb8e845f49a71e56a66', class: "wrap" }, h("input", { key: 'aba792ff621e372c9f248f5269712d008833475e', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), this.showSearchButton &&
|
|
60
|
+
h("button", { key: 'b23addee9d67ef8c20c76242118e3dea50c64484', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
|
|
57
61
|
}
|
|
58
62
|
static get watchers() { return {
|
|
59
63
|
"value": [{
|
|
@@ -77,7 +81,7 @@ const RecipeFilterBar = class {
|
|
|
77
81
|
}
|
|
78
82
|
render() {
|
|
79
83
|
const cats = Array.isArray(this.categories) ? this.categories : [];
|
|
80
|
-
return (h("div", { key: '
|
|
84
|
+
return (h("div", { key: '4854462a06a4c7b7495f2a2c215d079a4d9b1506', class: "wrap" }, h("button", { key: '6e210a28a631b7311aeec665209ca5266eb5b8fc', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
|
|
81
85
|
}
|
|
82
86
|
};
|
|
83
87
|
RecipeFilterBar.style = recipeFilterBarCss();
|
|
@@ -94,12 +98,12 @@ const RecipeRating = class {
|
|
|
94
98
|
}
|
|
95
99
|
render() {
|
|
96
100
|
const stars = Array.from({ length: this.max }, (_, i) => i + 1);
|
|
97
|
-
return (h("div", { key: '
|
|
101
|
+
return (h("div", { key: 'd9fe9609656b70a10c1be40a16913e8cb839e7df', 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")))));
|
|
98
102
|
}
|
|
99
103
|
};
|
|
100
104
|
RecipeRating.style = recipeRatingCss();
|
|
101
105
|
|
|
102
|
-
const recipeFormCss = () => `: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
|
|
106
|
+
const recipeFormCss = () => `: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:rgb(255, 107, 53);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}`;
|
|
103
107
|
|
|
104
108
|
const DEFAULT_CATEGORIES = [
|
|
105
109
|
'Beef', 'Breakfast', 'Chicken', 'Dessert', 'Goat', 'Lamb',
|
|
@@ -16,7 +16,7 @@ const AppToast = class {
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
return (h("div", { key: '
|
|
19
|
+
return (h("div", { key: 'a21609114632b770771cfa5d548144c86e12d282', class: `toast ${this.type}` }, h("span", { key: '82a7e0f850a079b789f9591b1a64a82bd3520284' }, this.message), h("button", { key: 'cb89422d91724c90642c8b5427401040a6377d7d', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
AppToast.style = appToastCss();
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["app-modal_7",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[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]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
|
|
8
|
+
return bootstrapLazy([["app-modal_7",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"cuisine":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[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]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"showSearchButton":[4,"show-search-button"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
package/dist/esm/recipe-ui.js
CHANGED
|
@@ -17,5 +17,5 @@ var patchBrowser = () => {
|
|
|
17
17
|
|
|
18
18
|
patchBrowser().then(async (options) => {
|
|
19
19
|
await globalScripts();
|
|
20
|
-
return bootstrapLazy([["app-modal_7",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[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]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
|
|
20
|
+
return bootstrapLazy([["app-modal_7",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"cuisine":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[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]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"showSearchButton":[4,"show-search-button"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
|
|
21
21
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as s,c as t,h as o}from"./p-CrZUP9M-.js";const a=class{constructor(o){s(this,o),this.dismiss=t(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:"
|
|
1
|
+
import{r as s,c as t,h as o}from"./p-CrZUP9M-.js";const a=class{constructor(o){s(this,o),this.dismiss=t(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:"a21609114632b770771cfa5d548144c86e12d282",class:`toast ${this.type}`},o("span",{key:"82a7e0f850a079b789f9591b1a64a82bd3520284"},this.message),o("button",{key:"cb89422d91724c90642c8b5427401040a6377d7d",onClick:()=>this.dismiss.emit(),"aria-label":"Dismiss"},"✕"))}};a.style=":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}";export{a as app_toast}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,c as t,h as i}from"./p-CrZUP9M-.js";const s=class{constructor(i){e(this,i),this.favoriteToggle=t(this,"favoriteToggle"),this.cardClick=t(this,"cardClick"),this.category="",this.cuisine="",this.favorite=!1,this.onFavoriteClick=e=>{e.stopPropagation(),this.favoriteToggle.emit({favorite:!this.favorite})}}render(){return i("div",{key:"64d7f6fb92a01c650f3972c4c0f0164f1904d959",class:"card",onClick:()=>this.cardClick.emit()},i("div",{key:"b9d014e3fc77346eaa76e6feb15369e9fb622624",class:"image-wrap"},this.image?i("img",{src:this.image,alt:this.recipeTitle}):i("div",{class:"placeholder"}),i("button",{key:"1690299a371310ad5e6b0e0cc238853fb3e9f439",class:{"fav-btn":!0,active:this.favorite},onClick:this.onFavoriteClick,"aria-label":"Toggle favorite"},this.favorite?"★":"☆")),i("div",{key:"52e02f3b16c2ab51209c6812aa94b4642504836a",class:"body"},i("h3",{key:"6df2f0f3146dd8ef5f91cce8e29f0dca00ffbd0a"},this.recipeTitle),this.category&&i("span",{key:"b0375016c50928cb25c070433460991b97aa2986",class:"category"},this.category),this.cuisine&&i("span",{key:"48a269aceb970fab1a50ab6b669efb99fb5e3f1e",class:"cuisine"},this.cuisine),i("div",{key:"22330af217cf33e8f15bbc5406509322471c783f",class:"actions"},i("slot",{key:"d234fc51abd28735888419723c570b7ddf5a6b5a",name:"actions"}))))}};s.style=":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:rgb(255, 107, 53)}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category,.cuisine{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:0.03em}.actions{margin-top:8px}";const a=class{constructor(i){e(this,i),this.search=t(this,"search"),this.placeholder="Search recipes...",this.value="",this.debounceMs=350,this.showSearchButton=!0,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:"59f5e53b0b165e7059087bb8e845f49a71e56a66",class:"wrap"},i("input",{key:"aba792ff621e372c9f248f5269712d008833475e",type:"search",placeholder:this.placeholder,value:this.internalValue,onInput:this.onInput,onKeyDown:this.onKeyDown}),this.showSearchButton&&i("button",{key:"b23addee9d67ef8c20c76242118e3dea50c64484",onClick:()=>this.search.emit({value:this.internalValue}),"aria-label":"Search"},"🔍"))}static get watchers(){return{value:[{onValuePropChange:0}]}}};a.style=":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}";const r=class{constructor(i){e(this,i),this.filterChange=t(this,"filterChange"),this.categories=[],this.active=""}select(e){this.filterChange.emit({value:e})}render(){const e=Array.isArray(this.categories)?this.categories:[];return i("div",{key:"4854462a06a4c7b7495f2a2c215d079a4d9b1506",class:"wrap"},i("button",{key:"6e210a28a631b7311aeec665209ca5266eb5b8fc",class:{chip:!0,active:""===this.active},onClick:()=>this.select("")},"All"),e.map((e=>i("button",{class:{chip:!0,active:this.active===e},onClick:()=>this.select(e)},e))))}};r.style=":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}";const o=class{constructor(i){e(this,i),this.ratingChange=t(this,"ratingChange"),this.value=0,this.readonly=!1,this.max=5}render(){const e=Array.from({length:this.max},((e,t)=>t+1));return i("div",{key:"d9fe9609656b70a10c1be40a16913e8cb839e7df",class:"wrap",role:this.readonly?void 0:"radiogroup"},e.map((e=>i("span",{class:{star:!0,filled:e<=this.value,clickable:!this.readonly},onClick:()=>!this.readonly&&this.ratingChange.emit({value:e})},"★"))))}};o.style=":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}";const n=["Beef","Breakfast","Chicken","Dessert","Goat","Lamb","Miscellaneous","Pasta","Pork","Seafood","Side","Starter","Vegan","Vegetarian","Other"],c=["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"],d=class{constructor(i){e(this,i),this.save=t(this,"save"),this.cancel=t(this,"cancel"),this.categories=n,this.extraCategories=[],this.areas=c,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,cuisine: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.cuisine&&!i.includes(e.cuisine)?(this.area="Other",this.customArea=e.cuisine):(this.area=e.cuisine??"",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 i("form",{key:"c29ab62af9db4a95e11b75f25a2dd4c23e699dad",onSubmit:this.onSubmit},i("slot",{key:"ece02ab46a1075eaef912e8953e70faa11bc8d8d",name:"header"}),i("label",{key:"9e17e9ba311350d9235f5ec01c32743dfbf55b0e"},"Title",i("input",{key:"2b8d632bc22eb5cde52198287ea2b19d87567dba",type:"text",value:this.title,onInput:e=>{this.title=e.target.value,this.clearErrorIf("title",!!this.title.trim())}}),this.errors.title&&i("span",{key:"3a34d1f5e1f43ef190983dd0883f16eb6775f07c",class:"error"},this.errors.title)),i("label",{key:"6acda6ccaff2e0315cc1964ae30c18647fe97bd1"},"Image URL",i("input",{key:"6bdc06a2bebd6b5ae984865aefe292426fbe38cb",type:"text",value:this.image,onInput:e=>this.image=e.target.value})),i("div",{key:"f6ef49aaace211659296e93b4b5b47b29db73ac6",class:"row"},i("label",{key:"9610c81a85ebddc2da4bdadcdee68ddea78e28d4"},"Category",i("select",{key:"46542ff9e2c0f15d60be6744e063f3c860475772",onInput:e=>{this.category=e.target.value,this.clearErrorIf("category",!!this.category),"Other"!==this.category&&this.clearErrorIf("customCategory",!0)}},i("option",{key:"2741b90edd32cb12903e877cbfa2db3b5ff04071",value:"",selected:""===this.category},"Select a category…"),this.fullCategoryList.map((e=>i("option",{value:e,selected:e===this.category},e)))),this.errors.category&&i("span",{key:"dc8e7ab5a6decdece1b4559af856997251335abf",class:"error"},this.errors.category)),i("label",{key:"792cb1c4fd6052f9d88c52649c6eb4dc064f0071"},"Cuisine / Area",i("select",{key:"06a917ac951a4c6d3e8390534690545a1967581a",onInput:e=>{this.area=e.target.value,this.clearErrorIf("area",!!this.area),"Other"!==this.area&&this.clearErrorIf("customArea",!0)}},i("option",{key:"264c39814065b3f07626975b96eca6b7e1c9bb83",value:"",selected:""===this.area},"Select a cuisine…"),this.fullAreaList.map((e=>i("option",{value:e,selected:e===this.area},e)))),this.errors.area&&i("span",{key:"f1a562402420fb7a813dd4184b439c03c71d93d9",class:"error"},this.errors.area))),("Other"===this.category||"Other"===this.area)&&i("div",{key:"3c20e6b5b678027d711c7976c60e3be92d02fae3",class:"row"},"Other"===this.category&&i("label",{key:"4cd14baeff186c7db8fabe57b21b241567528437",class:"custom-area-field"},"Enter category name",i("input",{key:"b1880e7aaadb3ade3c980c7f44d6b0a8d4fc3923",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&&i("span",{key:"abd5094a23a182458ff2b76a58b55d65a9540c83",class:"error"},this.errors.customCategory)),"Other"===this.area&&i("label",{key:"696c0cc6af2cf16df8559da441e38635d8e0012c",class:"custom-area-field"},"Enter cuisine name",i("input",{key:"663fee3941527c736d953cc993b886746dabab23",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&&i("span",{key:"6e1b7ebfac7166fb1120b0d8f914bb076f5e40ee",class:"error"},this.errors.customArea))),i("div",{key:"fe85b73291a5ee955d069f20ddf33835d09b95bd",class:"field"},i("span",{key:"fd010d7b12306bd4306caf03ebd972feb1e0ebb9"},"Ingredients"),this.ingredients.map(((e,t)=>i("div",{class:"ingredient-row"},i("input",{type:"text",value:e,onInput:e=>this.updateIngredient(t,e.target.value)}),i("button",{type:"button",onClick:()=>this.removeIngredient(t),"aria-label":"Remove"},"✕")))),i("button",{key:"8168f7e7f4bef8be1e74d1adf377b5471701c0ff",type:"button",class:"add-btn",onClick:this.addIngredient},"+ Add ingredient"),this.errors.ingredients&&i("span",{key:"3e35a8fe02833b27a333fa157548b88b3f5e3842",class:"error"},this.errors.ingredients)),i("label",{key:"c5c583cba5363ce35e6d41f95917bc49e3cca02d"},"Instructions",i("textarea",{key:"514c219989a01cf1ad77739bd6c0df066362c689",rows:5,onInput:e=>{this.instructions=e.target.value,this.clearErrorIf("instructions",!!this.instructions.trim())}},this.instructions),this.errors.instructions&&i("span",{key:"89881e3b0d4f864f7ccc835d86b094f367b54b2e",class:"error"},this.errors.instructions)),i("div",{key:"b9a812287af44062e1c68034881ba62321b0e660",class:"footer"},i("slot",{key:"a8307179d95cfd713d8f5fbe6e996fefb1d54907",name:"footer"}),i("button",{key:"aa75decaf67c74a183af182864a37a6cd37b56ff",type:"button",class:"cancel-btn",onClick:()=>this.cancel.emit()},"Cancel"),i("button",{key:"13ea35b114f1a7721347f986c6c4e64968583025",type:"submit",class:"save-btn"},"Save Recipe")))}static get watchers(){return{initialData:[{onInitialDataChange:0}]}}};d.style=":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:rgb(255, 107, 53);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}";const l=class{constructor(i){e(this,i),this.assignMeal=t(this,"assignMeal"),this.removeMeal=t(this,"removeMeal"),this.day="",this.meals=[],this.icon=""}render(){const e=Array.isArray(this.meals)?this.meals:[];return i("div",{key:"cd4f194f1eeb5f53a029f380c40aa0b4ec2f32f4",class:"day-col"},i("div",{key:"d88966142d5101fc522d5de89b6d4cab72cbbbf3",class:"col-header"},this.icon&&i("span",{key:"5a9a27a3a1909bcf7295ec7eeccf309e5e2d1ae0",class:"icon"},this.icon),i("h3",{key:"fd1fa2f1274cc1f6bd8917959015722cb69002ba"},this.day),e.length>0&&i("span",{key:"feff3bc91b52203dba19f7a87c56d3813fc95cdd",class:"count-badge"},e.length)),i("div",{key:"4afee9ce77bf1447bf9e32efc7e2f9b9571873e7",class:"meals"},e.map((e=>i("div",{class:"meal-chip"},i("div",{class:"thumb"},e.image&&i("img",{src:e.image,alt:e.title})),i("span",{class:"title"},e.title),i("button",{class:"remove-btn",onClick:()=>this.removeMeal.emit({day:this.day,mealId:e.id}),"aria-label":`Remove ${e.title}`},"✕")))),0===e.length&&i("p",{key:"9a4002b1b4516fc5ff6ef8f9a2e0a7f5e8465cbd",class:"empty"},"No meal planned")),i("button",{key:"2cef3c5f7d0e89303cb8989f78eefb95c426683f",class:"add-btn",onClick:()=>this.assignMeal.emit({day:this.day})},i("span",{key:"ae54b56f8f0b01f45029e36919764ae31f3a38b9",class:"plus"},"+")," Add meal"))}};l.style=":host{display:block;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif}.day-col{background:#ffffff;border:1px solid #e8eaed;border-radius:12px;padding:14px;min-width:160px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(16, 24, 40, 0.04);transition:box-shadow 0.15s ease, border-color 0.15s ease}.day-col:hover{box-shadow:0 4px 12px rgba(16, 24, 40, 0.08);border-color:#d8dce1}.col-header{display:flex;align-items:center;gap:6px;padding-bottom:8px;border-bottom:1px solid #f0f1f3}.col-header .icon{font-size:15px;line-height:1}.col-header h3{margin:0;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#4b5563;flex:1}.count-badge{background:#eef2ff;color:#4338ca;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;line-height:1.5}.meals{display:flex;flex-direction:column;gap:6px;min-height:44px}.meal-chip{display:flex;align-items:center;gap:8px;background:#f9fafb;border:1px solid #eef0f2;border-radius:9px;padding:6px 8px;font-size:12.5px;transition:background 0.12s ease}.meal-chip:hover{background:#f3f4f6}.thumb{width:28px;height:28px;border-radius:6px;overflow:hidden;flex-shrink:0;background:#e5e7eb}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.meal-chip .title{flex:1;color:#1f2937;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remove-btn{border:none;background:none;cursor:pointer;color:#9ca3af;font-size:11px;line-height:1;padding:3px;border-radius:5px;transition:color 0.12s ease, background 0.12s ease}.remove-btn:hover{color:#dc2626;background:#fef2f2}.empty{font-size:12px;color:#9ca3af;margin:6px 0;text-align:center;font-style:italic}.add-btn{display:flex;align-items:center;justify-content:center;gap:4px;border:1.5px dashed #d1d5db;background:none;border-radius:9px;padding:7px;font-size:12px;font-weight:600;cursor:pointer;color:#6b7280;transition:border-color 0.12s ease, color 0.12s ease, background 0.12s ease}.add-btn:hover{border-color:#6366f1;color:#4f46e5;background:#f5f5ff}.plus{font-size:14px;line-height:1}";const h=class{constructor(i){e(this,i),this.close=t(this,"close"),this.open=!1,this.modalTitle=""}render(){return this.open?i("div",{class:"overlay",onClick:()=>this.close.emit()},i("div",{class:"dialog",onClick:e=>e.stopPropagation()},i("div",{class:"header"},i("h2",null,this.modalTitle),i("button",{class:"close-btn",onClick:()=>this.close.emit(),"aria-label":"Close"},"✕")),i("div",{class:"body"},i("slot",null)))):null}};h.style=":host{font-family:system-ui, sans-serif}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.45);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:12px;min-width:320px;max-width:90vw;max-height:85vh;overflow-y:auto;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.2)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.header h2{margin:0;font-size:18px}.close-btn{border:none;background:none;font-size:16px;cursor:pointer;color:#666}";export{h as app_modal,l as meal_plan_day,s as recipe_card,r as recipe_filter_bar,d as recipe_form,o as recipe_rating,a as recipe_search_bar}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-CrZUP9M-.js";export{s as setNonce}from"./p-CrZUP9M-.js";import{g as
|
|
1
|
+
import{p as e,b as a}from"./p-CrZUP9M-.js";export{s as setNonce}from"./p-CrZUP9M-.js";import{g as t}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,t={};return""!==a&&(t.resourcesUrl=new URL(".",a).href),e(t)})().then((async e=>(await t(),a([["p-75b34f68",[[257,"app-modal",{open:[4],modalTitle:[1,"modal-title"]}],[1,"meal-plan-day",{day:[1],meals:[16],icon:[1]}],[257,"recipe-card",{recipeTitle:[1,"recipe-title"],image:[1],category:[1],cuisine:[1],favorite:[4]}],[1,"recipe-filter-bar",{categories:[16],active:[1]}],[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]},null,{initialData:[{onInitialDataChange:0}]}],[1,"recipe-rating",{value:[2],readonly:[4],max:[2]}],[1,"recipe-search-bar",{placeholder:[1],value:[1],debounceMs:[2,"debounce-ms"],showSearchButton:[4,"show-search-button"],internalValue:[32]},null,{value:[{onValuePropChange:0}]}]]],["p-2a38e7c3",[[1,"app-toast",{message:[1],type:[1],duration:[2]}]]]],e))));
|
|
@@ -11,8 +11,10 @@ export declare class RecipeCard {
|
|
|
11
11
|
recipeTitle: string;
|
|
12
12
|
/** Image URL */
|
|
13
13
|
image: string;
|
|
14
|
-
/** Category
|
|
14
|
+
/** Category label */
|
|
15
15
|
category: string;
|
|
16
|
+
/** Cuisine label */
|
|
17
|
+
cuisine: string;
|
|
16
18
|
/** Whether this recipe is currently favorited */
|
|
17
19
|
favorite: boolean;
|
|
18
20
|
/** Fired when the favorite button is toggled */
|
|
@@ -63,10 +63,15 @@ export namespace Components {
|
|
|
63
63
|
*/
|
|
64
64
|
interface RecipeCard {
|
|
65
65
|
/**
|
|
66
|
-
* Category
|
|
66
|
+
* Category label
|
|
67
67
|
* @default ''
|
|
68
68
|
*/
|
|
69
69
|
"category": string;
|
|
70
|
+
/**
|
|
71
|
+
* Cuisine label
|
|
72
|
+
* @default ''
|
|
73
|
+
*/
|
|
74
|
+
"cuisine": string;
|
|
70
75
|
/**
|
|
71
76
|
* Whether this recipe is currently favorited
|
|
72
77
|
* @default false
|
|
@@ -146,6 +151,10 @@ export namespace Components {
|
|
|
146
151
|
* @default 'Search recipes...'
|
|
147
152
|
*/
|
|
148
153
|
"placeholder": string;
|
|
154
|
+
/**
|
|
155
|
+
* @default true
|
|
156
|
+
*/
|
|
157
|
+
"showSearchButton": boolean;
|
|
149
158
|
/**
|
|
150
159
|
* @default ''
|
|
151
160
|
*/
|
|
@@ -418,10 +427,15 @@ declare namespace LocalJSX {
|
|
|
418
427
|
*/
|
|
419
428
|
interface RecipeCard {
|
|
420
429
|
/**
|
|
421
|
-
* Category
|
|
430
|
+
* Category label
|
|
422
431
|
* @default ''
|
|
423
432
|
*/
|
|
424
433
|
"category"?: string;
|
|
434
|
+
/**
|
|
435
|
+
* Cuisine label
|
|
436
|
+
* @default ''
|
|
437
|
+
*/
|
|
438
|
+
"cuisine"?: string;
|
|
425
439
|
/**
|
|
426
440
|
* Whether this recipe is currently favorited
|
|
427
441
|
* @default false
|
|
@@ -514,6 +528,10 @@ declare namespace LocalJSX {
|
|
|
514
528
|
* @default 'Search recipes...'
|
|
515
529
|
*/
|
|
516
530
|
"placeholder"?: string;
|
|
531
|
+
/**
|
|
532
|
+
* @default true
|
|
533
|
+
*/
|
|
534
|
+
"showSearchButton"?: boolean;
|
|
517
535
|
/**
|
|
518
536
|
* @default ''
|
|
519
537
|
*/
|
|
@@ -537,6 +555,7 @@ declare namespace LocalJSX {
|
|
|
537
555
|
"recipeTitle": string;
|
|
538
556
|
"image": string;
|
|
539
557
|
"category": string;
|
|
558
|
+
"cuisine": string;
|
|
540
559
|
"favorite": boolean;
|
|
541
560
|
}
|
|
542
561
|
interface RecipeFilterBarAttributes {
|
|
@@ -554,6 +573,7 @@ declare namespace LocalJSX {
|
|
|
554
573
|
"placeholder": string;
|
|
555
574
|
"value": string;
|
|
556
575
|
"debounceMs": number;
|
|
576
|
+
"showSearchButton": boolean;
|
|
557
577
|
}
|
|
558
578
|
|
|
559
579
|
interface IntrinsicElements {
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
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 +0,0 @@
|
|
|
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}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as e,c as t,h as i}from"./p-CrZUP9M-.js";const s=class{constructor(i){e(this,i),this.favoriteToggle=t(this,"favoriteToggle"),this.cardClick=t(this,"cardClick"),this.category="",this.favorite=!1,this.onFavoriteClick=e=>{e.stopPropagation(),this.favoriteToggle.emit({favorite:!this.favorite})}}render(){return i("div",{key:"d84f83b5082a49a5a05b93678538bfcfecd92e47",class:"card",onClick:()=>this.cardClick.emit()},i("div",{key:"a0e4f5fae6b7c14c750263f8de9bef9fbd8180a0",class:"image-wrap"},this.image?i("img",{src:this.image,alt:this.recipeTitle}):i("div",{class:"placeholder"}),i("button",{key:"9266af379f6ebeb2624131e5c3f287d64cf4b3a5",class:{"fav-btn":!0,active:this.favorite},onClick:this.onFavoriteClick,"aria-label":"Toggle favorite"},this.favorite?"★":"☆")),i("div",{key:"d0b5fa56b17c14763ecc6301864ef797565c6313",class:"body"},i("h3",{key:"0c67db81d80a820cce2e6bfedd2df2611358d1e8"},this.recipeTitle),this.category&&i("span",{key:"30f89cf328a098be1c109d3e71b8f9f15827c6f1",class:"category"},this.category),i("div",{key:"353b2663855e7ac53817d17acaf7b83908c17d85",class:"actions"},i("slot",{key:"0a04fc5024751df45d744814f579100913dcd1fc",name:"actions"}))))}};s.style=":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}";const a=class{constructor(i){e(this,i),this.search=t(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}]}}};a.style=":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}";const o=class{constructor(i){e(this,i),this.filterChange=t(this,"filterChange"),this.categories=[],this.active=""}select(e){this.filterChange.emit({value:e})}render(){const e=Array.isArray(this.categories)?this.categories:[];return i("div",{key:"3088a84e81d49c06a12f93e491d4ae3e7022635f",class:"wrap"},i("button",{key:"0e8b7455b1364eb76721d4f6c227a0803750c466",class:{chip:!0,active:""===this.active},onClick:()=>this.select("")},"All"),e.map((e=>i("button",{class:{chip:!0,active:this.active===e},onClick:()=>this.select(e)},e))))}};o.style=":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}";const r=class{constructor(i){e(this,i),this.ratingChange=t(this,"ratingChange"),this.value=0,this.readonly=!1,this.max=5}render(){const e=Array.from({length:this.max},((e,t)=>t+1));return i("div",{key:"09bd2482d310e73993faea601d5ab86f20fc6fb7",class:"wrap",role:this.readonly?void 0:"radiogroup"},e.map((e=>i("span",{class:{star:!0,filled:e<=this.value,clickable:!this.readonly},onClick:()=>!this.readonly&&this.ratingChange.emit({value:e})},"★"))))}};r.style=":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}";const c=["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"],d=class{constructor(i){e(this,i),this.save=t(this,"save"),this.cancel=t(this,"cancel"),this.categories=c,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,cuisine: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.cuisine&&!i.includes(e.cuisine)?(this.area="Other",this.customArea=e.cuisine):(this.area=e.cuisine??"",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 i("form",{key:"c29ab62af9db4a95e11b75f25a2dd4c23e699dad",onSubmit:this.onSubmit},i("slot",{key:"ece02ab46a1075eaef912e8953e70faa11bc8d8d",name:"header"}),i("label",{key:"9e17e9ba311350d9235f5ec01c32743dfbf55b0e"},"Title",i("input",{key:"2b8d632bc22eb5cde52198287ea2b19d87567dba",type:"text",value:this.title,onInput:e=>{this.title=e.target.value,this.clearErrorIf("title",!!this.title.trim())}}),this.errors.title&&i("span",{key:"3a34d1f5e1f43ef190983dd0883f16eb6775f07c",class:"error"},this.errors.title)),i("label",{key:"6acda6ccaff2e0315cc1964ae30c18647fe97bd1"},"Image URL",i("input",{key:"6bdc06a2bebd6b5ae984865aefe292426fbe38cb",type:"text",value:this.image,onInput:e=>this.image=e.target.value})),i("div",{key:"f6ef49aaace211659296e93b4b5b47b29db73ac6",class:"row"},i("label",{key:"9610c81a85ebddc2da4bdadcdee68ddea78e28d4"},"Category",i("select",{key:"46542ff9e2c0f15d60be6744e063f3c860475772",onInput:e=>{this.category=e.target.value,this.clearErrorIf("category",!!this.category),"Other"!==this.category&&this.clearErrorIf("customCategory",!0)}},i("option",{key:"2741b90edd32cb12903e877cbfa2db3b5ff04071",value:"",selected:""===this.category},"Select a category…"),this.fullCategoryList.map((e=>i("option",{value:e,selected:e===this.category},e)))),this.errors.category&&i("span",{key:"dc8e7ab5a6decdece1b4559af856997251335abf",class:"error"},this.errors.category)),i("label",{key:"792cb1c4fd6052f9d88c52649c6eb4dc064f0071"},"Cuisine / Area",i("select",{key:"06a917ac951a4c6d3e8390534690545a1967581a",onInput:e=>{this.area=e.target.value,this.clearErrorIf("area",!!this.area),"Other"!==this.area&&this.clearErrorIf("customArea",!0)}},i("option",{key:"264c39814065b3f07626975b96eca6b7e1c9bb83",value:"",selected:""===this.area},"Select a cuisine…"),this.fullAreaList.map((e=>i("option",{value:e,selected:e===this.area},e)))),this.errors.area&&i("span",{key:"f1a562402420fb7a813dd4184b439c03c71d93d9",class:"error"},this.errors.area))),("Other"===this.category||"Other"===this.area)&&i("div",{key:"3c20e6b5b678027d711c7976c60e3be92d02fae3",class:"row"},"Other"===this.category&&i("label",{key:"4cd14baeff186c7db8fabe57b21b241567528437",class:"custom-area-field"},"Enter category name",i("input",{key:"b1880e7aaadb3ade3c980c7f44d6b0a8d4fc3923",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&&i("span",{key:"abd5094a23a182458ff2b76a58b55d65a9540c83",class:"error"},this.errors.customCategory)),"Other"===this.area&&i("label",{key:"696c0cc6af2cf16df8559da441e38635d8e0012c",class:"custom-area-field"},"Enter cuisine name",i("input",{key:"663fee3941527c736d953cc993b886746dabab23",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&&i("span",{key:"6e1b7ebfac7166fb1120b0d8f914bb076f5e40ee",class:"error"},this.errors.customArea))),i("div",{key:"fe85b73291a5ee955d069f20ddf33835d09b95bd",class:"field"},i("span",{key:"fd010d7b12306bd4306caf03ebd972feb1e0ebb9"},"Ingredients"),this.ingredients.map(((e,t)=>i("div",{class:"ingredient-row"},i("input",{type:"text",value:e,onInput:e=>this.updateIngredient(t,e.target.value)}),i("button",{type:"button",onClick:()=>this.removeIngredient(t),"aria-label":"Remove"},"✕")))),i("button",{key:"8168f7e7f4bef8be1e74d1adf377b5471701c0ff",type:"button",class:"add-btn",onClick:this.addIngredient},"+ Add ingredient"),this.errors.ingredients&&i("span",{key:"3e35a8fe02833b27a333fa157548b88b3f5e3842",class:"error"},this.errors.ingredients)),i("label",{key:"c5c583cba5363ce35e6d41f95917bc49e3cca02d"},"Instructions",i("textarea",{key:"514c219989a01cf1ad77739bd6c0df066362c689",rows:5,onInput:e=>{this.instructions=e.target.value,this.clearErrorIf("instructions",!!this.instructions.trim())}},this.instructions),this.errors.instructions&&i("span",{key:"89881e3b0d4f864f7ccc835d86b094f367b54b2e",class:"error"},this.errors.instructions)),i("div",{key:"b9a812287af44062e1c68034881ba62321b0e660",class:"footer"},i("slot",{key:"a8307179d95cfd713d8f5fbe6e996fefb1d54907",name:"footer"}),i("button",{key:"aa75decaf67c74a183af182864a37a6cd37b56ff",type:"button",class:"cancel-btn",onClick:()=>this.cancel.emit()},"Cancel"),i("button",{key:"13ea35b114f1a7721347f986c6c4e64968583025",type:"submit",class:"save-btn"},"Save Recipe")))}static get watchers(){return{initialData:[{onInitialDataChange:0}]}}};d.style=":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}";const l=class{constructor(i){e(this,i),this.assignMeal=t(this,"assignMeal"),this.removeMeal=t(this,"removeMeal"),this.day="",this.meals=[],this.icon=""}render(){const e=Array.isArray(this.meals)?this.meals:[];return i("div",{key:"cd4f194f1eeb5f53a029f380c40aa0b4ec2f32f4",class:"day-col"},i("div",{key:"d88966142d5101fc522d5de89b6d4cab72cbbbf3",class:"col-header"},this.icon&&i("span",{key:"5a9a27a3a1909bcf7295ec7eeccf309e5e2d1ae0",class:"icon"},this.icon),i("h3",{key:"fd1fa2f1274cc1f6bd8917959015722cb69002ba"},this.day),e.length>0&&i("span",{key:"feff3bc91b52203dba19f7a87c56d3813fc95cdd",class:"count-badge"},e.length)),i("div",{key:"4afee9ce77bf1447bf9e32efc7e2f9b9571873e7",class:"meals"},e.map((e=>i("div",{class:"meal-chip"},i("div",{class:"thumb"},e.image&&i("img",{src:e.image,alt:e.title})),i("span",{class:"title"},e.title),i("button",{class:"remove-btn",onClick:()=>this.removeMeal.emit({day:this.day,mealId:e.id}),"aria-label":`Remove ${e.title}`},"✕")))),0===e.length&&i("p",{key:"9a4002b1b4516fc5ff6ef8f9a2e0a7f5e8465cbd",class:"empty"},"No meal planned")),i("button",{key:"2cef3c5f7d0e89303cb8989f78eefb95c426683f",class:"add-btn",onClick:()=>this.assignMeal.emit({day:this.day})},i("span",{key:"ae54b56f8f0b01f45029e36919764ae31f3a38b9",class:"plus"},"+")," Add meal"))}};l.style=":host{display:block;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif}.day-col{background:#ffffff;border:1px solid #e8eaed;border-radius:12px;padding:14px;min-width:160px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(16, 24, 40, 0.04);transition:box-shadow 0.15s ease, border-color 0.15s ease}.day-col:hover{box-shadow:0 4px 12px rgba(16, 24, 40, 0.08);border-color:#d8dce1}.col-header{display:flex;align-items:center;gap:6px;padding-bottom:8px;border-bottom:1px solid #f0f1f3}.col-header .icon{font-size:15px;line-height:1}.col-header h3{margin:0;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#4b5563;flex:1}.count-badge{background:#eef2ff;color:#4338ca;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;line-height:1.5}.meals{display:flex;flex-direction:column;gap:6px;min-height:44px}.meal-chip{display:flex;align-items:center;gap:8px;background:#f9fafb;border:1px solid #eef0f2;border-radius:9px;padding:6px 8px;font-size:12.5px;transition:background 0.12s ease}.meal-chip:hover{background:#f3f4f6}.thumb{width:28px;height:28px;border-radius:6px;overflow:hidden;flex-shrink:0;background:#e5e7eb}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.meal-chip .title{flex:1;color:#1f2937;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remove-btn{border:none;background:none;cursor:pointer;color:#9ca3af;font-size:11px;line-height:1;padding:3px;border-radius:5px;transition:color 0.12s ease, background 0.12s ease}.remove-btn:hover{color:#dc2626;background:#fef2f2}.empty{font-size:12px;color:#9ca3af;margin:6px 0;text-align:center;font-style:italic}.add-btn{display:flex;align-items:center;justify-content:center;gap:4px;border:1.5px dashed #d1d5db;background:none;border-radius:9px;padding:7px;font-size:12px;font-weight:600;cursor:pointer;color:#6b7280;transition:border-color 0.12s ease, color 0.12s ease, background 0.12s ease}.add-btn:hover{border-color:#6366f1;color:#4f46e5;background:#f5f5ff}.plus{font-size:14px;line-height:1}";const h=class{constructor(i){e(this,i),this.close=t(this,"close"),this.open=!1,this.modalTitle=""}render(){return this.open?i("div",{class:"overlay",onClick:()=>this.close.emit()},i("div",{class:"dialog",onClick:e=>e.stopPropagation()},i("div",{class:"header"},i("h2",null,this.modalTitle),i("button",{class:"close-btn",onClick:()=>this.close.emit(),"aria-label":"Close"},"✕")),i("div",{class:"body"},i("slot",null)))):null}};h.style=":host{font-family:system-ui, sans-serif}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.45);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:12px;min-width:320px;max-width:90vw;max-height:85vh;overflow-y:auto;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.2)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.header h2{margin:0;font-size:18px}.close-btn{border:none;background:none;font-size:16px;cursor:pointer;color:#666}";export{h as app_modal,l as meal_plan_day,s as recipe_card,o as recipe_filter_bar,d as recipe_form,r as recipe_rating,a as recipe_search_bar}
|