style(esl-image-utils): fix typos and code formatting

Co-authored-by: Dmytro Shovchko <d.shovchko@gmail.com>
Co-authored-by: Anastasiya Lesun <72765981+NastaLeo@users.noreply.github.com>

site/views/examples/image-utils.njk

@@ -81,10 +81,10 @@ aside:
       <uip-settings label="Settings" resizable vertical="@+sm">
         <uip-select-setting target=".img-container" label="Image ratio:" attribute="class" mode="append">
           <option value="">Auto</option>
-          <option value="img-container-16-9">16 x 9</option>
-          <option value="img-container-26-9">26 x 9</option>
-          <option value="img-container-1-1">1 x 1</option>
-          <option value="img-container-4-3">4 x 3</option>
+          <option value="img-container-16-9">16 : 9</option>
+          <option value="img-container-26-9">26 : 9</option>
+          <option value="img-container-1-1">1 : 1</option>
+          <option value="img-container-4-3">4 : 3</option>
         </uip-select-setting>
 
         <uip-select-setting target=".img-container img" label="Image mode:" attribute="class" mode="append">

src/modules/esl-image-utils/README.md

@@ -12,7 +12,7 @@ Lightweight helpers for use with native `img` and `picture` elements.
 
 `ESLImageContainerMixin` (`esl-image-container`) is a custom attribute used to set an image container class once the image has loaded.
 
-This mixin is intended to be added to the image container element (e.g., `div`, `picture`, etc.), but it can also be added directly to the image element.
+This mixin is intended to be added to the image container element (e.g., `div`, `picture`, etc.) but can also be added directly to the image element.
 
 The mixin observes all images inside the host element.
 A ready class is applied to the host element when all images have finished loading (either successfully or with an error).
@@ -23,7 +23,7 @@ An error class is applied to the host element if any image fails to load.
 The mixin uses a primary attribute, `esl-image-container`, with optional configuration passed as a JSON attribute value.
 
 Configuration options:
-- `readyCls` (string) - class to apply to the target element when the image loads. Supports CSSClassUtils query.  
+- `readyCls` (string) - class to apply to the target element when the image is loaded. Supports CSSClassUtils query.  
     By default, the class `img-container-loaded` is applied.
 - `errorCls` (string) - class to apply to the target element if there is an image loading error. Supports CSSClassUtils query.  
     By default, no error class is applied.

src/modules/esl-image-utils/core/esl-image-container.mixin.ts

@@ -59,11 +59,11 @@ export class ESLImageContainerMixin extends ESLMixinElement {
 
   /** Check if all images are loaded */
   public get complete(): boolean {
-    return this.$images.every(img => img.complete);
+    return this.$images.every((img) => img.complete);
   }
   /** Check if any image has loading error */
   public get hasError(): boolean {
-    return this.$images.some(img => !img.naturalHeight && !img.naturalWidth);
+    return this.$images.some((img) => !img.naturalHeight && !img.naturalWidth);
   }
 
   protected override connectedCallback(): void {