@manidecp/nagp-stencil-ui-kit 1.0.0

package/dist/collection/components/meal-slot-card/meal-slot-card.js

@@ -0,0 +1,127 @@
+import { h } from "@stencil/core";
+export class MealSlotCard {
+    day = 'Monday';
+    mealType = 'Dinner';
+    recipeName = 'No meal selected';
+    removeMeal;
+    addMeal;
+    handleAddMeal = () => {
+        this.addMeal.emit({ day: this.day, mealType: this.mealType });
+    };
+    handleRemoveMeal = () => {
+        this.removeMeal.emit({ day: this.day, mealType: this.mealType });
+    };
+    render() {
+        return (h("article", { key: 'fa9eb478dc830300b8cb795e315e630222c99ae9', class: "meal-slot-card" }, h("header", { key: 'da28c71efc7e22dea6b3c0e31a0a002cd49407e1', class: "card-header" }, h("span", { key: '690e9ae3282df47b991fcf9903b0fc549b76a455', class: "day-label" }, this.day), h("span", { key: '50bc7ed1f5aae519fa9233cdccc02fae13c4fabb', class: "meal-pill" }, this.mealType)), h("div", { key: '157360002668cea4b02436cf7afedb6232007f77', class: "content" }, h("h3", { key: '5c9121084ad9f1b152b51e2db034576cf38f5b03' }, this.recipeName), h("slot", { key: 'b60f501af76e15758c53f29bd66dbab7f196c859' })), h("div", { key: '2572b419e6e0d2f74027e0bf6ef2b1a83245b9ae', class: "actions" }, h("button", { key: '610ea49c7bc1f9b43ef2cff9855a237168c95408', type: "button", class: "primary", onClick: this.handleAddMeal }, "Add meal"), h("button", { key: '0511efe9d57aee3243e06ad43294cd1c4cc2b31b', type: "button", class: "secondary", onClick: this.handleRemoveMeal }, "Remove"))));
+    }
+    static get is() { return "meal-slot-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["meal-slot-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["meal-slot-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "day": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "day",
+                "defaultValue": "'Monday'"
+            },
+            "mealType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'Breakfast' | 'Lunch' | 'Dinner'",
+                    "resolved": "\"Breakfast\" | \"Dinner\" | \"Lunch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "meal-type",
+                "defaultValue": "'Dinner'"
+            },
+            "recipeName": {
+                "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-name",
+                "defaultValue": "'No meal selected'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "removeMeal",
+                "name": "removeMeal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ day: string; mealType: 'Breakfast' | 'Lunch' | 'Dinner' }",
+                    "resolved": "{ day: string; mealType: \"Breakfast\" | \"Lunch\" | \"Dinner\"; }",
+                    "references": {}
+                }
+            }, {
+                "method": "addMeal",
+                "name": "addMeal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ day: string; mealType: 'Breakfast' | 'Lunch' | 'Dinner' }",
+                    "resolved": "{ day: string; mealType: \"Breakfast\" | \"Lunch\" | \"Dinner\"; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=meal-slot-card.js.map

package/dist/collection/components/meal-slot-card/meal-slot-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meal-slot-card.js","sourceRoot":"","sources":["../../../src/components/meal-slot-card/meal-slot-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,YAAY;IACf,GAAG,GAAW,QAAQ,CAAC;IACvB,QAAQ,GAAqC,QAAQ,CAAC;IACtD,UAAU,GAAW,kBAAkB,CAAC;IAEvC,UAAU,CAA4E;IACtF,OAAO,CAA4E;IAEpF,aAAa,GAAG,GAAG,EAAE;QAC3B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAChE,CAAC,CAAC;IAEM,gBAAgB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACnE,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,gEAAS,KAAK,EAAC,gBAAgB;YAC7B,+DAAQ,KAAK,EAAC,aAAa;gBACzB,6DAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,GAAG,CAAQ;gBACzC,6DAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAQ,CACvC;YAET,4DAAK,KAAK,EAAC,SAAS;gBAClB,6DAAK,IAAI,CAAC,UAAU,CAAM;gBAC1B,8DAAQ,CACJ;YAEN,4DAAK,KAAK,EAAC,SAAS;gBAClB,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,eAExD;gBACT,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,aAE7D,CACL,CACE,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'meal-slot-card',\r\n  styleUrl: 'meal-slot-card.css',\r\n  shadow: true,\r\n})\r\nexport class MealSlotCard {\r\n  @Prop() day: string = 'Monday';\r\n  @Prop() mealType: 'Breakfast' | 'Lunch' | 'Dinner' = 'Dinner';\r\n  @Prop() recipeName: string = 'No meal selected';\r\n\r\n  @Event() removeMeal: EventEmitter<{ day: string; mealType: 'Breakfast' | 'Lunch' | 'Dinner' }>;\r\n  @Event() addMeal: EventEmitter<{ day: string; mealType: 'Breakfast' | 'Lunch' | 'Dinner' }>;\r\n\r\n  private handleAddMeal = () => {\r\n    this.addMeal.emit({ day: this.day, mealType: this.mealType });\r\n  };\r\n\r\n  private handleRemoveMeal = () => {\r\n    this.removeMeal.emit({ day: this.day, mealType: this.mealType });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <article class=\"meal-slot-card\">\r\n        <header class=\"card-header\">\r\n          <span class=\"day-label\">{this.day}</span>\r\n          <span class=\"meal-pill\">{this.mealType}</span>\r\n        </header>\r\n\r\n        <div class=\"content\">\r\n          <h3>{this.recipeName}</h3>\r\n          <slot />\r\n        </div>\r\n\r\n        <div class=\"actions\">\r\n          <button type=\"button\" class=\"primary\" onClick={this.handleAddMeal}>\r\n            Add meal\r\n          </button>\r\n          <button type=\"button\" class=\"secondary\" onClick={this.handleRemoveMeal}>\r\n            Remove\r\n          </button>\r\n        </div>\r\n      </article>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,33 @@
+:host {
+  --badge-primary-bg: #f97316;
+  --badge-secondary-bg: #e5e7eb;
+  --badge-accent-bg: #7c3aed;
+  --badge-text: #ffffff;
+  display: inline-block;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 0.45rem 0.8rem;
+  font-size: 0.7rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--badge-text);
+}
+
+.variant-primary {
+  background: var(--badge-primary-bg);
+}
+
+.variant-secondary {
+  background: var(--badge-secondary-bg);
+  color: #111827;
+}
+
+.variant-accent {
+  background: var(--badge-accent-bg);
+}

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

@@ -0,0 +1,87 @@
+import { h } from "@stencil/core";
+export class RecipeBadge {
+    label = 'Featured';
+    variant = 'primary';
+    // Backward-compatible alias for the original scaffolded API.
+    color;
+    render() {
+        const style = this.color ? { background: this.color } : {};
+        return (h("span", { key: '35180a6a6346c97293dc0ddadb0819b7aa1ff9e5', class: { badge: true, [`variant-${this.variant}`]: true }, style: style }, this.label));
+    }
+    static get is() { return "recipe-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["recipe-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["recipe-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Featured'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'accent'",
+                    "resolved": "\"accent\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            }
+        };
+    }
+}
+//# sourceMappingURL=recipe-badge.js.map

package/dist/collection/components/recipe-badge/recipe-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recipe-badge.js","sourceRoot":"","sources":["../../../src/components/recipe-badge/recipe-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,WAAW;IACd,KAAK,GAAW,UAAU,CAAC;IAC3B,OAAO,GAAuC,SAAS,CAAC;IAEhE,6DAA6D;IACrD,KAAK,CAAS;IAEtB,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3D,OAAO,CACL,6DAAM,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,IAC1E,IAAI,CAAC,KAAK,CACN,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'recipe-badge',\r\n  styleUrl: 'recipe-badge.css',\r\n  shadow: true,\r\n})\r\nexport class RecipeBadge {\r\n  @Prop() label: string = 'Featured';\r\n  @Prop() variant: 'primary' | 'secondary' | 'accent' = 'primary';\r\n\r\n  // Backward-compatible alias for the original scaffolded API.\r\n  @Prop() color: string;\r\n\r\n  render() {\r\n    const style = this.color ? { background: this.color } : {};\r\n    return (\r\n      <span class={{ badge: true, [`variant-${this.variant}`]: true }} style={style}>\r\n        {this.label}\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,96 @@
+:host {
+  --recipe-card-bg: #ffffff;
+  --recipe-card-text: #111827;
+  --recipe-card-muted: #6b7280;
+  --recipe-card-accent: #f97316;
+  --recipe-card-border: #e5e7eb;
+  display: block;
+}
+
+.recipe-card {
+  background: var(--recipe-card-bg);
+  border: 1px solid var(--recipe-card-border);
+  border-radius: 18px;
+  overflow: hidden;
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.recipe-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);
+}
+
+.image-wrap {
+  position: relative;
+  height: 180px;
+  background: linear-gradient(135deg, #fff7ed, #ffedd5);
+}
+
+.image-wrap img,
+.image-placeholder {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.image-placeholder {
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--recipe-card-accent);
+}
+
+.favorite {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  color: #9ca3af;
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+.favorite.active {
+  background: rgba(249, 115, 22, 0.12);
+  color: var(--recipe-card-accent);
+}
+
+.card-content {
+  padding: 1rem;
+}
+
+.meta-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.5rem;
+}
+
+.prep-time {
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--recipe-card-accent);
+}
+
+h2 {
+  margin: 0 0 0.75rem;
+  font-size: 1.25rem;
+  color: var(--recipe-card-text);
+}
+
+.actions-row {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.5rem;
+}

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

@@ -0,0 +1,220 @@
+import { h } from "@stencil/core";
+export class RecipeCard {
+    recipeId = 'recipe-1';
+    recipeTitle = 'Spicy Pasta';
+    imageUrl = '';
+    prepTime = 30;
+    isFavorite = false;
+    favoriteState = false;
+    cardClick;
+    favoriteToggle;
+    componentWillLoad() {
+        this.favoriteState = this.isFavorite;
+    }
+    handleFavoritePropChange(newValue) {
+        this.favoriteState = newValue;
+    }
+    async toggleFavorite() {
+        this.favoriteState = !this.favoriteState;
+        this.favoriteToggle.emit({
+            recipeId: this.recipeId,
+            recipeTitle: this.recipeTitle,
+            isFavorite: this.favoriteState,
+        });
+    }
+    handleCardClick = () => {
+        this.cardClick.emit({
+            recipeId: this.recipeId,
+            recipeTitle: this.recipeTitle,
+        });
+    };
+    handleFavoriteClick = (event) => {
+        event.stopPropagation();
+        this.toggleFavorite();
+    };
+    render() {
+        return (h("article", { key: 'ea8d57192146e0c875ba9c357ea5e65ddf4e2c5e', class: "recipe-card", onClick: this.handleCardClick }, h("div", { key: 'f6dfc3b4481988fd07d23cd0548f1cb1984942f5', class: "image-wrap" }, this.imageUrl ? (h("img", { src: this.imageUrl, alt: this.recipeTitle })) : (h("div", { class: "image-placeholder" }, "Recipe")), h("button", { key: 'f024d1784c817c7bb2ad937444365be8d192d4f8', type: "button", class: { favorite: true, active: this.favoriteState }, "aria-label": this.favoriteState ? 'Remove favorite' : 'Add favorite', onClick: this.handleFavoriteClick }, this.favoriteState ? '♥' : '♡')), h("div", { key: 'e44fb2e9d90c8ef20d05a1f1baabc7d1e1b7a070', class: "card-content" }, h("div", { key: 'e34a861b6f82d9368d400d0115a329bf3a9b91f4', class: "meta-row" }, h("span", { key: '925e5a0682f4923d51c28b07348b403ddac19065', class: "prep-time" }, this.prepTime, " min")), h("h2", { key: '7a576e9ed4af7fa83a5e34400ad2a0cfb32f7a1c' }, this.recipeTitle), h("div", { key: 'd4f3a287d889da78d1a785183aa43c53f9546c36', class: "actions-row" }, h("slot", { key: 'aeb6163d6243fbc55cf98f5fd7c3fbbf59a1a6e9', name: "actions" })))));
+    }
+    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": "'recipe-1'"
+            },
+            "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": "'Spicy Pasta'"
+            },
+            "imageUrl": {
+                "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-url",
+                "defaultValue": "''"
+            },
+            "prepTime": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prep-time",
+                "defaultValue": "30"
+            },
+            "isFavorite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-favorite",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "favoriteState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cardClick",
+                "name": "cardClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ recipeId: string; recipeTitle: string }",
+                    "resolved": "{ recipeId: string; recipeTitle: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "favoriteToggle",
+                "name": "favoriteToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ recipeId: string; recipeTitle: string; isFavorite: boolean }",
+                    "resolved": "{ recipeId: string; recipeTitle: string; isFavorite: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleFavorite": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "isFavorite",
+                "methodName": "handleFavoritePropChange"
+            }];
+    }
+}
+//# sourceMappingURL=recipe-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"recipe-card.js","sourceRoot":"","sources":["../../../src/components/recipe-card/recipe-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO9F,MAAM,OAAO,UAAU;IACb,QAAQ,GAAW,UAAU,CAAC;IAC9B,WAAW,GAAW,aAAa,CAAC;IACpC,QAAQ,GAAW,EAAE,CAAC;IACtB,QAAQ,GAAW,EAAE,CAAC;IACtB,UAAU,GAAY,KAAK,CAAC;IAE3B,aAAa,GAAY,KAAK,CAAC;IAE/B,SAAS,CAA0D;IACnE,cAAc,CAA+E;IAEtG,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC;IACvC,CAAC;IAGD,wBAAwB,CAAC,QAAiB;QACxC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAChC,CAAC;IAGD,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,UAAU,EAAE,IAAI,CAAC,aAAa;SAC/B,CAAC,CAAC;IACL,CAAC;IAEO,eAAe,GAAG,GAAG,EAAE;QAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,mBAAmB,GAAG,CAAC,KAAY,EAAE,EAAE;QAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,gEAAS,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe;YACxD,4DAAK,KAAK,EAAC,YAAY;gBACpB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,GAAI,CACnD,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,mBAAmB,aAAa,CAC5C;gBACD,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,gBACzC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,cAAc,EACnE,OAAO,EAAE,IAAI,CAAC,mBAAmB,IAEhC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CACxB,CACL;YAEN,4DAAK,KAAK,EAAC,cAAc;gBACvB,4DAAK,KAAK,EAAC,UAAU;oBACnB,6DAAM,KAAK,EAAC,WAAW;wBAAE,IAAI,CAAC,QAAQ;+BAAY,CAC9C;gBACN,6DAAK,IAAI,CAAC,WAAW,CAAM;gBAC3B,4DAAK,KAAK,EAAC,aAAa;oBACtB,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACE,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Method, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'recipe-card',\r\n  styleUrl: 'recipe-card.css',\r\n  shadow: true,\r\n})\r\nexport class RecipeCard {\r\n  @Prop() recipeId: string = 'recipe-1';\r\n  @Prop() recipeTitle: string = 'Spicy Pasta';\r\n  @Prop() imageUrl: string = '';\r\n  @Prop() prepTime: number = 30;\r\n  @Prop() isFavorite: boolean = false;\r\n\r\n  @State() favoriteState: boolean = false;\r\n\r\n  @Event() cardClick: EventEmitter<{ recipeId: string; recipeTitle: string }>;\r\n  @Event() favoriteToggle: EventEmitter<{ recipeId: string; recipeTitle: string; isFavorite: boolean }>;\r\n\r\n  componentWillLoad() {\r\n    this.favoriteState = this.isFavorite;\r\n  }\r\n\r\n  @Watch('isFavorite')\r\n  handleFavoritePropChange(newValue: boolean) {\r\n    this.favoriteState = newValue;\r\n  }\r\n\r\n  @Method()\r\n  async toggleFavorite() {\r\n    this.favoriteState = !this.favoriteState;\r\n    this.favoriteToggle.emit({\r\n      recipeId: this.recipeId,\r\n      recipeTitle: this.recipeTitle,\r\n      isFavorite: this.favoriteState,\r\n    });\r\n  }\r\n\r\n  private handleCardClick = () => {\r\n    this.cardClick.emit({\r\n      recipeId: this.recipeId,\r\n      recipeTitle: this.recipeTitle,\r\n    });\r\n  };\r\n\r\n  private handleFavoriteClick = (event: Event) => {\r\n    event.stopPropagation();\r\n    this.toggleFavorite();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <article class=\"recipe-card\" onClick={this.handleCardClick}>\r\n        <div class=\"image-wrap\">\r\n          {this.imageUrl ? (\r\n            <img src={this.imageUrl} alt={this.recipeTitle} />\r\n          ) : (\r\n            <div class=\"image-placeholder\">Recipe</div>\r\n          )}\r\n          <button\r\n            type=\"button\"\r\n            class={{ favorite: true, active: this.favoriteState }}\r\n            aria-label={this.favoriteState ? 'Remove favorite' : 'Add favorite'}\r\n            onClick={this.handleFavoriteClick}\r\n          >\r\n            {this.favoriteState ? '♥' : '♡'}\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"card-content\">\r\n          <div class=\"meta-row\">\r\n            <span class=\"prep-time\">{this.prepTime} min</span>\r\n          </div>\r\n          <h2>{this.recipeTitle}</h2>\r\n          <div class=\"actions-row\">\r\n            <slot name=\"actions\" />\r\n          </div>\r\n        </div>\r\n      </article>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,36 @@
+:host {
+  --rating-filled: #fbbf24;
+  --rating-empty: #d1d5db;
+  display: inline-block;
+}
+
+.rating {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  font-size: 1.2rem;
+  line-height: 1;
+}
+
+.star {
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  cursor: default;
+  color: var(--rating-empty);
+  user-select: none;
+  font-size: inherit;
+}
+
+.interactive .star {
+  cursor: pointer;
+}
+
+.star.filled {
+  color: var(--rating-filled);
+}
+
+button.star {
+  cursor: pointer;
+}