New breanch. Low file sliting

src/components/create-element.js

@@ -0,0 +1,50 @@
+export function createBreadcrumb(options, element, indexes, selectedItems, value, index, id) {
+  const { placeholder } = options;
+
+  const selected = element.querySelector('.selected');
+
+  const li = document.createElement('li');
+  const text = document.createTextNode(value);
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+
+  svg.setAttribute('viewBox', '0 0 10 10');
+  path1.setAttribute('d', 'M3,7 L7,3');
+  path2.setAttribute('d', 'M3,3 L7,7');
+  li.setAttribute('id', `tag-${index}`);
+
+  svg.classList.add('svg-icon');
+
+  svg.appendChild(path1);
+  svg.appendChild(path2);
+  li.appendChild(text);
+  li.appendChild(svg);
+
+  svg.addEventListener('click', (event) => {
+    event.stopPropagation();
+
+    const deleteIcon = indexes.indexOf(index);
+
+    indexes.splice(deleteIcon, 1);
+    selectedItems.splice(deleteIcon, 1);
+
+    let checkBox = '';
+    if (id) {
+      checkBox = document.getElementById(`chbox-${id}`);
+    } else {
+      checkBox = document.getElementById(`chbox-${index}`);
+    }
+
+    checkBox.checked = false;
+    checkBox.parentElement.classList.remove('active');
+
+    if (!selectedItems.length) {
+      selected.innerText = placeholder;
+    }
+
+    li.parentElement.removeChild(li);
+  });
+
+  return li;
+}

src/components/utils.js

@@ -0,0 +1,53 @@
+export function createSelected(element, content, styles) {
+  if (content) {
+    element.innerHTML = `
+      <div class="cg-select">
+          <p class="selected">${content}</p>
+          <div class="caret"></div>
+      </div>
+      `;
+  }
+
+  if (styles) {
+    customStyles(element, styles);
+
+    element.innerHTML = `
+            <div class="cg-select" style = "${styles}">
+                <span class="selected" style = "${styles}">${content}</span>
+                <div class="caret" style = "${styles}"></div>
+            </div>
+    `;
+  }
+}
+
+export function customStyles(element, styles) {
+  if (!styles) {
+    return;
+  }
+
+  const { head, caret, placeholder } = styles;
+  const select = element.querySelector('.cg-select');
+  const crt = element.querySelector('.caret');
+
+  const placeh = element.querySelector('.selected');
+
+  if (head) {
+    Object.entries(head).forEach(([key, value]) => {
+      select.style[key] = value;
+    });
+  }
+
+  if (caret) {
+    Object.entries(caret).forEach(([key, value]) => {
+      crt.style[key] = value;
+    });
+  }
+
+  if (placeh) {
+    if (placeholder) {
+      Object.entries(placeholder).forEach(([key, value]) => {
+        placeh.style[key] = value;
+      });
+    }
+  }
+}