@gurpinderjitsingh/recipe-ui 0.1.0 → 0.1.2

package/dist/components/p-kbrkhGSm.js

@@ -0,0 +1 @@
+import{t as e,p as s,H as t,c as i,h as r}from"./p-BJU3HdRm.js";const c=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.filterChange=i(this,"filterChange"),this.categories=[],this.active=""}select(e){this.filterChange.emit({value:e})}render(){const e=Array.isArray(this.categories)?this.categories:[];return r("div",{key:"13bc63f39ebfc55c0f05c035b63036121f7b3930",class:"wrap"},r("button",{key:"8aeb99775268204433a8f9831eca9873066c7b9e",class:{chip:!0,active:""===this.active},onClick:()=>this.select("")},"All"),e.map((e=>r("button",{class:{chip:!0,active:this.active===e},onClick:()=>this.select(e)},e))))}static get style(){return":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid #ddd;background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;color:#444}.chip.active{background:#ff6b35;border-color:#ff6b35;color:#fff}"}},[1,"recipe-filter-bar",{categories:[16],active:[1]}]);function a(){"undefined"!=typeof customElements&&["recipe-filter-bar"].forEach((s=>{"recipe-filter-bar"===s&&(customElements.get(e(s))||customElements.define(e(s),c))}))}a();export{c as R,a as d}

package/dist/components/recipe-card.js

@@ -0,0 +1 @@
+import{R as o,d as s}from"./p-B4H61SFd.js";const p=o,r=s;export{p as RecipeCard,r as defineCustomElement}

package/dist/components/recipe-filter-bar.js

@@ -0,0 +1 @@
+import{R as o,d as r}from"./p-kbrkhGSm.js";const s=o,m=r;export{s as RecipeFilterBar,m as defineCustomElement}

package/dist/components/recipe-form.js

@@ -0,0 +1 @@
+import{R as o,d as s}from"./p-DsyQvPDo.js";const p=o,r=s;export{p as RecipeForm,r as defineCustomElement}

package/dist/components/recipe-rating.js

@@ -0,0 +1 @@
+import{R as o,d as s}from"./p-BRKGu69u.js";const p=o,r=s;export{p as RecipeRating,r as defineCustomElement}

package/dist/components/recipe-search-bar.js

@@ -0,0 +1 @@
+import{R as o,d as s}from"./p-COHQTgKC.js";const p=o,r=s;export{p as RecipeSearchBar,r as defineCustomElement}

package/dist/esm/app-globals-DQuL1Twl.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };

package/dist/esm/app-modal_7.entry.js

@@ -0,0 +1,225 @@
+import { r as registerInstance, c as createEvent, h } from './index-CrZUP9M-.js';
+
+const recipeCardCss = () => `:host{display:block;font-family:system-ui, sans-serif}.card{border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:box-shadow 0.15s ease, transform 0.15s ease}.card:hover{box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);transform:translateY(-2px)}.image-wrap{position:relative;aspect-ratio:4 / 3;background:#f2f2f2}.image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{width:100%;height:100%;background:linear-gradient(135deg, #eee, #ddd)}.fav-btn{position:absolute;top:8px;right:8px;border:none;background:rgba(255, 255, 255, 0.9);border-radius:50%;width:32px;height:32px;font-size:16px;cursor:pointer;color:#f5a623}.fav-btn.active{color:#ff6b35}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:0.03em}.actions{margin-top:8px}`;
+
+const RecipeCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.favoriteToggle = createEvent(this, "favoriteToggle");
+        this.cardClick = createEvent(this, "cardClick");
+        /** Category / cuisine label */
+        this.category = '';
+        /** Whether this recipe is currently favorited */
+        this.favorite = false;
+        this.onFavoriteClick = (e) => {
+            e.stopPropagation();
+            this.favoriteToggle.emit({ favorite: !this.favorite });
+        };
+    }
+    render() {
+        return (h("div", { key: 'abd19b1d63409b52cf66f348131f5f6f77bb47a6', class: "card", onClick: () => this.cardClick.emit() }, h("div", { key: '1292c3f6dfe7d3b399943004f764c41a3d072188', class: "image-wrap" }, this.image ? h("img", { src: this.image, alt: this.recipeTitle }) : h("div", { class: "placeholder" }), h("button", { key: '0efdc01af349d011ca0e11c4df5438b79876b467', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), h("div", { key: '66c2c4d845d9cc082c07f24f5d827313f6ad51c4', class: "body" }, h("h3", { key: '779fc629c3b97b6158f99440d9bb17fafb708dd3' }, this.recipeTitle), this.category && h("span", { key: '259ec599a43a5c8a279ad5993ba36f8602125b76', class: "category" }, this.category), h("div", { key: '58ab20f9682b4b73b7d027571496641cbfa76d0b', class: "actions" }, h("slot", { key: '28103422d993e58b133c2350e37c06fddf24300f', name: "actions" })))));
+    }
+};
+RecipeCard.style = recipeCardCss();
+
+const recipeSearchBarCss = () => `:host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:6px}input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid #ddd;font-size:14px;outline:none}input:focus{border-color:#ff6b35}button{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:0 16px;cursor:pointer;font-size:15px}`;
+
+const RecipeSearchBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.search = createEvent(this, "search");
+        this.placeholder = 'Search recipes...';
+        this.value = '';
+        this.debounceMs = 350;
+        this.internalValue = '';
+        this.onInput = (e) => {
+            this.internalValue = e.target.value;
+            clearTimeout(this.timer);
+            this.timer = setTimeout(() => {
+                this.search.emit({ value: this.internalValue });
+            }, this.debounceMs);
+        };
+        this.onKeyDown = (e) => {
+            if (e.key === 'Enter') {
+                clearTimeout(this.timer);
+                this.search.emit({ value: this.internalValue });
+            }
+        };
+    }
+    componentWillLoad() {
+        this.internalValue = this.value;
+    }
+    onValuePropChange(newVal) {
+        this.internalValue = newVal;
+    }
+    render() {
+        return (h("div", { key: 'fe5eb2928308fb2496badd784e684b19df52501a', class: "wrap" }, h("input", { key: '3d4abb23a1155075a8889e015819b37a8569f6f5', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), h("button", { key: 'f33f95b5bfcad9146903a2eb4448932a1d68edb7', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValuePropChange": 0
+            }]
+    }; }
+};
+RecipeSearchBar.style = recipeSearchBarCss();
+
+const recipeFilterBarCss = () => `:host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid #ddd;background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;color:#444}.chip.active{background:#ff6b35;border-color:#ff6b35;color:#fff}`;
+
+const RecipeFilterBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.filterChange = createEvent(this, "filterChange");
+        this.categories = [];
+        this.active = '';
+    }
+    select(value) {
+        this.filterChange.emit({ value });
+    }
+    render() {
+        const cats = Array.isArray(this.categories) ? this.categories : [];
+        return (h("div", { key: '13bc63f39ebfc55c0f05c035b63036121f7b3930', class: "wrap" }, h("button", { key: '8aeb99775268204433a8f9831eca9873066c7b9e', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
+    }
+};
+RecipeFilterBar.style = recipeFilterBarCss();
+
+const recipeRatingCss = () => `:host{display:inline-block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:2px}.star{font-size:18px;color:#ddd}.star.filled{color:#f5a623}.star.clickable{cursor:pointer}`;
+
+const RecipeRating = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ratingChange = createEvent(this, "ratingChange");
+        this.value = 0;
+        this.readonly = false;
+        this.max = 5;
+    }
+    render() {
+        const stars = Array.from({ length: this.max }, (_, i) => i + 1);
+        return (h("div", { key: '1e1c67012185e7aaecfcc89671532946262a6957', class: "wrap", role: this.readonly ? undefined : 'radiogroup' }, stars.map((s) => (h("span", { class: { star: true, filled: s <= this.value, clickable: !this.readonly }, onClick: () => !this.readonly && this.ratingChange.emit({ value: s }) }, "\u2605")))));
+    }
+};
+RecipeRating.style = recipeRatingCss();
+
+const recipeFormCss = () => `:host{display:block;font-family:system-ui, sans-serif}form{display:flex;flex-direction:column;gap:14px}label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#333;font-weight:600}input,textarea{font-weight:400;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.ingredient-row{display:flex;gap:6px}.ingredient-row input{flex:1}.ingredient-row button{border:none;background:#f4f4f4;border-radius:6px;cursor:pointer;width:30px}.add-btn{align-self:flex-start;border:1px dashed #bbb;background:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;color:#555}.error{color:#e74c3c;font-size:12px;font-weight:400}.footer{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}.cancel-btn{border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 16px;cursor:pointer}.save-btn{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:8px 18px;cursor:pointer;font-weight:600}`;
+
+const RecipeForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.save = createEvent(this, "save");
+        this.cancel = createEvent(this, "cancel");
+        this.title = '';
+        this.image = '';
+        this.category = '';
+        this.ingredients = [''];
+        this.instructions = '';
+        this.errors = {};
+        this.onSubmit = (e) => {
+            e.preventDefault();
+            if (!this.validate())
+                return;
+            const data = {
+                id: this.initialData?.id,
+                title: this.title.trim(),
+                image: this.image.trim(),
+                category: this.category.trim(),
+                ingredients: this.ingredients.map((i) => i.trim()).filter(Boolean),
+                instructions: this.instructions.trim(),
+            };
+            this.save.emit(data);
+        };
+        this.addIngredient = () => {
+            this.ingredients = [...this.ingredients, ''];
+        };
+        this.removeIngredient = (index) => {
+            this.ingredients = this.ingredients.filter((_, i) => i !== index);
+        };
+    }
+    componentWillLoad() {
+        this.loadInitialData();
+    }
+    onInitialDataChange() {
+        this.loadInitialData();
+    }
+    loadInitialData() {
+        let data;
+        if (typeof this.initialData === 'string' && this.initialData) {
+            try {
+                data = JSON.parse(this.initialData);
+            }
+            catch {
+                data = undefined;
+            }
+        }
+        else if (this.initialData && typeof this.initialData === 'object') {
+            data = this.initialData;
+        }
+        if (data) {
+            this.title = data.title ?? '';
+            this.image = data.image ?? '';
+            this.category = data.category ?? '';
+            this.ingredients = data.ingredients?.length ? [...data.ingredients] : [''];
+            this.instructions = data.instructions ?? '';
+        }
+    }
+    validate() {
+        const errors = {};
+        if (!this.title.trim())
+            errors.title = 'Title is required.';
+        const cleanIngredients = this.ingredients.map((i) => i.trim()).filter(Boolean);
+        if (cleanIngredients.length === 0)
+            errors.ingredients = 'Add at least one ingredient.';
+        if (!this.instructions.trim())
+            errors.instructions = 'Instructions are required.';
+        this.errors = errors;
+        return Object.keys(errors).length === 0;
+    }
+    updateIngredient(index, value) {
+        const next = [...this.ingredients];
+        next[index] = value;
+        this.ingredients = next;
+    }
+    render() {
+        return (h("form", { key: 'bb5c6c7f1b421b55515994f0256c5b39ea781632', onSubmit: this.onSubmit }, h("slot", { key: '16940e4c8368aa6b546254ff8db7b28885a4409b', name: "header" }), h("label", { key: '7e3d6ba3231039ecdcca6a4c4314cf27038e1732' }, "Title", h("input", { key: 'f86056de021f040b8bbf3bf67a0d40ba526ad754', type: "text", value: this.title, onInput: (e) => (this.title = e.target.value) }), this.errors.title && h("span", { key: '54d552a15e037f54b2c6f0fd13cb4b685c25c76c', class: "error" }, this.errors.title)), h("label", { key: '376da4904e7919b5540ee8dabf494f6aab053523' }, "Image URL", h("input", { key: '761b64f0e5153ca0e2bf61a7db4c4106ae2f79ef', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), h("label", { key: '0b7ff19b8718540b08921bb7f301be5cacf0df36' }, "Category", h("input", { key: '4f1bae8316d588e93006a12e0d824579ddbece43', type: "text", value: this.category, onInput: (e) => (this.category = e.target.value) })), h("div", { key: '280d98b91621defa547dbcc35c0cb6da55a67b5f', class: "field" }, h("span", { key: '96a015e055b434441eba85dcb89470823d0ebcc8' }, "Ingredients"), this.ingredients.map((ing, i) => (h("div", { class: "ingredient-row" }, h("input", { type: "text", value: ing, onInput: (e) => this.updateIngredient(i, e.target.value) }), h("button", { type: "button", onClick: () => this.removeIngredient(i), "aria-label": "Remove" }, "\u2715")))), h("button", { key: '697cda22eb5bdf42e50ac40669619fbc04140405', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && h("span", { key: '6a46c393bdd9af8e1e1255792d5532daf433f25b', class: "error" }, this.errors.ingredients)), h("label", { key: '6abdbe72d381c3a0a56c46560a92b1e533fcce2a' }, "Instructions", h("textarea", { key: '1d3b62d6543e42a4cd0755522f657c13e2d1e4a7', rows: 5, onInput: (e) => (this.instructions = e.target.value) }, this.instructions), this.errors.instructions && h("span", { key: 'b5845bb5cd0ddd40de21f074307513d376a05f56', class: "error" }, this.errors.instructions)), h("div", { key: '778adeff176e2d2b080aad59602db6e92a69ea1c', class: "footer" }, h("slot", { key: 'c9584d6606ed33f616eb8f3035aa4a0fd5086af3', name: "footer" }), h("button", { key: 'b2e17dfb528996a1e6a8a1f8aac36b36e3b07c3a', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), h("button", { key: 'a9e91907aa44c8587a2c492f869d0cb5daa942fe', type: "submit", class: "save-btn" }, "Save Recipe"))));
+    }
+    static get watchers() { return {
+        "initialData": [{
+                "onInitialDataChange": 0
+            }]
+    }; }
+};
+RecipeForm.style = recipeFormCss();
+
+const mealPlanDayCss = () => `:host{display:block;font-family:system-ui, sans-serif}.day-col{border:1px solid #eee;border-radius:10px;padding:10px;min-width:150px;display:flex;flex-direction:column;gap:8px;background:#fafafa}h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:0.04em;color:#555}.meals{display:flex;flex-direction:column;gap:6px;min-height:40px}.meal-chip{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #eee;border-radius:8px;padding:4px 6px;font-size:12px}.meal-chip img{width:24px;height:24px;border-radius:4px;object-fit:cover}.meal-chip .title{flex:1}.meal-chip button{border:none;background:none;cursor:pointer;color:#999}.empty{font-size:12px;color:#aaa;margin:4px 0}.add-btn{border:1px dashed #ccc;background:none;border-radius:8px;padding:6px;font-size:12px;cursor:pointer;color:#666}`;
+
+const MealPlanDay = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.assignMeal = createEvent(this, "assignMeal");
+        this.removeMeal = createEvent(this, "removeMeal");
+        this.day = '';
+        this.meals = [];
+    }
+    render() {
+        const meals = Array.isArray(this.meals) ? this.meals : [];
+        return (h("div", { key: '7a0b592fd4b8d9971d7f4912cecb5f9126be11b3', class: "day-col" }, h("h3", { key: 'b0f1f6a717ad409e6339219ea2f71b73d73bb1f3' }, this.day), h("div", { key: '2c978721af3aad27042572dd7825d5f2b5b659fb', class: "meals" }, meals.map((m) => (h("div", { class: "meal-chip" }, m.image && h("img", { src: m.image, alt: m.title }), h("span", { class: "title" }, m.title), h("button", { onClick: () => this.removeMeal.emit({ day: this.day, mealId: m.id }), "aria-label": "Remove meal" }, "\u2715")))), meals.length === 0 && h("p", { key: '326b5f3201df2416f43debc7257918a60a6ab6dd', class: "empty" }, "No meals planned")), h("button", { key: '3532de633a1f6cb83bb70f91a2df8fe1a9fcbc14', class: "add-btn", onClick: () => this.assignMeal.emit({ day: this.day }) }, "+ Add meal")));
+    }
+};
+MealPlanDay.style = mealPlanDayCss();
+
+const appModalCss = () => `:host{font-family:system-ui, sans-serif}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.45);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:12px;min-width:320px;max-width:90vw;max-height:85vh;overflow-y:auto;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.2)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.header h2{margin:0;font-size:18px}.close-btn{border:none;background:none;font-size:16px;cursor:pointer;color:#666}`;
+
+const AppModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close");
+        this.open = false;
+        this.modalTitle = '';
+    }
+    render() {
+        if (!this.open)
+            return null;
+        return (h("div", { class: "dialog", onClick: (e) => e.stopPropagation() }, h("div", { class: "header" }, h("h2", null, this.modalTitle), h("button", { class: "close-btn", onClick: () => this.close.emit(), "aria-label": "Close" }, "\u2715")), h("div", { class: "body" }, h("slot", null))));
+    }
+};
+AppModal.style = appModalCss();
+
+export { AppModal as app_modal, MealPlanDay as meal_plan_day, RecipeCard as recipe_card, RecipeFilterBar as recipe_filter_bar, RecipeForm as recipe_form, RecipeRating as recipe_rating, RecipeSearchBar as recipe_search_bar };

package/dist/{recipe-ui/app-toast-DjuZTKj8.js → esm/app-toast.entry.js}

@@ -1,11 +1,11 @@
-import { r as registerInstance, a as createEvent, h } from './index-DV5P9Jd8.js';
+import { r as registerInstance, c as createEvent, h } from './index-CrZUP9M-.js';
 
 const appToastCss = () => `:host{font-family:system-ui, sans-serif;display:block}.toast{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;color:#fff;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.15)}.toast.success{background:#2ecc71}.toast.error{background:#e74c3c}.toast.info{background:#3498db}button{border:none;background:none;color:inherit;cursor:pointer;margin-left:auto}`;
 
 const AppToast = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dismiss = createEvent(this, "dismiss", 7);
+        this.dismiss = createEvent(this, "dismiss");
         this.message = '';
         this.type = 'info';
         this.duration = 3000;
@@ -21,7 +21,4 @@ const AppToast = class {
 };
 AppToast.style = appToastCss();
 
-export { AppToast as A };
-//# sourceMappingURL=app-toast-DjuZTKj8.js.map
-
-//# sourceMappingURL=app-toast-DjuZTKj8.js.map
+export { AppToast as app_toast };