Update Selectors tags in selector manager.

src/dom_components/model/Component.ts

@@ -655,7 +655,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
     if (opts.noClass) {
       delete attributes.class;
     } else {
-      this.classes.forEach(cls => classes.push(isString(cls) ? cls : cls.get('name')));
+      this.classes.forEach(cls => classes.push(isString(cls) ? cls : cls.getName()));
       classes.length && (attributes.class = classes.join(' '));
     }
 

src/dom_components/view/ComponentView.ts

@@ -211,7 +211,7 @@ Component> {
   importClasses() {
     const { em, model } = this;
     const sm = em.Selectors;
-    sm && model.classes.forEach(s => sm.add(s.get('name')));
+    sm && model.classes.forEach(s => sm.add(s.getName()));
   }
 
   /**

src/selector_manager/model/Selector.ts

@@ -23,7 +23,7 @@ export interface SelectorProps {
  * @property {Boolean} [private=false] If true, it can't be seen by the Style Manager, but it will be rendered in the canvas and in export code.
  * @property {Boolean} [protected=false] If true, it can't be removed from the attached component.
  */
-export default class Selector extends Model {
+export default class Selector extends Model<SelectorProps & { [key: string]: unknown }> {
   defaults() {
     return {
       name: '',
@@ -57,7 +57,7 @@ export default class Selector extends Model {
       this.set('label', name);
     }
 
-    const namePreEsc = this.get('name');
+    const namePreEsc = this.get('name')!;
     const { escapeName } = config;
     const nameEsc = escapeName ? escapeName(namePreEsc) : Selector.escapeName(namePreEsc);
     this.set('name', nameEsc);
@@ -101,6 +101,18 @@ export default class Selector extends Model {
     return this.getFullName();
   }
 
+  /**
+   * Get selector name.
+   * @returns {String}
+   * @example
+   * // Given such selector: { name: 'my-selector', label: 'My selector' }
+   * console.log(selector.getLabel());
+   * // -> `my-selector`
+   */
+  getName() {
+    return this.get('name') || '';
+  }
+
   /**
    * Get selector label.
    * @returns {String}
@@ -110,7 +122,7 @@ export default class Selector extends Model {
    * // -> `My selector`
    */
   getLabel() {
-    return this.get('label');
+    return this.get('label') || '';
   }
 
   /**
@@ -130,8 +142,8 @@ export default class Selector extends Model {
    * Get selector active state.
    * @returns {Boolean}
    */
-  getActive(): boolean {
-    return this.get('active');
+  getActive() {
+    return !!this.get('active');
   }
 
   /**

src/selector_manager/model/Selectors.ts

@@ -17,30 +17,25 @@ export default class Selectors extends Collection<Selector> {
   }
 
   getStyleable() {
-    return filter(
-      this.models,
-      (item) => item.get('active') && !item.get('private')
-    );
+    return filter(this.models, item => item.getActive() && !item.get('private'));
   }
 
   getValid({ noDisabled }: any = {}) {
-    return filter(this.models, (item) => !item.get('private')).filter((item) =>
-      noDisabled ? item.get('active') : 1
-    );
+    return filter(this.models, item => !item.get('private')).filter(item => (noDisabled ? item.get('active') : 1));
   }
 
   getFullString(collection?: Selector[] | null, opts: { sort?: boolean } = {}) {
     const result: string[] = [];
     const coll = collection || this;
-    coll.forEach((selector) => result.push(selector.getFullName(opts)));
+    coll.forEach(selector => result.push(selector.getFullName(opts)));
     opts.sort && result.sort();
     return result.join('').trim();
   }
 
   getFullName(opts: any = {}) {
     const { combination, array } = opts;
     let result: string[] = [];
-    const sels = this.map((s) => s.getFullName(opts)).sort();
+    const sels = this.map(s => s.getFullName(opts)).sort();
 
     if (combination) {
       sels.forEach((sel, n) => {

src/selector_manager/view/ClassTagView.ts

@@ -2,6 +2,8 @@ import { View } from '../../common';
 import Selector from '../model/Selector';
 import html from '../../utils/html';
 import EditorModel from '../../editor/model/Editor';
+import SelectorManager from '..';
+import { SelectorManagerConfig } from '../config/config';
 
 const inputProp = 'contentEditable';
 
@@ -13,7 +15,7 @@ export default class ClassTagView extends View<Selector> {
     return html`
       <span id="${pfx}checkbox" class="${pfx}tag-status" data-tag-status></span>
       <span id="${pfx}tag-label" data-tag-name>${label}</span>
-      <span id="${pfx}close" class="${pfx}tag-close" data-tag-remove> $${config.iconTagRemove} </span>
+      <span id="${pfx}close" class="${pfx}tag-close" data-tag-remove> $${config.iconTagRemove!} </span>
     `;
   }
 
@@ -25,11 +27,11 @@ export default class ClassTagView extends View<Selector> {
       'focusout [data-tag-name]': 'endEditTag',
     };
   }
-  config: any;
-  module: any;
+  config: SelectorManagerConfig;
+  module: SelectorManager;
   coll: any;
-  pfx: any;
-  ppfx: any;
+  pfx: string;
+  ppfx: string;
   em: EditorModel;
   inputEl?: HTMLElement;
 
@@ -64,7 +66,6 @@ export default class ClassTagView extends View<Selector> {
   startEditTag() {
     const { em } = this;
     const inputEl = this.getInputEl();
-    inputEl;
     inputEl[inputProp] = 'true';
     inputEl.focus();
     em?.setEditing(true);
@@ -84,7 +85,7 @@ export default class ClassTagView extends View<Selector> {
     em?.setEditing(false);
 
     if (sm && sm.rename(model, label) !== model) {
-      inputEl.innerText = model.get('label');
+      inputEl.innerText = model.getLabel();
     }
   }
 
@@ -94,7 +95,7 @@ export default class ClassTagView extends View<Selector> {
    */
   changeStatus() {
     const { model } = this;
-    model.set('active', !model.get('active'));
+    model.set('active', !model.getActive());
   }
 
   /**
@@ -116,19 +117,21 @@ export default class ClassTagView extends View<Selector> {
     const $chk = $el.find('[data-tag-status]');
 
     if (model.get('active')) {
-      $chk.html(iconTagOn);
+      $chk.html(iconTagOn!);
       $el.removeClass('opac50');
     } else {
-      $chk.html(iconTagOff);
+      $chk.html(iconTagOff!);
       $el.addClass('opac50');
     }
   }
 
   render() {
-    const pfx = this.pfx;
-    const ppfx = this.ppfx;
-    this.$el.html(this.template());
-    this.$el.attr('class', `${pfx}tag ${ppfx}three-bg`);
+    const { pfx, ppfx, $el, model } = this;
+    const mainCls = `${pfx}tag`;
+    const classes = [`${mainCls} ${ppfx}three-bg`];
+    model.get('protected') && classes.push(`${mainCls}-protected`);
+    $el.html(this.template());
+    $el.attr('class', classes.join(' '));
     this.updateStatus();
     return this;
   }