ng-miam 3.4.1 → 3.4.2

package/bundles/ng-miam.umd.js

@@ -1574,7 +1574,8 @@
                         return {
                             name: ingredient.attributes.name,
                             qty: (+ingredient.quantity) / (+_this.guests || 1),
-                            unit: ingredient.attributes.unit
+                            unit: ingredient.attributes.unit,
+                            picture: ingredient.picture
                         };
                     });
                 }
@@ -1941,14 +1942,15 @@
         function Ingredient() {
             var _this = _super.apply(this, __spread(arguments)) || this;
             _this.attributes = {
-                'name': '',
-                'quantity': '',
-                'unit': '',
-                'active': true,
-                'forced-eans': []
+                name: '',
+                quantity: '',
+                unit: '',
+                active: true,
+                'forced-eans': [],
+                picture: ''
             };
             _this.relationships = {
-                'recipe': new i1.DocumentResource(),
+                recipe: new i1.DocumentResource(),
                 'quantity-unit': new i1.DocumentResource()
             };
             return _this;
@@ -1966,6 +1968,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(Ingredient.prototype, "picture", {
+            get: function () {
+                return this.attributes.picture;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return Ingredient;
     }(i1.Resource));
 
@@ -3301,6 +3310,7 @@
             this.breakpointObserver = breakpointObserver;
             this.videoRecipesEnabled = false;
             this.articlesInCatalogEnabled = false;
+            this.defaultIngredientPicture = 'https://storage.googleapis.com/assets.miam.tech/generic/images/default-ingredient-picture.svg';
             this.isSmallScreen$ = new rxjs.BehaviorSubject(false);
             this.miam = {
                 user: {
@@ -3377,6 +3387,9 @@
                     hidden: this.recipesService.hidden,
                     search: function (provider, query) {
                         return _this.recipesService.all({ remotefilter: { recipe_provider_id: provider, search: query } }).pipe(operators.skipWhile(function (result) { return !result; }), operators.map(function (response) { return response['data']; }));
+                    },
+                    setDefaultIngredientPicture: function (url) {
+                        _this.defaultIngredientPicture = url;
                     }
                 },
                 analytics: {
@@ -13975,62 +13988,63 @@
     })();
 
     var _c0$r = ["topContainerImg"];
-    function RecipeDetailsComponent_div_0_img_5_Template(rf, ctx) {
+    var _c1$b = ["mainContainer"];
+    function RecipeDetailsComponent_div_0_img_6_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelement(0, "img", 39);
+            i0.ɵɵelement(0, "img", 40);
         }
         if (rf & 2) {
-            var ctx_r4 = i0.ɵɵnextContext(2);
-            i0.ɵɵproperty("src", ctx_r4.recipe == null ? null : ctx_r4.recipe.attributes["media-url"], i0.ɵɵsanitizeUrl);
+            var ctx_r5 = i0.ɵɵnextContext(2);
+            i0.ɵɵproperty("src", ctx_r5.recipe == null ? null : ctx_r5.recipe.attributes["media-url"], i0.ɵɵsanitizeUrl);
         }
     }
-    function RecipeDetailsComponent_div_0_div_6_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_div_7_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelement(0, "div", 40);
+            i0.ɵɵelement(0, "div", 41);
         }
     }
-    function RecipeDetailsComponent_div_0_youtube_player_7_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_youtube_player_8_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelement(0, "youtube-player", 41);
+            i0.ɵɵelement(0, "youtube-player", 42);
         }
         if (rf & 2) {
-            var ctx_r6 = i0.ɵɵnextContext(2);
-            i0.ɵɵproperty("videoId", ctx_r6.recipe.videoId)("width", ctx_r6.playerWidth)("height", ctx_r6.playerHeight);
+            var ctx_r7 = i0.ɵɵnextContext(2);
+            i0.ɵɵproperty("videoId", ctx_r7.recipe.videoId)("width", ctx_r7.playerWidth)("height", ctx_r7.playerHeight);
         }
     }
-    function RecipeDetailsComponent_div_0_div_8_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_div_9_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 42);
+            i0.ɵɵelementStart(0, "div", 43);
             i0.ɵɵtext(1, "D\u00E9j\u00E0 ajout\u00E9e");
             i0.ɵɵelementEnd();
         }
     }
-    function RecipeDetailsComponent_div_0_ng_miam_like_button_11_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_ng_miam_like_button_12_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelement(0, "ng-miam-like-button", 43);
+            i0.ɵɵelement(0, "ng-miam-like-button", 44);
         }
         if (rf & 2) {
-            var ctx_r8 = i0.ɵɵnextContext(2);
-            i0.ɵɵproperty("recipe", ctx_r8.recipe)("width", 26)("height", 26);
+            var ctx_r9 = i0.ɵɵnextContext(2);
+            i0.ɵɵproperty("recipe", ctx_r9.recipe)("width", 26)("height", 26);
         }
     }
-    function RecipeDetailsComponent_div_0_img_15_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_img_16_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelement(0, "img", 44);
+            i0.ɵɵelement(0, "img", 45);
         }
         if (rf & 2) {
-            var ctx_r9 = i0.ɵɵnextContext(2);
-            i0.ɵɵpropertyInterpolate("src", ctx_r9.recipe.filigraneLogoUrl, i0.ɵɵsanitizeUrl);
+            var ctx_r10 = i0.ɵɵnextContext(2);
+            i0.ɵɵpropertyInterpolate("src", ctx_r10.recipe.filigraneLogoUrl, i0.ɵɵsanitizeUrl);
         }
     }
-    function RecipeDetailsComponent_div_0_div_22_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_div_23_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 45);
+            i0.ɵɵelementStart(0, "div", 46);
             i0.ɵɵelementStart(1, "span");
             i0.ɵɵtext(2, "Pr\u00E9paration");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "div", 46);
-            i0.ɵɵelement(4, "ng-miam-icon", 47);
+            i0.ɵɵelementStart(3, "div", 47);
+            i0.ɵɵelement(4, "ng-miam-icon", 48);
             i0.ɵɵelementStart(5, "span");
             i0.ɵɵtext(6);
             i0.ɵɵelementEnd();
@@ -14038,21 +14052,21 @@
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ctx_r10 = i0.ɵɵnextContext(2);
+            var ctx_r11 = i0.ɵɵnextContext(2);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("width", 24)("height", 24)("iconName", ctx_r10.icon.Preparation);
+            i0.ɵɵproperty("width", 24)("height", 24)("iconName", ctx_r11.icon.Preparation);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx_r10.recipe == null ? null : ctx_r10.recipe.preparationTime);
+            i0.ɵɵtextInterpolate(ctx_r11.recipe == null ? null : ctx_r11.recipe.preparationTime);
         }
     }
-    function RecipeDetailsComponent_div_0_div_23_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_div_24_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 45);
+            i0.ɵɵelementStart(0, "div", 46);
             i0.ɵɵelementStart(1, "span");
             i0.ɵɵtext(2, "Cuisson");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "div", 46);
-            i0.ɵɵelement(4, "ng-miam-icon", 47);
+            i0.ɵɵelementStart(3, "div", 47);
+            i0.ɵɵelement(4, "ng-miam-icon", 48);
             i0.ɵɵelementStart(5, "span");
             i0.ɵɵtext(6);
             i0.ɵɵelementEnd();
@@ -14060,21 +14074,21 @@
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ctx_r11 = i0.ɵɵnextContext(2);
+            var ctx_r12 = i0.ɵɵnextContext(2);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("width", 24)("height", 24)("iconName", ctx_r11.icon.Hot);
+            i0.ɵɵproperty("width", 24)("height", 24)("iconName", ctx_r12.icon.Hot);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx_r11.recipe == null ? null : ctx_r11.recipe.cookingTime);
+            i0.ɵɵtextInterpolate(ctx_r12.recipe == null ? null : ctx_r12.recipe.cookingTime);
         }
     }
-    function RecipeDetailsComponent_div_0_div_24_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_div_25_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 45);
+            i0.ɵɵelementStart(0, "div", 46);
             i0.ɵɵelementStart(1, "span");
             i0.ɵɵtext(2, "Repos");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "div", 46);
-            i0.ɵɵelement(4, "ng-miam-icon", 47);
+            i0.ɵɵelementStart(3, "div", 47);
+            i0.ɵɵelement(4, "ng-miam-icon", 48);
             i0.ɵɵelementStart(5, "span");
             i0.ɵɵtext(6);
             i0.ɵɵelementEnd();
@@ -14082,463 +14096,478 @@
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ctx_r12 = i0.ɵɵnextContext(2);
+            var ctx_r13 = i0.ɵɵnextContext(2);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("width", 24)("height", 24)("iconName", ctx_r12.icon.Wait);
+            i0.ɵɵproperty("width", 24)("height", 24)("iconName", ctx_r13.icon.Wait);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx_r12.recipe == null ? null : ctx_r12.recipe.restingTime);
+            i0.ɵɵtextInterpolate(ctx_r13.recipe == null ? null : ctx_r13.recipe.restingTime);
         }
     }
-    function RecipeDetailsComponent_div_0_ng_container_34_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_ng_container_35_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementContainerStart(0);
-            i0.ɵɵelement(1, "ng-miam-icon", 48);
+            i0.ɵɵelement(1, "ng-miam-icon", 49);
             i0.ɵɵelementContainerEnd();
         }
         if (rf & 2) {
-            var ctx_r13 = i0.ɵɵnextContext(2);
+            var ctx_r14 = i0.ɵɵnextContext(2);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("width", 56)("height", 16)("iconName", ctx_r13.icon.DifficultyLow);
+            i0.ɵɵproperty("width", 56)("height", 16)("iconName", ctx_r14.icon.DifficultyLow);
         }
     }
-    function RecipeDetailsComponent_div_0_ng_container_35_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_ng_container_36_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementContainerStart(0);
-            i0.ɵɵelement(1, "ng-miam-icon", 48);
+            i0.ɵɵelement(1, "ng-miam-icon", 49);
             i0.ɵɵelementContainerEnd();
         }
         if (rf & 2) {
-            var ctx_r14 = i0.ɵɵnextContext(2);
+            var ctx_r15 = i0.ɵɵnextContext(2);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("width", 56)("height", 16)("iconName", ctx_r14.icon.DifficultyMedium);
+            i0.ɵɵproperty("width", 56)("height", 16)("iconName", ctx_r15.icon.DifficultyMedium);
         }
     }
-    function RecipeDetailsComponent_div_0_ng_container_36_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_ng_container_37_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementContainerStart(0);
-            i0.ɵɵelement(1, "ng-miam-icon", 48);
+            i0.ɵɵelement(1, "ng-miam-icon", 49);
             i0.ɵɵelementContainerEnd();
         }
         if (rf & 2) {
-            var ctx_r15 = i0.ɵɵnextContext(2);
+            var ctx_r16 = i0.ɵɵnextContext(2);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("width", 56)("height", 16)("iconName", ctx_r15.icon.DifficultyHight);
+            i0.ɵɵproperty("width", 56)("height", 16)("iconName", ctx_r16.icon.DifficultyHight);
         }
     }
-    function RecipeDetailsComponent_div_0_ng_container_37_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_ng_container_38_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementContainer(0);
         }
     }
-    function RecipeDetailsComponent_div_0_button_50_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_button_51_Template(rf, ctx) {
         if (rf & 1) {
-            var _r24_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "button", 49);
-            i0.ɵɵlistener("click", function RecipeDetailsComponent_div_0_button_50_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24_1); var ctx_r23 = i0.ɵɵnextContext(2); return ctx_r23.addRecipe(); });
+            var _r25_1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "button", 50);
+            i0.ɵɵlistener("click", function RecipeDetailsComponent_div_0_button_51_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r25_1); var ctx_r24 = i0.ɵɵnextContext(2); return ctx_r24.addRecipe(); });
             i0.ɵɵelementStart(1, "span");
             i0.ɵɵtext(2);
             i0.ɵɵpipe(3, "async");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(4, "ng-miam-icon", 50);
+            i0.ɵɵelement(4, "ng-miam-icon", 51);
             i0.ɵɵpipe(5, "async");
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ctx_r17 = i0.ɵɵnextContext(2);
+            var ctx_r18 = i0.ɵɵnextContext(2);
             var tmp_0_0 = null;
             var tmp_3_0 = null;
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", ((tmp_0_0 = i0.ɵɵpipeBind1(3, 4, ctx_r17.groceriesListsService.list$)) == null ? null : tmp_0_0.hasRecipe(ctx_r17.recipe == null ? null : ctx_r17.recipe.id)) ? "Voir le d\u00E9tail" : "S\u00E9lectionner ce repas", " ");
+            i0.ɵɵtextInterpolate1(" ", ((tmp_0_0 = i0.ɵɵpipeBind1(3, 4, ctx_r18.groceriesListsService.list$)) == null ? null : tmp_0_0.hasRecipe(ctx_r18.recipe == null ? null : ctx_r18.recipe.id)) ? "Voir le d\u00E9tail" : "S\u00E9lectionner ce repas", " ");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("width", 24)("height", 24)("iconName", ((tmp_3_0 = i0.ɵɵpipeBind1(5, 6, ctx_r17.groceriesListsService.list$)) == null ? null : tmp_3_0.hasRecipe(ctx_r17.recipe == null ? null : ctx_r17.recipe.id)) ? ctx_r17.icon.CheckList : ctx_r17.icon.Cart);
+            i0.ɵɵproperty("width", 24)("height", 24)("iconName", ((tmp_3_0 = i0.ɵɵpipeBind1(5, 6, ctx_r18.groceriesListsService.list$)) == null ? null : tmp_3_0.hasRecipe(ctx_r18.recipe == null ? null : ctx_r18.recipe.id)) ? ctx_r18.icon.CheckList : ctx_r18.icon.Cart);
         }
     }
-    function RecipeDetailsComponent_div_0_ng_miam_addon_link_53_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_ng_miam_addon_link_54_Template(rf, ctx) {
         if (rf & 1) {
-            var _r26_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "ng-miam-addon-link", 51);
-            i0.ɵɵlistener("showAddon", function RecipeDetailsComponent_div_0_ng_miam_addon_link_53_Template_ng_miam_addon_link_showAddon_0_listener() { i0.ɵɵrestoreView(_r26_1); var ctx_r25 = i0.ɵɵnextContext(2); return ctx_r25.toggleAddon(); });
+            var _r27_1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "ng-miam-addon-link", 52);
+            i0.ɵɵlistener("showAddon", function RecipeDetailsComponent_div_0_ng_miam_addon_link_54_Template_ng_miam_addon_link_showAddon_0_listener() { i0.ɵɵrestoreView(_r27_1); var ctx_r26 = i0.ɵɵnextContext(2); return ctx_r26.toggleAddon(); });
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ctx_r18 = i0.ɵɵnextContext(2);
-            i0.ɵɵproperty("recipe", ctx_r18.recipe);
+            var ctx_r19 = i0.ɵɵnextContext(2);
+            i0.ɵɵproperty("recipe", ctx_r19.recipe);
         }
     }
-    var _c1$b = function (a0) { return { "checked": a0 }; };
-    function RecipeDetailsComponent_div_0_div_54_div_12_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_div_55_div_12_div_1_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 65);
-            i0.ɵɵelementStart(1, "div");
-            i0.ɵɵtext(2);
-            i0.ɵɵpipe(3, "capitalizeFirstLetter");
+            i0.ɵɵelementStart(0, "div");
+            i0.ɵɵelement(1, "img", 68);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 59);
-            i0.ɵɵtext(5);
-            i0.ɵɵpipe(6, "readableFloatNumber");
+        }
+        if (rf & 2) {
+            var ingredient_r30 = i0.ɵɵnextContext().$implicit;
+            var ctx_r32 = i0.ɵɵnextContext(3);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("src", ctx_r32.ingredientPicture(ingredient_r30), i0.ɵɵsanitizeUrl);
+        }
+    }
+    var _c2$3 = function (a0) { return { "checked": a0 }; };
+    function RecipeDetailsComponent_div_0_div_55_div_12_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 66);
+            i0.ɵɵtemplate(1, RecipeDetailsComponent_div_0_div_55_div_12_div_1_Template, 2, 1, "div", 67);
+            i0.ɵɵelementStart(2, "div");
+            i0.ɵɵtext(3);
+            i0.ɵɵpipe(4, "capitalizeFirstLetter");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 60);
+            i0.ɵɵtext(6);
+            i0.ɵɵpipe(7, "readableFloatNumber");
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ingredient_r29 = ctx.$implicit;
-            var i_r30 = ctx.index;
-            var ctx_r27 = i0.ɵɵnextContext(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1$b, ctx_r27.ingredientsChecked[i_r30]));
+            var ingredient_r30 = ctx.$implicit;
+            var i_r31 = ctx.index;
+            var ctx_r28 = i0.ɵɵnextContext(3);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$3, ctx_r28.ingredientsChecked[i_r31]));
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx_r28.ingredientsPictures);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, ingredient_r29.name), "");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 4, ingredient_r30.name), "");
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(6, 5, ingredient_r29.qty, ingredient_r29.unit), "");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(7, 6, ingredient_r30.qty, ingredient_r30.unit), "");
         }
     }
-    function RecipeDetailsComponent_div_0_div_54_div_17_ng_miam_icon_6_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_div_55_div_17_ng_miam_icon_6_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelement(0, "ng-miam-icon", 70);
+            i0.ɵɵelement(0, "ng-miam-icon", 73);
         }
         if (rf & 2) {
-            var ctx_r33 = i0.ɵɵnextContext(4);
-            i0.ɵɵproperty("height", 16)("width", 16)("iconName", ctx_r33.icon.CheckCircleFill);
+            var ctx_r36 = i0.ɵɵnextContext(4);
+            i0.ɵɵproperty("height", 16)("width", 16)("iconName", ctx_r36.icon.CheckCircleFill);
         }
     }
-    function RecipeDetailsComponent_div_0_div_54_div_17_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_div_55_div_17_Template(rf, ctx) {
         if (rf & 1) {
-            var _r35_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 66);
-            i0.ɵɵlistener("click", function RecipeDetailsComponent_div_0_div_54_div_17_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r35_1); var i_r32 = ctx.index; var ctx_r34 = i0.ɵɵnextContext(3); return ctx_r34.changeActiveStep(i_r32); });
-            i0.ɵɵelementStart(1, "div", 67);
+            var _r38_1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 69);
+            i0.ɵɵlistener("click", function RecipeDetailsComponent_div_0_div_55_div_17_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r38_1); var i_r35 = ctx.index; var ctx_r37 = i0.ɵɵnextContext(3); return ctx_r37.changeActiveStep(i_r35); });
+            i0.ɵɵelementStart(1, "div", 70);
             i0.ɵɵelementStart(2, "strong");
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 68);
+            i0.ɵɵelementStart(4, "div", 71);
             i0.ɵɵtext(5);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, RecipeDetailsComponent_div_0_div_54_div_17_ng_miam_icon_6_Template, 1, 3, "ng-miam-icon", 69);
+            i0.ɵɵtemplate(6, RecipeDetailsComponent_div_0_div_55_div_17_ng_miam_icon_6_Template, 1, 3, "ng-miam-icon", 72);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var step_r31 = ctx.$implicit;
-            var i_r32 = ctx.index;
-            var ctx_r28 = i0.ɵɵnextContext(3);
-            i0.ɵɵclassProp("active", i_r32 === ctx_r28.activeStep)("miam-recipe-details__panel__done", i_r32 < ctx_r28.activeStep);
+            var step_r34 = ctx.$implicit;
+            var i_r35 = ctx.index;
+            var ctx_r29 = i0.ɵɵnextContext(3);
+            i0.ɵɵclassProp("active", i_r35 === ctx_r29.activeStep)("miam-recipe-details__panel__done", i_r35 < ctx_r29.activeStep);
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i_r32);
+            i0.ɵɵtextInterpolate(i_r35 + 1);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(step_r31 == null ? null : step_r31.attributes == null ? null : step_r31.attributes.description);
+            i0.ɵɵtextInterpolate(step_r34 == null ? null : step_r34.attributes == null ? null : step_r34.attributes.description);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", i_r32 <= ctx_r28.activeStep);
+            i0.ɵɵproperty("ngIf", i_r35 <= ctx_r29.activeStep);
         }
     }
-    function RecipeDetailsComponent_div_0_div_54_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_div_55_Template(rf, ctx) {
         if (rf & 1) {
-            var _r37_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 52);
-            i0.ɵɵelementStart(1, "div", 53);
-            i0.ɵɵelementStart(2, "div", 54);
+            var _r40_1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 53);
+            i0.ɵɵelementStart(1, "div", 54);
+            i0.ɵɵelementStart(2, "div", 55);
             i0.ɵɵtext(3, " Ingr\u00E9dients ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 55);
-            i0.ɵɵelementStart(5, "div", 56);
-            i0.ɵɵelementStart(6, "ng-miam-counter-input", 57);
-            i0.ɵɵlistener("counterChange", function RecipeDetailsComponent_div_0_div_54_Template_ng_miam_counter_input_counterChange_6_listener($event) { i0.ɵɵrestoreView(_r37_1); var ctx_r36 = i0.ɵɵnextContext(2); return ctx_r36.updateGuests($event); });
+            i0.ɵɵelementStart(4, "div", 56);
+            i0.ɵɵelementStart(5, "div", 57);
+            i0.ɵɵelementStart(6, "ng-miam-counter-input", 58);
+            i0.ɵɵlistener("counterChange", function RecipeDetailsComponent_div_0_div_55_Template_ng_miam_counter_input_counterChange_6_listener($event) { i0.ɵɵrestoreView(_r40_1); var ctx_r39 = i0.ɵɵnextContext(2); return ctx_r39.updateGuests($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "span", 58);
+            i0.ɵɵelementStart(7, "span", 59);
             i0.ɵɵtext(8);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "span", 59);
+            i0.ɵɵelementStart(9, "span", 60);
             i0.ɵɵtext(10, "Quantit\u00E9");
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(11, "div", 60);
-            i0.ɵɵtemplate(12, RecipeDetailsComponent_div_0_div_54_div_12_Template, 7, 10, "div", 61);
+            i0.ɵɵelementStart(11, "div", 61);
+            i0.ɵɵtemplate(12, RecipeDetailsComponent_div_0_div_55_div_12_Template, 8, 11, "div", 62);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "div", 62);
-            i0.ɵɵelementStart(14, "div", 54);
+            i0.ɵɵelementStart(13, "div", 63);
+            i0.ɵɵelementStart(14, "div", 55);
             i0.ɵɵtext(15, " Pr\u00E9paration ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "div", 63);
-            i0.ɵɵtemplate(17, RecipeDetailsComponent_div_0_div_54_div_17_Template, 7, 7, "div", 64);
+            i0.ɵɵelementStart(16, "div", 64);
+            i0.ɵɵtemplate(17, RecipeDetailsComponent_div_0_div_55_div_17_Template, 7, 7, "div", 65);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ctx_r19 = i0.ɵɵnextContext(2);
+            var ctx_r20 = i0.ɵɵnextContext(2);
             i0.ɵɵadvance(6);
-            i0.ɵɵproperty("counter", (ctx_r19.recipe == null ? null : ctx_r19.recipe.modifiedGuests) || ctx_r19.recipe.guests);
+            i0.ɵɵproperty("counter", (ctx_r20.recipe == null ? null : ctx_r20.recipe.modifiedGuests) || ctx_r20.recipe.guests);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1("Pour ", ctx_r19.recipe == null ? null : ctx_r19.recipe.modifiedGuests, " personnes");
+            i0.ɵɵtextInterpolate1("Pour ", ctx_r20.recipe == null ? null : ctx_r20.recipe.modifiedGuests, " personnes");
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngForOf", ctx_r19.recipe == null ? null : ctx_r19.recipe.modifiedIngredients);
+            i0.ɵɵproperty("ngForOf", ctx_r20.recipe == null ? null : ctx_r20.recipe.modifiedIngredients);
             i0.ɵɵadvance(5);
-            i0.ɵɵproperty("ngForOf", ctx_r19.steps);
+            i0.ɵɵproperty("ngForOf", ctx_r20.steps);
         }
     }
-    function RecipeDetailsComponent_div_0_ng_template_55_ng_container_7_div_9_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_ng_template_56_ng_container_7_div_9_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 65);
+            i0.ɵɵelementStart(0, "div", 66);
             i0.ɵɵelementStart(1, "div");
             i0.ɵɵtext(2);
             i0.ɵɵpipe(3, "capitalizeFirstLetter");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 59);
+            i0.ɵɵelementStart(4, "div", 60);
             i0.ɵɵtext(5);
             i0.ɵɵpipe(6, "readableFloatNumber");
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ingredient_r43 = ctx.$implicit;
-            var i_r44 = ctx.index;
-            var ctx_r42 = i0.ɵɵnextContext(4);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1$b, ctx_r42.ingredientsChecked[i_r44]));
+            var ingredient_r46 = ctx.$implicit;
+            var i_r47 = ctx.index;
+            var ctx_r45 = i0.ɵɵnextContext(4);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$3, ctx_r45.ingredientsChecked[i_r47]));
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, ingredient_r43.name), "");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, ingredient_r46.name), "");
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(6, 5, ingredient_r43.qty, ingredient_r43.unit), "");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(6, 5, ingredient_r46.qty, ingredient_r46.unit), "");
         }
     }
-    function RecipeDetailsComponent_div_0_ng_template_55_ng_container_7_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_ng_template_56_ng_container_7_Template(rf, ctx) {
         if (rf & 1) {
-            var _r46_1 = i0.ɵɵgetCurrentView();
+            var _r49_1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementContainerStart(0);
-            i0.ɵɵelementStart(1, "div", 55);
-            i0.ɵɵelementStart(2, "div", 56);
-            i0.ɵɵelementStart(3, "ng-miam-counter-input", 57);
-            i0.ɵɵlistener("counterChange", function RecipeDetailsComponent_div_0_ng_template_55_ng_container_7_Template_ng_miam_counter_input_counterChange_3_listener($event) { i0.ɵɵrestoreView(_r46_1); var ctx_r45 = i0.ɵɵnextContext(3); return ctx_r45.updateGuests($event); });
+            i0.ɵɵelementStart(1, "div", 56);
+            i0.ɵɵelementStart(2, "div", 57);
+            i0.ɵɵelementStart(3, "ng-miam-counter-input", 58);
+            i0.ɵɵlistener("counterChange", function RecipeDetailsComponent_div_0_ng_template_56_ng_container_7_Template_ng_miam_counter_input_counterChange_3_listener($event) { i0.ɵɵrestoreView(_r49_1); var ctx_r48 = i0.ɵɵnextContext(3); return ctx_r48.updateGuests($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "span", 58);
+            i0.ɵɵelementStart(4, "span", 59);
             i0.ɵɵtext(5);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "span", 59);
+            i0.ɵɵelementStart(6, "span", 60);
             i0.ɵɵtext(7, "Quantit\u00E9");
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "div", 60);
-            i0.ɵɵtemplate(9, RecipeDetailsComponent_div_0_ng_template_55_ng_container_7_div_9_Template, 7, 10, "div", 61);
+            i0.ɵɵelementStart(8, "div", 61);
+            i0.ɵɵtemplate(9, RecipeDetailsComponent_div_0_ng_template_56_ng_container_7_div_9_Template, 7, 10, "div", 62);
             i0.ɵɵelementEnd();
             i0.ɵɵelementContainerEnd();
         }
         if (rf & 2) {
-            var ctx_r39 = i0.ɵɵnextContext(3);
+            var ctx_r42 = i0.ɵɵnextContext(3);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("counter", ctx_r39.recipe == null ? null : ctx_r39.recipe.modifiedGuests);
+            i0.ɵɵproperty("counter", ctx_r42.recipe == null ? null : ctx_r42.recipe.modifiedGuests);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1("Pour ", ctx_r39.recipe == null ? null : ctx_r39.recipe.modifiedGuests, " personnes");
+            i0.ɵɵtextInterpolate1("Pour ", ctx_r42.recipe == null ? null : ctx_r42.recipe.modifiedGuests, " personnes");
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngForOf", ctx_r39.recipe == null ? null : ctx_r39.recipe.modifiedIngredients);
+            i0.ɵɵproperty("ngForOf", ctx_r42.recipe == null ? null : ctx_r42.recipe.modifiedIngredients);
         }
     }
-    function RecipeDetailsComponent_div_0_ng_template_55_ng_template_8_div_1_ng_miam_icon_6_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_ng_template_56_ng_template_8_div_1_ng_miam_icon_6_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelement(0, "ng-miam-icon", 70);
+            i0.ɵɵelement(0, "ng-miam-icon", 73);
         }
         if (rf & 2) {
-            var ctx_r50 = i0.ɵɵnextContext(5);
-            i0.ɵɵproperty("height", 16)("width", 16)("iconName", ctx_r50.icon.CheckCircleFill);
+            var ctx_r53 = i0.ɵɵnextContext(5);
+            i0.ɵɵproperty("height", 16)("width", 16)("iconName", ctx_r53.icon.CheckCircleFill);
         }
     }
-    function RecipeDetailsComponent_div_0_ng_template_55_ng_template_8_div_1_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_ng_template_56_ng_template_8_div_1_Template(rf, ctx) {
         if (rf & 1) {
-            var _r52_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 66);
-            i0.ɵɵlistener("click", function RecipeDetailsComponent_div_0_ng_template_55_ng_template_8_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r52_1); var i_r49 = ctx.index; var ctx_r51 = i0.ɵɵnextContext(4); return ctx_r51.changeActiveStep(i_r49); });
-            i0.ɵɵelementStart(1, "div", 67);
+            var _r55_1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 69);
+            i0.ɵɵlistener("click", function RecipeDetailsComponent_div_0_ng_template_56_ng_template_8_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r55_1); var i_r52 = ctx.index; var ctx_r54 = i0.ɵɵnextContext(4); return ctx_r54.changeActiveStep(i_r52); });
+            i0.ɵɵelementStart(1, "div", 70);
             i0.ɵɵelementStart(2, "strong");
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 68);
+            i0.ɵɵelementStart(4, "div", 71);
             i0.ɵɵtext(5);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, RecipeDetailsComponent_div_0_ng_template_55_ng_template_8_div_1_ng_miam_icon_6_Template, 1, 3, "ng-miam-icon", 69);
+            i0.ɵɵtemplate(6, RecipeDetailsComponent_div_0_ng_template_56_ng_template_8_div_1_ng_miam_icon_6_Template, 1, 3, "ng-miam-icon", 72);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var step_r48 = ctx.$implicit;
-            var i_r49 = ctx.index;
-            var ctx_r47 = i0.ɵɵnextContext(4);
-            i0.ɵɵclassProp("active", i_r49 === ctx_r47.activeStep)("miam-recipe-details__panel__done", i_r49 < ctx_r47.activeStep);
+            var step_r51 = ctx.$implicit;
+            var i_r52 = ctx.index;
+            var ctx_r50 = i0.ɵɵnextContext(4);
+            i0.ɵɵclassProp("active", i_r52 === ctx_r50.activeStep)("miam-recipe-details__panel__done", i_r52 < ctx_r50.activeStep);
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i_r49);
+            i0.ɵɵtextInterpolate(i_r52 + 1);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(step_r48 == null ? null : step_r48.attributes == null ? null : step_r48.attributes.description);
+            i0.ɵɵtextInterpolate(step_r51 == null ? null : step_r51.attributes == null ? null : step_r51.attributes.description);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", i_r49 <= ctx_r47.activeStep);
+            i0.ɵɵproperty("ngIf", i_r52 <= ctx_r50.activeStep);
         }
     }
-    function RecipeDetailsComponent_div_0_ng_template_55_ng_template_8_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_ng_template_56_ng_template_8_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 63);
-            i0.ɵɵtemplate(1, RecipeDetailsComponent_div_0_ng_template_55_ng_template_8_div_1_Template, 7, 7, "div", 64);
+            i0.ɵɵelementStart(0, "div", 64);
+            i0.ɵɵtemplate(1, RecipeDetailsComponent_div_0_ng_template_56_ng_template_8_div_1_Template, 7, 7, "div", 65);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ctx_r41 = i0.ɵɵnextContext(3);
+            var ctx_r44 = i0.ɵɵnextContext(3);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngForOf", ctx_r41.steps);
+            i0.ɵɵproperty("ngForOf", ctx_r44.steps);
         }
     }
-    var _c2$3 = function (a0) { return { "active": a0 }; };
-    function RecipeDetailsComponent_div_0_ng_template_55_Template(rf, ctx) {
+    var _c3$2 = function (a0) { return { "active": a0 }; };
+    function RecipeDetailsComponent_div_0_ng_template_56_Template(rf, ctx) {
         if (rf & 1) {
-            var _r54_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 71, 72);
-            i0.ɵɵelementStart(2, "div", 73);
-            i0.ɵɵelementStart(3, "button", 74);
-            i0.ɵɵlistener("click", function RecipeDetailsComponent_div_0_ng_template_55_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r54_1); var _r38 = i0.ɵɵreference(1); var ctx_r53 = i0.ɵɵnextContext(2); ctx_r53.toggleShowIngredient(true); return _r38.scrollIntoView(); });
+            var _r57_1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 74, 75);
+            i0.ɵɵelementStart(2, "div", 76);
+            i0.ɵɵelementStart(3, "button", 77);
+            i0.ɵɵlistener("click", function RecipeDetailsComponent_div_0_ng_template_56_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r57_1); var _r41 = i0.ɵɵreference(1); var ctx_r56 = i0.ɵɵnextContext(2); ctx_r56.toggleShowIngredient(true); return _r41.scrollIntoView(); });
             i0.ɵɵtext(4, "Ingredients");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "button", 74);
-            i0.ɵɵlistener("click", function RecipeDetailsComponent_div_0_ng_template_55_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r54_1); var _r38 = i0.ɵɵreference(1); var ctx_r55 = i0.ɵɵnextContext(2); ctx_r55.toggleShowIngredient(false); return _r38.scrollIntoView(); });
+            i0.ɵɵelementStart(5, "button", 77);
+            i0.ɵɵlistener("click", function RecipeDetailsComponent_div_0_ng_template_56_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r57_1); var _r41 = i0.ɵɵreference(1); var ctx_r58 = i0.ɵɵnextContext(2); ctx_r58.toggleShowIngredient(false); return _r41.scrollIntoView(); });
             i0.ɵɵtext(6, "Pr\u00E9paration");
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(7, RecipeDetailsComponent_div_0_ng_template_55_ng_container_7_Template, 10, 3, "ng-container", 75);
-            i0.ɵɵtemplate(8, RecipeDetailsComponent_div_0_ng_template_55_ng_template_8_Template, 2, 1, "ng-template", null, 76, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(7, RecipeDetailsComponent_div_0_ng_template_56_ng_container_7_Template, 10, 3, "ng-container", 78);
+            i0.ɵɵtemplate(8, RecipeDetailsComponent_div_0_ng_template_56_ng_template_8_Template, 2, 1, "ng-template", null, 79, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var _r40 = i0.ɵɵreference(9);
-            var ctx_r21 = i0.ɵɵnextContext(2);
+            var _r43 = i0.ɵɵreference(9);
+            var ctx_r22 = i0.ɵɵnextContext(2);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c2$3, ctx_r21.showIngredient));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c3$2, ctx_r22.showIngredient));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c2$3, !ctx_r21.showIngredient));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c3$2, !ctx_r22.showIngredient));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx_r21.showIngredient)("ngIfElse", _r40);
+            i0.ɵɵproperty("ngIf", ctx_r22.showIngredient)("ngIfElse", _r43);
         }
     }
-    function RecipeDetailsComponent_div_0_button_61_Template(rf, ctx) {
+    function RecipeDetailsComponent_div_0_button_62_Template(rf, ctx) {
         if (rf & 1) {
-            var _r57_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "button", 49);
-            i0.ɵɵlistener("click", function RecipeDetailsComponent_div_0_button_61_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r57_1); var ctx_r56 = i0.ɵɵnextContext(2); return ctx_r56.addRecipe(); });
+            var _r60_1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "button", 50);
+            i0.ɵɵlistener("click", function RecipeDetailsComponent_div_0_button_62_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r60_1); var ctx_r59 = i0.ɵɵnextContext(2); return ctx_r59.addRecipe(); });
             i0.ɵɵelementStart(1, "span");
             i0.ɵɵtext(2);
             i0.ɵɵpipe(3, "async");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(4, "ng-miam-icon", 50);
+            i0.ɵɵelement(4, "ng-miam-icon", 51);
             i0.ɵɵpipe(5, "async");
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ctx_r22 = i0.ɵɵnextContext(2);
+            var ctx_r23 = i0.ɵɵnextContext(2);
             var tmp_0_0 = null;
             var tmp_3_0 = null;
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", ((tmp_0_0 = i0.ɵɵpipeBind1(3, 4, ctx_r22.groceriesListsService.list$)) == null ? null : tmp_0_0.hasRecipe(ctx_r22.recipe == null ? null : ctx_r22.recipe.id)) ? "Voir le d\u00E9tail" : "S\u00E9lectionner ce repas", " ");
+            i0.ɵɵtextInterpolate1(" ", ((tmp_0_0 = i0.ɵɵpipeBind1(3, 4, ctx_r23.groceriesListsService.list$)) == null ? null : tmp_0_0.hasRecipe(ctx_r23.recipe == null ? null : ctx_r23.recipe.id)) ? "Voir le d\u00E9tail" : "S\u00E9lectionner ce repas", " ");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("width", 24)("height", 24)("iconName", ((tmp_3_0 = i0.ɵɵpipeBind1(5, 6, ctx_r22.groceriesListsService.list$)) == null ? null : tmp_3_0.hasRecipe(ctx_r22.recipe == null ? null : ctx_r22.recipe.id)) ? ctx_r22.icon.CheckList : ctx_r22.icon.Cart);
+            i0.ɵɵproperty("width", 24)("height", 24)("iconName", ((tmp_3_0 = i0.ɵɵpipeBind1(5, 6, ctx_r23.groceriesListsService.list$)) == null ? null : tmp_3_0.hasRecipe(ctx_r23.recipe == null ? null : ctx_r23.recipe.id)) ? ctx_r23.icon.CheckList : ctx_r23.icon.Cart);
         }
     }
     function RecipeDetailsComponent_div_0_Template(rf, ctx) {
         if (rf & 1) {
-            var _r59_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 2);
-            i0.ɵɵlistener("scroll", function RecipeDetailsComponent_div_0_Template_div_scroll_0_listener($event) { i0.ɵɵrestoreView(_r59_1); var ctx_r58 = i0.ɵɵnextContext(); return ctx_r58.onScroll($event); });
-            i0.ɵɵelementStart(1, "div", 3);
+            var _r62_1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 2, 3);
             i0.ɵɵelementStart(2, "div", 4);
-            i0.ɵɵelementStart(3, "div", 5, 6);
-            i0.ɵɵtemplate(5, RecipeDetailsComponent_div_0_img_5_Template, 1, 1, "img", 7);
-            i0.ɵɵtemplate(6, RecipeDetailsComponent_div_0_div_6_Template, 1, 0, "div", 8);
-            i0.ɵɵtemplate(7, RecipeDetailsComponent_div_0_youtube_player_7_Template, 1, 3, "youtube-player", 9);
-            i0.ɵɵtemplate(8, RecipeDetailsComponent_div_0_div_8_Template, 2, 0, "div", 10);
-            i0.ɵɵpipe(9, "async");
-            i0.ɵɵelementStart(10, "div", 11);
-            i0.ɵɵtemplate(11, RecipeDetailsComponent_div_0_ng_miam_like_button_11_Template, 1, 3, "ng-miam-like-button", 12);
-            i0.ɵɵpipe(12, "async");
-            i0.ɵɵelement(13, "ng-miam-icon", 13);
-            i0.ɵɵelement(14, "ng-miam-icon", 13);
+            i0.ɵɵelementStart(3, "div", 5);
+            i0.ɵɵelementStart(4, "div", 6, 7);
+            i0.ɵɵtemplate(6, RecipeDetailsComponent_div_0_img_6_Template, 1, 1, "img", 8);
+            i0.ɵɵtemplate(7, RecipeDetailsComponent_div_0_div_7_Template, 1, 0, "div", 9);
+            i0.ɵɵtemplate(8, RecipeDetailsComponent_div_0_youtube_player_8_Template, 1, 3, "youtube-player", 10);
+            i0.ɵɵtemplate(9, RecipeDetailsComponent_div_0_div_9_Template, 2, 0, "div", 11);
+            i0.ɵɵpipe(10, "async");
+            i0.ɵɵelementStart(11, "div", 12);
+            i0.ɵɵtemplate(12, RecipeDetailsComponent_div_0_ng_miam_like_button_12_Template, 1, 3, "ng-miam-like-button", 13);
+            i0.ɵɵpipe(13, "async");
+            i0.ɵɵelement(14, "ng-miam-icon", 14);
+            i0.ɵɵelement(15, "ng-miam-icon", 14);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(15, RecipeDetailsComponent_div_0_img_15_Template, 1, 1, "img", 14);
+            i0.ɵɵtemplate(16, RecipeDetailsComponent_div_0_img_16_Template, 1, 1, "img", 15);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "div", 15);
             i0.ɵɵelementStart(17, "div", 16);
-            i0.ɵɵelement(18, "ng-miam-icon", 17);
-            i0.ɵɵelementStart(19, "span");
-            i0.ɵɵtext(20);
+            i0.ɵɵelementStart(18, "div", 17);
+            i0.ɵɵelement(19, "ng-miam-icon", 18);
+            i0.ɵɵelementStart(20, "span");
+            i0.ɵɵtext(21);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "div", 18);
-            i0.ɵɵtemplate(22, RecipeDetailsComponent_div_0_div_22_Template, 7, 4, "div", 19);
-            i0.ɵɵtemplate(23, RecipeDetailsComponent_div_0_div_23_Template, 7, 4, "div", 19);
-            i0.ɵɵtemplate(24, RecipeDetailsComponent_div_0_div_24_Template, 7, 4, "div", 19);
+            i0.ɵɵelementStart(22, "div", 19);
+            i0.ɵɵtemplate(23, RecipeDetailsComponent_div_0_div_23_Template, 7, 4, "div", 20);
+            i0.ɵɵtemplate(24, RecipeDetailsComponent_div_0_div_24_Template, 7, 4, "div", 20);
+            i0.ɵɵtemplate(25, RecipeDetailsComponent_div_0_div_25_Template, 7, 4, "div", 20);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(25, "div", 20);
             i0.ɵɵelementStart(26, "div", 21);
-            i0.ɵɵelementStart(27, "span", 22);
-            i0.ɵɵtext(28);
-            i0.ɵɵpipe(29, "titlecase");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(30, "span", 23);
-            i0.ɵɵtext(31);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(32, "div", 24);
-            i0.ɵɵelementContainerStart(33, 25);
-            i0.ɵɵtemplate(34, RecipeDetailsComponent_div_0_ng_container_34_Template, 2, 3, "ng-container", 26);
-            i0.ɵɵtemplate(35, RecipeDetailsComponent_div_0_ng_container_35_Template, 2, 3, "ng-container", 26);
-            i0.ɵɵtemplate(36, RecipeDetailsComponent_div_0_ng_container_36_Template, 2, 3, "ng-container", 26);
-            i0.ɵɵtemplate(37, RecipeDetailsComponent_div_0_ng_container_37_Template, 1, 0, "ng-container", 27);
+            i0.ɵɵelementStart(27, "div", 22);
+            i0.ɵɵelementStart(28, "span", 23);
+            i0.ɵɵtext(29);
+            i0.ɵɵpipe(30, "titlecase");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(31, "span", 24);
+            i0.ɵɵtext(32);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(33, "div", 25);
+            i0.ɵɵelementContainerStart(34, 26);
+            i0.ɵɵtemplate(35, RecipeDetailsComponent_div_0_ng_container_35_Template, 2, 3, "ng-container", 27);
+            i0.ɵɵtemplate(36, RecipeDetailsComponent_div_0_ng_container_36_Template, 2, 3, "ng-container", 27);
+            i0.ɵɵtemplate(37, RecipeDetailsComponent_div_0_ng_container_37_Template, 2, 3, "ng-container", 27);
+            i0.ɵɵtemplate(38, RecipeDetailsComponent_div_0_ng_container_38_Template, 1, 0, "ng-container", 28);
             i0.ɵɵelementContainerEnd();
-            i0.ɵɵelementStart(38, "span");
-            i0.ɵɵtext(39);
-            i0.ɵɵpipe(40, "titlecase");
+            i0.ɵɵelementStart(39, "span");
+            i0.ɵɵtext(40);
+            i0.ɵɵpipe(41, "titlecase");
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(41, "div", 28);
-            i0.ɵɵtext(42);
-            i0.ɵɵelementStart(43, "div", 29);
-            i0.ɵɵlistener("click", function RecipeDetailsComponent_div_0_Template_div_click_43_listener() { i0.ɵɵrestoreView(_r59_1); var ctx_r60 = i0.ɵɵnextContext(); return ctx_r60.print(); });
-            i0.ɵɵelement(44, "ng-miam-icon", 13);
-            i0.ɵɵelementStart(45, "span");
-            i0.ɵɵtext(46, " Imprimer la recette ");
+            i0.ɵɵelementStart(42, "div", 29);
+            i0.ɵɵtext(43);
+            i0.ɵɵelementStart(44, "div", 30);
+            i0.ɵɵlistener("click", function RecipeDetailsComponent_div_0_Template_div_click_44_listener() { i0.ɵɵrestoreView(_r62_1); var ctx_r61 = i0.ɵɵnextContext(); return ctx_r61.print(); });
+            i0.ɵɵelement(45, "ng-miam-icon", 14);
+            i0.ɵɵelementStart(46, "span");
+            i0.ɵɵtext(47, " Imprimer la recette ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(47, "div", 30);
             i0.ɵɵelementStart(48, "div", 31);
-            i0.ɵɵelement(49, "ng-miam-recipe-pricing", 32);
+            i0.ɵɵelementStart(49, "div", 32);
+            i0.ɵɵelement(50, "ng-miam-recipe-pricing", 33);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(50, RecipeDetailsComponent_div_0_button_50_Template, 6, 8, "button", 33);
+            i0.ɵɵtemplate(51, RecipeDetailsComponent_div_0_button_51_Template, 6, 8, "button", 34);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(51, "div", 34);
-            i0.ɵɵelementStart(52, "div");
-            i0.ɵɵtemplate(53, RecipeDetailsComponent_div_0_ng_miam_addon_link_53_Template, 1, 1, "ng-miam-addon-link", 35);
+            i0.ɵɵelement(52, "div", 35);
+            i0.ɵɵelementStart(53, "div");
+            i0.ɵɵtemplate(54, RecipeDetailsComponent_div_0_ng_miam_addon_link_54_Template, 1, 1, "ng-miam-addon-link", 36);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(54, RecipeDetailsComponent_div_0_div_54_Template, 18, 4, "div", 36);
-            i0.ɵɵtemplate(55, RecipeDetailsComponent_div_0_ng_template_55_Template, 10, 8, "ng-template", null, 37, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵelementStart(57, "div", 38);
-            i0.ɵɵelementStart(58, "div", 30);
+            i0.ɵɵtemplate(55, RecipeDetailsComponent_div_0_div_55_Template, 18, 4, "div", 37);
+            i0.ɵɵtemplate(56, RecipeDetailsComponent_div_0_ng_template_56_Template, 10, 8, "ng-template", null, 38, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementStart(58, "div", 39);
             i0.ɵɵelementStart(59, "div", 31);
-            i0.ɵɵelement(60, "ng-miam-recipe-pricing", 32);
+            i0.ɵɵelementStart(60, "div", 32);
+            i0.ɵɵelement(61, "ng-miam-recipe-pricing", 33);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(61, RecipeDetailsComponent_div_0_button_61_Template, 6, 8, "button", 33);
+            i0.ɵɵtemplate(62, RecipeDetailsComponent_div_0_button_62_Template, 6, 8, "button", 34);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var _r20 = i0.ɵɵreference(56);
+            var _r21 = i0.ɵɵreference(57);
             var ctx_r0 = i0.ɵɵnextContext();
             var tmp_3_0 = null;
-            i0.ɵɵadvance(5);
+            i0.ɵɵadvance(6);
             i0.ɵɵproperty("ngIf", !ctx_r0.showVideo);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", !ctx_r0.showVideo);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx_r0.showVideo && ctx_r0.playerWidth);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", (tmp_3_0 = i0.ɵɵpipeBind1(9, 39, ctx_r0.groceriesListsService.list$)) == null ? null : tmp_3_0.hasRecipe(ctx_r0.recipe == null ? null : ctx_r0.recipe.id));
+            i0.ɵɵproperty("ngIf", (tmp_3_0 = i0.ɵɵpipeBind1(10, 39, ctx_r0.groceriesListsService.list$)) == null ? null : tmp_3_0.hasRecipe(ctx_r0.recipe == null ? null : ctx_r0.recipe.id));
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(12, 41, ctx_r0.userService.isLogged$));
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(13, 41, ctx_r0.userService.isLogged$));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("width", 26)("height", 26)("iconName", ctx_r0.icon.Calendar);
             i0.ɵɵadvance(1);
@@ -14556,7 +14585,7 @@
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", (ctx_r0.recipe == null ? null : ctx_r0.recipe.restingTime) !== "-");
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(29, 43, ctx_r0.recipe == null ? null : ctx_r0.recipe.recipeType == null ? null : ctx_r0.recipe.recipeType.attributes == null ? null : ctx_r0.recipe.recipeType.attributes.name));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(30, 43, ctx_r0.recipe == null ? null : ctx_r0.recipe.recipeType == null ? null : ctx_r0.recipe.recipeType.attributes == null ? null : ctx_r0.recipe.recipeType.attributes.name));
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(ctx_r0.recipe == null ? null : ctx_r0.recipe.attributes["title"]);
             i0.ɵɵadvance(2);
@@ -14568,7 +14597,7 @@
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngSwitchCase", "difficile");
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(40, 45, ctx_r0.recipe == null ? null : ctx_r0.recipe.difficultyLabel));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(41, 45, ctx_r0.recipe == null ? null : ctx_r0.recipe.difficultyLabel));
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate1(" ", ctx_r0.recipe == null ? null : ctx_r0.recipe.attributes["description"], " ");
             i0.ɵɵadvance(2);
@@ -14580,7 +14609,7 @@
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", (ctx_r0.recipe == null ? null : ctx_r0.recipe.sponsors == null ? null : ctx_r0.recipe.sponsors.length) > 0 || ctx_r0.recipe.informationalSentence);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", !ctx_r0.isMobile)("ngIfElse", _r20);
+            i0.ɵɵproperty("ngIf", !ctx_r0.isMobile)("ngIfElse", _r21);
             i0.ɵɵadvance(6);
             i0.ɵɵproperty("recipe", ctx_r0.recipe)("serves", ctx_r0.recipe == null ? null : ctx_r0.recipe.modifiedGuests);
             i0.ɵɵadvance(1);
@@ -14589,9 +14618,9 @@
     }
     function RecipeDetailsComponent_ng_template_1_Template(rf, ctx) {
         if (rf & 1) {
-            var _r62_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "ng-miam-recipe-addon", 77);
-            i0.ɵɵlistener("hideAddon", function RecipeDetailsComponent_ng_template_1_Template_ng_miam_recipe_addon_hideAddon_0_listener() { i0.ɵɵrestoreView(_r62_1); var ctx_r61 = i0.ɵɵnextContext(); return ctx_r61.toggleAddon(); });
+            var _r64_1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "ng-miam-recipe-addon", 80);
+            i0.ɵɵlistener("hideAddon", function RecipeDetailsComponent_ng_template_1_Template_ng_miam_recipe_addon_hideAddon_0_listener() { i0.ɵɵrestoreView(_r64_1); var ctx_r63 = i0.ɵɵnextContext(); return ctx_r63.toggleAddon(); });
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
@@ -14608,8 +14637,8 @@
             this.posService = posService;
             this.recipeEventsService = recipeEventsService;
             this.contextService = contextService;
-            this.forceIngredientsStepstoggle = false;
             this.previewAllowed = true;
+            this.ingredientsPictures = false;
             this.recipeAdded = new i0.EventEmitter();
             this.recipeChanged = new i0.EventEmitter();
             this.recipeError = new i0.EventEmitter();
@@ -14622,19 +14651,19 @@
             this.ingredientsChecked = {};
             this.showIngredient = true;
             this.closeIconhidden = new rxjs.BehaviorSubject(false);
+            this.scrollListenerInitialised = false;
             this.subscriptions = [];
             this.isMobile = this.mediaMatcher.matchMedia('(max-width: 1023px)').matches;
         }
-        RecipeDetailsComponent.prototype.onScroll = function ($event) {
-            if ($event.srcElement.scrollTop > 300 !== this.closeIconhidden.value) {
-                this.closeIconhidden.next($event.srcElement.scrollTop > 300);
-            }
-        };
         RecipeDetailsComponent.prototype.ngOnChanges = function () {
             var _a;
+            // if forceIngredientsStepstoggle, use isMobile to toggle ingredients & steps in mobile mode, else
+            // Use the value of forceIngredientsStepstoggle to force it to mobile (true) or desktop (false)
+            if (this.forceIngredientsStepstoggle !== undefined) {
+                this.isMobile = this.forceIngredientsStepstoggle;
+            }
             this.showVideo = false; // force reload video player
             this.cdr.detectChanges();
-            this.isMobile = this.forceIngredientsStepstoggle ? true : this.isMobile;
             this.showVideo = this.contextService.videoRecipesEnabled && ((_a = this.recipe) === null || _a === void 0 ? void 0 : _a.videoId);
             if (this.recipe) {
                 this.steps = this.recipe.steps;
@@ -14646,6 +14675,28 @@
             var _a, _b;
             this.playerWidth = Math.min(640, (_b = (_a = this.topContainerImg) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.offsetWidth);
             this.playerHeight = this.playerWidth * 390 / 640;
+            if (!this.scrollListenerInitialised) {
+                this.initScrollListener();
+            }
+        };
+        /**
+         * Init the listener on scroll so the modal can hide the close icon
+         */
+        RecipeDetailsComponent.prototype.initScrollListener = function () {
+            var _this = this;
+            if (this.mainContainer) {
+                var intersectionObserver = new IntersectionObserver(function (_c) {
+                    var _d = __read(_c, 1), entry = _d[0];
+                    if (_this.mainContainer.nativeElement.scrollTop > 300 !== _this.closeIconhidden.value) {
+                        _this.closeIconhidden.next(_this.mainContainer.nativeElement.scrollTop > 300);
+                    }
+                }, {
+                    threshold: [0, 0.33, 0.66, 1],
+                    root: this.mainContainer.nativeElement
+                });
+                intersectionObserver.observe(this.topContainerImg.nativeElement);
+                this.scrollListenerInitialised = true;
+            }
         };
         RecipeDetailsComponent.prototype.changeActiveStep = function (index) {
             this.activeStep = index;
@@ -14701,24 +14752,25 @@
             this.showIngredient = isShowed;
             this.cdr.detectChanges();
         };
+        RecipeDetailsComponent.prototype.ingredientPicture = function (ingredient) {
+            return ingredient.picture || this.contextService.defaultIngredientPicture;
+        };
         return RecipeDetailsComponent;
     }());
     RecipeDetailsComponent.ɵfac = function RecipeDetailsComponent_Factory(t) { return new (t || RecipeDetailsComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$2.MediaMatcher), i0.ɵɵdirectiveInject(GroceriesListsService), i0.ɵɵdirectiveInject(UserService), i0.ɵɵdirectiveInject(PointOfSalesService), i0.ɵɵdirectiveInject(RecipeEventsService), i0.ɵɵdirectiveInject(ContextService)); };
     RecipeDetailsComponent.ɵcmp = i0.ɵɵdefineComponent({ type: RecipeDetailsComponent, selectors: [["ng-miam-recipe-details"]], viewQuery: function RecipeDetailsComponent_Query(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵviewQuery(_c0$r, true);
+                i0.ɵɵviewQuery(_c1$b, true);
             }
             if (rf & 2) {
                 var _t;
                 i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.topContainerImg = _t.first);
+                i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.mainContainer = _t.first);
             }
-        }, hostBindings: function RecipeDetailsComponent_HostBindings(rf, ctx) {
-            if (rf & 1) {
-                i0.ɵɵlistener("scroll", function RecipeDetailsComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); });
-            }
-        }, inputs: { recipe: "recipe", forceIngredientsStepstoggle: "forceIngredientsStepstoggle", previewAllowed: "previewAllowed" }, outputs: { recipeAdded: "recipeAdded", recipeChanged: "recipeChanged", recipeError: "recipeError" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 2, consts: [["class", "miam-recipe-details", 3, "scroll", 4, "ngIf", "ngIfElse"], ["addon", ""], [1, "miam-recipe-details", 3, "scroll"], [1, "miam-recipe-details__top__container"], [1, "miam-recipe-details__top__left"], [1, "miam-recipe-details__top__container__img"], ["topContainerImg", ""], [3, "src", 4, "ngIf"], ["class", "miam-recipe-details__picture__gradient", 4, "ngIf"], [3, "videoId", "width", "height", 4, "ngIf"], ["class", "miam-recipe-details__picture__tag", 4, "ngIf"], [1, "miam-recipe-details__img__actions"], ["class", "miam-recipe-details__actions__icon miam-noPadding", 3, "recipe", "width", "height", 4, "ngIf"], ["primaryColor", "var(--m-color-primary)", 1, "miam-recipe-details__actions__icon", 3, "width", "height", "iconName"], ["class", "miam-recipe-details__picture__sponsor", 3, "src", 4, "ngIf"], [1, "miam-recipe-details__top__container__info"], [1, "miam-recipe-details__info__metrics", "miam-recipe-details__info__metrics__total"], ["primaryColor", "var(--m-color-primary)", 3, "width", "height", "iconName"], [1, "miam-recipe-details__info__times"], ["class", "miam-recipe-details__info__metrics", 4, "ngIf"], [1, "miam-recipe-details__top__container__infos"], [1, "miam-recipe-details__top__container__infos__top"], [1, "miam-recipe-details__infos__type"], [1, "miam-recipe-details__infos__title"], [1, "miam-recipe-details__infos__difficulty"], [3, "ngSwitch"], [4, "ngSwitchCase"], [4, "ngSwitchDefault"], [1, "miam-recipe-details__infos__description"], [1, "miam-recipe-details__description__action", 3, "click"], [1, "miam-recipe-details__infos__price__wrapper"], [1, "miam-recipe-details__infos__price"], [3, "recipe", "serves"], ["class", "miam-recipe-details__infos__action m-button-fab-primary", 3, "click", 4, "ngIf"], [1, "miam-recipe-details__mid__container"], [3, "recipe", "showAddon", 4, "ngIf"], ["class", "miam-recipe-details__bottom__container", 4, "ngIf", "ngIfElse"], ["mobileContainer", ""], [1, "miam-recipe-details__bottom__container__action"], [3, "src"], [1, "miam-recipe-details__picture__gradient"], [3, "videoId", "width", "height"], [1, "miam-recipe-details__picture__tag"], [1, "miam-recipe-details__actions__icon", "miam-noPadding", 3, "recipe", "width", "height"], [1, "miam-recipe-details__picture__sponsor", 3, "src"], [1, "miam-recipe-details__info__metrics"], [1, "miam-recipe-details__metrics__row"], ["primaryColor", "var(--m-color-slate)", 3, "width", "height", "iconName"], [3, "width", "height", "iconName"], [1, "miam-recipe-details__infos__action", "m-button-fab-primary", 3, "click"], ["primaryColor", "#fff", 3, "width", "height", "iconName"], [3, "recipe", "showAddon"], [1, "miam-recipe-details__bottom__container"], [1, "miam-recipe-details__bottom__container__ingredients"], [1, "miam-recipe-details__bottom__container__header"], [1, "miam-recipe-details__ingredients__row"], [1, "miam-recipe-details__ingredients__counter"], [3, "counter", "counterChange"], [1, "miam-recipe-details__ingredients__counter__print"], [1, "miam-recipe-details__ingredients__row__qty"], [1, "miam-recipe-details__ingredients__list"], ["class", "miam-recipe-details__ingredients__row", 3, "ngClass", 4, "ngFor", "ngForOf"], [1, "miam-recipe-details__bottom__container__steps"], [1, "miam-recipe-details__steps__list"], ["class", "miam-recipe-details__steps__list__panel", 3, "active", "miam-recipe-details__panel__done", "click", 4, "ngFor", "ngForOf"], [1, "miam-recipe-details__ingredients__row", 3, "ngClass"], [1, "miam-recipe-details__steps__list__panel", 3, "click"], [1, "miam-recipe-details__panel__idx"], [1, "miam-recipe-details__panel__text"], ["class", "miam-recipe-details__panel__checkIcon", "primaryColor", "var(--m-color-secondary)", 3, "height", "width", "iconName", 4, "ngIf"], ["primaryColor", "var(--m-color-secondary)", 1, "miam-recipe-details__panel__checkIcon", 3, "height", "width", "iconName"], [1, "miam-recipe-details__mobile__container"], ["mobileContainerTop", ""], [1, "miam-recipe-details__mobile__header"], [1, "m-button-secondary", 3, "ngClass", "click"], [4, "ngIf", "ngIfElse"], ["stepsContainer", ""], [3, "recipe", "hideAddon"]], template: function RecipeDetailsComponent_Template(rf, ctx) {
+        }, inputs: { recipe: "recipe", forceIngredientsStepstoggle: "forceIngredientsStepstoggle", previewAllowed: "previewAllowed", ingredientsPictures: "ingredientsPictures" }, outputs: { recipeAdded: "recipeAdded", recipeChanged: "recipeChanged", recipeError: "recipeError" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 2, consts: [["class", "miam-recipe-details", 4, "ngIf", "ngIfElse"], ["addon", ""], [1, "miam-recipe-details"], ["mainContainer", ""], [1, "miam-recipe-details__top__container"], [1, "miam-recipe-details__top__left"], [1, "miam-recipe-details__top__container__img"], ["topContainerImg", ""], [3, "src", 4, "ngIf"], ["class", "miam-recipe-details__picture__gradient", 4, "ngIf"], [3, "videoId", "width", "height", 4, "ngIf"], ["class", "miam-recipe-details__picture__tag", 4, "ngIf"], [1, "miam-recipe-details__img__actions"], ["class", "miam-recipe-details__actions__icon miam-noPadding", 3, "recipe", "width", "height", 4, "ngIf"], ["primaryColor", "var(--m-color-primary)", 1, "miam-recipe-details__actions__icon", 3, "width", "height", "iconName"], ["class", "miam-recipe-details__picture__sponsor", 3, "src", 4, "ngIf"], [1, "miam-recipe-details__top__container__info"], [1, "miam-recipe-details__info__metrics", "miam-recipe-details__info__metrics__total"], ["primaryColor", "var(--m-color-primary)", 3, "width", "height", "iconName"], [1, "miam-recipe-details__info__times"], ["class", "miam-recipe-details__info__metrics", 4, "ngIf"], [1, "miam-recipe-details__top__container__infos"], [1, "miam-recipe-details__top__container__infos__top"], [1, "miam-recipe-details__infos__type"], [1, "miam-recipe-details__infos__title"], [1, "miam-recipe-details__infos__difficulty"], [3, "ngSwitch"], [4, "ngSwitchCase"], [4, "ngSwitchDefault"], [1, "miam-recipe-details__infos__description"], [1, "miam-recipe-details__description__action", 3, "click"], [1, "miam-recipe-details__infos__price__wrapper"], [1, "miam-recipe-details__infos__price"], [3, "recipe", "serves"], ["class", "miam-recipe-details__infos__action m-button-fab-primary", 3, "click", 4, "ngIf"], [1, "miam-recipe-details__mid__container"], [3, "recipe", "showAddon", 4, "ngIf"], ["class", "miam-recipe-details__bottom__container", 4, "ngIf", "ngIfElse"], ["mobileContainer", ""], [1, "miam-recipe-details__bottom__container__action"], [3, "src"], [1, "miam-recipe-details__picture__gradient"], [3, "videoId", "width", "height"], [1, "miam-recipe-details__picture__tag"], [1, "miam-recipe-details__actions__icon", "miam-noPadding", 3, "recipe", "width", "height"], [1, "miam-recipe-details__picture__sponsor", 3, "src"], [1, "miam-recipe-details__info__metrics"], [1, "miam-recipe-details__metrics__row"], ["primaryColor", "var(--m-color-slate)", 3, "width", "height", "iconName"], [3, "width", "height", "iconName"], [1, "miam-recipe-details__infos__action", "m-button-fab-primary", 3, "click"], ["primaryColor", "#fff", 3, "width", "height", "iconName"], [3, "recipe", "showAddon"], [1, "miam-recipe-details__bottom__container"], [1, "miam-recipe-details__bottom__container__ingredients"], [1, "miam-recipe-details__bottom__container__header"], [1, "miam-recipe-details__ingredients__row"], [1, "miam-recipe-details__ingredients__counter"], [3, "counter", "counterChange"], [1, "miam-recipe-details__ingredients__counter__print"], [1, "miam-recipe-details__ingredients__row__qty"], [1, "miam-recipe-details__ingredients__list"], ["class", "miam-recipe-details__ingredients__row", 3, "ngClass", 4, "ngFor", "ngForOf"], [1, "miam-recipe-details__bottom__container__steps"], [1, "miam-recipe-details__steps__list"], ["class", "miam-recipe-details__steps__list__panel", 3, "active", "miam-recipe-details__panel__done", "click", 4, "ngFor", "ngForOf"], [1, "miam-recipe-details__ingredients__row", 3, "ngClass"], [4, "ngIf"], [1, "miam-recipe-details__ingredients__row__picture", 3, "src"], [1, "miam-recipe-details__steps__list__panel", 3, "click"], [1, "miam-recipe-details__panel__idx"], [1, "miam-recipe-details__panel__text"], ["class", "miam-recipe-details__panel__checkIcon", "primaryColor", "var(--m-color-secondary)", 3, "height", "width", "iconName", 4, "ngIf"], ["primaryColor", "var(--m-color-secondary)", 1, "miam-recipe-details__panel__checkIcon", 3, "height", "width", "iconName"], [1, "miam-recipe-details__mobile__container"], ["mobileContainerTop", ""], [1, "miam-recipe-details__mobile__header"], [1, "m-button-secondary", 3, "ngClass", "click"], [4, "ngIf", "ngIfElse"], ["stepsContainer", ""], [3, "recipe", "hideAddon"]], template: function RecipeDetailsComponent_Template(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵtemplate(0, RecipeDetailsComponent_div_0_Template, 62, 47, "div", 0);
+                i0.ɵɵtemplate(0, RecipeDetailsComponent_div_0_Template, 63, 47, "div", 0);
                 i0.ɵɵtemplate(1, RecipeDetailsComponent_ng_template_1_Template, 1, 1, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
             }
             if (rf & 2) {
@@ -14742,6 +14794,8 @@
                     type: i0.Input
                 }], previewAllowed: [{
                     type: i0.Input
+                }], ingredientsPictures: [{
+                    type: i0.Input
                 }], recipeAdded: [{
                     type: i0.Output
                 }], recipeChanged: [{
@@ -14751,9 +14805,9 @@
                 }], topContainerImg: [{
                     type: i0.ViewChild,
                     args: ['topContainerImg']
-                }], onScroll: [{
-                    type: i0.HostListener,
-                    args: ['scroll', ['$event']]
+                }], mainContainer: [{
+                    type: i0.ViewChild,
+                    args: ['mainContainer']
                 }] });
     })();
 
@@ -14944,7 +14998,7 @@
     }
     var _c1$c = function (a0) { return { "height.px": a0 }; };
     var _c2$4 = function (a0) { return { "miam-recipe-tags__container__toggle__hidden": a0 }; };
-    var _c3$2 = function (a0) { return { "opacity": a0 }; };
+    var _c3$3 = function (a0) { return { "opacity": a0 }; };
     function RecipeTagsComponent_div_0_Template(rf, ctx) {
         if (rf & 1) {
             var _r9_1 = i0.ɵɵgetCurrentView();
@@ -14975,7 +15029,7 @@
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate1(" ", ctx_r0.isListOpen ? " " : "+" + ctx_r0.wrappedItemsCount, "");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c3$2, ctx_r0.isListOpen ? 1 : 0));
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c3$3, ctx_r0.isListOpen ? 1 : 0));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("iconName", ctx_r0.icon.ChevronDown);
         }