fix: changes className to tagName on o-connected event

Providing the class name of the element was failling when the library was being minimized, on those
cases the constructor name was changed

docs/pages/components/filters.md

@@ -264,7 +264,7 @@ const App = () => {
 
   const onConnectedHandler = ({ detail }) => {
     // Filters component's o-connected event will be triggered by the contained filters too, so we need to check if the event is triggered by the component itself
-    if (detail.className === 'OFilters') {
+    if (detail.tagName === 'o-filters') {
       filtersEl.current = detail.ref;
     }
   };
@@ -379,10 +379,10 @@ const App = () => {
 
   const onConnectedHandler = ({ detail }) => {
     // Filters component's o-connected event will be triggered by the contained filters too, so we need to check if the event is triggered by the component itself
-    if (detail.className === 'OFilters') {
+    if (detail.tagName === 'o-filters') {
       filtersEl.current = detail.ref;
     }
-    if (detail.className === 'OInput' && detail.ref.name === 'input-field') {
+    if (detail.tagName === 'o-input' && detail.ref.name === 'input-field') {
       inputEl.current = detail.ref;
     }
   };
@@ -575,7 +575,7 @@ const App = () => {
 
   const onConnectedHandler = ({ detail }) => {
     // Filters component's o-connected event will be triggered by the contained filters too, so we need to check if the event is triggered by the component itself
-    if (detail.className === 'OFilters') {
+    if (detail.tagName === 'o-filters') {
       filtersEl.current = detail.ref;
     }
   };
@@ -795,7 +795,7 @@ For more details please check the plugins already defined in the folder `/dist/c
       el.addEventListener('o-connected', connectedEvent => listener(connectedEvent));
 
       // Native element renders immediately, so the event is dispatched right away
-      const event = new CustomEvent('o-connected', { detail: { ref: el, className: el.constructor.name } });
+      const event = new CustomEvent('o-connected', { detail: { ref: el, tagName: 'input' } });
       setTimeout(() => {
         el.dispatchEvent(event);
       }, 10);
@@ -891,7 +891,7 @@ class CustomInputTypePlugin extends AbstractTypePlugin {
     el.addEventListener('o-connected', connectedEvent => listener(connectedEvent));
 
     // Native element renders immediately, so the event is dispatched right away
-    const event = new CustomEvent('o-connected', { detail: { ref: el, className: el.constructor.name } });
+    const event = new CustomEvent('o-connected', { detail: { ref: el, tagName: 'input' } });
     setTimeout(() => {
       el.dispatchEvent(event);
     }, 10);
@@ -927,7 +927,7 @@ const App = () => {
 
   const onConnectedHandler = ({ detail }) => {
     // Filters component's o-connected event will be triggered by the contained filters too, so we need to check if the event is triggered by the component itself
-    if (detail.className === 'OFilters') {
+    if (detail.tagName === 'o-filters') {
       filtersEl.current = detail.ref;
 
       filtersEl.current.registerType(InputOverwriteTypePlugin);

docs/pages/getting-started/usage.md

@@ -95,7 +95,7 @@ In some cases, you want to know when the component is added to the document's DO
     });
 
     button.addEventListener('o-connected', ({ detail }) => {
-      showMessage(`A new button was added to the document's DOM (Class: '${detail.className}')`, 'success');
+      showMessage(`A new button was added to the document's DOM (Tag: '${detail.tagName}')`, 'success');
 
       buttonRef = detail.ref;
 
@@ -145,7 +145,7 @@ const App = () => {
   };
 
   const buttonConnectedHandler = ({ detail }) => {
-    showMessage(`A new button was added to the document's DOM (Class: '${detail.className}')`, 'success', 'success');
+    showMessage(`A new button was added to the document's DOM (Tag: '${detail.tagName}')`, 'success', 'success');
 
     buttonRef.current = detail.ref;
 

src/components/filters/filters.component.ts

@@ -341,7 +341,7 @@ export default class OFilters extends LibraryBaseElement {
     typePluginInstance.addConnectedListener(el, connectedEvent => {
       // Check if the event is coming from the filter control by using the DATA_FILTER_NAME_ATTRIBUTE
       const elementRef = connectedEvent.detail.ref;
-      const className = connectedEvent.detail.className;
+      const tagName = connectedEvent.detail.tagName;
 
       if (!filterName || elementRef.getAttribute(DATA_FILTER_NAME_ATTRIBUTE) !== filterName) {
         return;
@@ -351,7 +351,7 @@ export default class OFilters extends LibraryBaseElement {
 
       const detail = {
         ref: elementRef,
-        className,
+        tagName,
         data: { filter }
       };
 

src/events/-connected.ts

@@ -1,6 +1,6 @@
 import type LibraryBaseElement from '../internal/library-base-element';
 
-type OConnectedEvent = CustomEvent<{ ref: LibraryBaseElement; className: string; data?: unknown }>;
+type OConnectedEvent = CustomEvent<{ ref: LibraryBaseElement; tagName: string; data?: unknown }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {

src/internal/library-base-element.ts

@@ -102,7 +102,7 @@ export default class LibraryBaseElement extends LitElement {
   private emitOConnected(): void {
     this.emit('o-connected', {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment
-      detail: { ref: this, className: this.constructor.name || (this.constructor as any).LIBRARY_CLASS_NAME }
+      detail: { ref: this, tagName: (this.constructor as any).LIBRARY_TAG_NAME }
     });
   }
 
@@ -122,15 +122,15 @@ export default class LibraryBaseElement extends LitElement {
   // @ts-expect-error This is auto-injected at build time.
   static version: string = __LIBRARY_VERSION__;
   /* eslint-enable */
-  static LIBRARY_CLASS_NAME = 'LibraryBaseElement';
+  static LIBRARY_TAG_NAME = 'o-base-element';
 
   static define(name: string, elementConstructor = this, options: ElementDefinitionOptions = {}) {
     const currentlyRegisteredConstructor = customElements.get(name) as
       | CustomElementConstructor
       | typeof LibraryBaseElement;
 
     if (!currentlyRegisteredConstructor) {
-      elementConstructor.LIBRARY_CLASS_NAME = elementConstructor.name;
+      elementConstructor.LIBRARY_TAG_NAME = name;
       customElements.define(name, class extends elementConstructor {} as unknown as CustomElementConstructor, options);
       return;
     }