Cleaning up code and improving chip list.

chip-list.js

@@ -12,40 +12,17 @@ class ChipList extends IgniteElement {
 
     get styles() {
         return /*css*/`
-            mt-chip-list {
-                display: flex;
-                flex-direction: row;
-                flex-wrap: wrap;
-                gap: 12px;
-                border: solid 0.13rem #ced4da;
-                border-radius: 0.3rem;
-                padding: 0.4rem;
-            }
-
-            mt-chip-list.no-border {
-                border-color: transparent;
-            }
-
-            mt-chip-list:focus {
-                outline: none;
-            }
-
             mt-chip-list:hover {
                 cursor: pointer;
             }
 
             mt-chip-list.editing {
-                border: solid 0.13rem rgba(0,0,0,0.1);
+                outline: 0;
-                border-radius: 0.3rem;
+                box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
+                border-color: var(--bs-primary-border-subtle);
             }
 
-            mt-chip-list.placeholder {
+            mt-chip-list .input-container {
-                border: solid 0.13rem #ced4da;
-                border-radius: 0.3rem;
-                color: rgba(0,0,0,0.6);
-            }
-
-            mt-chip-list > .input-container {
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
@@ -54,7 +31,7 @@ class ChipList extends IgniteElement {
                 flex-shrink: 1;
             }
 
-            mt-chip-list > .input-container > .input {
+            mt-chip-list .input-container > .input {
                 outline: none;
             }
 
@@ -97,18 +74,15 @@ class ChipList extends IgniteElement {
 
     render() {
         return this.template
-            .style("position", "relative")
+            .class("form-control form-control-lg position-relative d-flex flex-row flex-wrap gap-2 align-items-center")
-            .class(this.border, value => value ? null : "no-border")
             .class(this.editing, value => value ? "editing" : null)
             .attribute("tabindex", "0")
             .onFocus(e => this.onFocus())
-            .class([this.editing, this.items], (editing, items) => {
-                return !editing && (items == null || items.length == 0) ? "placeholder" : null;
-            })
             .child(
-                new span(this.placeholder).hide([this.editing, this.items], (editing, items) => {
+                //Placeholder
-                    return editing || (items != null && items.length > 0);
+                new span().class("text-muted").child(this.placeholder).hide([this.editing, this.items], (editing, items) => editing || (items != null && items.length > 0)),
-                }),
+
+                //Chips
                 new list(this.items, (item) => {
                     return new Chip()
                         .id(item.id)
@@ -121,6 +95,8 @@ class ChipList extends IgniteElement {
                         })
                         .child(item.content);
                 }),
+
+                //Text input
                 new div()
                     .class("input-container")
                     .child(
@@ -218,7 +194,9 @@ class ChipList extends IgniteElement {
                                     this.onSearchCallback = setTimeout(() => this.onSearch(this, this.input.textContent.trim()), this.onSearchDelay);
                                 }
                             })
-                    ),
+                ),
+
+                //Search results popper
                 new Popper()
                     .property("show", this.searching)
                     .child(

chip.js

@@ -1,6 +1,6 @@
 import { IgniteHtml } from '../ignite-html/ignite-html.js';
 import { IgniteElement } from "../ignite-html/ignite-element.js";
-import { IgniteTemplate, slot, button, span } from "../ignite-html/ignite-template.js";
+import { IgniteTemplate, slot, button, span, i } from "../ignite-html/ignite-template.js";
 
 class Chip extends IgniteElement {
     constructor() {
@@ -21,8 +21,8 @@ class Chip extends IgniteElement {
             mt-chip {
                 border-radius: 1em;
                 background-color: #e0e0e0;
-                padding-top: 0.3em;
+                padding-top: 0.2em;
-                padding-bottom: 0.3em;
+                padding-bottom: 0.2em;
                 padding-left: 0.6em;
                 padding-right: 0.6em;
                 display: flex;
@@ -44,8 +44,8 @@ class Chip extends IgniteElement {
             .child(
                 new slot(this),
                 new button()
-                    .class("btn ml-2 p-0")
+                    .class("btn ms-2 p-0")
-                    .child(`<i class="fal fa-times"></i>`)
+                    .child(new i().class("fa-solid fa-circle-x"))
                     .style("color", this.color)
                     .style("line-height", "1")
                     .style("border", "none")