From ecfff9dc88017bc0f649d788fa6edf3cb1097b63 Mon Sep 17 00:00:00 2001
From: William DA SILVA <william.da.silva@outlook.com>
Date: Sun, 25 Aug 2024 14:57:20 +0200
Subject: [PATCH] feat: add findFirstType method to Component (#6084)

* feat: add getType method to Component

* fix: rename getType into findFirstType for clarity sake

---------

Co-authored-by: Artur Arseniev <artur.catch@hotmail.it>
---
 docs/api/component.md                        | 18 ++++++++++++++
 src/dom_components/model/Component.ts        | 15 +++++++++++
 test/specs/dom_components/model/Component.ts | 26 ++++++++++++++++++++
 3 files changed, 59 insertions(+)

diff --git a/docs/api/component.md b/docs/api/component.md
index f335ce9b4..e3f7c3da1 100644
--- a/docs/api/component.md
+++ b/docs/api/component.md
@@ -187,6 +187,24 @@ console.log(allImages[0]) // prints the first found component
 
 Returns **[Array][5]\<Component>** 
 
+## findFirstType
+
+Find the first inner component by component type.
+If no component is found, it returns `undefined`.
+
+### Parameters
+
+*   `type` **[String][1]** Component type
+
+### Examples
+
+```javascript
+const image = component.findFirstType('image');
+if (image) console.log(image)
+```
+
+Returns **Component** Found component, otherwise `undefined`
+
 ## closest
 
 Find the closest parent component by query string.
diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts
index a75e7df00..d450d34c9 100644
--- a/src/dom_components/model/Component.ts
+++ b/src/dom_components/model/Component.ts
@@ -507,6 +507,21 @@ export default class Component extends StyleableModel<ComponentProperties> {
     return result;
   }
 
+  /**
+   * Find the first inner component by component type.
+   * If no component is found, it returns `undefined`.
+   * @param {String} type Component type
+   * @returns {Component|undefined}
+   * @example
+   * const image = component.findFirstType('image');
+   * if (image) {
+   *  console.log(image);
+   * }
+   */
+  findFirstType(type: string): Component | undefined {
+    return this.findType(type).at(0);
+  }
+
   /**
    * Find the closest parent component by query string.
    * **ATTENTION**: this method works only with already rendered component
diff --git a/test/specs/dom_components/model/Component.ts b/test/specs/dom_components/model/Component.ts
index f55c8c2d9..ad18fb641 100644
--- a/test/specs/dom_components/model/Component.ts
+++ b/test/specs/dom_components/model/Component.ts
@@ -273,6 +273,32 @@ describe('Component', () => {
     expect(result.class).toEqual(undefined);
   });
 
+  test('findFirstType returns first component of specified type', () => {
+    const image1 = new ComponentImage({}, compOpts);
+    const text = new ComponentText({}, compOpts);
+    const image2 = new ComponentImage({}, compOpts);
+
+    obj.append([image1, text, image2]);
+
+    const result = obj.findFirstType('image');
+    expect(result).toBe(image1);
+    expect(result instanceof ComponentImage).toBe(true);
+  });
+
+  test('findFirstType returns undefined for non-existent type', () => {
+    const text = new ComponentText({}, compOpts);
+
+    obj.append(text);
+
+    const result = obj.findFirstType('image');
+    expect(result).toBeUndefined();
+  });
+
+  test('findFirstType returns undefined for empty component', () => {
+    const result = obj.findFirstType('div');
+    expect(result).toBeUndefined();
+  });
+
   test('setAttributes', () => {
     obj.setAttributes({
       id: 'test',