@gurpinderjitsingh/recipe-ui 0.12.0 → 0.13.0

package/dist/cjs/app-modal_7.cjs.entry.js

@@ -21,7 +21,7 @@ const RecipeCard = class {
         };
     }
     render() {
-        return (index.h("div", { key: '64d7f6fb92a01c650f3972c4c0f0164f1904d959', class: "card", onClick: () => this.cardClick.emit() }, index.h("div", { key: 'b9d014e3fc77346eaa76e6feb15369e9fb622624', class: "image-wrap" }, this.image ? index.h("img", { src: this.image, alt: this.recipeTitle }) : index.h("div", { class: "placeholder" }), index.h("button", { key: '1690299a371310ad5e6b0e0cc238853fb3e9f439', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), index.h("div", { key: '52e02f3b16c2ab51209c6812aa94b4642504836a', class: "body" }, index.h("h3", { key: '6df2f0f3146dd8ef5f91cce8e29f0dca00ffbd0a' }, this.recipeTitle), index.h("span", { key: '072d88d380bf578e5a7a967c55d257aa604de23a', class: "types" }, this.category && index.h("span", { key: '636f5c1a350c93c6111415ac8a25b05301a60899', class: "category" }, this.category), this.cuisine && index.h("span", { key: '149cc29a60528ecd2734650b52857a00a685cfd6', class: "cuisine" }, this.cuisine)), index.h("div", { key: '2a75de4cbb0eb4a4e37e35a29c48131c3e88080c', class: "actions" }, index.h("slot", { key: '3c249490cef1005c546c6ee139bb70acabc41535', name: "actions" })))));
+        return (index.h("div", { key: '57023f5420716527cf5bb0a6f775bb62a19f70b6', class: "card", onClick: () => this.cardClick.emit() }, index.h("div", { key: '137fab4bde9ee40e26217280ba5736b51b96767f', class: "image-wrap" }, this.image ? index.h("img", { src: this.image, alt: this.recipeTitle }) : index.h("div", { class: "placeholder" }), index.h("button", { key: '99b992c4c50082ec42c4b9473b8418d11fe02e10', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), index.h("div", { key: '34a0670cb5e1716e6d7b17d4b1ad3aa5e19b614f', class: "body" }, index.h("h3", { key: 'c2f5ed25dc9435c10a0b476cebf10e2a7fcfcbd4' }, this.recipeTitle), index.h("span", { key: 'e4ee0142c7290110c4cb61bd9a3cae4f2503ca69', class: "types" }, this.category && index.h("span", { key: '0faf05e5d79a532dd5947f4f51fc44ca75f51844', class: "category" }, this.category), this.cuisine && index.h("span", { key: 'e8aee0b08bed65c359fc589412d89a14ed81f091', class: "cuisine" }, this.cuisine)), index.h("div", { key: '7c000476afc7687f4318abf6df26ba83bac131e2', class: "actions" }, index.h("slot", { key: 'e613619696cb0f3967426e1dbb245d23a8913d3d', name: "actions" })))));
     }
 };
 RecipeCard.style = recipeCardCss();
@@ -58,8 +58,8 @@ const RecipeSearchBar = class {
         this.internalValue = newVal;
     }
     render() {
-        return (index.h("div", { key: 'd984cb3aeccf96cdedb62c741956b3d12615d884', class: "wrap" }, index.h("input", { key: 'c250c60908a8bb0c7d92da5eafe6ae6a61679067', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), this.showSearchButton &&
-            index.h("button", { key: '6e1dfe1e6b764d9166dbcdad615f177bcd7d8d8b', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
+        return (index.h("div", { key: 'd4be8af300e73f7a6526ec48993db0259aafcbe2', class: "wrap" }, index.h("input", { key: '896908d0b0e10212eae53284d7a6fad79f34c5de', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), this.showSearchButton &&
+            index.h("button", { key: '963394555e1febf733b50153e82858077021800c', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
     }
     static get watchers() { return {
         "value": [{
@@ -83,7 +83,7 @@ const RecipeFilterBar = class {
     }
     render() {
         const cats = Array.isArray(this.categories) ? this.categories : [];
-        return (index.h("div", { key: 'cc9c90176c682cf8b956a7b5e19096aac0891cb8', class: "wrap" }, index.h("button", { key: '7cc54529744166d2bcf5d45873aeaec0b3a37364', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (index.h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
+        return (index.h("div", { key: 'c19ffd90b0eff5c4b9b06602c9432b1210cc27f7', class: "wrap" }, index.h("button", { key: '3a629b0e211a6b9ab80b015da2d4be44c85f59a1', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (index.h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
     }
 };
 RecipeFilterBar.style = recipeFilterBarCss();
@@ -100,12 +100,12 @@ const RecipeRating = class {
     }
     render() {
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (index.h("div", { key: '901887f72d31a470b1264d427806ea6a6184db12', class: "wrap", role: this.readonly ? undefined : 'radiogroup' }, stars.map((s) => (index.h("span", { class: { star: true, filled: s <= this.value, clickable: !this.readonly }, onClick: () => !this.readonly && this.ratingChange.emit({ value: s }) }, "\u2605")))));
+        return (index.h("div", { key: '47d3b89bf17f95c679f7931ee61d7eea4fc5c556', class: "wrap", role: this.readonly ? undefined : 'radiogroup' }, stars.map((s) => (index.h("span", { class: { star: true, filled: s <= this.value, clickable: !this.readonly }, onClick: () => !this.readonly && this.ratingChange.emit({ value: s }) }, "\u2605")))));
     }
 };
 RecipeRating.style = recipeRatingCss();
 
-const recipeFormCss = () => `:host{display:block;font-family:system-ui, sans-serif}form{display:flex;flex-direction:column;gap:14px}label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#333;font-weight:600}input,textarea,select{font-weight:400;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit;background:#fff;transition:border-color 0.15s ease, box-shadow 0.15s ease}input:focus,textarea:focus,select:focus{outline:none;border-color:rgb(235, 98, 48);box-shadow:0 0 0 3px rgba(255, 107, 53, 0.14)}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:34px;cursor:pointer;color:#1f2937;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px}select:hover{border-color:#bbb}select:invalid,select option[value=""]{color:#9ca3af}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width: 480px){.row{grid-template-columns:1fr}}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.ingredient-row{display:flex;gap:6px}.ingredient-row input{flex:1}.ingredient-row button{border:none;background:#f4f4f4;border-radius:6px;cursor:pointer;width:30px}.add-btn{align-self:flex-start;border:1px dashed #bbb;background:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;color:#555}.error{color:#e74c3c;font-size:12px;font-weight:400}.footer{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}.cancel-btn{border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 16px;cursor:pointer}.save-btn{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:8px 18px;cursor:pointer;font-weight:600}`;
+const recipeFormCss = () => `:host{display:block;font-family:system-ui, sans-serif}form{display:flex;flex-direction:column;gap:14px}label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#333;font-weight:600}input,textarea,select{font-weight:400;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit;background:#fff;transition:border-color 0.15s ease, box-shadow 0.15s ease}input:focus,textarea:focus,select:focus{outline:none;border-color:rgb(235, 98, 48);box-shadow:0 0 0 3px rgba(255, 107, 53, 0.14)}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:34px;cursor:pointer;color:#1f2937;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px}select:hover{border-color:#bbb}select:invalid,select option[value=""]{color:#9ca3af}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width: 480px){.row{grid-template-columns:1fr}}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.ingredient-row{display:flex;gap:6px}.ingredient-row input{flex:1}.ingredient-row button{border:none;background:#f4f4f4;border-radius:6px;cursor:pointer;width:30px}.add-btn{align-self:flex-start;border:1px dashed #bbb;background:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;color:#555}.error{color:#e74c3c;font-size:12px;font-weight:400}.footer{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}.cancel-btn{border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 16px;cursor:pointer}.save-btn{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:8px 18px;cursor:pointer;font-weight:600}.required{color:red}`;
 
 const DEFAULT_CATEGORIES = [
     'Beef', 'Breakfast', 'Chicken', 'Dessert', 'Goat', 'Lamb',
@@ -119,6 +119,14 @@ const DEFAULT_AREAS = [
     'Portuguese', 'Russian', 'Spanish', 'Thai', 'Tunisian', 'Turkish',
     'Vietnamese', 'Other',
 ];
+const LIMITS = {
+    title: { min: 5, max: 100 },
+    instructions: { min: 20, max: 5000 },
+    ingredient: { min: 5, max: 200 },
+    customCategory: { min: 5, max: 40 },
+    customArea: { min: 5, max: 40 },
+    image: { max: 500 },
+};
 const RecipeForm = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -158,10 +166,9 @@ const RecipeForm = class {
             this.ingredients = [...this.ingredients, ''];
         };
         this.removeIngredient = (index) => {
-            this.ingredients = this.ingredients.filter((_, i) => i !== index);
             const next = this.ingredients.filter((_, i) => i !== index);
             this.ingredients = next;
-            this.clearErrorIf('ingredients', next.some((i) => i.trim()));
+            this.setFieldError('ingredients', this.validateIngredients(next));
         };
     }
     componentWillLoad() {
@@ -186,10 +193,83 @@ const RecipeForm = class {
     get fullAreaList() {
         return this.mergeList(this.areas, this.extraAreas);
     }
-    /** Removes a field's error as soon as it becomes valid, without waiting
-     *  for the next full submit — called from each field's input handler. */
-    clearErrorIf(key, isNowValid) {
-        if (isNowValid && this.errors[key]) {
+    // ---- Per-field validators. Each returns an error message, or null when
+    // the value is valid. Used both by validate() on submit AND live on every
+    // keystroke, so the two can never drift out of sync with each other. ----
+    validateTitle(value) {
+        const len = value.trim().length;
+        if (len === 0)
+            return 'Title is required.';
+        if (len < LIMITS.title.min)
+            return `Title must be at least ${LIMITS.title.min} characters.`;
+        if (len > LIMITS.title.max)
+            return `Title must be ${LIMITS.title.max} characters or fewer.`;
+        return null;
+    }
+    validateImage(value) {
+        if (value.trim().length > LIMITS.image.max) {
+            return `Image URL must be ${LIMITS.image.max} characters or fewer.`;
+        }
+        return null;
+    }
+    validateIngredients(list) {
+        const clean = list.map((i) => i.trim()).filter(Boolean);
+        if (clean.length === 0)
+            return 'Add at least one ingredient.';
+        if (clean.some((i) => i.length < LIMITS.ingredient.min)) {
+            return `Each ingredient must be at least ${LIMITS.ingredient.min} characters.`;
+        }
+        if (clean.some((i) => i.length > LIMITS.ingredient.max)) {
+            return `Each ingredient must be ${LIMITS.ingredient.max} characters or fewer.`;
+        }
+        return null;
+    }
+    validateInstructions(value) {
+        const len = value.trim().length;
+        if (len === 0)
+            return 'Instructions are required.';
+        if (len < LIMITS.instructions.min) {
+            return `Instructions must be at least ${LIMITS.instructions.min} characters — add a bit more detail.`;
+        }
+        if (len > LIMITS.instructions.max)
+            return `Instructions must be ${LIMITS.instructions.max} characters or fewer.`;
+        return null;
+    }
+    validateCategory(value) {
+        return value.trim() ? null : 'Category is required.';
+    }
+    validateCustomCategory(value) {
+        const len = value.trim().length;
+        if (len === 0)
+            return 'Enter a category name.';
+        if (len < LIMITS.customCategory.min || len > LIMITS.customCategory.max) {
+            return `Category name must be ${LIMITS.customCategory.min}-${LIMITS.customCategory.max} characters.`;
+        }
+        return null;
+    }
+    validateArea(value) {
+        return value.trim() ? null : 'Cuisine / Area is required.';
+    }
+    validateCustomArea(value) {
+        const len = value.trim().length;
+        if (len === 0)
+            return 'Enter a cuisine name.';
+        if (len < LIMITS.customArea.min || len > LIMITS.customArea.max) {
+            return `Cuisine name must be ${LIMITS.customArea.min}-${LIMITS.customArea.max} characters.`;
+        }
+        return null;
+    }
+    /** Sets or clears a single field's error live — the core of "show error
+     *  if any, else clear" behavior. Only touches `errors` when the message
+     *  actually changed, to avoid redundant re-renders on every keystroke. */
+    setFieldError(key, message) {
+        const current = this.errors[key] ?? null;
+        if (current === message)
+            return;
+        if (message) {
+            this.errors = { ...this.errors, [key]: message };
+        }
+        else {
             const next = { ...this.errors };
             delete next[key];
             this.errors = next;
@@ -231,28 +311,45 @@ const RecipeForm = class {
                 this.area = data.cuisine ?? '';
                 this.customArea = '';
             }
+            // Reset any stale errors when the form is (re)populated, e.g. when
+            // switching from "new recipe" to editing an existing one.
+            this.errors = {};
         }
     }
+    /** Full validation pass, run on submit. Reuses the same per-field
+     *  validators as live typing, so submit can never disagree with what
+     *  the user already saw on screen. */
     validate() {
         const errors = {};
-        if (!this.title.trim())
-            errors.title = 'Title is required.';
-        const cleanIngredients = this.ingredients.map((i) => i.trim()).filter(Boolean);
-        if (cleanIngredients.length === 0)
-            errors.ingredients = 'Add at least one ingredient.';
-        if (!this.instructions.trim())
-            errors.instructions = 'Instructions are required.';
-        if (!this.category.trim()) {
-            errors.category = 'Category is required.';
+        const titleErr = this.validateTitle(this.title);
+        if (titleErr)
+            errors.title = titleErr;
+        const imageErr = this.validateImage(this.image);
+        if (imageErr)
+            errors.image = imageErr;
+        const ingredientsErr = this.validateIngredients(this.ingredients);
+        if (ingredientsErr)
+            errors.ingredients = ingredientsErr;
+        const instructionsErr = this.validateInstructions(this.instructions);
+        if (instructionsErr)
+            errors.instructions = instructionsErr;
+        const categoryErr = this.validateCategory(this.category);
+        if (categoryErr) {
+            errors.category = categoryErr;
         }
-        else if (this.category === 'Other' && !this.customCategory.trim()) {
-            errors.customCategory = 'Enter a category name.';
+        else if (this.category === 'Other') {
+            const customCategoryErr = this.validateCustomCategory(this.customCategory);
+            if (customCategoryErr)
+                errors.customCategory = customCategoryErr;
         }
-        if (!this.area.trim()) {
-            errors.area = 'Cuisine / Area is required.';
+        const areaErr = this.validateArea(this.area);
+        if (areaErr) {
+            errors.area = areaErr;
         }
-        else if (this.area === 'Other' && !this.customArea.trim()) {
-            errors.customArea = 'Enter a cuisine name.';
+        else if (this.area === 'Other') {
+            const customAreaErr = this.validateCustomArea(this.customArea);
+            if (customAreaErr)
+                errors.customArea = customAreaErr;
         }
         this.errors = errors;
         return Object.keys(errors).length === 0;
@@ -261,33 +358,39 @@ const RecipeForm = class {
         const next = [...this.ingredients];
         next[index] = value;
         this.ingredients = next;
-        this.clearErrorIf('ingredients', next.some((i) => i.trim()));
+        this.setFieldError('ingredients', this.validateIngredients(next));
     }
     render() {
-        return (index.h("form", { key: 'c29ab62af9db4a95e11b75f25a2dd4c23e699dad', onSubmit: this.onSubmit }, index.h("slot", { key: 'ece02ab46a1075eaef912e8953e70faa11bc8d8d', name: "header" }), index.h("label", { key: '9e17e9ba311350d9235f5ec01c32743dfbf55b0e' }, "Title", index.h("input", { key: '2b8d632bc22eb5cde52198287ea2b19d87567dba', type: "text", value: this.title, onInput: (e) => {
-                (this.title = e.target.value);
-                this.clearErrorIf('title', !!this.title.trim());
-            } }), this.errors.title && index.h("span", { key: '3a34d1f5e1f43ef190983dd0883f16eb6775f07c', class: "error" }, this.errors.title)), index.h("label", { key: '6acda6ccaff2e0315cc1964ae30c18647fe97bd1' }, "Image URL", index.h("input", { key: '6bdc06a2bebd6b5ae984865aefe292426fbe38cb', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), index.h("div", { key: 'f6ef49aaace211659296e93b4b5b47b29db73ac6', class: "row" }, index.h("label", { key: '9610c81a85ebddc2da4bdadcdee68ddea78e28d4' }, "Category", index.h("select", { key: '46542ff9e2c0f15d60be6744e063f3c860475772', onInput: (e) => {
-                (this.category = e.target.value);
-                this.clearErrorIf('category', !!this.category);
+        return (index.h("form", { key: 'f562e5fa4cdd1f49b6b119471bf7773e319423e8', onSubmit: this.onSubmit }, index.h("slot", { key: '0bcfd3c288244952e69b1206449d6046ff9f832b', name: "header" }), index.h("label", { key: 'b94ca99a985de9ab0a4a827854c6e9f3c2c32228' }, index.h("span", { key: 'ea3f3a53edb24ec2a8421c2b97fee17877fa507a' }, "Title ", index.h("span", { key: 'ef3093980bc013d65787ae4a0e04c5a86564433e', class: "required" }, "*")), index.h("input", { key: 'f9748efc0027f3783d2961d11524c59ca58121fe', type: "text", maxLength: LIMITS.title.max, value: this.title, onInput: (e) => {
+                this.title = e.target.value;
+                this.setFieldError('title', this.validateTitle(this.title));
+            } }), index.h("span", { key: '0ac83523c019253560b219137390b8fdd3626323', class: "char-count" }, this.title.trim().length, "/", LIMITS.title.max), this.errors.title && index.h("span", { key: '2f1a55d2aa593182c3fe6330b3248985331aca2e', class: "error" }, this.errors.title)), index.h("label", { key: 'aa7d01fd11b9b4ea0551e8a157a70a666b645720' }, "Image URL", index.h("input", { key: 'fd26aabc19167c469419a1714358615f62b125b9', type: "text", maxLength: LIMITS.image.max, value: this.image, onInput: (e) => {
+                this.image = e.target.value;
+                this.setFieldError('image', this.validateImage(this.image));
+            } }), this.errors.image && index.h("span", { key: '3f9561c7ee8433cee875c638edcb069baef96b86', class: "error" }, this.errors.image)), index.h("div", { key: '4253c71219c77f40ef8ec811700fa2ffb4e23d55', class: "row" }, index.h("label", { key: '7b892f3e2e87d7ab647050859996f7fcccbec42c' }, index.h("span", { key: '3f63f3f57f9df8673b54c42251282918fee1be69' }, "Category ", index.h("span", { key: 'd535dbd85bc96e1af88511f903d96046f23cb283', class: "required" }, "*")), index.h("select", { key: '311099318b5b7e6212eae0c9803adcf2437aa024', onInput: (e) => {
+                this.category = e.target.value;
+                this.setFieldError('category', this.validateCategory(this.category));
                 if (this.category !== 'Other')
-                    this.clearErrorIf('customCategory', true);
-            } }, index.h("option", { key: '2741b90edd32cb12903e877cbfa2db3b5ff04071', value: "", selected: this.category === '' }, "Select a category\u2026"), this.fullCategoryList.map((c) => (index.h("option", { value: c, selected: c === this.category }, c)))), this.errors.category && index.h("span", { key: 'dc8e7ab5a6decdece1b4559af856997251335abf', class: "error" }, this.errors.category)), index.h("label", { key: '792cb1c4fd6052f9d88c52649c6eb4dc064f0071' }, "Cuisine / Area", index.h("select", { key: '06a917ac951a4c6d3e8390534690545a1967581a', onInput: (e) => {
-                (this.area = e.target.value);
-                this.clearErrorIf('area', !!this.area);
+                    this.setFieldError('customCategory', null);
+                else
+                    this.setFieldError('customCategory', this.validateCustomCategory(this.customCategory));
+            } }, index.h("option", { key: '9ab9ed037d1cabc6829cf35bf8c77d5ae8ff6518', value: "", selected: this.category === '' }, "Select a category\u2026"), this.fullCategoryList.map((c) => (index.h("option", { value: c, selected: c === this.category }, c)))), this.errors.category && index.h("span", { key: '48a10209ff1b6425220388ba0f315899947bb37a', class: "error" }, this.errors.category)), index.h("label", { key: '294923e0daebc5aa126e66c6e8319ca087544dc4' }, index.h("span", { key: 'e9fc761f634c20cfc02829fcfeb4767dfaf4c69f' }, "Cuisine / Area ", index.h("span", { key: '52254653a745ef5459e7efd55d688e37324d358e', class: "required" }, "*")), index.h("select", { key: '7938a0a5b0bb6004b29578aee87cf5711e1d935d', onInput: (e) => {
+                this.area = e.target.value;
+                this.setFieldError('area', this.validateArea(this.area));
                 if (this.area !== 'Other')
-                    this.clearErrorIf('customArea', true);
-            } }, index.h("option", { key: '264c39814065b3f07626975b96eca6b7e1c9bb83', value: "", selected: this.area === '' }, "Select a cuisine\u2026"), this.fullAreaList.map((a) => (index.h("option", { value: a, selected: a === this.area }, a)))), this.errors.area && index.h("span", { key: 'f1a562402420fb7a813dd4184b439c03c71d93d9', class: "error" }, this.errors.area))), (this.category === 'Other' || this.area === 'Other') && (index.h("div", { key: '3c20e6b5b678027d711c7976c60e3be92d02fae3', class: "row" }, this.category === 'Other' && (index.h("label", { key: '4cd14baeff186c7db8fabe57b21b241567528437', class: "custom-area-field" }, "Enter category name", index.h("input", { key: 'b1880e7aaadb3ade3c980c7f44d6b0a8d4fc3923', type: "text", placeholder: "e.g. Brunch", value: this.customCategory, onInput: (e) => {
-                (this.customCategory = e.target.value);
+                    this.setFieldError('customArea', null);
+                else
+                    this.setFieldError('customArea', this.validateCustomArea(this.customArea));
+            } }, index.h("option", { key: '2e3a43ac518d6d6662cda3c269055cac2d142cd0', value: "", selected: this.area === '' }, "Select a cuisine\u2026"), this.fullAreaList.map((a) => (index.h("option", { value: a, selected: a === this.area }, a)))), this.errors.area && index.h("span", { key: '9776cc4829e490a06c34ba6e6d8482fbda1499af', class: "error" }, this.errors.area))), (this.category === 'Other' || this.area === 'Other') && (index.h("div", { key: 'edf7709c6bb1fdf2d11d360dd4bff73067ace685', class: "row" }, this.category === 'Other' && (index.h("label", { key: 'e1b54a1298d4d9b7f2db16be20095c229fd7d72b', class: "custom-area-field" }, "Enter category name", index.h("input", { key: 'e538a1f8da6e55875d7b37538a205bfe09c7e48a', type: "text", placeholder: "e.g. Brunch", maxLength: LIMITS.customCategory.max, value: this.customCategory, onInput: (e) => {
                 this.customCategory = e.target.value;
-                this.clearErrorIf('customCategory', !!this.customCategory.trim());
-            } }), this.errors.customCategory && index.h("span", { key: 'abd5094a23a182458ff2b76a58b55d65a9540c83', class: "error" }, this.errors.customCategory))), this.area === 'Other' && (index.h("label", { key: '696c0cc6af2cf16df8559da441e38635d8e0012c', class: "custom-area-field" }, "Enter cuisine name", index.h("input", { key: '663fee3941527c736d953cc993b886746dabab23', type: "text", placeholder: "e.g. Ethiopian", value: this.customArea, onInput: (e) => {
+                this.setFieldError('customCategory', this.validateCustomCategory(this.customCategory));
+            } }), this.errors.customCategory && index.h("span", { key: 'd76519fb39dbc17512c63f8923587219c6f126d1', class: "error" }, this.errors.customCategory))), this.area === 'Other' && (index.h("label", { key: '0b46c004deda4af6a71a503f950f990d340850f8', class: "custom-area-field" }, "Enter cuisine name", index.h("input", { key: '3f312b2aaa6b0345ac476a0aa7919ce5638f0205', type: "text", placeholder: "e.g. Ethiopian", maxLength: LIMITS.customArea.max, value: this.customArea, onInput: (e) => {
                 this.customArea = e.target.value;
-                this.clearErrorIf('customArea', !!this.customArea.trim());
-            } }), this.errors.customArea && index.h("span", { key: '6e1b7ebfac7166fb1120b0d8f914bb076f5e40ee', class: "error" }, this.errors.customArea))))), index.h("div", { key: 'fe85b73291a5ee955d069f20ddf33835d09b95bd', class: "field" }, index.h("span", { key: 'fd010d7b12306bd4306caf03ebd972feb1e0ebb9' }, "Ingredients"), this.ingredients.map((ing, i) => (index.h("div", { class: "ingredient-row" }, index.h("input", { type: "text", value: ing, onInput: (e) => this.updateIngredient(i, e.target.value) }), index.h("button", { type: "button", onClick: () => this.removeIngredient(i), "aria-label": "Remove" }, "\u2715")))), index.h("button", { key: '8168f7e7f4bef8be1e74d1adf377b5471701c0ff', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && index.h("span", { key: '3e35a8fe02833b27a333fa157548b88b3f5e3842', class: "error" }, this.errors.ingredients)), index.h("label", { key: 'c5c583cba5363ce35e6d41f95917bc49e3cca02d' }, "Instructions", index.h("textarea", { key: '514c219989a01cf1ad77739bd6c0df066362c689', rows: 5, onInput: (e) => {
+                this.setFieldError('customArea', this.validateCustomArea(this.customArea));
+            } }), this.errors.customArea && index.h("span", { key: 'a7d0487409a2f2338fd32ce23770da1fff318189', class: "error" }, this.errors.customArea))))), index.h("div", { key: '2af4f405001d202a86c0e94426db89b46d4af0c5', class: "field" }, index.h("span", { key: '1cc25f9cacb59981f1c8b6faf5c7669693454d86' }, "Ingredients ", index.h("span", { key: '12463cc84c7df68329044f6e00bbf489dc02efbc', class: "required" }, "*")), this.ingredients.map((ing, i) => (index.h("div", { class: "ingredient-row" }, index.h("input", { type: "text", maxLength: LIMITS.ingredient.max, value: ing, onInput: (e) => this.updateIngredient(i, e.target.value) }), index.h("button", { type: "button", onClick: () => this.removeIngredient(i), "aria-label": "Remove" }, "\u2715")))), index.h("button", { key: 'faadffd1444fa729327bb44e2ba430a38fb8d0f2', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && index.h("span", { key: '93e3101aa6f8aa6adb28a5cb121cc2f735bdf3cb', class: "error" }, this.errors.ingredients)), index.h("label", { key: '142d68b899f6264366351ff0edefac0755f5c021' }, index.h("span", { key: 'd0469328a9f808854e2bc1daeb2df3a2562300e1' }, "Instructions ", index.h("span", { key: 'df0b49c132848b889adc1a070a17d90505f51f9b', class: "required" }, "*"), " "), index.h("textarea", { key: '790e5cb9c24947648df27697c7148636e2862bd5', rows: 5, maxLength: LIMITS.instructions.max, onInput: (e) => {
                 this.instructions = e.target.value;
-                this.clearErrorIf('instructions', !!this.instructions.trim());
-            } }, this.instructions), this.errors.instructions && index.h("span", { key: '89881e3b0d4f864f7ccc835d86b094f367b54b2e', class: "error" }, this.errors.instructions)), index.h("div", { key: 'b9a812287af44062e1c68034881ba62321b0e660', class: "footer" }, index.h("slot", { key: 'a8307179d95cfd713d8f5fbe6e996fefb1d54907', name: "footer" }), index.h("button", { key: 'aa75decaf67c74a183af182864a37a6cd37b56ff', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), index.h("button", { key: '13ea35b114f1a7721347f986c6c4e64968583025', type: "submit", class: "save-btn" }, "Save Recipe"))));
+                this.setFieldError('instructions', this.validateInstructions(this.instructions));
+            } }, this.instructions), index.h("span", { key: 'ae15de2b6a210955334f16fcc0040a739bf62f31', class: "char-count" }, this.instructions.trim().length, "/", LIMITS.instructions.max), this.errors.instructions && index.h("span", { key: 'db148c0b5347d6a899adb4daf18a59ea19221e7f', class: "error" }, this.errors.instructions)), index.h("div", { key: 'b42405e2778e862115d5841843a4e63bf5ad5e7a', class: "footer" }, index.h("slot", { key: 'c4a8533636d1dd5fac2b391e36314569f05a4d01', name: "footer" }), index.h("button", { key: '4ea910ae3983fcdb133dbdc38ad122b607eb3d5c', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), index.h("button", { key: 'a2ea39907bba8f4c35b8f2eaaa501f31bdf17130', type: "submit", class: "save-btn" }, "Save Recipe"))));
     }
     static get watchers() { return {
         "initialData": [{

package/dist/cjs/app-toast.cjs.entry.js

@@ -18,7 +18,7 @@ const AppToast = class {
         }
     }
     render() {
-        return (index.h("div", { key: '65346b009a5016ad30b1ab85dc9c1d9bbd9b52f1', class: `toast ${this.type}` }, index.h("span", { key: '4bb1144fa221047ab51ab1b40647b07cc792d358' }, this.message), index.h("button", { key: '7dcd351feccbce93b6959cd04fb0372d42099c50', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
+        return (index.h("div", { key: '6d17f8582228f7ec27219c9a9a39d5bd76a780dd', class: `toast ${this.type}` }, index.h("span", { key: 'c0524ae830e6c3bdd73f1e0561caaf5a4ae73468' }, this.message), index.h("button", { key: '7aab76915df455b48d2ca6a5d9e0985f7bb87907', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
     }
 };
 AppToast.style = appToastCss();

package/dist/collection/components/app-toast/app-toast.js

@@ -12,7 +12,7 @@ export class AppToast {
         }
     }
     render() {
-        return (h("div", { key: '65346b009a5016ad30b1ab85dc9c1d9bbd9b52f1', class: `toast ${this.type}` }, h("span", { key: '4bb1144fa221047ab51ab1b40647b07cc792d358' }, this.message), h("button", { key: '7dcd351feccbce93b6959cd04fb0372d42099c50', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
+        return (h("div", { key: '6d17f8582228f7ec27219c9a9a39d5bd76a780dd', class: `toast ${this.type}` }, h("span", { key: 'c0524ae830e6c3bdd73f1e0561caaf5a4ae73468' }, this.message), h("button", { key: '7aab76915df455b48d2ca6a5d9e0985f7bb87907', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
     }
     static get is() { return "app-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class RecipeCard {
         };
     }
     render() {
-        return (h("div", { key: '64d7f6fb92a01c650f3972c4c0f0164f1904d959', class: "card", onClick: () => this.cardClick.emit() }, h("div", { key: 'b9d014e3fc77346eaa76e6feb15369e9fb622624', class: "image-wrap" }, this.image ? h("img", { src: this.image, alt: this.recipeTitle }) : h("div", { class: "placeholder" }), h("button", { key: '1690299a371310ad5e6b0e0cc238853fb3e9f439', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), h("div", { key: '52e02f3b16c2ab51209c6812aa94b4642504836a', class: "body" }, h("h3", { key: '6df2f0f3146dd8ef5f91cce8e29f0dca00ffbd0a' }, this.recipeTitle), h("span", { key: '072d88d380bf578e5a7a967c55d257aa604de23a', class: "types" }, this.category && h("span", { key: '636f5c1a350c93c6111415ac8a25b05301a60899', class: "category" }, this.category), this.cuisine && h("span", { key: '149cc29a60528ecd2734650b52857a00a685cfd6', class: "cuisine" }, this.cuisine)), h("div", { key: '2a75de4cbb0eb4a4e37e35a29c48131c3e88080c', class: "actions" }, h("slot", { key: '3c249490cef1005c546c6ee139bb70acabc41535', name: "actions" })))));
+        return (h("div", { key: '57023f5420716527cf5bb0a6f775bb62a19f70b6', class: "card", onClick: () => this.cardClick.emit() }, h("div", { key: '137fab4bde9ee40e26217280ba5736b51b96767f', class: "image-wrap" }, this.image ? h("img", { src: this.image, alt: this.recipeTitle }) : h("div", { class: "placeholder" }), h("button", { key: '99b992c4c50082ec42c4b9473b8418d11fe02e10', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), h("div", { key: '34a0670cb5e1716e6d7b17d4b1ad3aa5e19b614f', class: "body" }, h("h3", { key: 'c2f5ed25dc9435c10a0b476cebf10e2a7fcfcbd4' }, this.recipeTitle), h("span", { key: 'e4ee0142c7290110c4cb61bd9a3cae4f2503ca69', class: "types" }, this.category && h("span", { key: '0faf05e5d79a532dd5947f4f51fc44ca75f51844', class: "category" }, this.category), this.cuisine && h("span", { key: 'e8aee0b08bed65c359fc589412d89a14ed81f091', class: "cuisine" }, this.cuisine)), h("div", { key: '7c000476afc7687f4318abf6df26ba83bac131e2', class: "actions" }, h("slot", { key: 'e613619696cb0f3967426e1dbb245d23a8913d3d', name: "actions" })))));
     }
     static get is() { return "recipe-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/recipe-filter-bar/recipe-filter-bar.js

@@ -15,7 +15,7 @@ export class RecipeFilterBar {
     }
     render() {
         const cats = Array.isArray(this.categories) ? this.categories : [];
-        return (h("div", { key: 'cc9c90176c682cf8b956a7b5e19096aac0891cb8', class: "wrap" }, h("button", { key: '7cc54529744166d2bcf5d45873aeaec0b3a37364', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
+        return (h("div", { key: 'c19ffd90b0eff5c4b9b06602c9432b1210cc27f7', class: "wrap" }, h("button", { key: '3a629b0e211a6b9ab80b015da2d4be44c85f59a1', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
     }
     static get is() { return "recipe-filter-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -138,4 +138,8 @@ select option[value=""] {
   padding: 8px 18px;
   cursor: pointer;
   font-weight: 600;
+}
+
+.required {
+  color: red;
 }