feat(core): added catLoad event to cat-card, emits when component was…

… fully rendered and loaded (#515)

Co-authored-by: anastasiia_glushkova <[email protected]>

angular/projects/catalyst/src/lib/directives/proxies.ts

@@ -204,10 +204,16 @@ export class CatCard {
   ) {
     c.detach();
     this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['catLoad']);
   }
 }
 
-export declare interface CatCard extends Components.CatCard {}
+export declare interface CatCard extends Components.CatCard {
+  /**
+   * Emitted when the card and all the children are fully loaded.
+   */
+  catLoad: EventEmitter<CustomEvent<FocusEvent>>;
+}
 
 @ProxyCmp({
   inputs: [

core/src/components.d.ts

@@ -1541,6 +1541,10 @@ export interface CatButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatButtonElement;
 }
+export interface CatCardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCatCardElement;
+}
 export interface CatCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatCheckboxElement;
@@ -1672,11 +1676,22 @@ declare global {
         prototype: HTMLCatButtonGroupElement;
         new (): HTMLCatButtonGroupElement;
     };
+    interface HTMLCatCardElementEventMap {
+        "catLoad": FocusEvent;
+    }
     /**
      * Cards are surfaces that display content and actions on a single topic. They
      * should be easy to scan for relevant and actionable information.
      */
     interface HTMLCatCardElement extends Components.CatCard, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCatCardElementEventMap>(type: K, listener: (this: HTMLCatCardElement, ev: CatCardCustomEvent<HTMLCatCardElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCatCardElementEventMap>(type: K, listener: (this: HTMLCatCardElement, ev: CatCardCustomEvent<HTMLCatCardElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLCatCardElement: {
         prototype: HTMLCatCardElement;
@@ -2345,6 +2360,10 @@ declare namespace LocalJSX {
      * should be easy to scan for relevant and actionable information.
      */
     interface CatCard {
+        /**
+          * Emitted when the card and all the children are fully loaded.
+         */
+        "onCatLoad"?: (event: CatCardCustomEvent<FocusEvent>) => void;
     }
     /**
      * Checkboxes are used to let a user choose one or more options from a limited

core/src/components/cat-card/cat-card.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '@stencil/core';
+import { Component, Event, EventEmitter, h } from '@stencil/core';
 
 /**
  * Cards are surfaces that display content and actions on a single topic. They
@@ -10,7 +10,16 @@ import { Component, h } from '@stencil/core';
   shadow: true
 })
 export class CatCard {
+  /**
+   * Emitted when the card and all the children are fully loaded.
+   */
+  @Event() catLoad!: EventEmitter<FocusEvent>;
+
   render() {
     return <slot></slot>;
   }
+
+  componentDidLoad() {
+    this.catLoad.emit();
+  }
 }

core/src/components/cat-card/readme.md

@@ -10,6 +10,13 @@
 Cards are surfaces that display content and actions on a single topic. They
 should be easy to scan for relevant and actionable information.
 
+## Events
+
+| Event     | Description                                                  | Type                      |
+| --------- | ------------------------------------------------------------ | ------------------------- |
+| `catLoad` | Emitted when the card and all the children are fully loaded. | `CustomEvent<FocusEvent>` |
+
+
 ----------------------------------------------
 
 Made with love in Hamburg, Germany

vue/src/components.ts

@@ -70,7 +70,9 @@ export const CatButtonGroup = /*@__PURE__*/ defineContainer<JSX.CatButtonGroup>(
 ]);
 
 
-export const CatCard = /*@__PURE__*/ defineContainer<JSX.CatCard>('cat-card', undefined);
+export const CatCard = /*@__PURE__*/ defineContainer<JSX.CatCard>('cat-card', undefined, [
+  'catLoad'
+]);
 
 
 export const CatCheckbox = /*@__PURE__*/ defineContainer<JSX.CatCheckbox>('cat-checkbox', undefined, [