@ssingh465/recipe-ui 0.2.2 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- import{proxyCustomElement as e,HTMLElement as r,createEvent as a,h as t,Host as s,transformTag as n}from"@stencil/core/internal/client";import{A as i,T as o,b as c}from"./icons.js";const d=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.entryremove=a(this,"entryremove",7),this.entrymoverequest=a(this,"entrymoverequest",7),this.daytoggle=a(this,"daytoggle",7),this.recipeselect=a(this,"recipeselect",7)}day;dayLabel;entries=[];collapsed=!1;entryremove;entrymoverequest;daytoggle;recipeselect;handleToggle=()=>{this.daytoggle.emit({day:this.day,collapsed:!this.collapsed})};renderEntry(e){return t("li",{part:"entry",class:"entry",key:e.recipeId},e.thumbnail?t("img",{class:"thumb",src:e.thumbnail,alt:"",loading:"lazy",decoding:"async"}):t("span",{class:"thumb placeholder","aria-hidden":"true"}),t("button",{type:"button",class:"name",onClick:()=>this.recipeselect.emit({recipeId:e.recipeId})},e.name),t("div",{class:"row-actions"},t("button",{type:"button",class:"icon-button","aria-label":"Move "+e.name,onClick:()=>this.entrymoverequest.emit({recipeId:e.recipeId,fromDay:this.day})},i()),t("button",{type:"button",class:"icon-button","aria-label":`Remove ${e.name} from ${this.dayLabel}`,onClick:()=>this.entryremove.emit({recipeId:e.recipeId,day:this.day})},o())))}render(){const{collapsed:e,dayLabel:r}=this,a=Array.isArray(this.entries)?this.entries:[];return t(s,{key:"e6b3560cfbc696ca0c4902cc74bb40cb9c5bf6d5"},t("section",{key:"9b7fdbee72bcc92cd9b621988269133e5d9e287e",part:"region",class:"region",role:"region","aria-label":r},t("div",{key:"a9ce34dd506ece4907bc9bc68e52f3a570ff774d",part:"header",class:"header"},t("h3",{key:"3959df89c98ce8b92893bd0464d9691d085a4fd3",class:"day-name"},r),t("span",{key:"45390ce9f831aeaf049a4656de62ea95eb92173a",class:"count"},a.length),t("button",{key:"91244baaaf01c45374813c77935dddc837b35559",type:"button",class:{toggle:!0,"is-collapsed":e},"aria-expanded":e?"false":"true","aria-label":e?"Expand "+r:"Collapse "+r,onClick:this.handleToggle},c())),!e&&(a.length?t("ul",{class:"entries"},a.map((e=>this.renderEntry(e)))):t("div",{class:"empty"},t("slot",{name:"empty"})))))}static get style(){return":host{display:block;font-family:var(--rc-font-text, system-ui, sans-serif)}.region{display:flex;flex-direction:column;height:100%;min-height:20rem;background:var(--rc-surface-sunken, #f6f1e9);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius, 14px);padding:var(--rc-s-4, 1rem);gap:var(--rc-s-3, 0.75rem);color:var(--rc-text, #2a2420)}.header{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}.day-name{margin:0;flex:1;font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem)}.count{color:var(--rc-text-muted, #6b5f55);font-size:var(--rc-fs-sm, 0.875rem)}.toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer;transition:transform var(--rc-duration, 180ms) var(--rc-ease, ease)}.toggle.is-collapsed{transform:rotate(-90deg)}.toggle:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.entries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rc-s-2, 0.5rem)}.entry{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem);padding:var(--rc-s-2, 0.5rem);background:var(--rc-surface, #fff);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius-sm, 6px)}.thumb{flex:none;width:40px;height:40px;border-radius:var(--rc-radius-sm, 6px);object-fit:cover}.thumb.placeholder{background:var(--rc-border, #e7dfd3)}.name{flex:1;min-width:0;font-family:inherit;font-size:var(--rc-fs-sm, 0.875rem);color:inherit;background:transparent;border:none;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;cursor:pointer}.name:hover{text-decoration:underline}.name:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.row-actions{display:flex;gap:var(--rc-s-1, 0.25rem)}.icon-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer}.icon-button:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--rc-text-subtle, #8f8377);font-size:var(--rc-fs-sm, 0.875rem)}"}},[769,"planner-day",{day:[1],dayLabel:[1,"day-label"],entries:[16],collapsed:[4]}]),l=d,f=function(){"undefined"!=typeof customElements&&["planner-day"].forEach((e=>{"planner-day"===e&&(customElements.get(n(e))||customElements.define(n(e),d))}))};export{l as PlannerDay,f as defineCustomElement}
1
+ import{proxyCustomElement as e,HTMLElement as r,createEvent as t,h as a,Host as s,transformTag as i}from"@stencil/core/internal/client";import{A as n,T as o,b as c}from"./icons.js";import{t as l}from"./tile-hue.js";const d=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.entryremove=t(this,"entryremove",7),this.entrymoverequest=t(this,"entrymoverequest",7),this.daytoggle=t(this,"daytoggle",7),this.recipeselect=t(this,"recipeselect",7)}day;dayLabel;entries=[];collapsed=!1;entryremove;entrymoverequest;daytoggle;recipeselect;handleToggle=()=>{this.daytoggle.emit({day:this.day,collapsed:!this.collapsed})};renderThumb(e){if(e.thumbnail)return a("img",{class:"thumb",src:e.thumbnail,alt:"",loading:"lazy",decoding:"async"});const r=l(e.name);return a("span",{class:"thumb tile","aria-hidden":"true",style:{"--tile-h":r+""}},e.name.charAt(0).toUpperCase())}renderEntry(e){return a("li",{part:"entry",class:"entry",key:e.recipeId},this.renderThumb(e),a("button",{type:"button",class:"name",onClick:()=>this.recipeselect.emit({recipeId:e.recipeId})},e.name),a("div",{class:"row-actions"},a("button",{type:"button",class:"icon-button","aria-label":"Move "+e.name,onClick:()=>this.entrymoverequest.emit({recipeId:e.recipeId,fromDay:this.day})},n()),a("button",{type:"button",class:"icon-button","aria-label":`Remove ${e.name} from ${this.dayLabel}`,onClick:()=>this.entryremove.emit({recipeId:e.recipeId,day:this.day})},o())))}render(){const{collapsed:e,dayLabel:r}=this,t=Array.isArray(this.entries)?this.entries:[];return a(s,{key:"81e9745118b3a700e312d45ec707c8a4938dd744"},a("section",{key:"e608c0c24e780d0c3ef2444992a89c9021dce8fe",part:"region",class:"region",role:"region","aria-label":r},a("div",{key:"f30192afdd472a86e944fd73ab1970bb273b61e9",part:"header",class:"header"},a("h3",{key:"22015b44dad340b686c8049ce576a6b3fda716ab",class:"day-name"},r),a("span",{key:"7b4668dd6560905522acae0ead0ddd3eac3f3d0a",class:"count"},t.length),a("button",{key:"ada5df2a2ea65abd9d1c914526be9ddb906ea62d",type:"button",class:{toggle:!0,"is-collapsed":e},"aria-expanded":e?"false":"true","aria-label":e?"Expand "+r:"Collapse "+r,onClick:this.handleToggle},c())),!e&&(t.length?a("ul",{class:"entries"},t.map((e=>this.renderEntry(e)))):a("div",{class:"empty"},a("slot",{name:"empty"})))))}static get style(){return":host{display:block;font-family:var(--rc-font-text, system-ui, sans-serif)}.region{display:flex;flex-direction:column;height:100%;min-height:20rem;background:var(--rc-surface-sunken, #f6f1e9);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius, 14px);padding:var(--rc-s-4, 1rem);gap:var(--rc-s-3, 0.75rem);color:var(--rc-text, #2a2420)}.header{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}.day-name{margin:0;flex:1;font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem)}.count{color:var(--rc-text-muted, #6b5f55);font-size:var(--rc-fs-sm, 0.875rem)}.toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer;transition:transform var(--rc-duration, 180ms) var(--rc-ease, ease)}.toggle.is-collapsed{transform:rotate(-90deg)}.toggle:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.entries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rc-s-2, 0.5rem)}.entry{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem);padding:var(--rc-s-2, 0.5rem);background:var(--rc-surface, #fff);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius-sm, 6px)}.thumb{flex:none;width:56px;height:56px;border-radius:var(--rc-radius-sm, 6px);object-fit:cover}.thumb.tile{display:flex;align-items:center;justify-content:center;background:hsl(var(--tile-h) 42% 88%);color:hsl(var(--tile-h) 45% 28%);font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-body, 1rem);font-weight:600}@media (prefers-color-scheme: dark){.thumb.tile{background:hsl(var(--tile-h) 30% 22%);color:hsl(var(--tile-h) 35% 82%)}}.name{flex:1;min-width:0;font-family:inherit;font-size:var(--rc-fs-sm, 0.875rem);color:inherit;background:transparent;border:none;padding:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:start;cursor:pointer}.name:hover{text-decoration:underline}.name:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.row-actions{display:flex;gap:var(--rc-s-1, 0.25rem)}.icon-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer}.icon-button:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--rc-text-subtle, #8f8377);font-size:var(--rc-fs-sm, 0.875rem)}"}},[769,"planner-day",{day:[1],dayLabel:[1,"day-label"],entries:[16],collapsed:[4]}]),f=d,p=function(){"undefined"!=typeof customElements&&["planner-day"].forEach((e=>{"planner-day"===e&&(customElements.get(i(e))||customElements.define(i(e),d))}))};export{f as PlannerDay,p as defineCustomElement}
@@ -1 +1 @@
1
- import{proxyCustomElement as e,HTMLElement as r,createEvent as t,h as a,Host as i,transformTag as o}from"@stencil/core/internal/client";import{H as s}from"./icons.js";const c=[18,34,96,168,262,344],n=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.favoritetoggle=t(this,"favoritetoggle",7),this.recipeselect=t(this,"recipeselect",7)}recipe;favorited=!1;href;favoritetoggle;recipeselect;handleTitleClick=e=>{0!==e.button||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||(e.preventDefault(),this.recipeselect.emit({recipeId:this.recipe.id}))};handleFavoriteClick=()=>{this.favoritetoggle.emit({recipeId:this.recipe.id})};renderMedia(){const{thumbnail:e,name:r}=this.recipe;if(e)return a("img",{part:"media",class:"media",src:e,alt:"",loading:"lazy",decoding:"async"});const t=function(e){let r=0;for(let t=0;t<e.length;t++)r+=e.charCodeAt(t);return c[r%c.length]}(r);return a("div",{part:"media",class:"media tile",style:{"--tile-h":t+""}},a("span",{class:"tile-name"},r))}render(){const{recipe:e,favorited:r,href:t}=this;return e&&"object"==typeof e?a(i,null,a("article",{part:"card",class:"card"},this.renderMedia(),a("div",{class:"body"},a("a",{part:"title",class:"title",href:t,onClick:this.handleTitleClick},e.name),a("p",{class:"meta"},[e.category,e.area].filter(Boolean).join(" · ")),a("div",{class:"actions-row"},a("button",{type:"button",class:"favorite","aria-pressed":r?"true":"false","aria-label":r?`Remove ${e.name} from favorites`:`Add ${e.name} to favorites`,onClick:this.handleFavoriteClick},s(r)),a("div",{part:"actions",class:"actions"},a("slot",{name:"actions"})))))):a(i,null)}static get style(){return":host{display:block;height:22rem;font-family:var(--rc-font-text, system-ui, sans-serif)}.card{display:flex;flex-direction:column;height:100%;background:var(--rc-surface, #fff);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius, 14px);box-shadow:var(--rc-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));overflow:hidden;transition:box-shadow var(--rc-duration, 180ms) var(--rc-ease, ease), border-color var(--rc-duration, 180ms) var(--rc-ease, ease), transform var(--rc-duration, 180ms) var(--rc-ease, ease)}.card:hover{box-shadow:var(--rc-shadow-hover, 0 2px 8px rgba(0, 0, 0, 0.08));border-color:var(--rc-border-strong, #d4c8b8);transform:translateY(-2px)}.media{height:12rem;flex:none;margin:0}img.media{width:100%;object-fit:cover}.media.tile{display:flex;align-items:center;justify-content:center;padding:var(--rc-s-4, 1rem);text-align:center;background:hsl(var(--tile-h) 42% 88%);color:hsl(var(--tile-h) 45% 28%)}@media (prefers-color-scheme: dark){.media.tile{background:hsl(var(--tile-h) 30% 22%);color:hsl(var(--tile-h) 35% 82%)}}.tile-name{font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.body{flex:1;min-height:0;display:flex;flex-direction:column;padding:var(--rc-s-4, 1rem);gap:var(--rc-s-2, 0.5rem)}.title{font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem);color:var(--rc-text, #2a2420);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.title:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.meta{margin:0;font-size:var(--rc-fs-sm, 0.875rem);color:var(--rc-text-muted, #6b5f55)}.actions-row{margin-top:auto;display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}.favorite{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer;border-radius:var(--rc-radius-sm, 6px)}.favorite[aria-pressed='true']{color:var(--rc-accent, #bc4e1c)}.favorite:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420)}.actions{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}"}},[769,"recipe-card",{recipe:[16],favorited:[4],href:[1]}]),l=n,d=function(){"undefined"!=typeof customElements&&["recipe-card"].forEach((e=>{"recipe-card"===e&&(customElements.get(o(e))||customElements.define(o(e),n))}))};export{l as RecipeCard,d as defineCustomElement}
1
+ import{proxyCustomElement as e,HTMLElement as r,createEvent as t,h as a,Host as i,transformTag as o}from"@stencil/core/internal/client";import{t as s}from"./tile-hue.js";import{H as c}from"./icons.js";const n=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.favoritetoggle=t(this,"favoritetoggle",7),this.recipeselect=t(this,"recipeselect",7)}recipe;favorited=!1;href;favoritetoggle;recipeselect;handleTitleClick=e=>{0!==e.button||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||(e.preventDefault(),this.recipeselect.emit({recipeId:this.recipe.id}))};handleFavoriteClick=()=>{this.favoritetoggle.emit({recipeId:this.recipe.id})};renderMedia(){const{thumbnail:e,name:r}=this.recipe;if(e)return a("img",{part:"media",class:"media",src:e,alt:"",loading:"lazy",decoding:"async"});const t=s(r);return a("div",{part:"media",class:"media tile",style:{"--tile-h":t+""}},a("span",{class:"tile-name"},r))}render(){const{recipe:e,favorited:r,href:t}=this;return e&&"object"==typeof e?a(i,null,a("article",{part:"card",class:"card"},this.renderMedia(),a("div",{class:"body"},a("a",{part:"title",class:"title",href:t,onClick:this.handleTitleClick},e.name),a("p",{class:"meta"},[e.category,e.area].filter(Boolean).join(" · ")),a("div",{class:"actions-row"},a("button",{type:"button",class:"favorite","aria-pressed":r?"true":"false","aria-label":r?`Remove ${e.name} from favorites`:`Add ${e.name} to favorites`,onClick:this.handleFavoriteClick},c(r)),a("div",{part:"actions",class:"actions"},a("slot",{name:"actions"})))))):a(i,null)}static get style(){return":host{display:block;height:22rem;font-family:var(--rc-font-text, system-ui, sans-serif)}.card{display:flex;flex-direction:column;height:100%;background:var(--rc-surface, #fff);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius, 14px);box-shadow:var(--rc-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));overflow:hidden;transition:box-shadow var(--rc-duration, 180ms) var(--rc-ease, ease), border-color var(--rc-duration, 180ms) var(--rc-ease, ease), transform var(--rc-duration, 180ms) var(--rc-ease, ease)}.card:hover{box-shadow:var(--rc-shadow-hover, 0 2px 8px rgba(0, 0, 0, 0.08));border-color:var(--rc-border-strong, #d4c8b8);transform:translateY(-2px)}.media{height:12rem;flex:none;margin:0}img.media{width:100%;object-fit:cover}.media.tile{display:flex;align-items:center;justify-content:center;padding:var(--rc-s-4, 1rem);text-align:center;background:hsl(var(--tile-h) 42% 88%);color:hsl(var(--tile-h) 45% 28%)}@media (prefers-color-scheme: dark){.media.tile{background:hsl(var(--tile-h) 30% 22%);color:hsl(var(--tile-h) 35% 82%)}}.tile-name{font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.body{flex:1;min-height:0;display:flex;flex-direction:column;padding:var(--rc-s-4, 1rem);gap:var(--rc-s-2, 0.5rem)}.title{font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem);color:var(--rc-text, #2a2420);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.title:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.meta{margin:0;font-size:var(--rc-fs-sm, 0.875rem);color:var(--rc-text-muted, #6b5f55)}.actions-row{margin-top:auto;display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}.favorite{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer;border-radius:var(--rc-radius-sm, 6px)}.favorite[aria-pressed='true']{color:var(--rc-accent, #bc4e1c)}.favorite:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420)}.actions{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}"}},[769,"recipe-card",{recipe:[16],favorited:[4],href:[1]}]),l=n,d=function(){"undefined"!=typeof customElements&&["recipe-card"].forEach((e=>{"recipe-card"===e&&(customElements.get(o(e))||customElements.define(o(e),n))}))};export{l as RecipeCard,d as defineCustomElement}
@@ -0,0 +1 @@
1
+ const t=[18,34,96,168,262,344];function e(e){let n=0;for(let t=0;t<e.length;t++)n+=e.charCodeAt(t);return t[n%t.length]}export{e as t}
@@ -29,6 +29,7 @@ export declare class PlannerDay {
29
29
  recipeId: string;
30
30
  }>;
31
31
  private handleToggle;
32
+ private renderThumb;
32
33
  private renderEntry;
33
34
  render(): any;
34
35
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ssingh465/recipe-ui",
3
- "version": "0.2.2",
3
+ "version": "0.2.3",
4
4
  "description": "Stencil web component library for Recipe Finder & Meal Planner",
5
5
  "license": "MIT",
6
6
  "repository": {