From 6b19b56b76579bc7cdf1a70139b82e9e6b9c8507 Mon Sep 17 00:00:00 2001
From: Anna Barmina <52083788+abarmina@users.noreply.github.com>
Date: Tue, 13 Aug 2024 13:47:46 +0200
Subject: [PATCH] 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                       | 8 ++++----
 src/modules/esl-image-utils/README.md                     | 4 ++--
 .../esl-image-utils/core/esl-image-container.mixin.ts     | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/site/views/examples/image-utils.njk b/site/views/examples/image-utils.njk
index 1c4555990..fbb53fce8 100644
--- a/site/views/examples/image-utils.njk
+++ b/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">
diff --git a/src/modules/esl-image-utils/README.md b/src/modules/esl-image-utils/README.md
index a3885c99f..7e92ee338 100644
--- a/src/modules/esl-image-utils/README.md
+++ b/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.
diff --git a/src/modules/esl-image-utils/core/esl-image-container.mixin.ts b/src/modules/esl-image-utils/core/esl-image-container.mixin.ts
index 3477a8fc2..7276a3339 100644
--- a/src/modules/esl-image-utils/core/esl-image-container.mixin.ts
+++ b/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 {