@gurpinderjitsingh/recipe-ui 0.4.0 → 0.6.0

package/dist/recipe-ui/p-1f2f28cf.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,h as i}from"./p-CrZUP9M-.js";const a=class{constructor(i){e(this,i),this.favoriteToggle=t(this,"favoriteToggle"),this.cardClick=t(this,"cardClick"),this.category="",this.favorite=!1,this.onFavoriteClick=e=>{e.stopPropagation(),this.favoriteToggle.emit({favorite:!this.favorite})}}render(){return i("div",{key:"72e604b38c4156bfe101f0609fac315cd317c981",class:"card",onClick:()=>this.cardClick.emit()},i("div",{key:"bb707d57e573970201644e029eb6257e100e2276",class:"image-wrap"},this.image?i("img",{src:this.image,alt:this.recipeTitle}):i("div",{class:"placeholder"}),i("button",{key:"bb052a897f227e8b8ca938704a083d8502036037",class:{"fav-btn":!0,active:this.favorite},onClick:this.onFavoriteClick,"aria-label":"Toggle favorite"},this.favorite?"★":"☆")),i("div",{key:"e4c139b9bdbdac25e92def0705d8506d89a0ce65",class:"body"},i("h3",{key:"aea91bd0827cdbe2608d91b428489a11eb7de0fa"},this.recipeTitle),this.category&&i("span",{key:"96219817064ee274999487452db6c70dee93d82f",class:"category"},this.category),i("div",{key:"c2593b0d879744a24c4be179af1d9359e3e904fa",class:"actions"},i("slot",{key:"19e921048e6d469a33531c2bb949067a7925c7ac",name:"actions"}))))}};a.style=":host{display:block;font-family:system-ui, sans-serif}.card{border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:box-shadow 0.15s ease, transform 0.15s ease}.card:hover{box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);transform:translateY(-2px)}.image-wrap{position:relative;aspect-ratio:4 / 3;background:#f2f2f2}.image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{width:100%;height:100%;background:linear-gradient(135deg, #eee, #ddd)}.fav-btn{position:absolute;top:8px;right:8px;border:none;background:rgba(255, 255, 255, 0.9);border-radius:50%;width:32px;height:32px;font-size:16px;cursor:pointer;color:#f5a623}.fav-btn.active{color:#ff6b35}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:0.03em}.actions{margin-top:8px}";const s=class{constructor(i){e(this,i),this.search=t(this,"search"),this.placeholder="Search recipes...",this.value="",this.debounceMs=350,this.internalValue="",this.onInput=e=>{this.internalValue=e.target.value,clearTimeout(this.timer),this.timer=setTimeout((()=>{this.search.emit({value:this.internalValue})}),this.debounceMs)},this.onKeyDown=e=>{"Enter"===e.key&&(clearTimeout(this.timer),this.search.emit({value:this.internalValue}))}}componentWillLoad(){this.internalValue=this.value}onValuePropChange(e){this.internalValue=e}render(){return i("div",{key:"7fa4a3ce06ef9b7e68b968a0bf29cce896cc7db0",class:"wrap"},i("input",{key:"ae2e528fafd1f342de8a88c14f0651857bc0486d",type:"search",placeholder:this.placeholder,value:this.internalValue,onInput:this.onInput,onKeyDown:this.onKeyDown}),i("button",{key:"c9a369dca794014f17cd64cfaa4b7b9f0e06d171",onClick:()=>this.search.emit({value:this.internalValue}),"aria-label":"Search"},"🔍"))}static get watchers(){return{value:[{onValuePropChange:0}]}}};s.style=":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:6px}input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid #ddd;font-size:14px;outline:none}input:focus{border-color:#ff6b35}button{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:0 16px;cursor:pointer;font-size:15px}";const o=class{constructor(i){e(this,i),this.filterChange=t(this,"filterChange"),this.categories=[],this.active=""}select(e){this.filterChange.emit({value:e})}render(){const e=Array.isArray(this.categories)?this.categories:[];return i("div",{key:"336e3431325ab3338cda5be917414c6be4be1cf9",class:"wrap"},i("button",{key:"f1a5c228cf9ef1dd2017b26be55afdd07e27c837",class:{chip:!0,active:""===this.active},onClick:()=>this.select("")},"All"),e.map((e=>i("button",{class:{chip:!0,active:this.active===e},onClick:()=>this.select(e)},e))))}};o.style=":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid #ddd;background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;color:#444}.chip.active{background:#ff6b35;border-color:#ff6b35;color:#fff}";const r=class{constructor(i){e(this,i),this.ratingChange=t(this,"ratingChange"),this.value=0,this.readonly=!1,this.max=5}render(){const e=Array.from({length:this.max},((e,t)=>t+1));return i("div",{key:"9e67a7c471e6b20bbc2bc0164a5346c8cd5f10dc",class:"wrap",role:this.readonly?void 0:"radiogroup"},e.map((e=>i("span",{class:{star:!0,filled:e<=this.value,clickable:!this.readonly},onClick:()=>!this.readonly&&this.ratingChange.emit({value:e})},"★"))))}};r.style=":host{display:inline-block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:2px}.star{font-size:18px;color:#ddd}.star.filled{color:#f5a623}.star.clickable{cursor:pointer}";const n=["American","British","Chinese","Croatian","Dutch","Egyptian","Filipino","French","Greek","Indian","Irish","Italian","Jamaican","Japanese","Kenyan","Malaysian","Mexican","Moroccan","Polish","Portuguese","Russian","Spanish","Thai","Tunisian","Turkish","Vietnamese","Other"],c=class{constructor(i){e(this,i),this.save=t(this,"save"),this.cancel=t(this,"cancel"),this.areas=n,this.extraAreas=[],this.title="",this.image="",this.category="",this.area="",this.customArea="",this.ingredients=[""],this.instructions="",this.errors={},this.onSubmit=e=>{if(e.preventDefault(),!this.validate())return;const t="Other"===this.area?this.customArea.trim():this.area,i={id:this.initialData?.id,title:this.title.trim(),image:this.image.trim(),category:this.category.trim(),area:t,ingredients:this.ingredients.map((e=>e.trim())).filter(Boolean),instructions:this.instructions.trim()};this.save.emit(i)},this.addIngredient=()=>{this.ingredients=[...this.ingredients,""]},this.removeIngredient=e=>{this.ingredients=this.ingredients.filter(((t,i)=>i!==e))}}componentWillLoad(){this.loadInitialData()}onInitialDataChange(){this.loadInitialData()}get fullAreaList(){const e=[...this.areas.filter((e=>"Other"!==e))];for(const t of this.extraAreas)t&&!e.includes(t)&&e.push(t);return e.push("Other"),e}loadInitialData(){let e;if("string"==typeof this.initialData&&this.initialData)try{e=JSON.parse(this.initialData)}catch{e=void 0}else this.initialData&&"object"==typeof this.initialData&&(e=this.initialData);if(e){this.title=e.title??"",this.image=e.image??"",this.category=e.category??"",this.ingredients=e.ingredients?.length?[...e.ingredients]:[""],this.instructions=e.instructions??"";const t=this.fullAreaList.filter((e=>"Other"!==e));e.area&&!t.includes(e.area)?(this.area="Other",this.customArea=e.area):(this.area=e.area??"",this.customArea="")}}validate(){const e={};return this.title.trim()||(e.title="Title is required."),0===this.ingredients.map((e=>e.trim())).filter(Boolean).length&&(e.ingredients="Add at least one ingredient."),this.instructions.trim()||(e.instructions="Instructions are required."),"Other"!==this.area||this.customArea.trim()||(e.customArea="Enter a cuisine name."),this.errors=e,0===Object.keys(e).length}updateIngredient(e,t){const i=[...this.ingredients];i[e]=t,this.ingredients=i}render(){return i("form",{key:"b9e50e96b20b8f3bb28ecb516b102c87088daddd",onSubmit:this.onSubmit},i("slot",{key:"648424eb3444acdacb69e541799571ffa6572004",name:"header"}),i("label",{key:"77ec1e8acd2ba845262909f672fadf06907702f2"},"Title",i("input",{key:"2f5dd98ab985831eb07ac43afed983908f2646d1",type:"text",value:this.title,onInput:e=>this.title=e.target.value}),this.errors.title&&i("span",{key:"244560b4dc4cb47cbb514d0f8fe41be267299885",class:"error"},this.errors.title)),i("label",{key:"8bb49420325a7629186a5801162b9a2e4321e4f7"},"Image URL",i("input",{key:"fe121c2389308b5bc0e6f7b977f15fec91f9baae",type:"text",value:this.image,onInput:e=>this.image=e.target.value})),i("div",{key:"2ede3939f5230f805841945a29fc37fc4d2f3627",class:"row"},i("label",{key:"b736ee46a12a1070cb52c76fc41d31e0f8d1169b"},"Category",i("input",{key:"6952f8378b13313c1c63d2cb1b1cd9c2593d1806",type:"text",value:this.category,onInput:e=>this.category=e.target.value})),i("label",{key:"a6e477f0bfdfbab6a75831a62334b665272a98db"},"Cuisine / Area",i("select",{key:"1434d68a1782d19f92cd2d5ef638f440a8adc7dd",onInput:e=>this.area=e.target.value},i("option",{key:"a40b1cacf4deb98590689325f23e572522069268",value:"",selected:""===this.area},"Select a cuisine…"),this.fullAreaList.map((e=>i("option",{value:e,selected:e===this.area},e)))))),"Other"===this.area&&i("label",{key:"77ab0849f544aacc7c2a207dc222c916dfb7a41b",class:"custom-area-field"},"Enter cuisine name",i("input",{key:"fd7c97a89c0e2b8f23cc28fbc502563eb759fdb4",type:"text",placeholder:"e.g. Ethiopian",value:this.customArea,onInput:e=>this.customArea=e.target.value}),this.errors.customArea&&i("span",{key:"2b2425b63b0d5ee311fe16040d012a43919c8ca6",class:"error"},this.errors.customArea)),i("div",{key:"fafa1824f121c9c2c96069772d2011a13ce0683f",class:"field"},i("span",{key:"bea9e5877093e412b1fffb12f0aad4c79604cc16"},"Ingredients"),this.ingredients.map(((e,t)=>i("div",{class:"ingredient-row"},i("input",{type:"text",value:e,onInput:e=>this.updateIngredient(t,e.target.value)}),i("button",{type:"button",onClick:()=>this.removeIngredient(t),"aria-label":"Remove"},"✕")))),i("button",{key:"fc7a817c01706f4f99594ff09a72fa8b046f4820",type:"button",class:"add-btn",onClick:this.addIngredient},"+ Add ingredient"),this.errors.ingredients&&i("span",{key:"d4b4bee30e1369f951f0aabe7f54b0b1ae393a83",class:"error"},this.errors.ingredients)),i("label",{key:"5028ae3ead65e280a2196f93d5f31580a5f8c95a"},"Instructions",i("textarea",{key:"08461bc98ab47d1f2240dfa23e1ec1264de12002",rows:5,onInput:e=>this.instructions=e.target.value},this.instructions),this.errors.instructions&&i("span",{key:"932de400651f180d7e5b14e4ff118ccdcd24d2b3",class:"error"},this.errors.instructions)),i("div",{key:"7da02b77a1390447a738882d0104292b28f675b0",class:"footer"},i("slot",{key:"74ed118f385e1e6e1318dd405aa0008e195ef9c0",name:"footer"}),i("button",{key:"e2548efd3826d3a984c11cd6d7bd486e226c8ca9",type:"button",class:"cancel-btn",onClick:()=>this.cancel.emit()},"Cancel"),i("button",{key:"8011e51d4579a0e6ddd88cd8c83708524551d801",type:"submit",class:"save-btn"},"Save Recipe")))}static get watchers(){return{initialData:[{onInitialDataChange:0}]}}};c.style=":host{display:block;font-family:system-ui, sans-serif}form{display:flex;flex-direction:column;gap:14px}label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#333;font-weight:600}input,textarea,select{font-weight:400;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit;background:#fff;transition:border-color 0.15s ease, box-shadow 0.15s ease}input:focus,textarea:focus,select:focus{outline:none;border-color:#ff6b35;box-shadow:0 0 0 3px rgba(255, 107, 53, 0.14)}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:34px;cursor:pointer;color:#1f2937;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:14px}select:hover{border-color:#bbb}select:invalid,select option[value=\"\"]{color:#9ca3af}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width: 480px){.row{grid-template-columns:1fr}}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.ingredient-row{display:flex;gap:6px}.ingredient-row input{flex:1}.ingredient-row button{border:none;background:#f4f4f4;border-radius:6px;cursor:pointer;width:30px}.add-btn{align-self:flex-start;border:1px dashed #bbb;background:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;color:#555}.error{color:#e74c3c;font-size:12px;font-weight:400}.footer{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}.cancel-btn{border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 16px;cursor:pointer}.save-btn{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:8px 18px;cursor:pointer;font-weight:600}";const d=class{constructor(i){e(this,i),this.assignMeal=t(this,"assignMeal"),this.removeMeal=t(this,"removeMeal"),this.day="",this.meals=[],this.icon=""}render(){const e=Array.isArray(this.meals)?this.meals:[];return i("div",{key:"cd4f194f1eeb5f53a029f380c40aa0b4ec2f32f4",class:"day-col"},i("div",{key:"d88966142d5101fc522d5de89b6d4cab72cbbbf3",class:"col-header"},this.icon&&i("span",{key:"5a9a27a3a1909bcf7295ec7eeccf309e5e2d1ae0",class:"icon"},this.icon),i("h3",{key:"fd1fa2f1274cc1f6bd8917959015722cb69002ba"},this.day),e.length>0&&i("span",{key:"feff3bc91b52203dba19f7a87c56d3813fc95cdd",class:"count-badge"},e.length)),i("div",{key:"4afee9ce77bf1447bf9e32efc7e2f9b9571873e7",class:"meals"},e.map((e=>i("div",{class:"meal-chip"},i("div",{class:"thumb"},e.image&&i("img",{src:e.image,alt:e.title})),i("span",{class:"title"},e.title),i("button",{class:"remove-btn",onClick:()=>this.removeMeal.emit({day:this.day,mealId:e.id}),"aria-label":`Remove ${e.title}`},"✕")))),0===e.length&&i("p",{key:"9a4002b1b4516fc5ff6ef8f9a2e0a7f5e8465cbd",class:"empty"},"No meal planned")),i("button",{key:"2cef3c5f7d0e89303cb8989f78eefb95c426683f",class:"add-btn",onClick:()=>this.assignMeal.emit({day:this.day})},i("span",{key:"ae54b56f8f0b01f45029e36919764ae31f3a38b9",class:"plus"},"+")," Add meal"))}};d.style=":host{display:block;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif}.day-col{background:#ffffff;border:1px solid #e8eaed;border-radius:12px;padding:14px;min-width:160px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(16, 24, 40, 0.04);transition:box-shadow 0.15s ease, border-color 0.15s ease}.day-col:hover{box-shadow:0 4px 12px rgba(16, 24, 40, 0.08);border-color:#d8dce1}.col-header{display:flex;align-items:center;gap:6px;padding-bottom:8px;border-bottom:1px solid #f0f1f3}.col-header .icon{font-size:15px;line-height:1}.col-header h3{margin:0;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#4b5563;flex:1}.count-badge{background:#eef2ff;color:#4338ca;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;line-height:1.5}.meals{display:flex;flex-direction:column;gap:6px;min-height:44px}.meal-chip{display:flex;align-items:center;gap:8px;background:#f9fafb;border:1px solid #eef0f2;border-radius:9px;padding:6px 8px;font-size:12.5px;transition:background 0.12s ease}.meal-chip:hover{background:#f3f4f6}.thumb{width:28px;height:28px;border-radius:6px;overflow:hidden;flex-shrink:0;background:#e5e7eb}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.meal-chip .title{flex:1;color:#1f2937;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remove-btn{border:none;background:none;cursor:pointer;color:#9ca3af;font-size:11px;line-height:1;padding:3px;border-radius:5px;transition:color 0.12s ease, background 0.12s ease}.remove-btn:hover{color:#dc2626;background:#fef2f2}.empty{font-size:12px;color:#9ca3af;margin:6px 0;text-align:center;font-style:italic}.add-btn{display:flex;align-items:center;justify-content:center;gap:4px;border:1.5px dashed #d1d5db;background:none;border-radius:9px;padding:7px;font-size:12px;font-weight:600;cursor:pointer;color:#6b7280;transition:border-color 0.12s ease, color 0.12s ease, background 0.12s ease}.add-btn:hover{border-color:#6366f1;color:#4f46e5;background:#f5f5ff}.plus{font-size:14px;line-height:1}";const l=class{constructor(i){e(this,i),this.close=t(this,"close"),this.open=!1,this.modalTitle=""}render(){return this.open?i("div",{class:"overlay",onClick:()=>this.close.emit()},i("div",{class:"dialog",onClick:e=>e.stopPropagation()},i("div",{class:"header"},i("h2",null,this.modalTitle),i("button",{class:"close-btn",onClick:()=>this.close.emit(),"aria-label":"Close"},"✕")),i("div",{class:"body"},i("slot",null)))):null}};l.style=":host{font-family:system-ui, sans-serif}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.45);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:12px;min-width:320px;max-width:90vw;max-height:85vh;overflow-y:auto;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.2)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.header h2{margin:0;font-size:18px}.close-btn{border:none;background:none;font-size:16px;cursor:pointer;color:#666}";export{l as app_modal,d as meal_plan_day,a as recipe_card,o as recipe_filter_bar,c as recipe_form,r as recipe_rating,s as recipe_search_bar}