recipe-planner-ui 1.0.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/LICENSE +21 -0
- package/dist/cjs/app-globals-V2Kpy_OQ.js +5 -0
- package/dist/cjs/index-B6uIqnrk.js +2043 -0
- package/dist/cjs/index.cjs.js +2 -0
- package/dist/cjs/loader.cjs.js +13 -0
- package/dist/cjs/recipe-planner-ui.cjs.js +25 -0
- package/dist/cjs/rp-day-slot.cjs.entry.js +57 -0
- package/dist/cjs/rp-filter-chips_5.cjs.entry.js +240 -0
- package/dist/collection/collection-manifest.json +18 -0
- package/dist/collection/components/rp-day-slot/rp-day-slot.css +131 -0
- package/dist/collection/components/rp-day-slot/rp-day-slot.js +201 -0
- package/dist/collection/components/rp-filter-chips/rp-filter-chips.css +36 -0
- package/dist/collection/components/rp-filter-chips/rp-filter-chips.js +123 -0
- package/dist/collection/components/rp-ingredient-list/rp-ingredient-list.css +53 -0
- package/dist/collection/components/rp-ingredient-list/rp-ingredient-list.js +57 -0
- package/dist/collection/components/rp-modal/rp-modal.css +94 -0
- package/dist/collection/components/rp-modal/rp-modal.js +196 -0
- package/dist/collection/components/rp-recipe-card/rp-recipe-card.css +106 -0
- package/dist/collection/components/rp-recipe-card/rp-recipe-card.js +170 -0
- package/dist/collection/components/rp-search-bar/rp-search-bar.css +65 -0
- package/dist/collection/components/rp-search-bar/rp-search-bar.js +166 -0
- package/dist/collection/index.js +1 -0
- package/dist/components/index.d.ts +35 -0
- package/dist/components/index.js +1 -0
- package/dist/components/rp-day-slot.d.ts +11 -0
- package/dist/components/rp-day-slot.js +1 -0
- package/dist/components/rp-filter-chips.d.ts +11 -0
- package/dist/components/rp-filter-chips.js +1 -0
- package/dist/components/rp-ingredient-list.d.ts +11 -0
- package/dist/components/rp-ingredient-list.js +1 -0
- package/dist/components/rp-modal.d.ts +11 -0
- package/dist/components/rp-modal.js +1 -0
- package/dist/components/rp-recipe-card.d.ts +11 -0
- package/dist/components/rp-recipe-card.js +1 -0
- package/dist/components/rp-search-bar.d.ts +11 -0
- package/dist/components/rp-search-bar.js +1 -0
- package/dist/esm/app-globals-DQuL1Twl.js +3 -0
- package/dist/esm/index-B4wAFfci.js +2034 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/loader.js +11 -0
- package/dist/esm/recipe-planner-ui.js +21 -0
- package/dist/esm/rp-day-slot.entry.js +55 -0
- package/dist/esm/rp-filter-chips_5.entry.js +234 -0
- package/dist/index.cjs.js +1 -0
- package/dist/index.js +1 -0
- package/dist/recipe-planner-ui/index.esm.js +0 -0
- package/dist/recipe-planner-ui/p-66ba2983.entry.js +1 -0
- package/dist/recipe-planner-ui/p-B4wAFfci.js +3 -0
- package/dist/recipe-planner-ui/p-DQuL1Twl.js +1 -0
- package/dist/recipe-planner-ui/p-d54dbd37.entry.js +1 -0
- package/dist/recipe-planner-ui/recipe-planner-ui.css +1 -0
- package/dist/recipe-planner-ui/recipe-planner-ui.esm.js +1 -0
- package/dist/types/components/rp-day-slot/rp-day-slot.d.ts +41 -0
- package/dist/types/components/rp-filter-chips/rp-filter-chips.d.ts +24 -0
- package/dist/types/components/rp-ingredient-list/rp-ingredient-list.d.ts +14 -0
- package/dist/types/components/rp-modal/rp-modal.d.ts +34 -0
- package/dist/types/components/rp-recipe-card/rp-recipe-card.d.ts +36 -0
- package/dist/types/components/rp-search-bar/rp-search-bar.d.ts +31 -0
- package/dist/types/components.d.ts +536 -0
- package/dist/types/index.d.ts +7 -0
- package/dist/types/stencil-public-runtime.d.ts +1873 -0
- package/loader/cdn.js +1 -0
- package/loader/index.cjs.js +1 -0
- package/loader/index.d.ts +24 -0
- package/loader/index.es2017.js +1 -0
- package/loader/index.js +2 -0
- package/package.json +72 -0
- package/readme.md +131 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { b as bootstrapLazy } from './index-B4wAFfci.js';
|
|
2
|
+
export { s as setNonce } from './index-B4wAFfci.js';
|
|
3
|
+
import { g as globalScripts } from './app-globals-DQuL1Twl.js';
|
|
4
|
+
|
|
5
|
+
const defineCustomElements = async (win, options) => {
|
|
6
|
+
if (typeof window === 'undefined') return undefined;
|
|
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);
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export { defineCustomElements };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-B4wAFfci.js';
|
|
2
|
+
export { s as setNonce } from './index-B4wAFfci.js';
|
|
3
|
+
import { g as globalScripts } from './app-globals-DQuL1Twl.js';
|
|
4
|
+
|
|
5
|
+
/*
|
|
6
|
+
Stencil Client Patch Browser v4.44.1 | MIT Licensed | https://stenciljs.com
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
var patchBrowser = () => {
|
|
10
|
+
const importMeta = import.meta.url;
|
|
11
|
+
const opts = {};
|
|
12
|
+
if (importMeta !== "") {
|
|
13
|
+
opts.resourcesUrl = new URL(".", importMeta).href;
|
|
14
|
+
}
|
|
15
|
+
return promiseResolve(opts);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
patchBrowser().then(async (options) => {
|
|
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);
|
|
21
|
+
});
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-B4wAFfci.js';
|
|
2
|
+
|
|
3
|
+
const rpDaySlotCss = () => `.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}`;
|
|
4
|
+
|
|
5
|
+
const DaySlot = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.rpAddMeal = createEvent(this, "rpAddMeal");
|
|
9
|
+
this.rpRemoveMeal = createEvent(this, "rpRemoveMeal");
|
|
10
|
+
this.rpMoveMeal = createEvent(this, "rpMoveMeal");
|
|
11
|
+
}
|
|
12
|
+
/** Machine-readable day key, echoed in every event. */
|
|
13
|
+
day;
|
|
14
|
+
/** Human-readable day name shown as the column heading. */
|
|
15
|
+
dayLabel = '';
|
|
16
|
+
/** Meals planned for this day. Must be assigned as a DOM property. */
|
|
17
|
+
meals = [];
|
|
18
|
+
/** All day keys, used to populate each meal's move target list. */
|
|
19
|
+
days = [];
|
|
20
|
+
normalized = [];
|
|
21
|
+
/** Fired when the user asks to add a meal to this day. */
|
|
22
|
+
rpAddMeal;
|
|
23
|
+
/** Fired when a meal is removed from this day. */
|
|
24
|
+
rpRemoveMeal;
|
|
25
|
+
/** Fired when a meal is reassigned to a different day. */
|
|
26
|
+
rpMoveMeal;
|
|
27
|
+
componentWillLoad() {
|
|
28
|
+
this.normalized = Array.isArray(this.meals) ? this.meals : [];
|
|
29
|
+
}
|
|
30
|
+
componentWillUpdate() {
|
|
31
|
+
// Recomputed before each render rather than in a @Watch, because the property can be
|
|
32
|
+
// replaced before the element upgrades, which @Watch would miss.
|
|
33
|
+
this.normalized = Array.isArray(this.meals) ? this.meals : [];
|
|
34
|
+
}
|
|
35
|
+
onMove = (event, meal) => {
|
|
36
|
+
const select = event.target;
|
|
37
|
+
const to = select.value;
|
|
38
|
+
if (!to || to === this.day)
|
|
39
|
+
return;
|
|
40
|
+
this.rpMoveMeal.emit({ id: meal.id, from: this.day, to });
|
|
41
|
+
// The consumer re-renders from its own data; resetting avoids a stale selection
|
|
42
|
+
// if that render is delayed.
|
|
43
|
+
select.value = '';
|
|
44
|
+
};
|
|
45
|
+
render() {
|
|
46
|
+
const days = Array.isArray(this.days) ? this.days : [];
|
|
47
|
+
const meals = this.normalized;
|
|
48
|
+
return (h(Host, { key: '689cfc71ca7fc7106e29278d027ce1c36b3830c0' }, h("section", { key: 'd15ed9ae6f800be9962c4c1258397ff1043fef76', class: "slot" }, h("header", { key: '7f3ce1dcd4e94af5699b378ab1e461a34792acd8', class: "head" }, h("h3", { key: 'b62fe42a27f0072370e59a101452f77de8527ae0', class: "day" }, this.dayLabel || this.day), h("button", { key: '658191328f041bc2dd7534a3f5614746f26c0f28', 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
|
+
.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"))))))))));
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
DaySlot.style = rpDaySlotCss();
|
|
54
|
+
|
|
55
|
+
export { DaySlot as rp_day_slot };
|
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-B4wAFfci.js';
|
|
2
|
+
|
|
3
|
+
const rpFilterChipsCss = () => `.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)}`;
|
|
4
|
+
|
|
5
|
+
const FilterChips = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.rpFilterChange = createEvent(this, "rpFilterChange");
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Available filter values.
|
|
12
|
+
*
|
|
13
|
+
* An array has no attribute representation, so this must be assigned as a DOM
|
|
14
|
+
* property. Frameworks that set properties on custom elements do this automatically.
|
|
15
|
+
*/
|
|
16
|
+
options = [];
|
|
17
|
+
/** Currently active value, or null when no filter is applied. */
|
|
18
|
+
selected = null;
|
|
19
|
+
/** Accessible label for the group. */
|
|
20
|
+
label = 'Filter';
|
|
21
|
+
/** Fired with the new selection, or null when the filter is cleared. */
|
|
22
|
+
rpFilterChange;
|
|
23
|
+
select(option) {
|
|
24
|
+
this.rpFilterChange.emit(this.selected === option ? null : option);
|
|
25
|
+
}
|
|
26
|
+
render() {
|
|
27
|
+
// A string prop arriving from an HTML attribute would be unusable; tolerate it so
|
|
28
|
+
// the component behaves predictably in a plain .html page.
|
|
29
|
+
const options = Array.isArray(this.options) ? this.options : [];
|
|
30
|
+
return (h(Host, { key: '656b969af2e55a7c4313bc0c2c422e000811af53' }, h("div", { key: '1da1173fc1d6d10a312a43466a0ea799b625caef', class: "chips", role: "group", "aria-label": this.label }, options.map((option) => (h("button", { key: option, type: "button", class: { chip: true, 'is-selected': this.selected === option }, "aria-pressed": String(this.selected === option), onClick: () => this.select(option) }, option))))));
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
FilterChips.style = rpFilterChipsCss();
|
|
34
|
+
|
|
35
|
+
const rpIngredientListCss = () => `.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}`;
|
|
36
|
+
|
|
37
|
+
const IngredientList = class {
|
|
38
|
+
constructor(hostRef) {
|
|
39
|
+
registerInstance(this, hostRef);
|
|
40
|
+
}
|
|
41
|
+
/** Ingredients to display. Must be assigned as a DOM property, not an attribute. */
|
|
42
|
+
items = [];
|
|
43
|
+
render() {
|
|
44
|
+
const items = Array.isArray(this.items) ? this.items : [];
|
|
45
|
+
return (h(Host, { key: '22708ae6e60de472b2f8e40fb54b33a2ec691ad1' }, h("section", { key: '6f922fc37e3c230511bbdf72e55826dfa73e167e', class: "wrap" }, h("slot", { key: 'e9f0b16183f5ded825a5c1663caa54dcb6c2d961', name: "heading" }, h("h2", { key: 'c68ebf97056bc6309d3c4e79d1796d89eede1325', class: "heading" }, "Ingredients")), items.length === 0 ? (h("p", { class: "empty" }, "No ingredients listed for this recipe.")) : (h("ul", { class: "list" }, items.map((item, index) => (
|
|
46
|
+
// Ingredient names repeat within a recipe (for example, oil listed twice
|
|
47
|
+
// with different measures), so the index is part of the identity.
|
|
48
|
+
h("li", { class: "row", key: `${item.name}-${index}` }, h("span", { class: "name" }, item.name), h("span", { class: "measure" }, item.measure)))))), h("div", { key: '28d26e1bbb9f14e5dedfb153ff87e44add5cfbfb', class: "note" }, h("slot", { key: '20410e710e3c7dbc2ee9f6ad9493984382693687' })))));
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
IngredientList.style = rpIngredientListCss();
|
|
52
|
+
|
|
53
|
+
const rpModalCss = () => `.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)}}}`;
|
|
54
|
+
|
|
55
|
+
const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
56
|
+
const Modal = class {
|
|
57
|
+
constructor(hostRef) {
|
|
58
|
+
registerInstance(this, hostRef);
|
|
59
|
+
this.rpClose = createEvent(this, "rpClose");
|
|
60
|
+
}
|
|
61
|
+
get el() { return getElement(this); }
|
|
62
|
+
/** Whether the dialog is visible. */
|
|
63
|
+
open = false;
|
|
64
|
+
/** Dialog heading, also used as its accessible name. */
|
|
65
|
+
heading = '';
|
|
66
|
+
/** Fired when the user dismisses the dialog via Escape, the backdrop, or the close button. */
|
|
67
|
+
rpClose;
|
|
68
|
+
previouslyFocused = null;
|
|
69
|
+
onOpenChange(isOpen) {
|
|
70
|
+
if (isOpen) {
|
|
71
|
+
this.previouslyFocused = document.activeElement;
|
|
72
|
+
document.addEventListener('keydown', this.onKeydown);
|
|
73
|
+
// The dialog content renders in the same tick, so defer focus until it exists.
|
|
74
|
+
requestAnimationFrame(() => this.focusFirstField());
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
document.removeEventListener('keydown', this.onKeydown);
|
|
78
|
+
this.previouslyFocused?.focus();
|
|
79
|
+
this.previouslyFocused = null;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
componentDidLoad() {
|
|
83
|
+
// A dialog can be mounted already open, in which case @Watch never fires.
|
|
84
|
+
if (this.open)
|
|
85
|
+
this.onOpenChange(true);
|
|
86
|
+
}
|
|
87
|
+
disconnectedCallback() {
|
|
88
|
+
// Without this, every mount of a page containing a modal leaks a document listener.
|
|
89
|
+
document.removeEventListener('keydown', this.onKeydown);
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* Moves focus to the first focusable control inside the dialog.
|
|
93
|
+
*
|
|
94
|
+
* Exposed as a method because "move focus now" is a one-shot action with no state to
|
|
95
|
+
* represent; a prop would have to be toggled and reset to fire it twice.
|
|
96
|
+
*/
|
|
97
|
+
async focusFirstField() {
|
|
98
|
+
const first = this.el.querySelector(FOCUSABLE);
|
|
99
|
+
first?.focus();
|
|
100
|
+
}
|
|
101
|
+
onKeydown = (event) => {
|
|
102
|
+
if (!this.open)
|
|
103
|
+
return;
|
|
104
|
+
if (event.key === 'Escape') {
|
|
105
|
+
event.preventDefault();
|
|
106
|
+
this.rpClose.emit();
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
if (event.key === 'Tab')
|
|
110
|
+
this.trapFocus(event);
|
|
111
|
+
};
|
|
112
|
+
trapFocus(event) {
|
|
113
|
+
const focusable = Array.from(this.el.querySelectorAll(FOCUSABLE));
|
|
114
|
+
if (focusable.length === 0)
|
|
115
|
+
return;
|
|
116
|
+
const first = focusable[0];
|
|
117
|
+
const last = focusable[focusable.length - 1];
|
|
118
|
+
const active = document.activeElement;
|
|
119
|
+
// Wrap in both directions so Tab never escapes the dialog into the page behind it.
|
|
120
|
+
if (event.shiftKey && active === first) {
|
|
121
|
+
event.preventDefault();
|
|
122
|
+
last.focus();
|
|
123
|
+
}
|
|
124
|
+
else if (!event.shiftKey && active === last) {
|
|
125
|
+
event.preventDefault();
|
|
126
|
+
first.focus();
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
onBackdropClick = (event) => {
|
|
130
|
+
if (event.target === event.currentTarget)
|
|
131
|
+
this.rpClose.emit();
|
|
132
|
+
};
|
|
133
|
+
render() {
|
|
134
|
+
if (!this.open)
|
|
135
|
+
return null;
|
|
136
|
+
return (h(Host, null, h("div", { class: "backdrop", onClick: this.onBackdropClick }, h("div", { class: "dialog", role: "dialog", "aria-modal": "true", "aria-label": this.heading }, h("header", { class: "head" }, h("h2", { class: "heading" }, this.heading), h("button", { type: "button", class: "close", onClick: () => this.rpClose.emit(), "aria-label": "Close dialog" }, "\u00D7")), h("div", { class: "body" }, h("slot", null)), h("footer", { class: "foot" }, h("slot", { name: "footer" }))))));
|
|
137
|
+
}
|
|
138
|
+
static get watchers() { return {
|
|
139
|
+
"open": [{
|
|
140
|
+
"onOpenChange": 0
|
|
141
|
+
}]
|
|
142
|
+
}; }
|
|
143
|
+
};
|
|
144
|
+
Modal.style = rpModalCss();
|
|
145
|
+
|
|
146
|
+
const rpRecipeCardCss = () => `.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}`;
|
|
147
|
+
|
|
148
|
+
const RecipeCard = class {
|
|
149
|
+
constructor(hostRef) {
|
|
150
|
+
registerInstance(this, hostRef);
|
|
151
|
+
this.rpFavoriteToggle = createEvent(this, "rpFavoriteToggle");
|
|
152
|
+
}
|
|
153
|
+
get el() { return getElement(this); }
|
|
154
|
+
/** Identifier echoed back in the toggle event so consumers know which card fired. */
|
|
155
|
+
recipeId;
|
|
156
|
+
/**
|
|
157
|
+
* Recipe name, rendered as the card heading.
|
|
158
|
+
*
|
|
159
|
+
* Named `recipeTitle` rather than `title` because every HTMLElement already defines
|
|
160
|
+
* `title` on its prototype; shadowing it produces inconsistent behaviour across browsers.
|
|
161
|
+
*/
|
|
162
|
+
recipeTitle;
|
|
163
|
+
/** Absolute URL of the recipe image. */
|
|
164
|
+
image;
|
|
165
|
+
/** Category label shown under the heading. */
|
|
166
|
+
category;
|
|
167
|
+
/** Whether this recipe is currently a favorite. Reflected for CSS hooks. */
|
|
168
|
+
favorite = false;
|
|
169
|
+
/** Fired when the favorite control is activated. */
|
|
170
|
+
rpFavoriteToggle;
|
|
171
|
+
toggleFavorite = () => {
|
|
172
|
+
// Emits the intended next state. The consumer owns the data and decides whether
|
|
173
|
+
// the change is applied, so this component never writes to its own prop.
|
|
174
|
+
this.rpFavoriteToggle.emit({ recipeId: this.recipeId, favorite: !this.favorite });
|
|
175
|
+
};
|
|
176
|
+
render() {
|
|
177
|
+
return (h(Host, { key: '7ac4bd65a2fa94815db81c986d17e3dff768334f' }, h("article", { key: 'b8ab03b01a7305ebac8fa8c7a512cf670afbd7c9', class: "card" }, h("div", { key: 'ddd9892bf42ed7fdd1300d439449ac4c471f11e3', 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: '211b2f1621e96b2350ff17598094790809c6fe81', class: "badges" }, h("slot", { key: 'ab834b8c4ff5c643c35d4f29c7bc9ddab5886e44' })), h("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` }, h("svg", { key: 'ad94f74c83aba86af030d380d02ca331bf1edd66', viewBox: "0 0 24 24", width: "20", height: "20", "aria-hidden": "true" }, h("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" })))), h("div", { key: '57e619602fb97b1197d1391e1bca37059fad4750', class: "body" }, h("h3", { key: '1576688c8d62e883132bb25f7f4f0832e7e102c2', class: "title" }, this.recipeTitle), this.category && h("p", { key: 'ca58ac4811bf94d13761ac0fd3fdd63a4b35c057', class: "category" }, this.category)), h("div", { key: 'fe7531c32eb5b110fe5aea2c4680a020848633bd', class: "actions" }, h("slot", { key: 'daf97a1324f3d2d08d1900d057cab1968be8c9d7', name: "actions" })))));
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
RecipeCard.style = rpRecipeCardCss();
|
|
181
|
+
|
|
182
|
+
const rpSearchBarCss = () => `.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)}`;
|
|
183
|
+
|
|
184
|
+
const SearchBar = class {
|
|
185
|
+
constructor(hostRef) {
|
|
186
|
+
registerInstance(this, hostRef);
|
|
187
|
+
this.rpSearch = createEvent(this, "rpSearch");
|
|
188
|
+
this.rpClear = createEvent(this, "rpClear");
|
|
189
|
+
}
|
|
190
|
+
/** Initial query text. Changing it externally resets the field. */
|
|
191
|
+
value = '';
|
|
192
|
+
/** Placeholder shown when the field is empty. */
|
|
193
|
+
placeholder = 'Search recipes';
|
|
194
|
+
/** Accessible label for the input. */
|
|
195
|
+
label = 'Search recipes';
|
|
196
|
+
/**
|
|
197
|
+
* Live field contents. Held internally so typing does not require a round trip
|
|
198
|
+
* through the consumer, while `value` remains the externally controlled seed.
|
|
199
|
+
*/
|
|
200
|
+
draft = '';
|
|
201
|
+
/** Fired on submit with the trimmed query. */
|
|
202
|
+
rpSearch;
|
|
203
|
+
/** Fired when the user clears a non-empty field. */
|
|
204
|
+
rpClear;
|
|
205
|
+
onValueChange(next) {
|
|
206
|
+
this.draft = next ?? '';
|
|
207
|
+
}
|
|
208
|
+
componentWillLoad() {
|
|
209
|
+
this.draft = this.value ?? '';
|
|
210
|
+
}
|
|
211
|
+
onSubmit = (event) => {
|
|
212
|
+
// The host page owns navigation, so the native GET submission must not fire.
|
|
213
|
+
event.preventDefault();
|
|
214
|
+
this.rpSearch.emit(this.draft.trim());
|
|
215
|
+
};
|
|
216
|
+
onInput = (event) => {
|
|
217
|
+
this.draft = event.target.value;
|
|
218
|
+
};
|
|
219
|
+
onClear = () => {
|
|
220
|
+
this.draft = '';
|
|
221
|
+
this.rpClear.emit();
|
|
222
|
+
};
|
|
223
|
+
render() {
|
|
224
|
+
return (h(Host, { key: '12550f4e6587473576e211fe1cfa5d075a02399f' }, h("form", { key: 'e1a61e15c159e8449770b7df63a649d84b136aa2', class: "bar", role: "search", onSubmit: this.onSubmit }, h("input", { key: 'defae81130bf361beae8a57c15633c6595437493', type: "search", class: "field", value: this.draft, placeholder: this.placeholder, "aria-label": this.label, onInput: this.onInput }), this.draft && (h("button", { key: '4cd2eac81b32f17d18e89c51a90e0a0d9edf7d01', type: "button", class: "clear", onClick: this.onClear, "aria-label": "Clear search" }, "\u00D7")), h("button", { key: 'b07034ed131233623d8edbdd16db3cfd8ffab4b7', type: "submit", class: "submit" }, "Search"))));
|
|
225
|
+
}
|
|
226
|
+
static get watchers() { return {
|
|
227
|
+
"value": [{
|
|
228
|
+
"onValueChange": 0
|
|
229
|
+
}]
|
|
230
|
+
}; }
|
|
231
|
+
};
|
|
232
|
+
SearchBar.style = rpSearchBarCss();
|
|
233
|
+
|
|
234
|
+
export { FilterChips as rp_filter_chips, IngredientList as rp_ingredient_list, Modal as rp_modal, RecipeCard as rp_recipe_card, SearchBar as rp_search_bar };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
module.exports = require('./cjs/index.cjs.js');
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './esm/index.js';
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
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}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
function t(t,n,e){const o="undefined"!=typeof HTMLElement?HTMLElement.prototype:null;for(;t&&t!==o;){const o=Object.getOwnPropertyDescriptor(t,n);if(o&&(!e||o.get))return o;t=Object.getPrototypeOf(t)}}var n=(n,e)=>{var o;Object.entries(null!=(o=e.o.t)?o:{}).map((([o,[l]])=>{if(31&l||32&l){const l=n[o],s=t(Object.getPrototypeOf(n),o,!0)||Object.getOwnPropertyDescriptor(n,o);s&&Object.defineProperty(n,o,{get(){return s.get.call(this)},set(t){s.set.call(this,t)},configurable:!0,enumerable:!0}),e.l.has(o)?n[o]=e.l.get(o):void 0!==l&&(n[o]=l)}}))},e=t=>{if(t.__stencil__getHostRef)return t.__stencil__getHostRef()},o=(t,e)=>{e&&(t.__stencil__getHostRef=()=>e,e.i=t,512&e.o.u&&n(t,e))},l=(t,n)=>n in t,s=(t,n)=>(0,console.error)(t,n),i=new Map,r=new Map,c=new Map,u="slot-fb{display:contents}slot-fb[hidden]{display:none}",f="undefined"!=typeof window?window:{},a={u:0,v:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,n,e,o)=>t.addEventListener(n,e,o),rel:(t,n,e,o)=>t.removeEventListener(n,e,o),ce:(t,n)=>new CustomEvent(t,n)},d=t=>Promise.resolve(t),v=(()=>{try{return!!f.document.adoptedStyleSheets&&(new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync)}catch(t){}return!1})(),p=!!v&&(()=>!!f.document&&Object.getOwnPropertyDescriptor(f.document.adoptedStyleSheets,"length").writable)(),h=!1,m=[],b=[],y=()=>{var t;return(null==(t=f.document)?void 0:t.hidden)?j(w):a.raf(w)},$=(t,n)=>e=>{t.push(e),h||(h=!0,n&&4&a.u?j(w):y())},g=t=>{for(let n=0;n<t.length;n++)try{t[n](performance.now())}catch(t){s(t)}t.length=0},w=()=>{g(m),g(b),(h=m.length>0)&&y()},j=t=>d().then(t),O=$(b,!0),S=t=>{const n=M(t,"childNodes");t.tagName&&t.tagName.includes("-")&&t["s-cr"]&&"SLOT-FB"!==t.tagName&&k(n,t.tagName).forEach((t=>{1===t.nodeType&&"SLOT-FB"===t.tagName&&(t.hidden=!!N(t,E(t),!1).length)}));let e=0;for(e=0;e<n.length;e++){const t=n[e];1===t.nodeType&&M(t,"childNodes").length&&S(t)}};function k(t,n,e){let o,l=0,s=[];for(;l<t.length;l++){if(o=t[l],o["s-sr"]&&(!n||o["s-hn"]===n)&&(void 0===e||E(o)===e)&&(s.push(o),void 0!==e))return s;s=[...s,...k(M(o,"childNodes"),n,e)]}return s}var N=(t,n,e=!0)=>{const o=[];(e&&t["s-sr"]||!t["s-sr"])&&o.push(t);let l=t;for(;l=l.nextSibling;)E(l)!==n||!e&&l["s-sr"]||o.push(l);return o},C=(t,n)=>1===t.nodeType?null===t.getAttribute("slot")&&""===n||t.getAttribute("slot")===n:t["s-sn"]===n||""===n,E=t=>"string"==typeof t["s-sn"]?t["s-sn"]:1===t.nodeType&&t.getAttribute("slot")||void 0;function M(t,n){if("__"+n in t){const e=t["__"+n];return"function"!=typeof e?e:e.bind(t)}return"function"!=typeof t[n]?t[n]:t[n].bind(t)}function T(t){var n,e,o;return null!=(o=null==(e=null==(n=t.head)?void 0:n.querySelector('meta[name="csp-nonce"]'))?void 0:e.getAttribute("content"))?o:void 0}var L,R,A,x=new WeakMap,P=t=>"sc-"+t.p,D=t=>"object"==(t=typeof t)||"function"===t,F=(t,n,...e)=>{let o=null,l=null,i=null,r=!1,c=!1;const u=[],f=n=>{for(let e=0;e<n.length;e++)if(o=n[e],Array.isArray(o))f(o);else if(null!=o&&"boolean"!=typeof o){if(r="function"!=typeof t&&!D(o))o+="";else if("function"!=typeof t&&void 0===o.u){s("Invalid vNode child");continue}r&&c?u[u.length-1].h+=o:u.push(r?H(null,o):o),c=r}};if(f(e),n){n.key&&(l=n.key),n.name&&(i=n.name);{const t=n.className||n.class;t&&(n.class="object"!=typeof t?t:Object.keys(t).filter((n=>t[n])).join(" "))}}const a=H(t,null);return a.m=n,u.length>0&&(a.$=u),a.j=l,a.O=i,a},H=(t,n)=>({u:0,S:t,h:null!=n?n:null,k:null,$:null,m:null,j:null,O:null}),_={},B=t=>{if(!t)return;const n=Object.keys(t);if(0===n.length)return;let e=!1;for(const o of n){if(e)break;for(const n of t[o])if("string"==typeof n){e=!0;break}}if(!e)return t;const o={};for(const e of n)o[e]=t[e].map((t=>"string"==typeof t?{[t]:0}:t));return o},U=(t,n)=>null==t||D(t)?t:4&n?"false"!==t&&(""===t||!!t):1&n?t+"":t,W=t=>{var n;return null==(n=e(t))?void 0:n.$hostElement$},z=(t,n)=>{const e=W(t);return{emit:t=>V(e,n,{bubbles:!0,composed:!0,cancelable:!0,detail:t})}},V=(t,n,e)=>{const o=a.ce(n,e);return t.dispatchEvent(o),o},q=(t,n,o,s,i,r)=>{if(o===s)return;let c=l(t,n),u=n.toLowerCase();if("class"===n){const n=t.classList,e=Z(o);let l=Z(s);n.remove(...e.filter((t=>t&&!l.includes(t)))),n.add(...l.filter((t=>t&&!e.includes(t))))}else if("key"===n);else if(c||"o"!==n[0]||"n"!==n[1]){if("a"===n[0]&&n.startsWith("attr:")){const o=n.slice(5);let l;{const n=e(t);if(n&&n.o&&n.o.t){const t=n.o.t[o];t&&t[1]&&(l=t[1])}}return l||(l=o.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()),void(null==s||!1===s?!1===s&&""!==t.getAttribute(l)||t.removeAttribute(l):t.setAttribute(l,!0===s?"":s))}if("p"===n[0]&&n.startsWith("prop:")){const e=n.slice(5);try{t[e]=s}catch(t){}return}{const e=D(s);if((c||e&&null!==s)&&!i)try{if(t.tagName.includes("-"))t[n]!==s&&(t[n]=s);else{const e=null==s?"":s;"list"===n?c=!1:null!=o&&t[n]===e||("function"==typeof t.__lookupSetter__(n)?t[n]=e:t.setAttribute(n,e))}}catch(t){}null==s||!1===s?(!1!==s||""===t.getAttribute(n)||4&r&&!Y(n))&&t.removeAttribute(n):(!c||4&r||i)&&!e&&1===t.nodeType&&t.setAttribute(n,s=!0===s?"":s)}}else if(n="-"===n[2]?n.slice(3):l(f,u)?u.slice(2):u[2]+n.slice(3),o||s){const e=n.endsWith(J);n=n.replace(K,""),o&&a.rel(t,n,o,e),s&&a.ael(t,n,s,e)}},I=new Set(["draggable","contenteditable","spellcheck"]),Y=t=>I.has(t)||t.startsWith("aria-"),G=/\s/,Z=t=>("object"==typeof t&&t&&"baseVal"in t&&(t=t.baseVal),t&&"string"==typeof t?t.split(G):[]),J="Capture",K=RegExp(J+"$"),Q=(t,n,e)=>{const o=11===n.k.nodeType&&n.k.host?n.k.host:n.k,l=t&&t.m||{},s=n.m||{};for(const t of X(Object.keys(l)))t in s||q(o,t,l[t],void 0,e,n.u);for(const t of X(Object.keys(s)))q(o,t,l[t],s[t],e,n.u)};function X(t){return t.includes("ref")?[...t.filter((t=>"ref"!==t)),"ref"]:t}var tt=!1,nt=!1,et=!1,ot=!1,lt=(t,n,e)=>{var o;const l=n.$[e];let s,i,r,c=0;if(tt||(et=!0,"slot"===l.S&&(l.u|=l.$?2:1)),null!=l.h)s=l.k=f.document.createTextNode(l.h);else if(1&l.u)s=l.k=f.document.createTextNode(""),Q(null,l,ot);else{if(ot||(ot="svg"===l.S),!f.document)throw Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.");if(s=l.k=f.document.createElementNS(ot?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",!tt&&2&l.u?"slot-fb":l.S),ot&&"foreignObject"===l.S&&(ot=!1),Q(null,l,ot),null!=L&&void 0!==L&&s["s-si"]!==L&&s.classList.add(s["s-si"]=L),l.$){const n="template"===l.S?s.content:s;for(c=0;c<l.$.length;++c)i=lt(t,l,c),i&&n.appendChild(i)}"svg"===l.S?ot=!1:"foreignObject"===s.tagName&&(ot=!0)}return s["s-hn"]=A,3&l.u&&(s["s-sr"]=!0,s["s-cr"]=R,s["s-sn"]=l.O||"",s["s-rf"]=null==(o=l.m)?void 0:o.ref,function(t){if(t.assignedElements||t.assignedNodes||!t["s-sr"])return;const n=n=>function(t){const e=[],o=this["s-sn"];(null==t?void 0:t.flatten)&&console.error("\n Flattening is not supported for Stencil non-shadow slots.\n You can use `.childNodes` to nested slot fallback content.\n If you have a particular use case, please open an issue on the Stencil repo.\n ");const l=this["s-cr"].parentElement;return(l.__childNodes?l.childNodes:(t=>{const n=[];for(let e=0;e<t.length;e++){const o=t[e]["s-nr"]||void 0;o&&o.isConnected&&n.push(o)}return n})(l.childNodes)).forEach((t=>{o===E(t)&&e.push(t)})),n?e.filter((t=>1===t.nodeType)):e}.bind(t);t.assignedElements=n(!0),t.assignedNodes=n(!1)}(s),r=t&&t.$&&t.$[e],r&&r.S===l.S&&t.k&&st(t.k),ht(R,s,n.k,null==t?void 0:t.k)),s},st=t=>{a.u|=1;const n=t.closest(A.toLowerCase());if(null!=n){const e=Array.from(n.__childNodes||n.childNodes).find((t=>t["s-cr"])),o=Array.from(t.__childNodes||t.childNodes);for(const t of e?o.reverse():o)null!=t["s-sh"]&&(pt(n,t,null!=e?e:null),t["s-sh"]=void 0,et=!0)}a.u&=-2},it=(t,n)=>{a.u|=1;const e=Array.from(t.__childNodes||t.childNodes);if(t["s-sr"]){let n=t;for(;n=n.nextSibling;)n&&n["s-sn"]===t["s-sn"]&&n["s-sh"]===A&&e.push(n)}for(let t=e.length-1;t>=0;t--){const o=e[t];o["s-hn"]!==A&&o["s-ol"]&&(pt(ft(o).parentNode,o,ft(o)),o["s-ol"].remove(),o["s-ol"]=void 0,o["s-sh"]=void 0,et=!0),n&&it(o,n)}a.u&=-2},rt=(t,n,e,o,l,s)=>{let i,r=t["s-cr"]&&t["s-cr"].parentNode||t;for("template"===e.S&&(r=r.content);l<=s;++l)o[l]&&(i=lt(null,e,l),i&&(o[l].k=i,pt(r,i,ft(n))))},ct=(t,n,e)=>{for(let o=n;o<=e;++o){const n=t[o];if(n){const t=n.k;t&&(nt=!0,t["s-ol"]?t["s-ol"].remove():it(t,!0),t.remove())}}},ut=(t,n,e=!1)=>t.S===n.S&&("slot"===t.S?t.O===n.O:e?(e&&!t.j&&n.j&&(t.j=n.j),!0):t.j===n.j),ft=t=>t&&t["s-ol"]||t,at=(t,n,e=!1)=>{const o=n.k=t.k,l=t.$,s=n.$,i=n.S,r=n.h;let c;null==r?(ot="svg"===i||"foreignObject"!==i&&ot,"slot"!==i||tt||t.O!==n.O&&(n.k["s-sn"]=n.O||"",st(n.k.parentElement)),Q(t,n,ot),null!==l&&null!==s?((t,n,e,o,l=!1)=>{let s,i,r=0,c=0,u=0,f=0,a=n.length-1,d=n[0],v=n[a],p=o.length-1,h=o[0],m=o[p];const b="template"===e.S?t.content:t;for(;r<=a&&c<=p;)if(null==d)d=n[++r];else if(null==v)v=n[--a];else if(null==h)h=o[++c];else if(null==m)m=o[--p];else if(ut(d,h,l))at(d,h,l),d=n[++r],h=o[++c];else if(ut(v,m,l))at(v,m,l),v=n[--a],m=o[--p];else if(ut(d,m,l))"slot"!==d.S&&"slot"!==m.S||it(d.k.parentNode,!1),at(d,m,l),pt(b,d.k,v.k.nextSibling),d=n[++r],m=o[--p];else if(ut(v,h,l))"slot"!==d.S&&"slot"!==m.S||it(v.k.parentNode,!1),at(v,h,l),pt(b,v.k,d.k),v=n[--a],h=o[++c];else{for(u=-1,f=r;f<=a;++f)if(n[f]&&null!==n[f].j&&n[f].j===h.j){u=f;break}u>=0?(i=n[u],i.S!==h.S?s=lt(n&&n[c],e,u):(at(i,h,l),n[u]=void 0,s=i.k),h=o[++c]):(s=lt(n&&n[c],e,c),h=o[++c]),s&&pt(ft(d.k).parentNode,s,ft(d.k))}r>a?rt(t,null==o[p+1]?null:o[p+1].k,e,o,c,p):c>p&&ct(n,r,a)})(o,l,n,s,e):null!==s?(null!==t.h&&(o.textContent=""),rt(o,null,n,s,0,s.length-1)):!e&&null!==l&&ct(l,0,l.length-1),ot&&"svg"===i&&(ot=!1)):(c=o["s-cr"])?c.parentNode.textContent=r:t.h!==r&&(o.data=r)},dt=[],vt=t=>{let n,e,o;const l=t.__childNodes||t.childNodes;for(const t of l){if(t["s-sr"]&&(n=t["s-cr"])&&n.parentNode){e=n.parentNode.__childNodes||n.parentNode.childNodes;const l=t["s-sn"];for(o=e.length-1;o>=0;o--)if(n=e[o],!n["s-cn"]&&!n["s-nr"]&&n["s-hn"]!==t["s-hn"]&&(!n["s-sh"]||n["s-sh"]!==t["s-hn"]||""!==l&&E(n)===l))if(C(n,l)){let e=dt.find((t=>t.N===n));nt=!0,n["s-sn"]=n["s-sn"]||l,e?(e.N["s-sh"]=t["s-hn"],e.C=t):(n["s-sh"]=t["s-hn"],dt.push({C:t,N:n})),n["s-sr"]&&dt.map((t=>{C(t.N,n["s-sn"])&&(e=dt.find((t=>t.N===n)),e&&!t.C&&(t.C=e.C))}))}else dt.some((t=>t.N===n))||dt.push({N:n})}1===t.nodeType&&vt(t)}},pt=(t,n,e,o)=>{if("string"==typeof n["s-sn"]&&n["s-sr"]&&n["s-cr"])ht(n["s-cr"],n,t,n.parentElement);else if("string"==typeof n["s-sn"]){t.insertBefore(n,e);const{slotNode:l}=function(t,n){var e;if(!(n=n||(null==(e=t["s-ol"])?void 0:e.parentElement)))return{slotNode:null,slotName:""};const o=t["s-sn"]=E(t)||"";return{slotNode:k(M(n,"childNodes"),n.tagName,o)[0],slotName:o}}(n);return l&&!o&&function(t){t.dispatchEvent(new CustomEvent("slotchange",{bubbles:!1,cancelable:!1,composed:!1}))}(l),n}return(null==t?void 0:t.__insertBefore)?t.__insertBefore(n,e):null==t?void 0:t.insertBefore(n,e)};function ht(t,n,e,o){var l,s;let i;if(t&&"string"==typeof n["s-sn"]&&n["s-sr"]&&t.parentNode&&t.parentNode["s-sc"]&&(i=n["s-si"]||t.parentNode["s-sc"])){const t=n["s-sn"],r=n["s-hn"];if(null==(l=e.classList)||l.add(i+"-s"),o&&(null==(s=o.classList)?void 0:s.contains(i+"-s"))){let n=(o.__childNodes||o.childNodes)[0],e=!1;for(;n;){if(n["s-sn"]!==t&&n["s-hn"]===r&&n["s-sr"]){e=!0;break}n=n.nextSibling}e||o.classList.remove(i+"-s")}}}var mt=(t,n)=>{if(n&&!t.M&&n["s-p"]){const e=n["s-p"].push(new Promise((o=>t.M=()=>{n["s-p"].splice(e-1,1),o()})))}},bt=(t,n)=>{if(t.u|=16,4&t.u)return void(t.u|=512);mt(t,t.T);const e=()=>yt(t,n);if(!n)return O(e);queueMicrotask((()=>{e()}))},yt=(t,n)=>{const e=t.$hostElement$,o=t.i;if(!o)throw Error(`Can't render component <${e.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let l;return n?(t.L&&(t.L=!1,kt(o,"connectedCallback",void 0,e)),t.R.length&&t.R.forEach((t=>t(e))),l=kt(o,"componentWillLoad",void 0,e)):l=kt(o,"componentWillUpdate",void 0,e),l=$t(l,(()=>kt(o,"componentWillRender",void 0,e))),$t(l,(()=>wt(t,o,n)))},$t=(t,n)=>gt(t)?t.then(n).catch((t=>{console.error(t),n()})):n(),gt=t=>t instanceof Promise||t&&t.then&&"function"==typeof t.then,wt=async(t,n,e)=>{var o;const l=t.$hostElement$,s=l["s-rc"];e&&(t=>{const n=t.o,e=t.$hostElement$,o=n.u,l=((t,n)=>{var e,o,l;const s=P(n),i=c.get(s);if(!f.document)return s;if(t=11===t.nodeType?t:f.document,i)if("string"==typeof i){let l,r=x.get(t=t.head||t);if(r||x.set(t,r=new Set),!r.has(s)){l=f.document.createElement("style"),l.textContent=i;const c=null!=(e=a.A)?e:T(f.document);if(null!=c&&l.setAttribute("nonce",c),!(1&n.u))if("HEAD"===t.nodeName){const n=t.querySelectorAll("link[rel=preconnect]"),e=n.length>0?n[n.length-1].nextSibling:t.querySelector("style");t.insertBefore(l,(null==e?void 0:e.parentNode)===t?e:null)}else if("host"in t)if(v){const n=new(null!=(o=t.defaultView)?o:t.ownerDocument.defaultView).CSSStyleSheet;n.replaceSync(i),p?t.adoptedStyleSheets.unshift(n):t.adoptedStyleSheets=[n,...t.adoptedStyleSheets]}else{const n=t.querySelector("style");n?n.textContent=i+n.textContent:t.prepend(l)}else t.append(l);1&n.u&&t.insertBefore(l,null),4&n.u&&(l.textContent+=u),r&&r.add(s)}}else{let n=x.get(t);if(n||x.set(t,n=new Set),!n.has(s)){const e=null!=(l=t.defaultView)?l:t.ownerDocument.defaultView;let o;if(i.constructor===e.CSSStyleSheet)o=i;else{o=new e.CSSStyleSheet;for(let t=0;t<i.cssRules.length;t++)o.insertRule(i.cssRules[t].cssText,t)}p?t.adoptedStyleSheets.push(o):t.adoptedStyleSheets=[...t.adoptedStyleSheets,o],n.add(s)}}return s})(e.getRootNode(),n);10&o&&(e["s-sc"]=l,e.classList.add(l+"-h"))})(t);jt(t,n,l,e),s&&(s.map((t=>t())),l["s-rc"]=void 0);{const n=null!=(o=l["s-p"])?o:[],e=()=>Ot(t);0===n.length?e():(Promise.all(n).then(e).catch(e),t.u|=4,n.length=0)}},jt=(t,n,e,o)=>{try{n=n.render(),t.u&=-17,t.u|=2,((t,n,e=!1)=>{var o,l,s,i,r;const c=t.$hostElement$,u=t.o,d=t.P||H(null,null),v=(t=>t&&t.S===_)(n)?n:F(null,null,n);if(A=c.tagName,u.D&&(v.m=v.m||{},u.D.forEach((([t,n])=>{v.m[n]=c[t]}))),e&&v.m)for(const t of Object.keys(v.m))c.hasAttribute(t)&&!["key","ref","style","class"].includes(t)&&(v.m[t]=c[t]);if(v.S=null,v.u|=4,t.P=v,v.k=d.k=c,L=c["s-sc"],tt=!1,R=c["s-cr"],nt=!1,at(d,v,e),a.u|=1,et){vt(v.k);for(const t of dt){const n=t.N;if(!n["s-ol"]&&f.document){const t=f.document.createTextNode("");t["s-nr"]=n,pt(n.parentNode,n["s-ol"]=t,n,e)}}for(const t of dt){const n=t.N,r=t.C;if(1===n.nodeType&&e&&(n["s-ih"]=null!=(o=n.hidden)&&o),r){const t=r.parentNode;let o=r.nextSibling;if(o&&1===o.nodeType){let e=null==(l=n["s-ol"])?void 0:l.previousSibling;for(;e;){let l=null!=(s=e["s-nr"])?s:null;if(l&&l["s-sn"]===n["s-sn"]&&t===(l.__parentNode||l.parentNode)){for(l=l.nextSibling;l===n||(null==l?void 0:l["s-sr"]);)l=null==l?void 0:l.nextSibling;if(!l||!l["s-nr"]){o=l;break}}e=e.previousSibling}}if((!o&&t!==(n.__parentNode||n.parentNode)||(n.__nextSibling||n.nextSibling)!==o)&&n!==o){if(pt(t,n,o,e),8===n.nodeType&&n.nodeValue.startsWith("s-nt-")){const t=f.document.createTextNode(n.nodeValue.replace(/^s-nt-/,""));t["s-hn"]=n["s-hn"],t["s-sn"]=n["s-sn"],t["s-sh"]=n["s-sh"],t["s-sr"]=n["s-sr"],t["s-ol"]=n["s-ol"],t["s-ol"]["s-nr"]=t,pt(n.parentNode,t,n,e),n.parentNode.removeChild(n)}1===n.nodeType&&"SLOT-FB"!==n.tagName&&(n.hidden=null!=(i=n["s-ih"])&&i)}n&&"function"==typeof r["s-rf"]&&r["s-rf"](r)}else 1===n.nodeType&&(n.hidden=!0)}}if(nt&&S(v.k),a.u&=-2,dt.length=0,!tt&&!(1&u.u)&&c["s-cr"]){const t=v.k.__childNodes||v.k.childNodes;for(const n of t)if(n["s-hn"]!==A&&!n["s-sh"])if(e&&null==n["s-ih"]&&(n["s-ih"]=null!=(r=n.hidden)&&r),1===n.nodeType)n.hidden=!0;else if(3===n.nodeType&&n.nodeValue.trim()){const t=f.document.createComment("s-nt-"+n.nodeValue);t["s-sn"]=n["s-sn"],pt(n.parentNode,t,n,e),n.parentNode.removeChild(n)}}R=void 0})(t,n,o)}catch(n){s(n,t.$hostElement$)}return null},Ot=t=>{const n=t.$hostElement$,e=t.i,o=t.T;kt(e,"componentDidRender",void 0,n),64&t.u?kt(e,"componentDidUpdate",void 0,n):(t.u|=64,Nt(n),kt(e,"componentDidLoad",void 0,n),t.F(n),o||St()),t.H(n),t.M&&(t.M(),t.M=void 0),512&t.u&&j((()=>bt(t,!1))),t.u&=-517},St=()=>{j((()=>V(f,"appload",{detail:{namespace:"recipe-planner-ui"}})))},kt=(t,n,e,o)=>{if(t&&t[n])try{return t[n](e)}catch(t){s(t,o)}},Nt=t=>t.classList.add("hydrated"),Ct=(t,n,o,l)=>{const i=e(t);if(!i)return;if(!i)throw Error(`Couldn't find host element for "${l.p}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`);const r=i.$hostElement$,c=i.l.get(n),u=i.u,f=i.i;if(o=U(o,l.t[n][0]),!(8&u&&void 0!==c||o===c||Number.isNaN(c)&&Number.isNaN(o))){if(i.l.set(n,o),l._){const t=l._[n];t&&t.map((t=>{try{const[[e,l]]=Object.entries(t);(128&u||1&l)&&(f?f[e](o,c,n):i.R.push((()=>{i.i[e](o,c,n)})))}catch(t){s(t,r)}}))}if(2&u){if(f.componentShouldUpdate&&!1===f.componentShouldUpdate(o,c,n)&&!(16&u))return;16&u||bt(i,!1)}}},Et=(n,o,l)=>{var s,i;const r=n.prototype;{n.watchers&&!o._&&(o._=B(n.watchers)),n.deserializers&&!o.B&&(o.B=n.deserializers),n.serializers&&!o.U&&(o.U=n.serializers);const c=Object.entries(null!=(s=o.t)?s:{});if(c.map((([n,[s]])=>{if(31&s||2&l&&32&s){const{get:i,set:c}=t(r,n)||{};i&&(o.t[n][0]|=2048),c&&(o.t[n][0]|=4096),(1&l||!i)&&Object.defineProperty(r,n,{get(){{if(!(2048&o.t[n][0]))return((t,n)=>e(this).l.get(n))(0,n);const t=e(this),l=t?t.i:r;if(!l)return;return l[n]}},configurable:!0,enumerable:!0}),Object.defineProperty(r,n,{set(t){const i=e(this);if(i){if(c)return void 0===(32&s?this[n]:i.$hostElement$[n])&&i.l.get(n)&&(t=i.l.get(n)),c.call(this,U(t,s)),void Ct(this,n,t=32&s?this[n]:i.$hostElement$[n],o);{if(!(1&l&&4096&o.t[n][0]))return Ct(this,n,t,o),void(1&l&&!i.i&&i.R.push((()=>{4096&o.t[n][0]&&i.i[n]!==i.l.get(n)&&(i.i[n]=t)})));const e=()=>{const e=i.i[n];!i.l.get(n)&&e&&i.l.set(n,e),i.i[n]=U(t,s),Ct(this,n,i.i[n],o)};i.i?e():i.R.push((()=>{e()}))}}}})}else 1&l&&64&s&&Object.defineProperty(r,n,{value(...t){var o;const l=e(this);return null==(o=null==l?void 0:l.W)?void 0:o.then((()=>{var e;return null==(e=l.i)?void 0:e[n](...t)}))}})})),1&l){const t=new Map;r.attributeChangedCallback=function(n,l,s){a.jmp((()=>{var i;const u=t.get(n),f=e(this);if(this.hasOwnProperty(u)&&(s=this[u],delete this[u]),r.hasOwnProperty(u)&&"number"==typeof this[u]&&this[u]==s)return;if(null==u){const t=null==f?void 0:f.u;if(f&&t&&!(8&t)&&s!==l){const e=f.i,r=null==(i=o._)?void 0:i[n];null==r||r.forEach((o=>{const[[i,r]]=Object.entries(o);null!=e[i]&&(128&t||1&r)&&e[i].call(e,s,l,n)}))}return}const a=c.find((([t])=>t===u)),d=a&&4&a[1][0],v=d&&null===s&&void 0===this[u];d&&(s=null!==s&&"false"!==s);const p=Object.getOwnPropertyDescriptor(r,u);v||s==this[u]||p.get&&!p.set||(this[u]=s)}))},n.observedAttributes=Array.from(new Set([...Object.keys(null!=(i=o._)?i:{}),...c.filter((([t,n])=>31&n[0])).map((([n,e])=>{var l;const s=e[1]||n;return t.set(s,n),512&e[0]&&(null==(l=o.D)||l.push([n,s])),s}))]))}}return n},Mt=async(t,n,e)=>{var o;let l;try{if(!(32&n.u)){if(n.u|=32,n.u&=-1025,e.V){const c=((t,n)=>{var e;const o=t.p.replace(/-/g,"_"),l=t.V;if(!l)return;const c=i.get(l);if(c)return c[o];const u=null!=(e=r.get(l))?e:0,f=[u>0?"s-retry="+u:"",""].filter(Boolean).join("&");
|
|
2
|
+
/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
|
|
3
|
+
return import(`./${l}.entry.js${f?"?"+f:""}`).then((t=>(r.delete(l),i.set(l,t),t[o])),(t=>{r.set(l,u+1),s(t,n.$hostElement$)}))})(e,n);if(c&&"then"in c){const t=()=>{};l=await c,t()}else l=c;if(!l)throw n.u&=-33,n.q=(null!=(o=n.q)?o:0)+1,n.q<3&&(n.u|=1024),Error(`Constructor for "${e.p}#${n.I}" was not found`);l.isProxied||(e._=B(l.watchers),e.U=l.serializers,e.B=l.deserializers,Et(l,e,2),l.isProxied=!0);const u=()=>{};n.u|=8;try{new l(n)}catch(n){s(n,t)}n.u&=-9,n.u|=128,u(),4&e.u?n.L=!0:Tt(n.i,t)}else l=t.constructor,customElements.whenDefined(t.localName).then((()=>n.u|=128));if(l&&l.style){let t;"string"==typeof l.style&&(t=l.style);const n=P(e);if(!c.has(n)){const o=()=>{};((t,n,e)=>{let o=c.get(t);v&&e?(o=o||new CSSStyleSheet,"string"==typeof o?o=n:o.replaceSync(n)):o=n,c.set(t,o)})(n,t,!!(1&e.u)),o()}}}const u=n.T,f=()=>bt(n,!0);u&&u["s-rc"]?u["s-rc"].push(f):f()}catch(e){s(e,t),n.M&&(n.M(),n.M=void 0),!n.F||1024&n.u||n.F(t)}},Tt=(t,n)=>{kt(t,"connectedCallback",void 0,n)},Lt=(t,n)=>{kt(t,"disconnectedCallback",void 0,n||t)},Rt=(t,n={})=>{var o;if(!f.document)return void console.warn("Stencil: No document found. Skipping bootstrapping lazy components.");const l=[],s=n.exclude||[],i=f.customElements,r=f.document.head,c=r.querySelector("meta[charset]"),d=f.document.createElement("style"),v=[];let p,h=!0;Object.assign(a,n),a.v=new URL(n.resourcesUrl||"./",f.document.baseURI).href;let m=!1;if(t.map((t=>{t[1].map((n=>{var o,r;const c={u:n[0],p:n[1],t:n[2],Y:n[3]};4&c.u&&(m=!0),c.t=n[2],c.D=[],c._=B(n[4]),c.U=null!=(o=n[5])?o:{},c.B=null!=(r=n[6])?r:{};const u=c.p,d=class extends HTMLElement{"s-p";"s-rc";hasRegisteredEventListeners=!1;constructor(t){super(t),((t,n)=>{const e={u:0,$hostElement$:t,o:n,l:new Map,G:new Map};e.W=new Promise((t=>e.H=t)),e.Z=new Promise((t=>e.F=t)),t["s-p"]=[],t["s-rc"]=[],e.R=[];const o=e;t.__stencil__getHostRef=()=>o})(t=this,c)}connectedCallback(){e(this)&&(this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),p&&(clearTimeout(p),p=null),h?v.push(this):a.jmp((()=>(t=>{if(!(1&a.u)){const n=e(t);if(!n)return;const o=n.o,l=()=>{};if(1&n.u)(null==n?void 0:n.i)?Tt(n.i,t):1024&n.u?setTimeout((()=>Mt(t,n,o)),1e3):(null==n?void 0:n.Z)&&n.Z.then((()=>Tt(n.i,t)));else{n.u|=1,12&o.u&&(t=>{if(!f.document)return;const n=t["s-cr"]=f.document.createComment("");n["s-cn"]=!0,pt(t,n,t.firstChild)})(t);{let e=t;for(;e=e.parentNode||e.host;)if(e["s-p"]){mt(n,n.T=e);break}}o.t&&Object.entries(o.t).map((([n,[e]])=>{if(31&e&&Object.prototype.hasOwnProperty.call(t,n)){const e=t[n];delete t[n],t[n]=e}})),Mt(t,n,o)}l()}})(this))))}disconnectedCallback(){a.jmp((()=>(async t=>{if(!(1&a.u)){const n=e(t);(null==n?void 0:n.i)?Lt(n.i,t):(null==n?void 0:n.Z)&&n.Z.then((()=>Lt(n.i,t)))}x.has(t)&&x.delete(t),t.shadowRoot&&x.has(t.shadowRoot)&&x.delete(t.shadowRoot)})(this))),j((()=>{var t;const n=e(this);if(!n)return;const o=v.findIndex((t=>t===this));o>-1&&v.splice(o,1),(null==(t=null==n?void 0:n.P)?void 0:t.k)instanceof Node&&!n.P.k.isConnected&&delete n.P.k}))}componentOnReady(){var t;return null==(t=e(this))?void 0:t.Z}};c.V=t[0],s.includes(u)||i.get(u)||(l.push(u),i.define(u,Et(d,c,1)))}))})),l.length>0&&(m&&(d.textContent+=u),d.textContent+=l.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",d.innerHTML.length)){d.setAttribute("data-styles","");const t=null!=(o=a.A)?o:T(f.document);null!=t&&d.setAttribute("nonce",t),r.insertBefore(d,c?c.nextSibling:r.firstChild)}h=!1,v.length?v.map((t=>t.connectedCallback())):a.jmp((()=>p=setTimeout(St,30)))},At=t=>a.A=t;export{_ as H,Rt as b,z as c,W as g,F as h,d as p,o as r,At as s}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const o=()=>{};export{o as g}
|
|
@@ -0,0 +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}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--rp-gray-0:#ffffff;--rp-gray-50:#f8f9fa;--rp-gray-100:#f1f3f5;--rp-gray-200:#e9ecef;--rp-gray-300:#dee2e6;--rp-gray-500:#adb5bd;--rp-gray-600:#868e96;--rp-gray-700:#495057;--rp-gray-900:#212529;--rp-green-100:#d3f9d8;--rp-green-600:#2f9e44;--rp-green-700:#2b8a3e;--rp-red-100:#ffe3e3;--rp-red-600:#e03131;--rp-amber-500:#f59f00;--rp-color-surface:var(--rp-gray-0);--rp-color-surface-sunken:var(--rp-gray-50);--rp-color-border:var(--rp-gray-300);--rp-color-text:var(--rp-gray-900);--rp-color-text-muted:var(--rp-gray-700);--rp-color-accent:var(--rp-green-700);--rp-color-accent-contrast:var(--rp-gray-0);--rp-color-danger:var(--rp-red-600);--rp-color-favorite:var(--rp-amber-500);--rp-color-focus:var(--rp-green-600);--rp-radius-sm:4px;--rp-radius-md:8px;--rp-radius-lg:12px;--rp-space-1:4px;--rp-space-2:8px;--rp-space-3:12px;--rp-space-4:16px;--rp-space-5:24px;--rp-font-sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--rp-font-size-sm:0.8125rem;--rp-font-size-md:0.9375rem;--rp-font-size-lg:1.125rem;--rp-shadow-sm:0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.1);--rp-shadow-lg:0 10px 30px rgb(0 0 0 / 0.18);--rp-focus-ring:2px solid var(--rp-color-focus);--rp-focus-offset:2px}@media (prefers-color-scheme: dark){:root{--rp-color-surface:#1a1b1e;--rp-color-surface-sunken:#141517;--rp-color-border:#373a40;--rp-color-text:var(--rp-gray-100);--rp-color-text-muted:var(--rp-gray-500);--rp-color-accent:#51cf66;--rp-color-accent-contrast:#141517;--rp-color-danger:#ff6b6b}}rp-recipe-card:not(:defined){display:block;min-height:280px;border-radius:var(--rp-radius-lg);background:var(--rp-color-surface-sunken)}rp-search-bar:not(:defined){display:block;min-height:44px}rp-filter-chips:not(:defined){display:block;min-height:36px}rp-day-slot:not(:defined){display:block;min-height:160px;border-radius:var(--rp-radius-md);background:var(--rp-color-surface-sunken)}rp-ingredient-list:not(:defined),rp-modal:not(:defined){display:block}rp-modal:not(:defined){visibility:hidden}
|
|
@@ -0,0 +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-d54dbd37",[[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-66ba2983",[[774,"rp-day-slot",{day:[1],dayLabel:[1,"day-label"],meals:[16],days:[16],normalized:[32]}]]]],e))));
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
+
export interface PlannedMeal {
|
|
3
|
+
id: string;
|
|
4
|
+
title: string;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* One day column of a weekly meal plan.
|
|
8
|
+
*
|
|
9
|
+
* Moving a meal is a select rather than drag-and-drop: it works with a keyboard and on
|
|
10
|
+
* touch without a fallback path, and the plan is small enough that dragging adds nothing.
|
|
11
|
+
*
|
|
12
|
+
* @slot - Empty-state content shown when the day has no meals.
|
|
13
|
+
*/
|
|
14
|
+
export declare class DaySlot {
|
|
15
|
+
/** Machine-readable day key, echoed in every event. */
|
|
16
|
+
day: string;
|
|
17
|
+
/** Human-readable day name shown as the column heading. */
|
|
18
|
+
dayLabel: string;
|
|
19
|
+
/** Meals planned for this day. Must be assigned as a DOM property. */
|
|
20
|
+
meals: PlannedMeal[];
|
|
21
|
+
/** All day keys, used to populate each meal's move target list. */
|
|
22
|
+
days: string[];
|
|
23
|
+
private normalized;
|
|
24
|
+
/** Fired when the user asks to add a meal to this day. */
|
|
25
|
+
rpAddMeal: EventEmitter<string>;
|
|
26
|
+
/** Fired when a meal is removed from this day. */
|
|
27
|
+
rpRemoveMeal: EventEmitter<{
|
|
28
|
+
id: string;
|
|
29
|
+
day: string;
|
|
30
|
+
}>;
|
|
31
|
+
/** Fired when a meal is reassigned to a different day. */
|
|
32
|
+
rpMoveMeal: EventEmitter<{
|
|
33
|
+
id: string;
|
|
34
|
+
from: string;
|
|
35
|
+
to: string;
|
|
36
|
+
}>;
|
|
37
|
+
componentWillLoad(): void;
|
|
38
|
+
componentWillUpdate(): void;
|
|
39
|
+
private onMove;
|
|
40
|
+
render(): any;
|
|
41
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
+
/**
|
|
3
|
+
* A single-select row of filter chips.
|
|
4
|
+
*
|
|
5
|
+
* Selecting the active chip clears the filter, so the event detail is nullable —
|
|
6
|
+
* consumers translate null into "remove this search param".
|
|
7
|
+
*/
|
|
8
|
+
export declare class FilterChips {
|
|
9
|
+
/**
|
|
10
|
+
* Available filter values.
|
|
11
|
+
*
|
|
12
|
+
* An array has no attribute representation, so this must be assigned as a DOM
|
|
13
|
+
* property. Frameworks that set properties on custom elements do this automatically.
|
|
14
|
+
*/
|
|
15
|
+
options: string[];
|
|
16
|
+
/** Currently active value, or null when no filter is applied. */
|
|
17
|
+
selected: string | null;
|
|
18
|
+
/** Accessible label for the group. */
|
|
19
|
+
label: string;
|
|
20
|
+
/** Fired with the new selection, or null when the filter is cleared. */
|
|
21
|
+
rpFilterChange: EventEmitter<string | null>;
|
|
22
|
+
private select;
|
|
23
|
+
render(): any;
|
|
24
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A measure-and-name ingredient table.
|
|
3
|
+
*
|
|
4
|
+
* @slot heading - Replaces the default heading.
|
|
5
|
+
* @slot - Footnote content rendered beneath the list, such as a serving count.
|
|
6
|
+
*/
|
|
7
|
+
export declare class IngredientList {
|
|
8
|
+
/** Ingredients to display. Must be assigned as a DOM property, not an attribute. */
|
|
9
|
+
items: Array<{
|
|
10
|
+
name: string;
|
|
11
|
+
measure: string;
|
|
12
|
+
}>;
|
|
13
|
+
render(): any;
|
|
14
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
+
/**
|
|
3
|
+
* A modal dialog with a focus trap.
|
|
4
|
+
*
|
|
5
|
+
* Escape and focus containment are handled here rather than left to consumers, because
|
|
6
|
+
* getting them wrong is the usual reason a hand-rolled modal is inaccessible.
|
|
7
|
+
*
|
|
8
|
+
* @slot - Dialog body.
|
|
9
|
+
* @slot footer - Action row pinned to the bottom, typically confirm and cancel.
|
|
10
|
+
*/
|
|
11
|
+
export declare class Modal {
|
|
12
|
+
el: HTMLElement;
|
|
13
|
+
/** Whether the dialog is visible. */
|
|
14
|
+
open: boolean;
|
|
15
|
+
/** Dialog heading, also used as its accessible name. */
|
|
16
|
+
heading: string;
|
|
17
|
+
/** Fired when the user dismisses the dialog via Escape, the backdrop, or the close button. */
|
|
18
|
+
rpClose: EventEmitter<void>;
|
|
19
|
+
private previouslyFocused;
|
|
20
|
+
onOpenChange(isOpen: boolean): void;
|
|
21
|
+
componentDidLoad(): void;
|
|
22
|
+
disconnectedCallback(): void;
|
|
23
|
+
/**
|
|
24
|
+
* Moves focus to the first focusable control inside the dialog.
|
|
25
|
+
*
|
|
26
|
+
* Exposed as a method because "move focus now" is a one-shot action with no state to
|
|
27
|
+
* represent; a prop would have to be toggled and reset to fire it twice.
|
|
28
|
+
*/
|
|
29
|
+
focusFirstField(): Promise<void>;
|
|
30
|
+
private onKeydown;
|
|
31
|
+
private trapFocus;
|
|
32
|
+
private onBackdropClick;
|
|
33
|
+
render(): any;
|
|
34
|
+
}
|