@ssejal8/recipe-ui-kit 0.1.0 → 0.1.1

package/dist/collection/components/rk-chip/rk-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rk-chip.js","sourceRoot":"","sources":["../../../src/components/rk-chip/rk-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n/**\n * A selectable / dismissible filter chip.\n *\n * @slot - Optional leading content (icon, emoji, avatar) rendered before the label.\n */\n@Component({\n  tag: 'rk-chip',\n  styleUrl: 'rk-chip.css',\n  shadow: true,\n})\nexport class RkChip {\n  /** Visible text. */\n  @Prop() label = '';\n\n  /** Value reported back to the host application in event payloads. */\n  @Prop() value?: string;\n\n  /** Whether the chip is currently active. */\n  @Prop() selected = false;\n\n  /** Optional trailing count badge (e.g. number of matching recipes). */\n  @Prop() count?: number;\n\n  /** Renders an \"x\" button that emits `rkChipDismiss` instead of toggling. */\n  @Prop() dismissible = false;\n\n  /** Disables interaction. */\n  @Prop() disabled = false;\n\n  /** Visual treatment. */\n  @Prop() tone: 'neutral' | 'primary' | 'accent' = 'neutral';\n\n  /** Emitted when the chip is toggled. */\n  @Event({ eventName: 'rkChipToggle' }) rkChipToggle!: EventEmitter<{ value: string; label: string; selected: boolean }>;\n\n  /** Emitted when a dismissible chip's remove button is pressed. */\n  @Event({ eventName: 'rkChipDismiss' }) rkChipDismiss!: EventEmitter<{ value: string; label: string }>;\n\n  private get resolvedValue() {\n    return this.value ?? this.label;\n  }\n\n  private handleClick = () => {\n    if (this.disabled) return;\n    this.rkChipToggle.emit({\n      value: this.resolvedValue,\n      label: this.label,\n      selected: !this.selected,\n    });\n  };\n\n  private handleDismiss = (event: MouseEvent) => {\n    event.stopPropagation();\n    if (this.disabled) return;\n    this.rkChipDismiss.emit({ value: this.resolvedValue, label: this.label });\n  };\n\n  render() {\n    const body = [\n      <span class=\"lead\">\n        <slot />\n      </span>,\n      <span class=\"label\" part=\"label\">\n        {this.label}\n      </span>,\n      typeof this.count === 'number' && (\n        <span class=\"count\" part=\"count\">\n          {this.count}\n        </span>\n      ),\n    ];\n\n    const classes = {\n      chip: true,\n      'is-selected': this.selected,\n      'is-dismissible': this.dismissible,\n      [`tone-${this.tone}`]: true,\n    };\n\n    // A dismissible chip needs two independent controls, so the shell becomes a\n    // plain element to avoid nesting buttons inside a button.\n    if (this.dismissible) {\n      return (\n        <span class={classes} part=\"chip\">\n          <button class=\"body\" type=\"button\" disabled={this.disabled} onClick={this.handleClick}>\n            {body}\n          </button>\n          <button class=\"dismiss\" part=\"dismiss\" type=\"button\" disabled={this.disabled} aria-label={`Remove ${this.label}`} onClick={this.handleDismiss}>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\">\n              <path d=\"M6 6l12 12M18 6 6 18\" />\n            </svg>\n          </button>\n        </span>\n      );\n    }\n\n    return (\n      <button class={classes} part=\"chip\" type=\"button\" aria-pressed={String(this.selected)} disabled={this.disabled} onClick={this.handleClick}>\n        {body}\n      </button>\n    );\n  }\n}\n"]}

package/dist/collection/components/rk-empty-state/rk-empty-state.js

@@ -0,0 +1,138 @@
+import { h } from "@stencil/core";
+/**
+ * Placeholder shown when a list has no items, a search returns nothing, or a
+ * request fails.
+ *
+ * @slot - Call-to-action content rendered under the message (buttons, links).
+ */
+export class RkEmptyState {
+    constructor() {
+        /** Emoji or short glyph shown above the heading. */
+        this.icon = '🍳';
+        /** Bold headline. */
+        this.heading = 'Nothing here yet';
+        /** `error` swaps to a warning treatment. */
+        this.tone = 'neutral';
+        /** Removes the dashed border and reduces padding, for inline use. */
+        this.bare = false;
+    }
+    render() {
+        return (h("div", { key: 'd770d00625d0f8933704195e975ff96e2599a8a9', class: { empty: true, [`tone-${this.tone}`]: true, 'is-bare': this.bare }, part: "container", role: this.tone === 'error' ? 'alert' : null }, h("span", { key: '566dc86da2eaaa9765c3112f381aa409bdcf5198', class: "icon", part: "icon", "aria-hidden": "true" }, this.icon), h("h3", { key: '9d8e62cc4724b970b6c16dd51797e6c480bf38d2', class: "heading", part: "heading" }, this.heading), this.message && (h("p", { key: 'b200ce21253e8cd7f9aa73b513030656db956a5e', class: "message", part: "message" }, this.message)), h("div", { key: '1d04761bf9fa953362826e13be1fc95eebc9067a', class: "actions", part: "actions" }, h("slot", { key: 'f1302bd354850c09e6fb4b136a32759040b30ecd' }))));
+    }
+    static get is() { return "rk-empty-state"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rk-empty-state.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rk-empty-state.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emoji or short glyph shown above the heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "'\uD83C\uDF73'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bold headline."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'Nothing here yet'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Supporting sentence."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message"
+            },
+            "tone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'neutral' | 'error'",
+                    "resolved": "\"error\" | \"neutral\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`error` swaps to a warning treatment."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tone",
+                "defaultValue": "'neutral'"
+            },
+            "bare": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Removes the dashed border and reduces padding, for inline use."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bare",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=rk-empty-state.js.map

package/dist/collection/components/rk-empty-state/rk-empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rk-empty-state.js","sourceRoot":"","sources":["../../../src/components/rk-empty-state/rk-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAMH,MAAM,OAAO,YAAY;IALzB;QAME,oDAAoD;QAC5C,SAAI,GAAG,IAAI,CAAC;QAEpB,qBAAqB;QACb,YAAO,GAAG,kBAAkB,CAAC;QAKrC,4CAA4C;QACpC,SAAI,GAAwB,SAAS,CAAC;QAE9C,qEAAqE;QAC7D,SAAI,GAAG,KAAK,CAAC;KAsBtB;IApBC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;YAC3I,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,IAC9C,IAAI,CAAC,IAAI,CACL;YACP,2DAAI,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,IAC/B,IAAI,CAAC,OAAO,CACV;YACJ,IAAI,CAAC,OAAO,IAAI,CACf,0DAAG,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,IAC9B,IAAI,CAAC,OAAO,CACX,CACL;YACD,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;gBACjC,8DAAQ,CACJ,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Placeholder shown when a list has no items, a search returns nothing, or a\n * request fails.\n *\n * @slot - Call-to-action content rendered under the message (buttons, links).\n */\n@Component({\n  tag: 'rk-empty-state',\n  styleUrl: 'rk-empty-state.css',\n  shadow: true,\n})\nexport class RkEmptyState {\n  /** Emoji or short glyph shown above the heading. */\n  @Prop() icon = '🍳';\n\n  /** Bold headline. */\n  @Prop() heading = 'Nothing here yet';\n\n  /** Supporting sentence. */\n  @Prop() message?: string;\n\n  /** `error` swaps to a warning treatment. */\n  @Prop() tone: 'neutral' | 'error' = 'neutral';\n\n  /** Removes the dashed border and reduces padding, for inline use. */\n  @Prop() bare = false;\n\n  render() {\n    return (\n      <div class={{ empty: true, [`tone-${this.tone}`]: true, 'is-bare': this.bare }} part=\"container\" role={this.tone === 'error' ? 'alert' : null}>\n        <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n          {this.icon}\n        </span>\n        <h3 class=\"heading\" part=\"heading\">\n          {this.heading}\n        </h3>\n        {this.message && (\n          <p class=\"message\" part=\"message\">\n            {this.message}\n          </p>\n        )}\n        <div class=\"actions\" part=\"actions\">\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,312 @@
+import { h } from "@stencil/core";
+/**
+ * One cell of the weekly planner grid: either an empty "add" target or a filled
+ * slot showing the planned recipe. Doubles as a drop zone for drag-and-drop
+ * planning.
+ *
+ * @slot - Extra content rendered under the recipe name (e.g. serving notes).
+ */
+export class RkMealSlot {
+    constructor() {
+        /** Disables interaction. */
+        this.disabled = false;
+        this.dragOver = false;
+        this.handleDragOver = (event) => {
+            if (this.disabled)
+                return;
+            // Preventing default is what marks this element as a valid drop target.
+            event.preventDefault();
+            if (event.dataTransfer)
+                event.dataTransfer.dropEffect = 'copy';
+            this.dragOver = true;
+        };
+        this.handleDrop = (event) => {
+            event.preventDefault();
+            this.dragOver = false;
+            if (this.disabled)
+                return;
+            const payload = event.dataTransfer?.getData('text/plain') ?? '';
+            if (payload)
+                this.rkMealDrop.emit({ ...this.slotDetail, payload });
+        };
+    }
+    get filled() {
+        return !!this.recipeId;
+    }
+    get slotDetail() {
+        return { day: this.day, mealType: this.mealType };
+    }
+    get recipeDetail() {
+        return { ...this.slotDetail, recipeId: this.recipeId ?? '', recipeName: this.recipeName ?? '' };
+    }
+    render() {
+        if (!this.filled) {
+            return (h("button", { class: { slot: true, 'is-empty': true, 'is-drag-over': this.dragOver }, part: "slot", type: "button", disabled: this.disabled, "aria-label": `Add a recipe for ${this.mealLabel ?? this.mealType} on ${this.day}`, onClick: () => this.rkMealAdd.emit(this.slotDetail), onDragOver: this.handleDragOver, onDragLeave: () => (this.dragOver = false), onDrop: this.handleDrop }, h("span", { class: "plus", "aria-hidden": "true" }, "+"), h("span", { class: "empty-label" }, this.mealLabel ?? this.mealType)));
+        }
+        return (h("div", { class: { slot: true, 'is-filled': true, 'is-drag-over': this.dragOver }, part: "slot", onDragOver: this.handleDragOver, onDragLeave: () => (this.dragOver = false), onDrop: this.handleDrop }, this.mealLabel && (h("span", { class: "caption", part: "caption" }, this.mealLabel)), h("button", { class: "main", part: "main", type: "button", disabled: this.disabled, title: this.recipeName, onClick: () => this.rkMealOpen.emit(this.recipeDetail) }, this.recipeImage ? (h("img", { class: "thumb", src: this.recipeImage, alt: "", loading: "lazy", decoding: "async" })) : (h("span", { class: "thumb thumb-fallback", "aria-hidden": "true" }, "\uD83C\uDF7D\uFE0F")), h("span", { class: "name", part: "name" }, this.recipeName)), h("div", { class: "extra" }, h("slot", null)), h("div", { class: "controls", part: "controls" }, h("button", { class: "ctrl", type: "button", disabled: this.disabled, "aria-label": `Replace ${this.recipeName}`, title: "Replace", onClick: () => this.rkMealSwap.emit(this.recipeDetail) }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 12a9 9 0 0 1 15.3-6.4L21 8" }), h("path", { d: "M21 3v5h-5" }), h("path", { d: "M21 12a9 9 0 0 1-15.3 6.4L3 16" }), h("path", { d: "M3 21v-5h5" }))), h("button", { class: "ctrl is-danger", type: "button", disabled: this.disabled, "aria-label": `Remove ${this.recipeName} from ${this.mealLabel ?? this.mealType}`, title: "Remove", onClick: () => this.rkMealRemove.emit(this.recipeDetail) }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { d: "M6 6l12 12M18 6 6 18" }))))));
+    }
+    static get is() { return "rk-meal-slot"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rk-meal-slot.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rk-meal-slot.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "day": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Day key this slot belongs to, e.g. `monday`. Echoed in event payloads."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "day"
+            },
+            "mealType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Meal type key, e.g. `breakfast`. Echoed in event payloads."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "meal-type"
+            },
+            "mealLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Human-readable meal label shown as the slot caption."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "meal-label"
+            },
+            "recipeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Id of the planned recipe. Empty means the slot is free."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recipe-id"
+            },
+            "recipeName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Title of the planned recipe."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recipe-name"
+            },
+            "recipeImage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Thumbnail of the planned recipe."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recipe-image"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dragOver": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rkMealAdd",
+                "name": "rkMealAdd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an empty slot is activated \u2014 the host opens a recipe picker."
+                },
+                "complexType": {
+                    "original": "RkMealSlotDetail",
+                    "resolved": "RkMealSlotDetail",
+                    "references": {
+                        "RkMealSlotDetail": {
+                            "location": "local",
+                            "path": "/Users/sejal.sharma/NAGP/recipe-ui/packages/recipe-ui-kit/src/components/rk-meal-slot/rk-meal-slot.tsx",
+                            "id": "src/components/rk-meal-slot/rk-meal-slot.tsx::RkMealSlotDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "rkMealSwap",
+                "name": "rkMealSwap",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the planned recipe should be replaced."
+                },
+                "complexType": {
+                    "original": "RkMealRecipeDetail",
+                    "resolved": "RkMealRecipeDetail",
+                    "references": {
+                        "RkMealRecipeDetail": {
+                            "location": "local",
+                            "path": "/Users/sejal.sharma/NAGP/recipe-ui/packages/recipe-ui-kit/src/components/rk-meal-slot/rk-meal-slot.tsx",
+                            "id": "src/components/rk-meal-slot/rk-meal-slot.tsx::RkMealRecipeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "rkMealRemove",
+                "name": "rkMealRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the planned recipe should be cleared."
+                },
+                "complexType": {
+                    "original": "RkMealRecipeDetail",
+                    "resolved": "RkMealRecipeDetail",
+                    "references": {
+                        "RkMealRecipeDetail": {
+                            "location": "local",
+                            "path": "/Users/sejal.sharma/NAGP/recipe-ui/packages/recipe-ui-kit/src/components/rk-meal-slot/rk-meal-slot.tsx",
+                            "id": "src/components/rk-meal-slot/rk-meal-slot.tsx::RkMealRecipeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "rkMealOpen",
+                "name": "rkMealOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the planned recipe is activated \u2014 the host navigates."
+                },
+                "complexType": {
+                    "original": "RkMealRecipeDetail",
+                    "resolved": "RkMealRecipeDetail",
+                    "references": {
+                        "RkMealRecipeDetail": {
+                            "location": "local",
+                            "path": "/Users/sejal.sharma/NAGP/recipe-ui/packages/recipe-ui-kit/src/components/rk-meal-slot/rk-meal-slot.tsx",
+                            "id": "src/components/rk-meal-slot/rk-meal-slot.tsx::RkMealRecipeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "rkMealDrop",
+                "name": "rkMealDrop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a recipe is dropped onto this slot."
+                },
+                "complexType": {
+                    "original": "RkMealDropDetail",
+                    "resolved": "RkMealDropDetail",
+                    "references": {
+                        "RkMealDropDetail": {
+                            "location": "local",
+                            "path": "/Users/sejal.sharma/NAGP/recipe-ui/packages/recipe-ui-kit/src/components/rk-meal-slot/rk-meal-slot.tsx",
+                            "id": "src/components/rk-meal-slot/rk-meal-slot.tsx::RkMealDropDetail"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=rk-meal-slot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rk-meal-slot.js","sourceRoot":"","sources":["../../../src/components/rk-meal-slot/rk-meal-slot.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\n\nexport interface RkMealSlotDetail {\n  day: string;\n  mealType: string;\n}\n\nexport interface RkMealRecipeDetail extends RkMealSlotDetail {\n  recipeId: string;\n  recipeName: string;\n}\n\nexport interface RkMealDropDetail extends RkMealSlotDetail {\n  /** Raw `text/plain` payload from the drag operation. */\n  payload: string;\n}\n\n/**\n * One cell of the weekly planner grid: either an empty \"add\" target or a filled\n * slot showing the planned recipe. Doubles as a drop zone for drag-and-drop\n * planning.\n *\n * @slot - Extra content rendered under the recipe name (e.g. serving notes).\n */\n@Component({\n  tag: 'rk-meal-slot',\n  styleUrl: 'rk-meal-slot.css',\n  shadow: true,\n})\nexport class RkMealSlot {\n  /** Day key this slot belongs to, e.g. `monday`. Echoed in event payloads. */\n  @Prop() day!: string;\n\n  /** Meal type key, e.g. `breakfast`. Echoed in event payloads. */\n  @Prop() mealType!: string;\n\n  /** Human-readable meal label shown as the slot caption. */\n  @Prop() mealLabel?: string;\n\n  /** Id of the planned recipe. Empty means the slot is free. */\n  @Prop() recipeId?: string;\n\n  /** Title of the planned recipe. */\n  @Prop() recipeName?: string;\n\n  /** Thumbnail of the planned recipe. */\n  @Prop() recipeImage?: string;\n\n  /** Disables interaction. */\n  @Prop() disabled = false;\n\n  /** Emitted when an empty slot is activated — the host opens a recipe picker. */\n  @Event({ eventName: 'rkMealAdd' }) rkMealAdd!: EventEmitter<RkMealSlotDetail>;\n\n  /** Emitted when the planned recipe should be replaced. */\n  @Event({ eventName: 'rkMealSwap' }) rkMealSwap!: EventEmitter<RkMealRecipeDetail>;\n\n  /** Emitted when the planned recipe should be cleared. */\n  @Event({ eventName: 'rkMealRemove' }) rkMealRemove!: EventEmitter<RkMealRecipeDetail>;\n\n  /** Emitted when the planned recipe is activated — the host navigates. */\n  @Event({ eventName: 'rkMealOpen' }) rkMealOpen!: EventEmitter<RkMealRecipeDetail>;\n\n  /** Emitted when a recipe is dropped onto this slot. */\n  @Event({ eventName: 'rkMealDrop' }) rkMealDrop!: EventEmitter<RkMealDropDetail>;\n\n  @State() private dragOver = false;\n\n  private get filled() {\n    return !!this.recipeId;\n  }\n\n  private get slotDetail(): RkMealSlotDetail {\n    return { day: this.day, mealType: this.mealType };\n  }\n\n  private get recipeDetail(): RkMealRecipeDetail {\n    return { ...this.slotDetail, recipeId: this.recipeId ?? '', recipeName: this.recipeName ?? '' };\n  }\n\n  private handleDragOver = (event: DragEvent) => {\n    if (this.disabled) return;\n    // Preventing default is what marks this element as a valid drop target.\n    event.preventDefault();\n    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';\n    this.dragOver = true;\n  };\n\n  private handleDrop = (event: DragEvent) => {\n    event.preventDefault();\n    this.dragOver = false;\n    if (this.disabled) return;\n    const payload = event.dataTransfer?.getData('text/plain') ?? '';\n    if (payload) this.rkMealDrop.emit({ ...this.slotDetail, payload });\n  };\n\n  render() {\n    if (!this.filled) {\n      return (\n        <button\n          class={{ slot: true, 'is-empty': true, 'is-drag-over': this.dragOver }}\n          part=\"slot\"\n          type=\"button\"\n          disabled={this.disabled}\n          aria-label={`Add a recipe for ${this.mealLabel ?? this.mealType} on ${this.day}`}\n          onClick={() => this.rkMealAdd.emit(this.slotDetail)}\n          onDragOver={this.handleDragOver}\n          onDragLeave={() => (this.dragOver = false)}\n          onDrop={this.handleDrop}\n        >\n          <span class=\"plus\" aria-hidden=\"true\">\n            +\n          </span>\n          <span class=\"empty-label\">{this.mealLabel ?? this.mealType}</span>\n        </button>\n      );\n    }\n\n    return (\n      <div\n        class={{ slot: true, 'is-filled': true, 'is-drag-over': this.dragOver }}\n        part=\"slot\"\n        onDragOver={this.handleDragOver}\n        onDragLeave={() => (this.dragOver = false)}\n        onDrop={this.handleDrop}\n      >\n        {this.mealLabel && (\n          <span class=\"caption\" part=\"caption\">\n            {this.mealLabel}\n          </span>\n        )}\n\n        <button\n          class=\"main\"\n          part=\"main\"\n          type=\"button\"\n          disabled={this.disabled}\n          title={this.recipeName}\n          onClick={() => this.rkMealOpen.emit(this.recipeDetail)}\n        >\n          {this.recipeImage ? (\n            <img class=\"thumb\" src={this.recipeImage} alt=\"\" loading=\"lazy\" decoding=\"async\" />\n          ) : (\n            <span class=\"thumb thumb-fallback\" aria-hidden=\"true\">\n              🍽️\n            </span>\n          )}\n          <span class=\"name\" part=\"name\">\n            {this.recipeName}\n          </span>\n        </button>\n\n        <div class=\"extra\">\n          <slot />\n        </div>\n\n        <div class=\"controls\" part=\"controls\">\n          <button class=\"ctrl\" type=\"button\" disabled={this.disabled} aria-label={`Replace ${this.recipeName}`} title=\"Replace\" onClick={() => this.rkMealSwap.emit(this.recipeDetail)}>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M3 12a9 9 0 0 1 15.3-6.4L21 8\" />\n              <path d=\"M21 3v5h-5\" />\n              <path d=\"M21 12a9 9 0 0 1-15.3 6.4L3 16\" />\n              <path d=\"M3 21v-5h5\" />\n            </svg>\n          </button>\n          <button\n            class=\"ctrl is-danger\"\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={`Remove ${this.recipeName} from ${this.mealLabel ?? this.mealType}`}\n            title=\"Remove\"\n            onClick={() => this.rkMealRemove.emit(this.recipeDetail)}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\">\n              <path d=\"M6 6l12 12M18 6 6 18\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    );\n  }\n}\n"]}