Fixed exemple page and collback

src/cg-select.ts

@@ -43,7 +43,7 @@ export class CGSelect implements ICgSelect {
   nativeSelectMode?: boolean;
   listDisplayMode?: boolean;
   language?: string;
-  lable?: string;
+  label?: string;
   styles?: IStyle;
   event?: string;
   url?: string;
@@ -74,7 +74,7 @@ export class CGSelect implements ICgSelect {
    * Variable for carriage control.
    * @type {Element | null | undefined}
    */
-  private caret: Element | null | undefined;
+  private carriage: Element | null | undefined;
   /**
    * Transferred categories.
    * @type {string}
@@ -94,7 +94,7 @@ export class CGSelect implements ICgSelect {
    * Button, to control the select.
    * @type {Element | null}
    */
-  private btnCntr?: Element | null;
+  private buttonAction?: Element | null;
 
   /**
    * @param {ICgSelect} setting Object accepting select settings.
@@ -105,7 +105,7 @@ export class CGSelect implements ICgSelect {
    *  selector: 'Unique selector',
       selected: 'Selected item',
       placeholder: '...',
-      lable: '...'
+      label: '...'
       items: [string|number|object],
       theme: string,
       searchMode: true/false,
@@ -119,9 +119,9 @@ export class CGSelect implements ICgSelect {
         },
         list: {...},
         chips: {...},
-        caret: {...},
+        carriage: {...},
         placeholder: {...},
-        lable: {..},
+        label: {..},
       },
       event: '...',
       url: 'http/...',
@@ -191,7 +191,7 @@ export class CGSelect implements ICgSelect {
       searchMode,
       language,
       styles,
-      lable,
+      label,
       event,
       selected,
       placeholder,
@@ -210,7 +210,7 @@ export class CGSelect implements ICgSelect {
     this.nativeSelectMode = nativeSelectMode;
     this.listDisplayMode = listDisplayMode;
     this.styles = styles;
-    this.lable = lable;
+    this.label = label;
     this.event = event;
     this.selected = selected;
     this.placeholder = placeholder;
@@ -231,14 +231,14 @@ export class CGSelect implements ICgSelect {
       return;
     }
 
-    if (this.lable) {
-      const lableItem = document.createElement('h1');
-      const textLable = document.createTextNode(this.lable);
+    if (this.label) {
+      const labelItem = document.createElement('h1');
+      const textLabel = document.createTextNode(this.label);
 
-      lableItem.appendChild(textLable);
-      lableItem.classList.add('label');
+      labelItem.appendChild(textLabel);
+      labelItem.classList.add('label');
 
-      this.element!.insertAdjacentElement('beforebegin', lableItem);
+      this.element!.insertAdjacentElement('beforebegin', labelItem);
     }
 
     items.forEach((dataItem: any, index: number) => {
@@ -354,7 +354,7 @@ export class CGSelect implements ICgSelect {
     });
 
     this.list = this.element!.querySelector('.list');
-    this.caret = this.element!.querySelector('.caret');
+    this.carriage = this.element!.querySelector('.caret');
 
     if (this.theme) {
       changeTheme(this.element!, this.theme!);
@@ -491,10 +491,10 @@ export class CGSelect implements ICgSelect {
   private open(oneClick?: boolean): void {
     if (oneClick === true) {
       this.list!.classList.add('open');
-      this.caret!.classList.add('caret_rotate');
+      this.carriage!.classList.add('caret_rotate');
     } else {
       this.list!.classList.toggle('open');
-      this.caret!.classList.toggle('caret_rotate');
+      this.carriage!.classList.toggle('caret_rotate');
     }
   }
 
@@ -505,7 +505,7 @@ export class CGSelect implements ICgSelect {
    */
   private close(): void {
     this.list?.classList.remove('open');
-    this.caret?.classList.remove('caret_rotate');
+    this.carriage?.classList.remove('caret_rotate');
   }
 
   /**
@@ -519,7 +519,7 @@ export class CGSelect implements ICgSelect {
     document.addEventListener('click', (e) => {
       const withinBoundaries = e.composedPath().includes(dropdown!);
       if (!withinBoundaries) {
-        if (this.btnCntr) {
+        if (this.buttonAction) {
           return;
         } else {
           this.close();
@@ -815,7 +815,7 @@ export class CGSelect implements ICgSelect {
       return;
     }
 
-    this.btnCntr = button!;
+    this.buttonAction = button!;
     button.addEventListener('click', () => {
       if (method.toLowerCase() === 'open') {
         this.open(true);
@@ -945,6 +945,15 @@ export class CGSelect implements ICgSelect {
         });
         callback(state);
         break;
+      case 'clear':
+        this.element!.addEventListener('click', () => {
+          const svgIcon = this.element?.querySelector('.svg-icon');
+          svgIcon?.addEventListener('click', () => {
+            console.log('list:clear', svgIcon.classList.contains('svg-clear'));
+          });
+        });
+        callback(state);
+        break;
     }
   }
 }

src/components/utils/utils.ts

@@ -143,7 +143,9 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex
 
   select!.appendChild(svgIcon);
 
-  svgIcon.addEventListener('click', () => {
+  svgIcon.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
     select!.innerText = '';
 
     nativeOption.forEach((option) => {

src/interfaces/cg-select.interface.ts

@@ -61,7 +61,7 @@ export interface ICgSelect {
    * An optional parameter that adds a lable before the select.
    * @type {string}
    */
-  lable?: string;
+  label?: string;
   /**
    * An optional parameter that is responsible for customizing the select elements,
    * objects with CSS properties for customizable elements are passed to it.