#631 se-list-item modification changes

src/editor/components/seList.js

@@ -40,13 +40,15 @@ export class SeList extends HTMLElement {
     this._shadowRoot.append(template.content.cloneNode(true));
     this.$dropdown = this._shadowRoot.querySelector('elix-dropdown-list');
     this.$label = this._shadowRoot.querySelector('label');
+    this.$selction = this.$dropdown.shadowRoot.querySelector('#source').querySelector('#value');
+    this.items = this.querySelectorAll("se-list-item");
   }
   /**
    * @function observedAttributes
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'label', 'width', 'height', 'title' ];
+    return [ 'label', 'width', 'height', 'title', 'value' ];
   }
 
   /**
@@ -57,6 +59,7 @@ export class SeList extends HTMLElement {
    * @returns {void}
    */
   attributeChangedCallback (name, oldValue, newValue) {
+    const currentObj = this;
     if (oldValue === newValue) return;
     switch (name) {
     case 'title':
@@ -71,6 +74,23 @@ export class SeList extends HTMLElement {
     case 'width':
       this.$dropdown.style.width = newValue;
       break;
+    case 'value':
+      Array.from(this.items).forEach(function (element) {
+        if(element.getAttribute("value") === newValue) {
+          if (element.hasAttribute("src")) {
+            while(currentObj.$selction.firstChild)
+              currentObj.$selction.removeChild(currentObj.$selction.firstChild);
+            const img = document.createElement('img');
+            img.src = './images/' + element.getAttribute("src");
+            img.style.height = element.getAttribute("img-height");
+            img.setAttribute('title', t(element.getAttribute("title")));
+            currentObj.$selction.append(img);
+          } else {
+            currentObj.$selction.textContent = t(element.getAttribute('option'));
+          }
+        }
+      });
+      break;
     default:
       // eslint-disable-next-line no-console
       console.error(`unknown attribute: ${name}`);
@@ -149,6 +169,7 @@ export class SeList extends HTMLElement {
         const closeEvent = new CustomEvent('change', { detail: { value } });
         currentObj.dispatchEvent(closeEvent);
         currentObj.value = value;
+        currentObj.setAttribute("value", value);
       }
     });
     this.$dropdown.addEventListener('close', (_e) => {

src/editor/components/seListItem.js

@@ -1,4 +1,5 @@
 import 'elix/define/Option.js';
+import { t } from '../locale.js';
 
 const template = document.createElement('template');
 template.innerHTML = `
@@ -12,6 +13,7 @@ template.innerHTML = `
   }
   </style>
   <elix-option aria-label="option">
+    <img alt="icon" />
     <slot></slot>
   </elix-option>
 `;
@@ -30,13 +32,15 @@ export class SeListItem extends HTMLElement {
     this.$menuitem = this._shadowRoot.querySelector('elix-option');
     this.$svg = this.$menuitem.shadowRoot.querySelector('#checkmark');
     this.$svg.setAttribute('style', 'display: none;');
+    this.$img = this._shadowRoot.querySelector('img');
+    this.$img.setAttribute('style', 'display: none;');
   }
   /**
    * @function observedAttributes
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'option' ];
+    return [ 'option', 'src', 'title', 'img-height' ];
   }
 
   /**
@@ -51,6 +55,17 @@ export class SeListItem extends HTMLElement {
     switch (name) {
     case 'option':
       this.$menuitem.setAttribute('option', newValue);
+      this.$menuitem.textContent = t(newValue);
+      break;
+    case 'src':
+      this.$img.setAttribute('style', 'display: block;');
+      this.$img.setAttribute('src', './images/' + newValue);
+      break;
+    case 'title':
+      this.$img.setAttribute('title', t(newValue));
+      break;
+    case 'img-height':
+      this.$img.setAttribute('height', newValue);
       break;
     default:
       // eslint-disable-next-line no-console
@@ -73,6 +88,51 @@ export class SeListItem extends HTMLElement {
   set option (value) {
     this.setAttribute('option', value);
   }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get title () {
+    return this.getAttribute('title');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set title (value) {
+    this.setAttribute('title', value);
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get imgHeight () {
+    return this.getAttribute('img-height');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set imgHeight (value) {
+    this.setAttribute('img-height', value);
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get src () {
+    return this.getAttribute('src');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set src (value) {
+    this.setAttribute('src', value);
+  }
 }
 
 // Register