fix(core): update

ts_web/elements/dees-input-multitoggle.ts

@@ -16,6 +16,11 @@ const { demoFunc } = await import('./dees-input-multitoggle.demo.js');
 export class DeesInputMultitoggle extends DeesElement {
   public static demo = demoFunc;
 
+  @property({
+    type: String,
+  })
+  public label: string;
+
   @property()
   type: 'boolean' | 'multi' | 'single' = 'multi';
 
@@ -40,9 +45,17 @@ export class DeesInputMultitoggle extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        display: block;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
         user-select: none;
+        margin: 8px 0px 24px 0px;
       }
+
+      .label {
+        font-size: 14px;
+        margin-bottom: 8px;
+      }
+
       .selections {
         position: relative;
         display: flex;
@@ -51,30 +64,37 @@ export class DeesInputMultitoggle extends DeesElement {
         background: #333;
         width: min-content;
         border-radius: 20px;
-        height: 40px;
+        height: 32px;
+        border-top: 1px solid #ffffff10;
       }
 
       .option {
-        color: #CCC;
+        color: #ccc;
         position: relative;
         padding: 0px 16px;
-        line-height: 40px;
+        line-height: 32px;
         cursor: default;
         width: min-content; /* Make the width as per the content */
         white-space: nowrap; /* Prevent text wrapping */
         transition: all 0.1s;
+        font-size: 14px;
+        transform: translateY(-1px);
       }
 
       .option:hover {
         color: #fff;
       }
 
+      .option.selected {
+        color: #fff;
+      }
+
       .indicator {
         opacity: 0;
         position: absolute;
-        height: 32px;
+        height: 24px;
         left: 4px;
-        top: 4px;
+        top: 3px;
         border-radius: 16px;
         background: #0050b9;
         min-width: 36px;
@@ -84,11 +104,16 @@ export class DeesInputMultitoggle extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="label">MultiSelect</div>
+      ${this.label ? html`<div class="label">${this.label}</div>` : html``}
       <div class="mainbox">
         <div class="selections">
           <div class="indicator"></div>
-          ${this.options.map((option) => html` <div class="option" @click=${() => this.handleSelection(option)}>${option}</div> `)}
+          ${this.options.map(
+            (option) =>
+              html`<div class="option ${option === this.selectedOption ? 'selected': ''}" @click=${() => this.handleSelection(option)}>
+                ${option}
+              </div> `
+          )}
         </div>
       </div>
     `;
@@ -108,7 +133,9 @@ export class DeesInputMultitoggle extends DeesElement {
 
   public async setIndicator() {
     const indicator: HTMLDivElement = this.shadowRoot.querySelector('.indicator');
-    const option: HTMLDivElement = this.shadowRoot.querySelector(`.option:nth-child(${this.options.indexOf(this.selectedOption) + 2})`);
+    const option: HTMLDivElement = this.shadowRoot.querySelector(
+      `.option:nth-child(${this.options.indexOf(this.selectedOption) + 2})`
+    );
     if (indicator && option) {
       indicator.style.width = `${option.clientWidth - 8}px`;
       indicator.style.left = `${option.offsetLeft + 4}px`;