@seepmaini/stencil-recipe-components 0.0.1

package/dist/collection/components/recipe-button/recipe-button.js

@@ -0,0 +1,89 @@
+import { h } from "@stencil/core";
+export class RecipeButton {
+    variant = 'primary';
+    type = 'button';
+    disabled = false;
+    render() {
+        return (h("button", { key: '69decd9fcbcb01bce1f5c78fdb79ccea94f4369d', type: this.type, class: {
+                button: true,
+                primary: this.variant === 'primary',
+                secondary: this.variant === 'secondary',
+            }, disabled: this.disabled }, h("slot", { key: '9561dcb8e2f50f8f85ccaacb0ff885b67a5eab1d' })));
+    }
+    static get is() { return "recipe-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["recipe-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["recipe-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit'",
+                    "resolved": "\"button\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/recipe-card/recipe-card.css

@@ -0,0 +1,207 @@
+:host {
+  display: block;
+  font-family: Arial, sans-serif;
+}
+.recipe-card {
+  position: relative;
+  overflow: hidden;
+  background: #ffffff;
+  border: 1px solid #eeeeee;
+  border-radius: 18px;
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.05);
+}
+.image-container {
+  position: relative;
+  height: 220px;
+  overflow: hidden;
+}
+.image-container img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+.category {
+  position: absolute;
+  top: 14px;
+  left: 14px;
+  padding: 6px 10px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.94);
+  color: #444444;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.favorite {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 38px;
+  height: 38px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.95);
+  color: #777777;
+  font-size: 24px;
+  cursor: pointer;
+}
+.favorite.active {
+  color: #e05252;
+}
+.content {
+  padding: 18px;
+}
+.cuisine {
+  margin-bottom: 8px;
+  color: #f97316;
+  font-size: 12px;
+  font-weight: 600;
+}
+.content h3 {
+  margin: 0 0 16px;
+  color: #2c2c2c;
+  font-size: 20px;
+  line-height: 1.3;
+}
+.actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-top: 4px;
+}
+.view-button,
+.planner-button {
+  width: 100%;
+  min-height: 42px;
+  border-radius: 9px;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.view-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: none;
+  background: #f97316;
+  color: white;
+}
+.view-button:hover {
+  background: #ea580c;
+}
+.planner-button {
+  border: 1px solid #fed7aa;
+  background: #fff7ed;
+  color: #ea580c;
+}
+.planner-button:hover {
+  background: #ffedd5;
+}
+.planner-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.45);
+}
+.planner-modal {
+  width: min(420px, 100%);
+  padding: 24px;
+  border-radius: 18px;
+  background: white;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+}
+.planner-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 15px;
+  margin-bottom: 22px;
+}
+.planner-header h4 {
+  margin: 0 0 6px;
+  font-size: 20px;
+  color: #2c2c2c;
+}
+.planner-header p {
+  margin: 0;
+  color: #777777;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.close-button {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: #f5f5f5;
+  font-size: 22px;
+  color: #555555;
+  cursor: pointer;
+}
+.close-button:hover {
+  background: #eeeeee;
+}
+.planner-modal label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #444444;
+}
+.planner-modal select {
+  width: 100%;
+  height: 44px;
+  padding: 0 12px;
+  border: 1px solid #dddddd;
+  border-radius: 10px;
+  background: white;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+}
+.planner-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+}
+.cancel-button,
+.add-button {
+  flex: 1;
+  height: 42px;
+  border-radius: 9px;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.cancel-button {
+  border: 1px solid #dddddd;
+  background: white;
+  color: #555555;
+}
+.cancel-button:hover {
+  background: #f5f5f5;
+}
+.add-button {
+  border: none;
+  background: #f97316;
+  color: white;
+}
+.add-button:hover:not(:disabled) {
+  background: #ea580c;
+}
+.add-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.field {
+  padding-top: 10px;
+}

package/dist/collection/components/recipe-card/recipe-card.js

@@ -0,0 +1,260 @@
+import { h } from "@stencil/core";
+export class RecipeCard {
+    recipeId = '';
+    recipeTitle = '';
+    image = '';
+    category = '';
+    cuisine = '';
+    favorite = false;
+    favoriteToggle;
+    recipeClick;
+    addToPlanner;
+    showPlanner = false;
+    selectedDay = '';
+    selectedMeal = '';
+    handleViewRecipe = () => {
+        this.recipeClick.emit({
+            id: this.recipeId,
+        });
+    };
+    toggleFavorite = (event) => {
+        event.stopPropagation();
+        this.favoriteToggle.emit({
+            id: this.recipeId,
+        });
+    };
+    openPlanner = (event) => {
+        event.stopPropagation();
+        this.selectedDay = '';
+        this.selectedMeal = '';
+        this.showPlanner = true;
+    };
+    closePlanner = () => {
+        this.showPlanner = false;
+        this.selectedDay = '';
+        this.selectedMeal = '';
+    };
+    handleDayChange = (event) => {
+        const select = event.target;
+        this.selectedDay = select.value;
+    };
+    handleMealChange = (event) => {
+        const select = event.target;
+        this.selectedMeal = select.value;
+    };
+    confirmPlanner = () => {
+        if (!this.selectedDay || !this.selectedMeal) {
+            return;
+        }
+        this.addToPlanner.emit({
+            id: this.recipeId,
+            day: this.selectedDay,
+            mealType: this.selectedMeal,
+        });
+        this.closePlanner();
+    };
+    render() {
+        const favoriteLabel = this.favorite ? `Remove ${this.recipeTitle} from favorites` : `Add ${this.recipeTitle} to favorites`;
+        const canAdd = this.selectedDay !== '' && this.selectedMeal !== '';
+        return (h("article", { key: 'e9cac86199c4999118277c301095f0d5fdc0465e', class: "recipe-card" }, h("div", { key: '41cc1e4446a23d097181d023e28ef26ec8e1c709', class: "image-container" }, h("img", { key: '5f9d485af235d895d5ba410826fe00ead8795420', src: this.image, alt: this.recipeTitle, loading: "lazy", decoding: "async" }), this.category && h("span", { key: '8f50506474a6ec6d9cb973bec927640fe1bbc14e', class: "category" }, this.category), h("button", { key: 'cc2b1c5291f30e8fc8cb14591a884cebd3343018', type: "button", class: {
+                favorite: true,
+                active: this.favorite,
+            }, onClick: this.toggleFavorite, "aria-label": favoriteLabel, "aria-pressed": this.favorite }, this.favorite ? '♥' : '♡')), h("div", { key: '8cb4a3397069c51ee95baff05662bf9f3aee9c1d', class: "content" }, this.cuisine && (h("div", { key: 'de5ad5288350fe2f251ffa62cda82fa35bf53f3e', class: "cuisine" }, h("span", { key: '87aa4b6d69bd35acf850b5650b8f5a2db28adef0' }, "\u2726"), this.cuisine)), h("h3", { key: '332a9140cc9627d02ab1e5621fb0b2f0c0d8f754' }, this.recipeTitle), h("div", { key: '7c2962abe8ebb3cb22e91b61acf1362dc6216f81', class: "actions" }, h("button", { key: 'fc9b769b0198145d8a49dfaf837acbe24eee3f2e', type: "button", class: "view-button", onClick: this.handleViewRecipe }, "View Recipe", h("span", { key: '50f0f5e55f9caab5d70f16aaf3585c80c1e5ac7c' }, "\u2192")), h("button", { key: '6936bec5da6c7509f51abf2646312cc0315dbe99', type: "button", class: "planner-button", onClick: this.openPlanner }, "\uFF0B Add to Planner"))), this.showPlanner && (h("div", { key: 'a15cc6195d9331cadbec3eae206a9c82737be735', class: "planner-overlay", onClick: this.closePlanner }, h("div", { key: 'a5b74b52a845f1488e3eeb2356fc6044f1c15912', class: "planner-modal", onClick: event => event.stopPropagation() }, h("div", { key: '572800bf57b24b41cadfacb49da5dccef6a9f132', class: "planner-header" }, h("div", { key: 'cd7f730b46ef2fad37a22e05bc5bc3e1fdc6d0c6' }, h("h4", { key: 'c30504584428ffac7a3dfe0a1d5c2c7c895d1665' }, "Add to Meal Planner"), h("p", { key: 'dbee3ab4e4dc0b0b3c553684e447a931813b7c66' }, "Add ", h("strong", { key: '501eee64ac955ccaa7116a7f20f35473ecc2912d' }, this.recipeTitle))), h("button", { key: '55ca144a870c33892b1d61051c8b60dab1528bb8', type: "button", class: "close-button", onClick: this.closePlanner }, "\u00D7")), h("div", { key: 'b8e4b435c27e0a5536335897b59386bd9b4b1b1b', class: "field" }, h("label", { key: 'b26aec673a147830320a92389d6f2da7a4a901e4', htmlFor: "planner-day" }, "Day"), h("select", { key: '0b95a3b9b32278534a0157f469281a67e0c0ad9b', id: "planner-day", onChange: this.handleDayChange }, h("option", { key: 'c2e6e6d89ece44b371ae377b395aa8719935f326', value: "" }, "Select a day"), h("option", { key: '98c27f6fb8e49de25ecabda4f52436d8c3fac93b', value: "Monday" }, "Monday"), h("option", { key: '7e782ca431ad476040a87f4664341e679a435fd0', value: "Tuesday" }, "Tuesday"), h("option", { key: '12f03a59c1a6a4c9d087e612259b585ad1609128', value: "Wednesday" }, "Wednesday"), h("option", { key: '718c4397a7c13ad5e38603c97f3fe43f5da17fce', value: "Thursday" }, "Thursday"), h("option", { key: 'bde3aaa5cce683c0be7a07c2ad4514bf1ed259a4', value: "Friday" }, "Friday"), h("option", { key: '28adf4b21ed230171a653a173b6f1564fdadbd86', value: "Saturday" }, "Saturday"), h("option", { key: 'ba10816944f43c0f693d7e8e926d7cf9514b8f1a', value: "Sunday" }, "Sunday"))), h("div", { key: '2f2bbf50b1e3e515424770fe183f40321ed4a0ec', class: "field" }, h("label", { key: '3dbb417dd46359dbc524ab187a26b5af3001b809', htmlFor: "planner-meal" }, "Meal"), h("select", { key: 'ce276fce3064936bf7695897803fce10e83e345c', id: "planner-meal", onChange: this.handleMealChange }, h("option", { key: '6c05f317d30a94be195c432d926034e0b7d1bcb5', value: "" }, "Select a meal"), h("option", { key: '1392d0ae0d8922547329790707812474e63fcc3b', value: "Breakfast" }, "Breakfast"), h("option", { key: '2cc7682e5108e782220dbda63e403d90c04dbd5e', value: "Lunch" }, "Lunch"), h("option", { key: '255117f914a6112ccf9169f52ae35bc99df1c549', value: "Dinner" }, "Dinner"))), h("div", { key: 'efd8158033d291082b9cb131deee84b09a649411', class: "planner-actions" }, h("button", { key: '816d91efb664e45ea8bb49285049995536848ba5', type: "button", class: "cancel-button", onClick: this.closePlanner }, "Cancel"), h("button", { key: 'd4b72a6d50bfdf116210f34a67c8f15bc9d38a69', type: "button", class: "add-button", disabled: !canAdd, onClick: this.confirmPlanner }, "Add to Planner")))))));
+    }
+    static get is() { return "recipe-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["recipe-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["recipe-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "recipeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recipe-id",
+                "defaultValue": "''"
+            },
+            "recipeTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recipe-title",
+                "defaultValue": "''"
+            },
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image",
+                "defaultValue": "''"
+            },
+            "category": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "category",
+                "defaultValue": "''"
+            },
+            "cuisine": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cuisine",
+                "defaultValue": "''"
+            },
+            "favorite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "favorite",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showPlanner": {},
+            "selectedDay": {},
+            "selectedMeal": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "favoriteToggle",
+                "name": "favoriteToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ id: string }",
+                    "resolved": "{ id: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "recipeClick",
+                "name": "recipeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ id: string }",
+                    "resolved": "{ id: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "addToPlanner",
+                "name": "add-to-planner",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PlannerEvent",
+                    "resolved": "{ id: string; day: \"Monday\" | \"Tuesday\" | \"Wednesday\" | \"Thursday\" | \"Friday\" | \"Saturday\" | \"Sunday\"; mealType: MealType; }",
+                    "references": {
+                        "PlannerEvent": {
+                            "location": "global",
+                            "id": "global::PlannerEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/recipe-form-section/recipe-form-section.css

@@ -0,0 +1,54 @@
+:host {
+  display: block;
+}
+
+.section {
+  padding: 30px;
+  border: 1px solid #e9e5e1;
+  border-radius: 22px;
+  background: white;
+}
+
+.section-heading {
+  display: flex;
+  gap: 14px;
+  margin-bottom: 25px;
+}
+
+.section-heading > span {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #f3e9e1;
+  color: #f97316;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.section-heading h2 {
+  margin: 0;
+  color: #2c2c2c;
+  font-family: Arial, sans-serif;
+  font-size: 24px;
+  font-weight: 500;
+}
+
+.section-heading p {
+  margin: 4px 0 0;
+  color: #999999;
+  font-size: 16px;
+}
+
+.content {
+  display: block;
+}
+
+@media (max-width: 600px) {
+  .section {
+    padding: 20px;
+  }
+}

package/dist/collection/components/recipe-form-section/recipe-form-section.js

@@ -0,0 +1,82 @@
+import { h } from "@stencil/core";
+export class RecipeFormSection {
+    number;
+    formTitle;
+    description;
+    render() {
+        return (h("section", { key: '39aba625964827041a26eaf4e59e95fce101af07', class: "section" }, h("div", { key: '7f7ed2a37b09b8efa5bbcbe0087e7b575776e61b', class: "section-heading" }, h("span", { key: 'ae898bcf907768d9abe73e0ff18c39614b6ae23b' }, this.number), h("div", { key: '16c1e35edf0e0bba569ab260a640981419a83d44' }, h("h2", { key: '61def6637277c674aa708041c148925595493ad7' }, this.formTitle), h("p", { key: '62ab7295b08d2ade90ba9dbcb61e2cfe26929c84' }, this.description))), h("div", { key: 'e56052a380d5c72190b776ea8c7e80f1099a8442', class: "content" }, h("slot", { key: '7735bc4718c0d4c7c0805abd1d176fdf3270faa3' }))));
+    }
+    static get is() { return "recipe-form-section"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["recipe-form-section.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["recipe-form-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "number": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "number"
+            },
+            "formTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form-title"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            }
+        };
+    }
+}