recipe-planner-ui 1.0.1 → 1.1.1
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/loader.cjs.js +1 -1
- package/dist/cjs/recipe-planner-ui.cjs.js +1 -1
- package/dist/cjs/rp-day-slot.cjs.entry.js +10 -2
- package/dist/cjs/rp-filter-chips_5.cjs.entry.js +7 -1
- package/dist/collection/components/rp-day-slot/rp-day-slot.js +33 -2
- package/dist/collection/components/rp-recipe-card/rp-recipe-card.js +7 -1
- package/dist/components/rp-day-slot.js +1 -1
- package/dist/components/rp-recipe-card.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/recipe-planner-ui.js +1 -1
- package/dist/esm/rp-day-slot.entry.js +10 -2
- package/dist/esm/rp-filter-chips_5.entry.js +7 -1
- package/dist/recipe-planner-ui/p-0c8f7438.entry.js +1 -0
- package/dist/recipe-planner-ui/{p-d54dbd37.entry.js → p-b98e7093.entry.js} +1 -1
- package/dist/recipe-planner-ui/recipe-planner-ui.esm.js +1 -1
- package/dist/types/components/rp-day-slot/rp-day-slot.d.ts +7 -0
- package/dist/types/components.d.ts +10 -0
- package/package.json +1 -1
- package/readme.md +1 -1
- package/dist/recipe-planner-ui/p-66ba2983.entry.js +0 -1
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([["rp-filter-chips_5.cjs",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[516]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}]]],["rp-day-slot.cjs",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"normalized":[32]}]]]], options);
|
|
9
|
+
return index.bootstrapLazy([["rp-filter-chips_5.cjs",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[516]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}]]],["rp-day-slot.cjs",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"dayLabels":[16],"normalized":[32]}]]]], 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([["rp-filter-chips_5.cjs",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[516]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}]]],["rp-day-slot.cjs",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"normalized":[32]}]]]], options);
|
|
22
|
+
return index.bootstrapLazy([["rp-filter-chips_5.cjs",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[516]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}]]],["rp-day-slot.cjs",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"dayLabels":[16],"normalized":[32]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -19,6 +19,13 @@ const DaySlot = class {
|
|
|
19
19
|
meals = [];
|
|
20
20
|
/** All day keys, used to populate each meal's move target list. */
|
|
21
21
|
days = [];
|
|
22
|
+
/**
|
|
23
|
+
* Display names for the keys in `days`, as a key-to-label map.
|
|
24
|
+
*
|
|
25
|
+
* Without this the move control would offer raw keys like "mon". Optional, so a
|
|
26
|
+
* consumer whose keys are already human-readable can leave it unset.
|
|
27
|
+
*/
|
|
28
|
+
dayLabels = {};
|
|
22
29
|
normalized = [];
|
|
23
30
|
/** Fired when the user asks to add a meal to this day. */
|
|
24
31
|
rpAddMeal;
|
|
@@ -46,10 +53,11 @@ const DaySlot = class {
|
|
|
46
53
|
};
|
|
47
54
|
render() {
|
|
48
55
|
const days = Array.isArray(this.days) ? this.days : [];
|
|
56
|
+
const labels = this.dayLabels ?? {};
|
|
49
57
|
const meals = this.normalized;
|
|
50
|
-
return (index.h(index.Host, { key: '
|
|
58
|
+
return (index.h(index.Host, { key: '978933e713e714278d4913516ec1c1aca1593513' }, index.h("section", { key: '7f035218a49d75e8d96f675259d33de09a504334', class: "slot" }, index.h("header", { key: 'c7d620e25558ca4758f6d67ac3eaf74f1f1f756c', class: "head" }, index.h("h3", { key: 'b17841e7792ffc8c7179a395d7dc2219781179b5', class: "day" }, this.dayLabel || this.day), index.h("button", { key: 'f336aac8ff55e5d596c4d99a954218613b6686a2', type: "button", class: "add", onClick: () => this.rpAddMeal.emit(this.day), "aria-label": `Add a meal to ${this.dayLabel || this.day}` }, "+")), meals.length === 0 ? (index.h("div", { class: "empty" }, index.h("slot", null, index.h("p", { class: "empty-text" }, "No meals planned")))) : (index.h("ul", { class: "meals" }, meals.map((meal) => (index.h("li", { class: "meal", key: meal.id }, index.h("span", { class: "meal-title" }, meal.title), index.h("div", { class: "meal-actions" }, index.h("label", { class: "move" }, index.h("span", { class: "sr-only" }, `Move ${meal.title} to another day`), index.h("select", { class: "move-select", onChange: (event) => this.onMove(event, meal) }, index.h("option", { value: "" }, "Move\u2026"), days
|
|
51
59
|
.filter((day) => day !== this.day)
|
|
52
|
-
.map((day) => (index.h("option", { key: day, value: day }, day))))), index.h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, "\u00D7"))))))))));
|
|
60
|
+
.map((day) => (index.h("option", { key: day, value: day }, labels[day] ?? day))))), index.h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, "\u00D7"))))))))));
|
|
53
61
|
}
|
|
54
62
|
};
|
|
55
63
|
DaySlot.style = rpDaySlotCss();
|
|
@@ -176,7 +176,13 @@ const RecipeCard = class {
|
|
|
176
176
|
this.rpFavoriteToggle.emit({ recipeId: this.recipeId, favorite: !this.favorite });
|
|
177
177
|
};
|
|
178
178
|
render() {
|
|
179
|
-
|
|
179
|
+
// Normalized because a consumer that omits the attribute entirely leaves the prop
|
|
180
|
+
// undefined, and `aria-pressed="undefined"` would be dropped from the DOM, leaving a
|
|
181
|
+
// toggle button with no announced state.
|
|
182
|
+
const isFavorite = this.favorite === true;
|
|
183
|
+
return (index.h(index.Host, { key: '3b80c8e4ebd4e0e25d5aac0b09f39a458f82b0f2' }, index.h("article", { key: '7df757f7135b928eb0df9c5bf62bda72c6694975', class: "card" }, index.h("div", { key: '46d04f584290c5f894da560c4fc464968b51334c', class: "media" }, this.image ? (index.h("img", { src: this.image, alt: "", loading: "lazy", width: "320", height: "240" })) : (index.h("div", { class: "media-fallback", "aria-hidden": "true" })), index.h("div", { key: '8fb20568c256bf52b911d766acb826a78af54738', class: "badges" }, index.h("slot", { key: '7a6ae3d9ea493e89942bf46c414b9b81f9fb287c' })), index.h("button", { key: '252477d86dfb1131b4417e0a3a99810f6b2626a5', type: "button", class: "favorite", onClick: this.toggleFavorite, "aria-pressed": isFavorite ? 'true' : 'false', "aria-label": isFavorite
|
|
184
|
+
? `Remove ${this.recipeTitle} from favorites`
|
|
185
|
+
: `Add ${this.recipeTitle} to favorites` }, index.h("svg", { key: '857ecd2421abd6a5177d0eccbc7f225e019bb4e8', viewBox: "0 0 24 24", width: "20", height: "20", "aria-hidden": "true" }, index.h("path", { key: 'c6f7af10fa1f938ba76c8f5363b5d347eb959f19', d: "M12 21s-7.5-4.7-9.3-9A5.2 5.2 0 0 1 12 6.5 5.2 5.2 0 0 1 21.3 12c-1.8 4.3-9.3 9-9.3 9z" })))), index.h("div", { key: 'f09729fe072a150d074b92f3c84f1b337b5e10af', class: "body" }, index.h("h3", { key: '79ce18be5cac3edb6ee23d221eb4eaf61ca910f8', class: "title" }, this.recipeTitle), this.category && index.h("p", { key: '47a0031f26046ea67bc31719fda810f9ccbd48fe', class: "category" }, this.category)), index.h("div", { key: 'cca23a5c5da2e80a58b7714ba53aa55122594b0f', class: "actions" }, index.h("slot", { key: 'cf828d445674da18c9a44545788a5d79685a325a', name: "actions" })))));
|
|
180
186
|
}
|
|
181
187
|
};
|
|
182
188
|
RecipeCard.style = rpRecipeCardCss();
|
|
@@ -16,6 +16,13 @@ export class DaySlot {
|
|
|
16
16
|
meals = [];
|
|
17
17
|
/** All day keys, used to populate each meal's move target list. */
|
|
18
18
|
days = [];
|
|
19
|
+
/**
|
|
20
|
+
* Display names for the keys in `days`, as a key-to-label map.
|
|
21
|
+
*
|
|
22
|
+
* Without this the move control would offer raw keys like "mon". Optional, so a
|
|
23
|
+
* consumer whose keys are already human-readable can leave it unset.
|
|
24
|
+
*/
|
|
25
|
+
dayLabels = {};
|
|
19
26
|
normalized = [];
|
|
20
27
|
/** Fired when the user asks to add a meal to this day. */
|
|
21
28
|
rpAddMeal;
|
|
@@ -43,10 +50,11 @@ export class DaySlot {
|
|
|
43
50
|
};
|
|
44
51
|
render() {
|
|
45
52
|
const days = Array.isArray(this.days) ? this.days : [];
|
|
53
|
+
const labels = this.dayLabels ?? {};
|
|
46
54
|
const meals = this.normalized;
|
|
47
|
-
return (h(Host, { key: '
|
|
55
|
+
return (h(Host, { key: '978933e713e714278d4913516ec1c1aca1593513' }, h("section", { key: '7f035218a49d75e8d96f675259d33de09a504334', class: "slot" }, h("header", { key: 'c7d620e25558ca4758f6d67ac3eaf74f1f1f756c', class: "head" }, h("h3", { key: 'b17841e7792ffc8c7179a395d7dc2219781179b5', class: "day" }, this.dayLabel || this.day), h("button", { key: 'f336aac8ff55e5d596c4d99a954218613b6686a2', type: "button", class: "add", onClick: () => this.rpAddMeal.emit(this.day), "aria-label": `Add a meal to ${this.dayLabel || this.day}` }, "+")), meals.length === 0 ? (h("div", { class: "empty" }, h("slot", null, h("p", { class: "empty-text" }, "No meals planned")))) : (h("ul", { class: "meals" }, meals.map((meal) => (h("li", { class: "meal", key: meal.id }, h("span", { class: "meal-title" }, meal.title), h("div", { class: "meal-actions" }, h("label", { class: "move" }, h("span", { class: "sr-only" }, `Move ${meal.title} to another day`), h("select", { class: "move-select", onChange: (event) => this.onMove(event, meal) }, h("option", { value: "" }, "Move\u2026"), days
|
|
48
56
|
.filter((day) => day !== this.day)
|
|
49
|
-
.map((day) => (h("option", { key: day, value: day }, day))))), h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, "\u00D7"))))))))));
|
|
57
|
+
.map((day) => (h("option", { key: day, value: day }, labels[day] ?? day))))), h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, "\u00D7"))))))))));
|
|
50
58
|
}
|
|
51
59
|
static get is() { return "rp-day-slot"; }
|
|
52
60
|
static get encapsulation() { return "scoped"; }
|
|
@@ -142,6 +150,29 @@ export class DaySlot {
|
|
|
142
150
|
"getter": false,
|
|
143
151
|
"setter": false,
|
|
144
152
|
"defaultValue": "[]"
|
|
153
|
+
},
|
|
154
|
+
"dayLabels": {
|
|
155
|
+
"type": "unknown",
|
|
156
|
+
"mutable": false,
|
|
157
|
+
"complexType": {
|
|
158
|
+
"original": "Record<string, string>",
|
|
159
|
+
"resolved": "string",
|
|
160
|
+
"references": {
|
|
161
|
+
"Record": {
|
|
162
|
+
"location": "global",
|
|
163
|
+
"id": "global::Record"
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
"required": false,
|
|
168
|
+
"optional": false,
|
|
169
|
+
"docs": {
|
|
170
|
+
"tags": [],
|
|
171
|
+
"text": "Display names for the keys in `days`, as a key-to-label map.\n\nWithout this the move control would offer raw keys like \"mon\". Optional, so a\nconsumer whose keys are already human-readable can leave it unset."
|
|
172
|
+
},
|
|
173
|
+
"getter": false,
|
|
174
|
+
"setter": false,
|
|
175
|
+
"defaultValue": "{}"
|
|
145
176
|
}
|
|
146
177
|
};
|
|
147
178
|
}
|
|
@@ -34,7 +34,13 @@ export class RecipeCard {
|
|
|
34
34
|
this.rpFavoriteToggle.emit({ recipeId: this.recipeId, favorite: !this.favorite });
|
|
35
35
|
};
|
|
36
36
|
render() {
|
|
37
|
-
|
|
37
|
+
// Normalized because a consumer that omits the attribute entirely leaves the prop
|
|
38
|
+
// undefined, and `aria-pressed="undefined"` would be dropped from the DOM, leaving a
|
|
39
|
+
// toggle button with no announced state.
|
|
40
|
+
const isFavorite = this.favorite === true;
|
|
41
|
+
return (h(Host, { key: '3b80c8e4ebd4e0e25d5aac0b09f39a458f82b0f2' }, h("article", { key: '7df757f7135b928eb0df9c5bf62bda72c6694975', class: "card" }, h("div", { key: '46d04f584290c5f894da560c4fc464968b51334c', class: "media" }, this.image ? (h("img", { src: this.image, alt: "", loading: "lazy", width: "320", height: "240" })) : (h("div", { class: "media-fallback", "aria-hidden": "true" })), h("div", { key: '8fb20568c256bf52b911d766acb826a78af54738', class: "badges" }, h("slot", { key: '7a6ae3d9ea493e89942bf46c414b9b81f9fb287c' })), h("button", { key: '252477d86dfb1131b4417e0a3a99810f6b2626a5', type: "button", class: "favorite", onClick: this.toggleFavorite, "aria-pressed": isFavorite ? 'true' : 'false', "aria-label": isFavorite
|
|
42
|
+
? `Remove ${this.recipeTitle} from favorites`
|
|
43
|
+
: `Add ${this.recipeTitle} to favorites` }, h("svg", { key: '857ecd2421abd6a5177d0eccbc7f225e019bb4e8', viewBox: "0 0 24 24", width: "20", height: "20", "aria-hidden": "true" }, h("path", { key: 'c6f7af10fa1f938ba76c8f5363b5d347eb959f19', d: "M12 21s-7.5-4.7-9.3-9A5.2 5.2 0 0 1 12 6.5 5.2 5.2 0 0 1 21.3 12c-1.8 4.3-9.3 9-9.3 9z" })))), h("div", { key: 'f09729fe072a150d074b92f3c84f1b337b5e10af', class: "body" }, h("h3", { key: '79ce18be5cac3edb6ee23d221eb4eaf61ca910f8', class: "title" }, this.recipeTitle), this.category && h("p", { key: '47a0031f26046ea67bc31719fda810f9ccbd48fe', class: "category" }, this.category)), h("div", { key: 'cca23a5c5da2e80a58b7714ba53aa55122594b0f', class: "actions" }, h("slot", { key: 'cf828d445674da18c9a44545788a5d79685a325a', name: "actions" })))));
|
|
38
44
|
}
|
|
39
45
|
static get is() { return "rp-recipe-card"; }
|
|
40
46
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,t as a,H as s,c as r,h as t,a as o}from"./index.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.rpAddMeal=r(this,"rpAddMeal"),this.rpRemoveMeal=r(this,"rpRemoveMeal"),this.rpMoveMeal=r(this,"rpMoveMeal")}day;dayLabel="";meals=[];days=[];normalized=[];rpAddMeal;rpRemoveMeal;rpMoveMeal;componentWillLoad(){this.normalized=Array.isArray(this.meals)?this.meals:[]}componentWillUpdate(){this.normalized=Array.isArray(this.meals)?this.meals:[]}onMove=(e,a)=>{const s=e.target,r=s.value;r&&r!==this.day&&(this.rpMoveMeal.emit({id:a.id,from:this.day,to:r}),s.value="")};render(){const e=Array.isArray(this.days)?this.days:[],a=this.normalized;return t(o,{key:"
|
|
1
|
+
import{p as e,t as a,H as s,c as r,h as t,a as o}from"./index.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.rpAddMeal=r(this,"rpAddMeal"),this.rpRemoveMeal=r(this,"rpRemoveMeal"),this.rpMoveMeal=r(this,"rpMoveMeal")}day;dayLabel="";meals=[];days=[];dayLabels={};normalized=[];rpAddMeal;rpRemoveMeal;rpMoveMeal;componentWillLoad(){this.normalized=Array.isArray(this.meals)?this.meals:[]}componentWillUpdate(){this.normalized=Array.isArray(this.meals)?this.meals:[]}onMove=(e,a)=>{const s=e.target,r=s.value;r&&r!==this.day&&(this.rpMoveMeal.emit({id:a.id,from:this.day,to:r}),s.value="")};render(){const e=Array.isArray(this.days)?this.days:[],a=this.dayLabels??{},s=this.normalized;return t(o,{key:"978933e713e714278d4913516ec1c1aca1593513"},t("section",{key:"7f035218a49d75e8d96f675259d33de09a504334",class:"slot"},t("header",{key:"c7d620e25558ca4758f6d67ac3eaf74f1f1f756c",class:"head"},t("h3",{key:"b17841e7792ffc8c7179a395d7dc2219781179b5",class:"day"},this.dayLabel||this.day),t("button",{key:"f336aac8ff55e5d596c4d99a954218613b6686a2",type:"button",class:"add",onClick:()=>this.rpAddMeal.emit(this.day),"aria-label":"Add a meal to "+(this.dayLabel||this.day)},"+")),0===s.length?t("div",{class:"empty"},t("slot",null,t("p",{class:"empty-text"},"No meals planned"))):t("ul",{class:"meals"},s.map((s=>t("li",{class:"meal",key:s.id},t("span",{class:"meal-title"},s.title),t("div",{class:"meal-actions"},t("label",{class:"move"},t("span",{class:"sr-only"},`Move ${s.title} to another day`),t("select",{class:"move-select",onChange:e=>this.onMove(e,s)},t("option",{value:""},"Move…"),e.filter((e=>e!==this.day)).map((e=>t("option",{key:e,value:e},a[e]??e))))),t("button",{type:"button",class:"remove",onClick:()=>this.rpRemoveMeal.emit({id:s.id,day:this.day}),"aria-label":"Remove "+s.title},"×"))))))))}static get style(){return".sc-rp-day-slot-h{display:block;font-family:var(--rp-font-sans);color:var(--rp-color-text)}.slot.sc-rp-day-slot{display:flex;flex-direction:column;height:100%;min-height:160px;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-md)}.head.sc-rp-day-slot{display:flex;gap:var(--rp-space-2);align-items:center;justify-content:space-between;padding:var(--rp-space-2) var(--rp-space-3);border-bottom:1px solid var(--rp-color-border)}.day.sc-rp-day-slot{margin:0;font-size:var(--rp-font-size-md);text-transform:capitalize}.add.sc-rp-day-slot{display:grid;place-items:center;width:28px;height:28px;padding:0;font-size:1.125rem;line-height:1;color:var(--rp-color-accent-contrast);cursor:pointer;background:var(--rp-color-accent);border:none;border-radius:50%}.meals.sc-rp-day-slot{flex:1;margin:0;padding:var(--rp-space-2);list-style:none;display:flex;flex-direction:column;gap:var(--rp-space-2)}.meal.sc-rp-day-slot{padding:var(--rp-space-2);background:var(--rp-color-surface-sunken);border-radius:var(--rp-radius-sm)}.meal-title.sc-rp-day-slot{display:block;font-size:var(--rp-font-size-sm);line-height:1.35}.meal-actions.sc-rp-day-slot{display:flex;gap:var(--rp-space-1);align-items:center;justify-content:space-between;margin-top:var(--rp-space-2)}.move-select.sc-rp-day-slot{max-width:100%;padding:2px var(--rp-space-1);font:inherit;font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted);background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-sm);text-transform:capitalize}.remove.sc-rp-day-slot{display:grid;place-items:center;width:24px;height:24px;padding:0;font-size:1.125rem;line-height:1;color:var(--rp-color-danger);cursor:pointer;background:none;border:none;border-radius:var(--rp-radius-sm)}.empty.sc-rp-day-slot{display:grid;flex:1;place-items:center;padding:var(--rp-space-3)}.empty-text.sc-rp-day-slot{margin:0;font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted)}.add.sc-rp-day-slot:focus-visible,.remove.sc-rp-day-slot:focus-visible,.move-select.sc-rp-day-slot:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.sr-only.sc-rp-day-slot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}"}},[774,"rp-day-slot",{day:[1],dayLabel:[1,"day-label"],meals:[16],days:[16],dayLabels:[16],normalized:[32]}]);function i(){"undefined"!=typeof customElements&&["rp-day-slot"].forEach((e=>{"rp-day-slot"===e&&(customElements.get(a(e))||customElements.define(a(e),l))}))}i();const d=l,c=i;export{d as RpDaySlot,c as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as r,c as a,h as c,a as i,t as s}from"./index.js";const t=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.rpFavoriteToggle=a(this,"rpFavoriteToggle")}get el(){return this}recipeId;recipeTitle;image;category;favorite=!1;rpFavoriteToggle;toggleFavorite=()=>{this.rpFavoriteToggle.emit({recipeId:this.recipeId,favorite:!this.favorite})};render(){return c(i,{key:"
|
|
1
|
+
import{p as e,H as r,c as a,h as c,a as i,t as s}from"./index.js";const t=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.rpFavoriteToggle=a(this,"rpFavoriteToggle")}get el(){return this}recipeId;recipeTitle;image;category;favorite=!1;rpFavoriteToggle;toggleFavorite=()=>{this.rpFavoriteToggle.emit({recipeId:this.recipeId,favorite:!this.favorite})};render(){const e=!0===this.favorite;return c(i,{key:"3b80c8e4ebd4e0e25d5aac0b09f39a458f82b0f2"},c("article",{key:"7df757f7135b928eb0df9c5bf62bda72c6694975",class:"card"},c("div",{key:"46d04f584290c5f894da560c4fc464968b51334c",class:"media"},this.image?c("img",{src:this.image,alt:"",loading:"lazy",width:"320",height:"240"}):c("div",{class:"media-fallback","aria-hidden":"true"}),c("div",{key:"8fb20568c256bf52b911d766acb826a78af54738",class:"badges"},c("slot",{key:"7a6ae3d9ea493e89942bf46c414b9b81f9fb287c"})),c("button",{key:"252477d86dfb1131b4417e0a3a99810f6b2626a5",type:"button",class:"favorite",onClick:this.toggleFavorite,"aria-pressed":e?"true":"false","aria-label":e?`Remove ${this.recipeTitle} from favorites`:`Add ${this.recipeTitle} to favorites`},c("svg",{key:"857ecd2421abd6a5177d0eccbc7f225e019bb4e8",viewBox:"0 0 24 24",width:"20",height:"20","aria-hidden":"true"},c("path",{key:"c6f7af10fa1f938ba76c8f5363b5d347eb959f19",d:"M12 21s-7.5-4.7-9.3-9A5.2 5.2 0 0 1 12 6.5 5.2 5.2 0 0 1 21.3 12c-1.8 4.3-9.3 9-9.3 9z"})))),c("div",{key:"f09729fe072a150d074b92f3c84f1b337b5e10af",class:"body"},c("h3",{key:"79ce18be5cac3edb6ee23d221eb4eaf61ca910f8",class:"title"},this.recipeTitle),this.category&&c("p",{key:"47a0031f26046ea67bc31719fda810f9ccbd48fe",class:"category"},this.category)),c("div",{key:"cca23a5c5da2e80a58b7714ba53aa55122594b0f",class:"actions"},c("slot",{key:"cf828d445674da18c9a44545788a5d79685a325a",name:"actions"}))))}static get style(){return".sc-rp-recipe-card-h{display:block;font-family:var(--rp-font-sans);color:var(--rp-color-text)}.card.sc-rp-recipe-card{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-lg);box-shadow:var(--rp-shadow-sm)}.media.sc-rp-recipe-card{position:relative;aspect-ratio:4 / 3;background:var(--rp-color-surface-sunken)}.media.sc-rp-recipe-card img.sc-rp-recipe-card{display:block;width:100%;height:100%;object-fit:cover}.media-fallback.sc-rp-recipe-card{width:100%;height:100%;background:linear-gradient(135deg, var(--rp-color-surface-sunken), var(--rp-color-border))}.badges.sc-rp-recipe-card{position:absolute;inset-block-start:var(--rp-space-2);inset-inline-start:var(--rp-space-2);display:flex;flex-wrap:wrap;gap:var(--rp-space-1)}.favorite.sc-rp-recipe-card{position:absolute;inset-block-start:var(--rp-space-2);inset-inline-end:var(--rp-space-2);display:grid;place-items:center;width:36px;height:36px;padding:0;cursor:pointer;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:50%;box-shadow:var(--rp-shadow-sm)}.favorite.sc-rp-recipe-card svg.sc-rp-recipe-card{fill:none;stroke:var(--rp-color-text-muted);stroke-width:1.8}[favorite].sc-rp-recipe-card-h .favorite.sc-rp-recipe-card svg.sc-rp-recipe-card{fill:var(--rp-color-favorite);stroke:var(--rp-color-favorite)}.favorite.sc-rp-recipe-card:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.body.sc-rp-recipe-card{flex:1;padding:var(--rp-space-3) var(--rp-space-4)}.title.sc-rp-recipe-card{margin:0;font-size:var(--rp-font-size-lg);line-height:1.3}.category.sc-rp-recipe-card{margin:var(--rp-space-1) 0 0;font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted)}.actions.sc-rp-recipe-card{display:flex;gap:var(--rp-space-2);align-items:center;padding:0 var(--rp-space-4) var(--rp-space-4)}.actions.sc-rp-recipe-card:not(:has(*)){display:none}"}},[774,"rp-recipe-card",{recipeId:[1,"recipe-id"],recipeTitle:[1,"recipe-title"],image:[1],category:[1],favorite:[516]}]);function o(){"undefined"!=typeof customElements&&["rp-recipe-card"].forEach((e=>{"rp-recipe-card"===e&&(customElements.get(s(e))||customElements.define(s(e),t))}))}o();const d=t,p=o;export{d as RpRecipeCard,p as defineCustomElement}
|
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([["rp-filter-chips_5",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[516]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}]]],["rp-day-slot",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"normalized":[32]}]]]], options);
|
|
8
|
+
return bootstrapLazy([["rp-filter-chips_5",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[516]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}]]],["rp-day-slot",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"dayLabels":[16],"normalized":[32]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -17,5 +17,5 @@ var patchBrowser = () => {
|
|
|
17
17
|
|
|
18
18
|
patchBrowser().then(async (options) => {
|
|
19
19
|
await globalScripts();
|
|
20
|
-
return bootstrapLazy([["rp-filter-chips_5",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[516]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}]]],["rp-day-slot",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"normalized":[32]}]]]], options);
|
|
20
|
+
return bootstrapLazy([["rp-filter-chips_5",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[516]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}]]],["rp-day-slot",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"dayLabels":[16],"normalized":[32]}]]]], options);
|
|
21
21
|
});
|
|
@@ -17,6 +17,13 @@ const DaySlot = class {
|
|
|
17
17
|
meals = [];
|
|
18
18
|
/** All day keys, used to populate each meal's move target list. */
|
|
19
19
|
days = [];
|
|
20
|
+
/**
|
|
21
|
+
* Display names for the keys in `days`, as a key-to-label map.
|
|
22
|
+
*
|
|
23
|
+
* Without this the move control would offer raw keys like "mon". Optional, so a
|
|
24
|
+
* consumer whose keys are already human-readable can leave it unset.
|
|
25
|
+
*/
|
|
26
|
+
dayLabels = {};
|
|
20
27
|
normalized = [];
|
|
21
28
|
/** Fired when the user asks to add a meal to this day. */
|
|
22
29
|
rpAddMeal;
|
|
@@ -44,10 +51,11 @@ const DaySlot = class {
|
|
|
44
51
|
};
|
|
45
52
|
render() {
|
|
46
53
|
const days = Array.isArray(this.days) ? this.days : [];
|
|
54
|
+
const labels = this.dayLabels ?? {};
|
|
47
55
|
const meals = this.normalized;
|
|
48
|
-
return (h(Host, { key: '
|
|
56
|
+
return (h(Host, { key: '978933e713e714278d4913516ec1c1aca1593513' }, h("section", { key: '7f035218a49d75e8d96f675259d33de09a504334', class: "slot" }, h("header", { key: 'c7d620e25558ca4758f6d67ac3eaf74f1f1f756c', class: "head" }, h("h3", { key: 'b17841e7792ffc8c7179a395d7dc2219781179b5', class: "day" }, this.dayLabel || this.day), h("button", { key: 'f336aac8ff55e5d596c4d99a954218613b6686a2', type: "button", class: "add", onClick: () => this.rpAddMeal.emit(this.day), "aria-label": `Add a meal to ${this.dayLabel || this.day}` }, "+")), meals.length === 0 ? (h("div", { class: "empty" }, h("slot", null, h("p", { class: "empty-text" }, "No meals planned")))) : (h("ul", { class: "meals" }, meals.map((meal) => (h("li", { class: "meal", key: meal.id }, h("span", { class: "meal-title" }, meal.title), h("div", { class: "meal-actions" }, h("label", { class: "move" }, h("span", { class: "sr-only" }, `Move ${meal.title} to another day`), h("select", { class: "move-select", onChange: (event) => this.onMove(event, meal) }, h("option", { value: "" }, "Move\u2026"), days
|
|
49
57
|
.filter((day) => day !== this.day)
|
|
50
|
-
.map((day) => (h("option", { key: day, value: day }, day))))), h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, "\u00D7"))))))))));
|
|
58
|
+
.map((day) => (h("option", { key: day, value: day }, labels[day] ?? day))))), h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, "\u00D7"))))))))));
|
|
51
59
|
}
|
|
52
60
|
};
|
|
53
61
|
DaySlot.style = rpDaySlotCss();
|
|
@@ -174,7 +174,13 @@ const RecipeCard = class {
|
|
|
174
174
|
this.rpFavoriteToggle.emit({ recipeId: this.recipeId, favorite: !this.favorite });
|
|
175
175
|
};
|
|
176
176
|
render() {
|
|
177
|
-
|
|
177
|
+
// Normalized because a consumer that omits the attribute entirely leaves the prop
|
|
178
|
+
// undefined, and `aria-pressed="undefined"` would be dropped from the DOM, leaving a
|
|
179
|
+
// toggle button with no announced state.
|
|
180
|
+
const isFavorite = this.favorite === true;
|
|
181
|
+
return (h(Host, { key: '3b80c8e4ebd4e0e25d5aac0b09f39a458f82b0f2' }, h("article", { key: '7df757f7135b928eb0df9c5bf62bda72c6694975', class: "card" }, h("div", { key: '46d04f584290c5f894da560c4fc464968b51334c', class: "media" }, this.image ? (h("img", { src: this.image, alt: "", loading: "lazy", width: "320", height: "240" })) : (h("div", { class: "media-fallback", "aria-hidden": "true" })), h("div", { key: '8fb20568c256bf52b911d766acb826a78af54738', class: "badges" }, h("slot", { key: '7a6ae3d9ea493e89942bf46c414b9b81f9fb287c' })), h("button", { key: '252477d86dfb1131b4417e0a3a99810f6b2626a5', type: "button", class: "favorite", onClick: this.toggleFavorite, "aria-pressed": isFavorite ? 'true' : 'false', "aria-label": isFavorite
|
|
182
|
+
? `Remove ${this.recipeTitle} from favorites`
|
|
183
|
+
: `Add ${this.recipeTitle} to favorites` }, h("svg", { key: '857ecd2421abd6a5177d0eccbc7f225e019bb4e8', viewBox: "0 0 24 24", width: "20", height: "20", "aria-hidden": "true" }, h("path", { key: 'c6f7af10fa1f938ba76c8f5363b5d347eb959f19', d: "M12 21s-7.5-4.7-9.3-9A5.2 5.2 0 0 1 12 6.5 5.2 5.2 0 0 1 21.3 12c-1.8 4.3-9.3 9-9.3 9z" })))), h("div", { key: 'f09729fe072a150d074b92f3c84f1b337b5e10af', class: "body" }, h("h3", { key: '79ce18be5cac3edb6ee23d221eb4eaf61ca910f8', class: "title" }, this.recipeTitle), this.category && h("p", { key: '47a0031f26046ea67bc31719fda810f9ccbd48fe', class: "category" }, this.category)), h("div", { key: 'cca23a5c5da2e80a58b7714ba53aa55122594b0f', class: "actions" }, h("slot", { key: 'cf828d445674da18c9a44545788a5d79685a325a', name: "actions" })))));
|
|
178
184
|
}
|
|
179
185
|
};
|
|
180
186
|
RecipeCard.style = rpRecipeCardCss();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,c as a,h as r,H as s}from"./p-B4wAFfci.js";const t=class{constructor(r){e(this,r),this.rpAddMeal=a(this,"rpAddMeal"),this.rpRemoveMeal=a(this,"rpRemoveMeal"),this.rpMoveMeal=a(this,"rpMoveMeal")}day;dayLabel="";meals=[];days=[];dayLabels={};normalized=[];rpAddMeal;rpRemoveMeal;rpMoveMeal;componentWillLoad(){this.normalized=Array.isArray(this.meals)?this.meals:[]}componentWillUpdate(){this.normalized=Array.isArray(this.meals)?this.meals:[]}onMove=(e,a)=>{const r=e.target,s=r.value;s&&s!==this.day&&(this.rpMoveMeal.emit({id:a.id,from:this.day,to:s}),r.value="")};render(){const e=Array.isArray(this.days)?this.days:[],a=this.dayLabels??{},t=this.normalized;return r(s,{key:"978933e713e714278d4913516ec1c1aca1593513"},r("section",{key:"7f035218a49d75e8d96f675259d33de09a504334",class:"slot"},r("header",{key:"c7d620e25558ca4758f6d67ac3eaf74f1f1f756c",class:"head"},r("h3",{key:"b17841e7792ffc8c7179a395d7dc2219781179b5",class:"day"},this.dayLabel||this.day),r("button",{key:"f336aac8ff55e5d596c4d99a954218613b6686a2",type:"button",class:"add",onClick:()=>this.rpAddMeal.emit(this.day),"aria-label":`Add a meal to ${this.dayLabel||this.day}`},"+")),0===t.length?r("div",{class:"empty"},r("slot",null,r("p",{class:"empty-text"},"No meals planned"))):r("ul",{class:"meals"},t.map((s=>r("li",{class:"meal",key:s.id},r("span",{class:"meal-title"},s.title),r("div",{class:"meal-actions"},r("label",{class:"move"},r("span",{class:"sr-only"},`Move ${s.title} to another day`),r("select",{class:"move-select",onChange:e=>this.onMove(e,s)},r("option",{value:""},"Move…"),e.filter((e=>e!==this.day)).map((e=>r("option",{key:e,value:e},a[e]??e))))),r("button",{type:"button",class:"remove",onClick:()=>this.rpRemoveMeal.emit({id:s.id,day:this.day}),"aria-label":`Remove ${s.title}`},"×"))))))))}};t.style=".sc-rp-day-slot-h{display:block;font-family:var(--rp-font-sans);color:var(--rp-color-text)}.slot.sc-rp-day-slot{display:flex;flex-direction:column;height:100%;min-height:160px;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-md)}.head.sc-rp-day-slot{display:flex;gap:var(--rp-space-2);align-items:center;justify-content:space-between;padding:var(--rp-space-2) var(--rp-space-3);border-bottom:1px solid var(--rp-color-border)}.day.sc-rp-day-slot{margin:0;font-size:var(--rp-font-size-md);text-transform:capitalize}.add.sc-rp-day-slot{display:grid;place-items:center;width:28px;height:28px;padding:0;font-size:1.125rem;line-height:1;color:var(--rp-color-accent-contrast);cursor:pointer;background:var(--rp-color-accent);border:none;border-radius:50%}.meals.sc-rp-day-slot{flex:1;margin:0;padding:var(--rp-space-2);list-style:none;display:flex;flex-direction:column;gap:var(--rp-space-2)}.meal.sc-rp-day-slot{padding:var(--rp-space-2);background:var(--rp-color-surface-sunken);border-radius:var(--rp-radius-sm)}.meal-title.sc-rp-day-slot{display:block;font-size:var(--rp-font-size-sm);line-height:1.35}.meal-actions.sc-rp-day-slot{display:flex;gap:var(--rp-space-1);align-items:center;justify-content:space-between;margin-top:var(--rp-space-2)}.move-select.sc-rp-day-slot{max-width:100%;padding:2px var(--rp-space-1);font:inherit;font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted);background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-sm);text-transform:capitalize}.remove.sc-rp-day-slot{display:grid;place-items:center;width:24px;height:24px;padding:0;font-size:1.125rem;line-height:1;color:var(--rp-color-danger);cursor:pointer;background:none;border:none;border-radius:var(--rp-radius-sm)}.empty.sc-rp-day-slot{display:grid;flex:1;place-items:center;padding:var(--rp-space-3)}.empty-text.sc-rp-day-slot{margin:0;font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted)}.add.sc-rp-day-slot:focus-visible,.remove.sc-rp-day-slot:focus-visible,.move-select.sc-rp-day-slot:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.sr-only.sc-rp-day-slot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}";export{t as rp_day_slot}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r,c as e,h as a,H as s,g as i}from"./p-B4wAFfci.js";const o=class{constructor(a){r(this,a),this.rpFilterChange=e(this,"rpFilterChange")}options=[];selected=null;label="Filter";rpFilterChange;select(r){this.rpFilterChange.emit(this.selected===r?null:r)}render(){const r=Array.isArray(this.options)?this.options:[];return a(s,{key:"656b969af2e55a7c4313bc0c2c422e000811af53"},a("div",{key:"1da1173fc1d6d10a312a43466a0ea799b625caef",class:"chips",role:"group","aria-label":this.label},r.map((r=>a("button",{key:r,type:"button",class:{chip:!0,"is-selected":this.selected===r},"aria-pressed":String(this.selected===r),onClick:()=>this.select(r)},r)))))}};o.style=".sc-rp-filter-chips-h{display:block;font-family:var(--rp-font-sans)}.chips.sc-rp-filter-chips{display:flex;flex-wrap:wrap;gap:var(--rp-space-2)}.chip.sc-rp-filter-chips{padding:var(--rp-space-1) var(--rp-space-3);font:inherit;font-size:var(--rp-font-size-sm);color:var(--rp-color-text);cursor:pointer;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:999px}.chip.sc-rp-filter-chips:hover{background:var(--rp-color-surface-sunken)}.chip.is-selected.sc-rp-filter-chips{color:var(--rp-color-accent-contrast);background:var(--rp-color-accent);border-color:var(--rp-color-accent)}.chip.sc-rp-filter-chips:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}";const c=class{constructor(e){r(this,e)}items=[];render(){const r=Array.isArray(this.items)?this.items:[];return a(s,{key:"22708ae6e60de472b2f8e40fb54b33a2ec691ad1"},a("section",{key:"6f922fc37e3c230511bbdf72e55826dfa73e167e",class:"wrap"},a("slot",{key:"e9f0b16183f5ded825a5c1663caa54dcb6c2d961",name:"heading"},a("h2",{key:"c68ebf97056bc6309d3c4e79d1796d89eede1325",class:"heading"},"Ingredients")),0===r.length?a("p",{class:"empty"},"No ingredients listed for this recipe."):a("ul",{class:"list"},r.map(((r,e)=>a("li",{class:"row",key:`${r.name}-${e}`},a("span",{class:"name"},r.name),a("span",{class:"measure"},r.measure))))),a("div",{key:"28d26e1bbb9f14e5dedfb153ff87e44add5cfbfb",class:"note"},a("slot",{key:"20410e710e3c7dbc2ee9f6ad9493984382693687"}))))}};c.style=".sc-rp-ingredient-list-h{display:block;font-family:var(--rp-font-sans);color:var(--rp-color-text)}.heading.sc-rp-ingredient-list{margin:0 0 var(--rp-space-3);font-size:var(--rp-font-size-lg)}.list.sc-rp-ingredient-list{margin:0;padding:0;list-style:none;border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-md);overflow:hidden}.row.sc-rp-ingredient-list{display:flex;justify-content:space-between;gap:var(--rp-space-4);padding:var(--rp-space-2) var(--rp-space-3);font-size:var(--rp-font-size-md)}.row.sc-rp-ingredient-list:nth-child(odd){background:var(--rp-color-surface-sunken)}.measure.sc-rp-ingredient-list{flex-shrink:0;color:var(--rp-color-text-muted);font-variant-numeric:tabular-nums}.empty.sc-rp-ingredient-list{margin:0;font-size:var(--rp-font-size-md);color:var(--rp-color-text-muted)}.note.sc-rp-ingredient-list{margin-top:var(--rp-space-2);font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted)}.note.sc-rp-ingredient-list:not(:has(*)){display:none}";const t='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',d=class{constructor(a){r(this,a),this.rpClose=e(this,"rpClose")}get el(){return i(this)}open=!1;heading="";rpClose;previouslyFocused=null;onOpenChange(r){r?(this.previouslyFocused=document.activeElement,document.addEventListener("keydown",this.onKeydown),requestAnimationFrame((()=>this.focusFirstField()))):(document.removeEventListener("keydown",this.onKeydown),this.previouslyFocused?.focus(),this.previouslyFocused=null)}componentDidLoad(){this.open&&this.onOpenChange(!0)}disconnectedCallback(){document.removeEventListener("keydown",this.onKeydown)}async focusFirstField(){const r=this.el.querySelector(t);r?.focus()}onKeydown=r=>{if(this.open)return"Escape"===r.key?(r.preventDefault(),void this.rpClose.emit()):void("Tab"===r.key&&this.trapFocus(r))};trapFocus(r){const e=Array.from(this.el.querySelectorAll(t));if(0===e.length)return;const a=e[0],s=e[e.length-1],i=document.activeElement;r.shiftKey&&i===a?(r.preventDefault(),s.focus()):r.shiftKey||i!==s||(r.preventDefault(),a.focus())}onBackdropClick=r=>{r.target===r.currentTarget&&this.rpClose.emit()};render(){return this.open?a(s,null,a("div",{class:"backdrop",onClick:this.onBackdropClick},a("div",{class:"dialog",role:"dialog","aria-modal":"true","aria-label":this.heading},a("header",{class:"head"},a("h2",{class:"heading"},this.heading),a("button",{type:"button",class:"close",onClick:()=>this.rpClose.emit(),"aria-label":"Close dialog"},"×")),a("div",{class:"body"},a("slot",null)),a("footer",{class:"foot"},a("slot",{name:"footer"}))))):null}static get watchers(){return{open:[{onOpenChange:0}]}}};d.style=".sc-rp-modal-h{display:contents;font-family:var(--rp-font-sans)}.backdrop.sc-rp-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--rp-space-4);background:rgb(0 0 0 / 0.5)}.dialog.sc-rp-modal{display:flex;flex-direction:column;width:min(560px, 100%);max-height:min(80vh, 640px);color:var(--rp-color-text);background:var(--rp-color-surface);border-radius:var(--rp-radius-lg);box-shadow:var(--rp-shadow-lg)}.head.sc-rp-modal{display:flex;gap:var(--rp-space-3);align-items:center;justify-content:space-between;padding:var(--rp-space-4);border-bottom:1px solid var(--rp-color-border)}.heading.sc-rp-modal{margin:0;font-size:var(--rp-font-size-lg)}.close.sc-rp-modal{display:grid;place-items:center;width:32px;height:32px;padding:0;font-size:1.5rem;line-height:1;color:var(--rp-color-text-muted);cursor:pointer;background:none;border:none;border-radius:var(--rp-radius-sm)}.close.sc-rp-modal:hover{background:var(--rp-color-surface-sunken)}.close.sc-rp-modal:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.body.sc-rp-modal{flex:1;padding:var(--rp-space-4);overflow-y:auto}.foot.sc-rp-modal{display:flex;gap:var(--rp-space-2);justify-content:flex-end;padding:var(--rp-space-4);border-top:1px solid var(--rp-color-border)}.foot.sc-rp-modal:not(:has(*)){display:none}@media (prefers-reduced-motion: no-preference){.dialog.sc-rp-modal{animation:rp-modal-in 120ms ease-out}@keyframes rp-modal-in{from{opacity:0;transform:translateY(8px)}}}";const p=class{constructor(a){r(this,a),this.rpFavoriteToggle=e(this,"rpFavoriteToggle")}get el(){return i(this)}recipeId;recipeTitle;image;category;favorite=!1;rpFavoriteToggle;toggleFavorite=()=>{this.rpFavoriteToggle.emit({recipeId:this.recipeId,favorite:!this.favorite})};render(){return a(s,{key:"7ac4bd65a2fa94815db81c986d17e3dff768334f"},a("article",{key:"b8ab03b01a7305ebac8fa8c7a512cf670afbd7c9",class:"card"},a("div",{key:"ddd9892bf42ed7fdd1300d439449ac4c471f11e3",class:"media"},this.image?a("img",{src:this.image,alt:"",loading:"lazy",width:"320",height:"240"}):a("div",{class:"media-fallback","aria-hidden":"true"}),a("div",{key:"211b2f1621e96b2350ff17598094790809c6fe81",class:"badges"},a("slot",{key:"ab834b8c4ff5c643c35d4f29c7bc9ddab5886e44"})),a("button",{key:"67d76da1db3b7d867d64042260cb69b30ea9fa2f",type:"button",class:"favorite",onClick:this.toggleFavorite,"aria-pressed":String(this.favorite),"aria-label":this.favorite?`Remove ${this.recipeTitle} from favorites`:`Add ${this.recipeTitle} to favorites`},a("svg",{key:"ad94f74c83aba86af030d380d02ca331bf1edd66",viewBox:"0 0 24 24",width:"20",height:"20","aria-hidden":"true"},a("path",{key:"cec837ac8a9e440730ed83f5746fba9833722d43",d:"M12 21s-7.5-4.7-9.3-9A5.2 5.2 0 0 1 12 6.5 5.2 5.2 0 0 1 21.3 12c-1.8 4.3-9.3 9-9.3 9z"})))),a("div",{key:"57e619602fb97b1197d1391e1bca37059fad4750",class:"body"},a("h3",{key:"1576688c8d62e883132bb25f7f4f0832e7e102c2",class:"title"},this.recipeTitle),this.category&&a("p",{key:"ca58ac4811bf94d13761ac0fd3fdd63a4b35c057",class:"category"},this.category)),a("div",{key:"fe7531c32eb5b110fe5aea2c4680a020848633bd",class:"actions"},a("slot",{key:"daf97a1324f3d2d08d1900d057cab1968be8c9d7",name:"actions"}))))}};p.style=".sc-rp-recipe-card-h{display:block;font-family:var(--rp-font-sans);color:var(--rp-color-text)}.card.sc-rp-recipe-card{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-lg);box-shadow:var(--rp-shadow-sm)}.media.sc-rp-recipe-card{position:relative;aspect-ratio:4 / 3;background:var(--rp-color-surface-sunken)}.media.sc-rp-recipe-card img.sc-rp-recipe-card{display:block;width:100%;height:100%;object-fit:cover}.media-fallback.sc-rp-recipe-card{width:100%;height:100%;background:linear-gradient(135deg, var(--rp-color-surface-sunken), var(--rp-color-border))}.badges.sc-rp-recipe-card{position:absolute;inset-block-start:var(--rp-space-2);inset-inline-start:var(--rp-space-2);display:flex;flex-wrap:wrap;gap:var(--rp-space-1)}.favorite.sc-rp-recipe-card{position:absolute;inset-block-start:var(--rp-space-2);inset-inline-end:var(--rp-space-2);display:grid;place-items:center;width:36px;height:36px;padding:0;cursor:pointer;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:50%;box-shadow:var(--rp-shadow-sm)}.favorite.sc-rp-recipe-card svg.sc-rp-recipe-card{fill:none;stroke:var(--rp-color-text-muted);stroke-width:1.8}[favorite].sc-rp-recipe-card-h .favorite.sc-rp-recipe-card svg.sc-rp-recipe-card{fill:var(--rp-color-favorite);stroke:var(--rp-color-favorite)}.favorite.sc-rp-recipe-card:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.body.sc-rp-recipe-card{flex:1;padding:var(--rp-space-3) var(--rp-space-4)}.title.sc-rp-recipe-card{margin:0;font-size:var(--rp-font-size-lg);line-height:1.3}.category.sc-rp-recipe-card{margin:var(--rp-space-1) 0 0;font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted)}.actions.sc-rp-recipe-card{display:flex;gap:var(--rp-space-2);align-items:center;padding:0 var(--rp-space-4) var(--rp-space-4)}.actions.sc-rp-recipe-card:not(:has(*)){display:none}";const n=class{constructor(a){r(this,a),this.rpSearch=e(this,"rpSearch"),this.rpClear=e(this,"rpClear")}value="";placeholder="Search recipes";label="Search recipes";draft="";rpSearch;rpClear;onValueChange(r){this.draft=r??""}componentWillLoad(){this.draft=this.value??""}onSubmit=r=>{r.preventDefault(),this.rpSearch.emit(this.draft.trim())};onInput=r=>{this.draft=r.target.value};onClear=()=>{this.draft="",this.rpClear.emit()};render(){return a(s,{key:"12550f4e6587473576e211fe1cfa5d075a02399f"},a("form",{key:"e1a61e15c159e8449770b7df63a649d84b136aa2",class:"bar",role:"search",onSubmit:this.onSubmit},a("input",{key:"defae81130bf361beae8a57c15633c6595437493",type:"search",class:"field",value:this.draft,placeholder:this.placeholder,"aria-label":this.label,onInput:this.onInput}),this.draft&&a("button",{key:"4cd2eac81b32f17d18e89c51a90e0a0d9edf7d01",type:"button",class:"clear",onClick:this.onClear,"aria-label":"Clear search"},"×"),a("button",{key:"b07034ed131233623d8edbdd16db3cfd8ffab4b7",type:"submit",class:"submit"},"Search")))}static get watchers(){return{value:[{onValueChange:0}]}}};n.style=".sc-rp-search-bar-h{display:block;font-family:var(--rp-font-sans)}.bar.sc-rp-search-bar{display:flex;gap:var(--rp-space-2);align-items:center}.field.sc-rp-search-bar{flex:1;min-width:0;padding:var(--rp-space-2) var(--rp-space-3);font:inherit;font-size:var(--rp-font-size-md);color:var(--rp-color-text);background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-md)}.field.sc-rp-search-bar::-webkit-search-cancel-button{display:none}.field.sc-rp-search-bar:focus-visible,.submit.sc-rp-search-bar:focus-visible,.clear.sc-rp-search-bar:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.clear.sc-rp-search-bar{display:grid;place-items:center;width:32px;height:32px;padding:0;font-size:1.25rem;line-height:1;color:var(--rp-color-text-muted);cursor:pointer;background:none;border:none;border-radius:50%}.clear.sc-rp-search-bar:hover{background:var(--rp-color-surface-sunken)}.submit.sc-rp-search-bar{padding:var(--rp-space-2) var(--rp-space-4);font:inherit;font-size:var(--rp-font-size-md);font-weight:600;color:var(--rp-color-accent-contrast);cursor:pointer;background:var(--rp-color-accent);border:none;border-radius:var(--rp-radius-md)}";export{o as rp_filter_chips,c as rp_ingredient_list,d as rp_modal,p as rp_recipe_card,n as rp_search_bar}
|
|
1
|
+
import{r,c as e,h as a,H as s,g as i}from"./p-B4wAFfci.js";const o=class{constructor(a){r(this,a),this.rpFilterChange=e(this,"rpFilterChange")}options=[];selected=null;label="Filter";rpFilterChange;select(r){this.rpFilterChange.emit(this.selected===r?null:r)}render(){const r=Array.isArray(this.options)?this.options:[];return a(s,{key:"656b969af2e55a7c4313bc0c2c422e000811af53"},a("div",{key:"1da1173fc1d6d10a312a43466a0ea799b625caef",class:"chips",role:"group","aria-label":this.label},r.map((r=>a("button",{key:r,type:"button",class:{chip:!0,"is-selected":this.selected===r},"aria-pressed":String(this.selected===r),onClick:()=>this.select(r)},r)))))}};o.style=".sc-rp-filter-chips-h{display:block;font-family:var(--rp-font-sans)}.chips.sc-rp-filter-chips{display:flex;flex-wrap:wrap;gap:var(--rp-space-2)}.chip.sc-rp-filter-chips{padding:var(--rp-space-1) var(--rp-space-3);font:inherit;font-size:var(--rp-font-size-sm);color:var(--rp-color-text);cursor:pointer;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:999px}.chip.sc-rp-filter-chips:hover{background:var(--rp-color-surface-sunken)}.chip.is-selected.sc-rp-filter-chips{color:var(--rp-color-accent-contrast);background:var(--rp-color-accent);border-color:var(--rp-color-accent)}.chip.sc-rp-filter-chips:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}";const c=class{constructor(e){r(this,e)}items=[];render(){const r=Array.isArray(this.items)?this.items:[];return a(s,{key:"22708ae6e60de472b2f8e40fb54b33a2ec691ad1"},a("section",{key:"6f922fc37e3c230511bbdf72e55826dfa73e167e",class:"wrap"},a("slot",{key:"e9f0b16183f5ded825a5c1663caa54dcb6c2d961",name:"heading"},a("h2",{key:"c68ebf97056bc6309d3c4e79d1796d89eede1325",class:"heading"},"Ingredients")),0===r.length?a("p",{class:"empty"},"No ingredients listed for this recipe."):a("ul",{class:"list"},r.map(((r,e)=>a("li",{class:"row",key:`${r.name}-${e}`},a("span",{class:"name"},r.name),a("span",{class:"measure"},r.measure))))),a("div",{key:"28d26e1bbb9f14e5dedfb153ff87e44add5cfbfb",class:"note"},a("slot",{key:"20410e710e3c7dbc2ee9f6ad9493984382693687"}))))}};c.style=".sc-rp-ingredient-list-h{display:block;font-family:var(--rp-font-sans);color:var(--rp-color-text)}.heading.sc-rp-ingredient-list{margin:0 0 var(--rp-space-3);font-size:var(--rp-font-size-lg)}.list.sc-rp-ingredient-list{margin:0;padding:0;list-style:none;border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-md);overflow:hidden}.row.sc-rp-ingredient-list{display:flex;justify-content:space-between;gap:var(--rp-space-4);padding:var(--rp-space-2) var(--rp-space-3);font-size:var(--rp-font-size-md)}.row.sc-rp-ingredient-list:nth-child(odd){background:var(--rp-color-surface-sunken)}.measure.sc-rp-ingredient-list{flex-shrink:0;color:var(--rp-color-text-muted);font-variant-numeric:tabular-nums}.empty.sc-rp-ingredient-list{margin:0;font-size:var(--rp-font-size-md);color:var(--rp-color-text-muted)}.note.sc-rp-ingredient-list{margin-top:var(--rp-space-2);font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted)}.note.sc-rp-ingredient-list:not(:has(*)){display:none}";const t='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',d=class{constructor(a){r(this,a),this.rpClose=e(this,"rpClose")}get el(){return i(this)}open=!1;heading="";rpClose;previouslyFocused=null;onOpenChange(r){r?(this.previouslyFocused=document.activeElement,document.addEventListener("keydown",this.onKeydown),requestAnimationFrame((()=>this.focusFirstField()))):(document.removeEventListener("keydown",this.onKeydown),this.previouslyFocused?.focus(),this.previouslyFocused=null)}componentDidLoad(){this.open&&this.onOpenChange(!0)}disconnectedCallback(){document.removeEventListener("keydown",this.onKeydown)}async focusFirstField(){const r=this.el.querySelector(t);r?.focus()}onKeydown=r=>{if(this.open)return"Escape"===r.key?(r.preventDefault(),void this.rpClose.emit()):void("Tab"===r.key&&this.trapFocus(r))};trapFocus(r){const e=Array.from(this.el.querySelectorAll(t));if(0===e.length)return;const a=e[0],s=e[e.length-1],i=document.activeElement;r.shiftKey&&i===a?(r.preventDefault(),s.focus()):r.shiftKey||i!==s||(r.preventDefault(),a.focus())}onBackdropClick=r=>{r.target===r.currentTarget&&this.rpClose.emit()};render(){return this.open?a(s,null,a("div",{class:"backdrop",onClick:this.onBackdropClick},a("div",{class:"dialog",role:"dialog","aria-modal":"true","aria-label":this.heading},a("header",{class:"head"},a("h2",{class:"heading"},this.heading),a("button",{type:"button",class:"close",onClick:()=>this.rpClose.emit(),"aria-label":"Close dialog"},"×")),a("div",{class:"body"},a("slot",null)),a("footer",{class:"foot"},a("slot",{name:"footer"}))))):null}static get watchers(){return{open:[{onOpenChange:0}]}}};d.style=".sc-rp-modal-h{display:contents;font-family:var(--rp-font-sans)}.backdrop.sc-rp-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--rp-space-4);background:rgb(0 0 0 / 0.5)}.dialog.sc-rp-modal{display:flex;flex-direction:column;width:min(560px, 100%);max-height:min(80vh, 640px);color:var(--rp-color-text);background:var(--rp-color-surface);border-radius:var(--rp-radius-lg);box-shadow:var(--rp-shadow-lg)}.head.sc-rp-modal{display:flex;gap:var(--rp-space-3);align-items:center;justify-content:space-between;padding:var(--rp-space-4);border-bottom:1px solid var(--rp-color-border)}.heading.sc-rp-modal{margin:0;font-size:var(--rp-font-size-lg)}.close.sc-rp-modal{display:grid;place-items:center;width:32px;height:32px;padding:0;font-size:1.5rem;line-height:1;color:var(--rp-color-text-muted);cursor:pointer;background:none;border:none;border-radius:var(--rp-radius-sm)}.close.sc-rp-modal:hover{background:var(--rp-color-surface-sunken)}.close.sc-rp-modal:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.body.sc-rp-modal{flex:1;padding:var(--rp-space-4);overflow-y:auto}.foot.sc-rp-modal{display:flex;gap:var(--rp-space-2);justify-content:flex-end;padding:var(--rp-space-4);border-top:1px solid var(--rp-color-border)}.foot.sc-rp-modal:not(:has(*)){display:none}@media (prefers-reduced-motion: no-preference){.dialog.sc-rp-modal{animation:rp-modal-in 120ms ease-out}@keyframes rp-modal-in{from{opacity:0;transform:translateY(8px)}}}";const p=class{constructor(a){r(this,a),this.rpFavoriteToggle=e(this,"rpFavoriteToggle")}get el(){return i(this)}recipeId;recipeTitle;image;category;favorite=!1;rpFavoriteToggle;toggleFavorite=()=>{this.rpFavoriteToggle.emit({recipeId:this.recipeId,favorite:!this.favorite})};render(){const r=!0===this.favorite;return a(s,{key:"3b80c8e4ebd4e0e25d5aac0b09f39a458f82b0f2"},a("article",{key:"7df757f7135b928eb0df9c5bf62bda72c6694975",class:"card"},a("div",{key:"46d04f584290c5f894da560c4fc464968b51334c",class:"media"},this.image?a("img",{src:this.image,alt:"",loading:"lazy",width:"320",height:"240"}):a("div",{class:"media-fallback","aria-hidden":"true"}),a("div",{key:"8fb20568c256bf52b911d766acb826a78af54738",class:"badges"},a("slot",{key:"7a6ae3d9ea493e89942bf46c414b9b81f9fb287c"})),a("button",{key:"252477d86dfb1131b4417e0a3a99810f6b2626a5",type:"button",class:"favorite",onClick:this.toggleFavorite,"aria-pressed":r?"true":"false","aria-label":r?`Remove ${this.recipeTitle} from favorites`:`Add ${this.recipeTitle} to favorites`},a("svg",{key:"857ecd2421abd6a5177d0eccbc7f225e019bb4e8",viewBox:"0 0 24 24",width:"20",height:"20","aria-hidden":"true"},a("path",{key:"c6f7af10fa1f938ba76c8f5363b5d347eb959f19",d:"M12 21s-7.5-4.7-9.3-9A5.2 5.2 0 0 1 12 6.5 5.2 5.2 0 0 1 21.3 12c-1.8 4.3-9.3 9-9.3 9z"})))),a("div",{key:"f09729fe072a150d074b92f3c84f1b337b5e10af",class:"body"},a("h3",{key:"79ce18be5cac3edb6ee23d221eb4eaf61ca910f8",class:"title"},this.recipeTitle),this.category&&a("p",{key:"47a0031f26046ea67bc31719fda810f9ccbd48fe",class:"category"},this.category)),a("div",{key:"cca23a5c5da2e80a58b7714ba53aa55122594b0f",class:"actions"},a("slot",{key:"cf828d445674da18c9a44545788a5d79685a325a",name:"actions"}))))}};p.style=".sc-rp-recipe-card-h{display:block;font-family:var(--rp-font-sans);color:var(--rp-color-text)}.card.sc-rp-recipe-card{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-lg);box-shadow:var(--rp-shadow-sm)}.media.sc-rp-recipe-card{position:relative;aspect-ratio:4 / 3;background:var(--rp-color-surface-sunken)}.media.sc-rp-recipe-card img.sc-rp-recipe-card{display:block;width:100%;height:100%;object-fit:cover}.media-fallback.sc-rp-recipe-card{width:100%;height:100%;background:linear-gradient(135deg, var(--rp-color-surface-sunken), var(--rp-color-border))}.badges.sc-rp-recipe-card{position:absolute;inset-block-start:var(--rp-space-2);inset-inline-start:var(--rp-space-2);display:flex;flex-wrap:wrap;gap:var(--rp-space-1)}.favorite.sc-rp-recipe-card{position:absolute;inset-block-start:var(--rp-space-2);inset-inline-end:var(--rp-space-2);display:grid;place-items:center;width:36px;height:36px;padding:0;cursor:pointer;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:50%;box-shadow:var(--rp-shadow-sm)}.favorite.sc-rp-recipe-card svg.sc-rp-recipe-card{fill:none;stroke:var(--rp-color-text-muted);stroke-width:1.8}[favorite].sc-rp-recipe-card-h .favorite.sc-rp-recipe-card svg.sc-rp-recipe-card{fill:var(--rp-color-favorite);stroke:var(--rp-color-favorite)}.favorite.sc-rp-recipe-card:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.body.sc-rp-recipe-card{flex:1;padding:var(--rp-space-3) var(--rp-space-4)}.title.sc-rp-recipe-card{margin:0;font-size:var(--rp-font-size-lg);line-height:1.3}.category.sc-rp-recipe-card{margin:var(--rp-space-1) 0 0;font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted)}.actions.sc-rp-recipe-card{display:flex;gap:var(--rp-space-2);align-items:center;padding:0 var(--rp-space-4) var(--rp-space-4)}.actions.sc-rp-recipe-card:not(:has(*)){display:none}";const n=class{constructor(a){r(this,a),this.rpSearch=e(this,"rpSearch"),this.rpClear=e(this,"rpClear")}value="";placeholder="Search recipes";label="Search recipes";draft="";rpSearch;rpClear;onValueChange(r){this.draft=r??""}componentWillLoad(){this.draft=this.value??""}onSubmit=r=>{r.preventDefault(),this.rpSearch.emit(this.draft.trim())};onInput=r=>{this.draft=r.target.value};onClear=()=>{this.draft="",this.rpClear.emit()};render(){return a(s,{key:"12550f4e6587473576e211fe1cfa5d075a02399f"},a("form",{key:"e1a61e15c159e8449770b7df63a649d84b136aa2",class:"bar",role:"search",onSubmit:this.onSubmit},a("input",{key:"defae81130bf361beae8a57c15633c6595437493",type:"search",class:"field",value:this.draft,placeholder:this.placeholder,"aria-label":this.label,onInput:this.onInput}),this.draft&&a("button",{key:"4cd2eac81b32f17d18e89c51a90e0a0d9edf7d01",type:"button",class:"clear",onClick:this.onClear,"aria-label":"Clear search"},"×"),a("button",{key:"b07034ed131233623d8edbdd16db3cfd8ffab4b7",type:"submit",class:"submit"},"Search")))}static get watchers(){return{value:[{onValueChange:0}]}}};n.style=".sc-rp-search-bar-h{display:block;font-family:var(--rp-font-sans)}.bar.sc-rp-search-bar{display:flex;gap:var(--rp-space-2);align-items:center}.field.sc-rp-search-bar{flex:1;min-width:0;padding:var(--rp-space-2) var(--rp-space-3);font:inherit;font-size:var(--rp-font-size-md);color:var(--rp-color-text);background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-md)}.field.sc-rp-search-bar::-webkit-search-cancel-button{display:none}.field.sc-rp-search-bar:focus-visible,.submit.sc-rp-search-bar:focus-visible,.clear.sc-rp-search-bar:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.clear.sc-rp-search-bar{display:grid;place-items:center;width:32px;height:32px;padding:0;font-size:1.25rem;line-height:1;color:var(--rp-color-text-muted);cursor:pointer;background:none;border:none;border-radius:50%}.clear.sc-rp-search-bar:hover{background:var(--rp-color-surface-sunken)}.submit.sc-rp-search-bar{padding:var(--rp-space-2) var(--rp-space-4);font:inherit;font-size:var(--rp-font-size-md);font-weight:600;color:var(--rp-color-accent-contrast);cursor:pointer;background:var(--rp-color-accent);border:none;border-radius:var(--rp-radius-md)}";export{o as rp_filter_chips,c as rp_ingredient_list,d as rp_modal,p as rp_recipe_card,n as rp_search_bar}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-B4wAFfci.js";export{s as setNonce}from"./p-B4wAFfci.js";import{g as r}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,r={};return""!==a&&(r.resourcesUrl=new URL(".",a).href),e(r)})().then((async e=>(await r(),a([["p-
|
|
1
|
+
import{p as e,b as a}from"./p-B4wAFfci.js";export{s as setNonce}from"./p-B4wAFfci.js";import{g as r}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,r={};return""!==a&&(r.resourcesUrl=new URL(".",a).href),e(r)})().then((async e=>(await r(),a([["p-b98e7093",[[514,"rp-filter-chips",{options:[16],selected:[1],label:[1]}],[774,"rp-ingredient-list",{items:[16]}],[774,"rp-modal",{open:[516],heading:[1],focusFirstField:[64]},null,{open:[{onOpenChange:0}]}],[774,"rp-recipe-card",{recipeId:[1,"recipe-id"],recipeTitle:[1,"recipe-title"],image:[1],category:[1],favorite:[516]}],[514,"rp-search-bar",{value:[1],placeholder:[1],label:[1],draft:[32]},null,{value:[{onValueChange:0}]}]]],["p-0c8f7438",[[774,"rp-day-slot",{day:[1],dayLabel:[1,"day-label"],meals:[16],days:[16],dayLabels:[16],normalized:[32]}]]]],e))));
|
|
@@ -20,6 +20,13 @@ export declare class DaySlot {
|
|
|
20
20
|
meals: PlannedMeal[];
|
|
21
21
|
/** All day keys, used to populate each meal's move target list. */
|
|
22
22
|
days: string[];
|
|
23
|
+
/**
|
|
24
|
+
* Display names for the keys in `days`, as a key-to-label map.
|
|
25
|
+
*
|
|
26
|
+
* Without this the move control would offer raw keys like "mon". Optional, so a
|
|
27
|
+
* consumer whose keys are already human-readable can leave it unset.
|
|
28
|
+
*/
|
|
29
|
+
dayLabels: Record<string, string>;
|
|
23
30
|
private normalized;
|
|
24
31
|
/** Fired when the user asks to add a meal to this day. */
|
|
25
32
|
rpAddMeal: EventEmitter<string>;
|
|
@@ -23,6 +23,11 @@ export namespace Components {
|
|
|
23
23
|
* @default ''
|
|
24
24
|
*/
|
|
25
25
|
"dayLabel": string;
|
|
26
|
+
/**
|
|
27
|
+
* Display names for the keys in `days`, as a key-to-label map. Without this the move control would offer raw keys like "mon". Optional, so a consumer whose keys are already human-readable can leave it unset.
|
|
28
|
+
* @default {}
|
|
29
|
+
*/
|
|
30
|
+
"dayLabels": Record<string, string>;
|
|
26
31
|
/**
|
|
27
32
|
* All day keys, used to populate each meal's move target list.
|
|
28
33
|
* @default []
|
|
@@ -312,6 +317,11 @@ declare namespace LocalJSX {
|
|
|
312
317
|
* @default ''
|
|
313
318
|
*/
|
|
314
319
|
"dayLabel"?: string;
|
|
320
|
+
/**
|
|
321
|
+
* Display names for the keys in `days`, as a key-to-label map. Without this the move control would offer raw keys like "mon". Optional, so a consumer whose keys are already human-readable can leave it unset.
|
|
322
|
+
* @default {}
|
|
323
|
+
*/
|
|
324
|
+
"dayLabels"?: Record<string, string>;
|
|
315
325
|
/**
|
|
316
326
|
* All day keys, used to populate each meal's move target list.
|
|
317
327
|
* @default []
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -67,7 +67,7 @@ exists on the element.
|
|
|
67
67
|
| `rp-search-bar` | `value`, `placeholder`, `label` | `rpSearch`, `rpClear` | — |
|
|
68
68
|
| `rp-filter-chips` | `options[]`, `selected` | `rpFilterChange` | — |
|
|
69
69
|
| `rp-ingredient-list` | `items[]` | — | `heading`, default |
|
|
70
|
-
| `rp-day-slot` | `day`, `dayLabel`, `meals[]`, `days[]` | `rpAddMeal`, `rpRemoveMeal`, `rpMoveMeal` | default |
|
|
70
|
+
| `rp-day-slot` | `day`, `dayLabel`, `meals[]`, `days[]`, `dayLabels` | `rpAddMeal`, `rpRemoveMeal`, `rpMoveMeal` | default |
|
|
71
71
|
| `rp-modal` | `open`, `heading` | `rpClose` | default, `footer` |
|
|
72
72
|
|
|
73
73
|
Per-component API documentation, generated from the source, lives in each component's
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as e,c as r,h as a,H as s}from"./p-B4wAFfci.js";const o=class{constructor(a){e(this,a),this.rpAddMeal=r(this,"rpAddMeal"),this.rpRemoveMeal=r(this,"rpRemoveMeal"),this.rpMoveMeal=r(this,"rpMoveMeal")}day;dayLabel="";meals=[];days=[];normalized=[];rpAddMeal;rpRemoveMeal;rpMoveMeal;componentWillLoad(){this.normalized=Array.isArray(this.meals)?this.meals:[]}componentWillUpdate(){this.normalized=Array.isArray(this.meals)?this.meals:[]}onMove=(e,r)=>{const a=e.target,s=a.value;s&&s!==this.day&&(this.rpMoveMeal.emit({id:r.id,from:this.day,to:s}),a.value="")};render(){const e=Array.isArray(this.days)?this.days:[],r=this.normalized;return a(s,{key:"689cfc71ca7fc7106e29278d027ce1c36b3830c0"},a("section",{key:"d15ed9ae6f800be9962c4c1258397ff1043fef76",class:"slot"},a("header",{key:"7f3ce1dcd4e94af5699b378ab1e461a34792acd8",class:"head"},a("h3",{key:"b62fe42a27f0072370e59a101452f77de8527ae0",class:"day"},this.dayLabel||this.day),a("button",{key:"658191328f041bc2dd7534a3f5614746f26c0f28",type:"button",class:"add",onClick:()=>this.rpAddMeal.emit(this.day),"aria-label":`Add a meal to ${this.dayLabel||this.day}`},"+")),0===r.length?a("div",{class:"empty"},a("slot",null,a("p",{class:"empty-text"},"No meals planned"))):a("ul",{class:"meals"},r.map((r=>a("li",{class:"meal",key:r.id},a("span",{class:"meal-title"},r.title),a("div",{class:"meal-actions"},a("label",{class:"move"},a("span",{class:"sr-only"},`Move ${r.title} to another day`),a("select",{class:"move-select",onChange:e=>this.onMove(e,r)},a("option",{value:""},"Move…"),e.filter((e=>e!==this.day)).map((e=>a("option",{key:e,value:e},e))))),a("button",{type:"button",class:"remove",onClick:()=>this.rpRemoveMeal.emit({id:r.id,day:this.day}),"aria-label":`Remove ${r.title}`},"×"))))))))}};o.style=".sc-rp-day-slot-h{display:block;font-family:var(--rp-font-sans);color:var(--rp-color-text)}.slot.sc-rp-day-slot{display:flex;flex-direction:column;height:100%;min-height:160px;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-md)}.head.sc-rp-day-slot{display:flex;gap:var(--rp-space-2);align-items:center;justify-content:space-between;padding:var(--rp-space-2) var(--rp-space-3);border-bottom:1px solid var(--rp-color-border)}.day.sc-rp-day-slot{margin:0;font-size:var(--rp-font-size-md);text-transform:capitalize}.add.sc-rp-day-slot{display:grid;place-items:center;width:28px;height:28px;padding:0;font-size:1.125rem;line-height:1;color:var(--rp-color-accent-contrast);cursor:pointer;background:var(--rp-color-accent);border:none;border-radius:50%}.meals.sc-rp-day-slot{flex:1;margin:0;padding:var(--rp-space-2);list-style:none;display:flex;flex-direction:column;gap:var(--rp-space-2)}.meal.sc-rp-day-slot{padding:var(--rp-space-2);background:var(--rp-color-surface-sunken);border-radius:var(--rp-radius-sm)}.meal-title.sc-rp-day-slot{display:block;font-size:var(--rp-font-size-sm);line-height:1.35}.meal-actions.sc-rp-day-slot{display:flex;gap:var(--rp-space-1);align-items:center;justify-content:space-between;margin-top:var(--rp-space-2)}.move-select.sc-rp-day-slot{max-width:100%;padding:2px var(--rp-space-1);font:inherit;font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted);background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-sm);text-transform:capitalize}.remove.sc-rp-day-slot{display:grid;place-items:center;width:24px;height:24px;padding:0;font-size:1.125rem;line-height:1;color:var(--rp-color-danger);cursor:pointer;background:none;border:none;border-radius:var(--rp-radius-sm)}.empty.sc-rp-day-slot{display:grid;flex:1;place-items:center;padding:var(--rp-space-3)}.empty-text.sc-rp-day-slot{margin:0;font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted)}.add.sc-rp-day-slot:focus-visible,.remove.sc-rp-day-slot:focus-visible,.move-select.sc-rp-day-slot:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.sr-only.sc-rp-day-slot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}";export{o as rp_day_slot}
|