Add setName to Component

src/dom_components/model/Component.ts

@@ -1347,6 +1347,14 @@ export default class Component extends StyleableModel<ComponentProperties> {
     );
   }
 
+  /**
+   * Update component name.
+   * @param {String} name New name.
+   */
+  setName(name?: string, opts: SetOptions = {}) {
+    this.set('custom-name', name, opts);
+  }
+
   /**
    * Get the icon string
    * @return {String}

src/navigator/view/ItemView.ts

@@ -230,22 +230,18 @@ export default class ItemView extends View {
    */
   handleEditEnd(ev?: KeyboardEvent) {
     ev?.stopPropagation();
-    const { em, $el, clsNoEdit, clsEdit } = this;
+    const { em, $el, clsNoEdit, clsEdit, model } = this;
     const inputEl = this.getInputName();
     const name = inputEl.textContent!;
     inputEl.scrollLeft = 0;
     inputEl[inputProp] = 'false';
-    this.setName(name, { component: this.model, propName: 'custom-name' });
+    model.setName(name);
     em.setEditing(false);
     $el.find(`.${this.inputNameCls}`).addClass(clsNoEdit).removeClass(clsEdit);
     // Ensure to always update the layer name #4544
     this.updateName();
   }
 
-  setName(name: string, { propName }: { propName: string; component?: Component }) {
-    this.model.set(propName, name);
-  }
-
   /**
    * Get the input containing the name of the component
    * @return {HTMLElement}