1.0.259

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.246",
+  "version": "1.0.259",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -15,7 +15,7 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.55",
+    "@design.estate/dees-domtools": "^2.0.57",
     "@design.estate/dees-element": "^2.0.33",
     "@design.estate/dees-wcctools": "^1.0.87",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
@@ -33,7 +33,7 @@
   "devDependencies": {
     "@git.zone/tsbuild": "^2.1.72",
     "@git.zone/tsbundle": "^2.0.15",
-    "@git.zone/tstest": "^1.0.77",
+    "@git.zone/tstest": "^1.0.86",
     "@git.zone/tswatch": "^2.0.21",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^5.0.15",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.246',
+  version: '1.0.259',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-contextmenu.ts

@@ -159,7 +159,7 @@ export class DeesContextmenu extends DeesElement {
               this.destroy();
             }}>
               <dees-icon .iconFA=${'xmark'}></dees-icon
-              >Deactivate Contextmenu globally.
+              >allow native context
             </div>
         ` : html``}
       </div>

ts_web/elements/dees-dataview-statusobject.demo.ts

@@ -1,39 +1,49 @@
-import { html } from '@design.estate/dees-element';
+import { html, cssManager } from '@design.estate/dees-element';
 import * as tsclass from '@tsclass/tsclass';
 
-export const demoFunc = () => html`<dees-dataview-statusobject
-  .statusObject=${{
-    id: '1',
-    name: 'Demo Item',
-    combinedStatus: 'partly_ok',
-    combinedStatusText: 'partly_ok',
-    details: [
-      {
-        name: 'Detail 1',
-        value: 'Value 1',
-        status: 'ok',
-        statusText: 'OK',
-      },
-      {
-        name: 'Detail 2',
-        value: 'Value 2',
-        status: 'partly_ok',
-        statusText: 'partly_ok',
-      },
-      {
-        name: 'Detail 3',
-        value: 'Value 3',
-        status: 'not_ok',
-        statusText: 'not_ok',
-      },
-      {
-        name: 'Detail 4',
-        value:
-          'Value 4 jhdkfjhalskdfjhfdjskalsdkfjhfdjskalskdjfhjdkslaksjdhfjdkslaskdfjhfjdkslaskdjfhjdskalskdjhfdjskalskdjfhdjskl',
-        status: 'ok',
-        statusText: 'OK',
-      },
-    ],
-  } as tsclass.code.IStatusObject}
->
-</dees-dataview-statusobject>`;
+export const demoFunc = () => html` <style>
+    .demo {
+      background: ${cssManager.bdTheme('#eeeeeb', '#000000')};
+      display: block;
+      content: '';
+      padding: 40px;
+    }
+  </style>
+  <div class="demo">
+    <dees-dataview-statusobject
+      .statusObject=${{
+        id: '1',
+        name: 'Demo Item',
+        combinedStatus: 'partly_ok',
+        combinedStatusText: 'partly_ok',
+        details: [
+          {
+            name: 'Detail 1',
+            value: 'Value 1',
+            status: 'ok',
+            statusText: 'OK',
+          },
+          {
+            name: 'Detail 2',
+            value: 'Value 2',
+            status: 'partly_ok',
+            statusText: 'partly_ok',
+          },
+          {
+            name: 'Detail 3',
+            value: 'Value 3',
+            status: 'not_ok',
+            statusText: 'not_ok',
+          },
+          {
+            name: 'Detail 4',
+            value:
+              'Value 4 jhdkfjhalskdfjhfdjskalsdkfjhfdjskalskdjfhjdkslaksjdhfjdkslaskdfjhfjdkslaskdjfhjdskalskdjhfdjskalskdjfhdjskl',
+            status: 'ok',
+            statusText: 'OK',
+          },
+        ],
+      } as tsclass.code.IStatusObject}
+    >
+    </dees-dataview-statusobject>
+  </div>`;

ts_web/elements/dees-dataview-statusobject.ts

@@ -37,6 +37,7 @@ export class DeesDataviewStatusobject extends DeesElement {
         box-shadow: 0px 1px 3px #00000030;
         min-height: 48px;
         color: ${cssManager.bdTheme('#000', '#fff')};
+        border-top: ${cssManager.bdTheme('none', '1px solid #ffffff10')};
         cursor: default;
       }
 
@@ -68,12 +69,12 @@ export class DeesDataviewStatusobject extends DeesElement {
         font-size: 10px;
         font-weight: 600;
         text-transform: uppercase;
-        border: 1px solid ${cssManager.bdTheme('#999', '#444')};
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#444')};
         text-align: center;
         padding: 4px;
         border-radius: 3px;
         margin-right: 16px;
-        color: #ffffff80;
+        color: ${cssManager.bdTheme('#333', '#ffffff80')};
         user-select: none;
       }
 
@@ -106,7 +107,7 @@ export class DeesDataviewStatusobject extends DeesElement {
         align-items: center;
         display: grid;
         grid-template-columns: 40px auto;
-        border-top: 1px dotted ${cssManager.bdTheme('#999', '#282828')};
+        border-top: 1px dotted ${cssManager.bdTheme('#e0e0e0', '#282828')};
         transition: all 0.2s;
       }
 
@@ -114,6 +115,10 @@ export class DeesDataviewStatusobject extends DeesElement {
         background: #ffffff05;
       }
 
+      .detail:active {
+        background: #ffffff10;
+      }
+
       .detail .detailsText {
         padding-top: 8px;
         padding-bottom: 8px;

ts_web/elements/dees-form.demo.ts

@@ -1,13 +1,14 @@
-import { html, domtools } from '@design.estate/dees-element';
+import { html, domtools, cssManager } from '@design.estate/dees-element';
 import type { DeesForm } from './dees-form.js';
 
 export const demoFunc = () => html`
   <style>
     .demoContainer {
       max-width: 400px;
-      margin: auto;
+      margin: 24px auto;
       padding: 16px;
-      background: #111;
+      background: ${cssManager.bdTheme('#eeeeeb', '#111')};
+      box-shadow: 0px 1px 3px #00000030;
     }
   </style>
   <div class="demoContainer">
@@ -38,7 +39,9 @@ export const demoFunc = () => html`
       <dees-input-typelist
         .label=${'a type list'}
       ></dees-input-typelist>
-      <dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
+      <dees-input-text .required="${true}" key="hello1" label="a text" .description=${`
+        This is an awesome description.
+      `}></dees-input-text>
       <dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
       <dees-input-text
         .required="${true}"

ts_web/elements/dees-icon.ts

@@ -52,6 +52,7 @@ import {
   faFileInvoiceDollar as faFileInvoiceDollarSolid,
   faGear as faGearSolid,
   faGrip as faGripSolid,
+  faMagnifyingGlass as faMagnifyingGlassSolid,
   faMessage as faMessageSolid,
   faMoneyCheckDollar as faMoneyCheckDollarSolid,
   faMugHot as faMugHotSolid,
@@ -97,6 +98,7 @@ export const faIcons = {
   fileInvoiceDoller: faFileInvoiceDollarSolid,
   gear: faGearSolid,
   grip: faGripSolid,
+  magnifyingGlass: faMagnifyingGlassSolid,
   message: faMessageRegular,
   messageSolid: faMessageSolid,
   moneyCheckDollar: faMoneyCheckDollarSolid,

ts_web/elements/dees-input-dropdown.ts

@@ -89,7 +89,7 @@ export class DeesInputDropdown extends DeesElement {
 
       .label {
         font-size: 14px;
-        margin-bottom: 4px;
+        margin-bottom: 8px;
       }
 
       .selectedBox {
@@ -102,9 +102,11 @@ export class DeesInputDropdown extends DeesElement {
         background: ${cssManager.bdTheme('#fafafa', '#222222')};
         box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
         border-radius: 3px;
-        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
-        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
+        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
+        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #222')};
         transition: all 0.2s ease;
+        font-size: 16px;
+        color: ${cssManager.bdTheme('#222', '#ccc')};
       }
 
       .selectedBox:hover {
@@ -132,6 +134,8 @@ export class DeesInputDropdown extends DeesElement {
         padding: 4px 8px;
         position: absolute;
         user-select: none;
+        margin: 3px 0px 0px 0px;
+        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
       }
       .selectionBox.top {
         transform: translate(0px, 4px);

ts_web/elements/dees-input-multitoggle.ts

@@ -21,6 +21,11 @@ export class DeesInputMultitoggle extends DeesElement {
   })
   public label: string;
 
+  @property({
+    type: String,
+  })
+  public description: string;
+
   @property()
   type: 'boolean' | 'multi' | 'single' = 'multi';
 
@@ -61,7 +66,7 @@ export class DeesInputMultitoggle extends DeesElement {
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
-        background: #333;
+        background: ${cssManager.bdTheme('#fff', '#222')};
         width: min-content;
         border-radius: 20px;
         height: 32px;
@@ -104,7 +109,7 @@ export class DeesInputMultitoggle extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      ${this.label ? html`<div class="label">${this.label}</div>` : html``}
+      <dees-label .label=${this.label} .description=${this.description}></dees-label>
       <div class="mainbox">
         <div class="selections">
           <div class="indicator"></div>

ts_web/elements/dees-input-text.ts

@@ -1,3 +1,5 @@
+import * as colors from './00colors.js';
+
 import {
   customElement,
   DeesElement,
@@ -31,6 +33,11 @@ export class DeesInputText extends DeesElement {
   })
   public label: string;
 
+  @property({
+    type: String,
+  })
+  public description: string;
+
   @property({
     type: String,
     reflect: true,
@@ -98,11 +105,6 @@ export class DeesInputText extends DeesElement {
         color: ${cssManager.bdTheme('#333', '#ccc')};
       }
 
-      .label {
-        font-size: 14px;
-        margin-bottom: 8px;
-      }
-
       input {
         margin-top: 0px;
         background: ${cssManager.bdTheme('#fafafa', '#222')};
@@ -132,7 +134,7 @@ export class DeesInputText extends DeesElement {
 
       input:focus {
         outline: none;
-        border-bottom: 1px solid #e4002b;
+        border-bottom: 1px solid ${cssManager.bdTheme( colors.bright.blueActive, colors.dark.blueActive)};
         cursor: text;
       }
 
@@ -192,7 +194,7 @@ export class DeesInputText extends DeesElement {
         `}
       </style>
       <div class="maincontainer">
-        ${this.label ? html`<div class="label">${this.label}</div>` : html``}
+        <dees-label .label=${this.label} .description=${this.description}></dees-label>
         <input
           type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}"
           .value=${this.value}

ts_web/elements/dees-label.demo.ts

@@ -0,0 +1,7 @@
+import { html, cssManager } from '@design.estate/dees-element';
+
+export const demoFunc = () => {
+  return html`
+    <dees-label .label=${'a label'}></dees-label>
+  `;
+}

ts_web/elements/dees-label.ts

@@ -0,0 +1,70 @@
+import * as plugins from './00plugins.js';
+import * as colors from './00colors.js';
+
+import {
+  customElement,
+  html,
+  css,
+  cssManager,
+  DeesElement,
+  property,
+  unsafeCSS,
+  query,
+} from '@design.estate/dees-element';
+
+import { demoFunc } from './dees-label.demo.js';
+
+@customElement('dees-label')
+export class DeesLabel extends DeesElement {
+  public static demo = demoFunc;
+
+  // INSTANCE
+
+  @property({
+    type: String,
+    reflect: true,
+  })
+  public label = '';
+
+  @property({
+    type: String,
+    reflect: true,
+  })
+  public description: string;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .label {
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+        font-size: 14px;
+        margin-bottom: 8px;
+        cursor: default;
+        user-select: none;
+      }
+      dees-icon {
+        display: inline-block;
+        font-size: 14px;
+        transform: translateY(1.5px);
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      ${this.label
+        ? html`
+            <div class="label">
+              ${this.label}
+              ${this.description
+                ? html`
+                    <dees-icon .iconFA=${'circleInfo'}></dees-icon>
+                    <dees-speechbubble .text=${this.description}></dees-speechbubble>
+                  `
+                : html``}
+            </div>
+          `
+        : html``}
+    `;
+  }
+}

ts_web/elements/dees-simple-appdash.ts

@@ -35,7 +35,7 @@ export class DeesSimpleAppDash extends DeesElement {
         user-select: none;
       }
       .appbar {
-        position: absolute;
+        position: fixed;
         top: 0;
         height: 40px;
         width: 100%;
@@ -45,12 +45,24 @@ export class DeesSimpleAppDash extends DeesElement {
         line-height: 40px;
         font-family: 'Roboto', 'Inter', sans-serif;
         padding: 0px 16px;
+        z-index: 2;
+        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
+        display: grid;
+        grid-template-columns: 1fr auto;
       }
+
+      .appActions {
+        display: flex;
+      }
+
       .appcontent {
-        position: absolute;
+        z-index: 1;
+        position: fixed;
         top: 40px;
-        bottom: 0;
+        height: calc(100vh - 40px);
+        bottom: 0px;
         width: 100%;
+        overflow: auto;
         background: ${cssManager.bdTheme('#eeeeeb', '#000')};
       }
     `,
@@ -59,7 +71,12 @@ export class DeesSimpleAppDash extends DeesElement {
   public render(): TemplateResult {
     return html`
       <div class="appbar">
-        configvault v1.2.3
+        <div class="appName">${this.name}</div>
+        <div class="appActions">
+          <div class="action">
+            Logout
+          </div>
+        </div>
       </div>
       <div class="appcontent">
         <slot></slot>

ts_web/elements/dees-speechbubble.demo.ts

@@ -0,0 +1,23 @@
+import { html, cssManager } from '@design.estate/dees-element';
+
+export const demoFunc = () => {
+  return html`
+    <style>
+      .ref1 {
+        margin: 20px;
+        width: 10px;
+        height: 10px;
+        background-color: red;
+      }
+    </style>
+    <div class="ref1"></div>
+    <dees-speechbubble .text=${`
+      **This is a longer markdown text that  can be used the write**  
+      a longer description about whats going on the app  
+  
+      **This is a subheader**
+      and another text
+    
+    `}></dees-speechbubble>
+  `;
+};

ts_web/elements/dees-speechbubble.ts

@@ -1,3 +1,7 @@
+import * as colors from './00colors.js';
+import * as plugins from './00plugins.js';
+
+import { demoFunc } from './dees-speechbubble.demo.js';
 import {
   customElement,
   html,
@@ -8,9 +12,11 @@ import {
   css,
   type CSSResult,
   unsafeCSS,
+  domtools,
+  directives,
+  unsafeHTML,
 } from '@design.estate/dees-element';
-
-import * as domtools from '@design.estate/dees-domtools';
+import { DeesWindowLayer } from './dees-windowlayer.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -20,26 +26,53 @@ declare global {
 
 @customElement('dees-speechbubble')
 export class DeesSpeechbubble extends DeesElement {
-  public static demo = () => html` <dees-speechbubble></dees-speechbubble> `;
+  public static demo = demoFunc;
 
-  @property()
+  // STATIC
+  public static async createAndShow(refElement: HTMLElement, textArg: string) {
+    const windowLayer = await DeesWindowLayer.createAndShow({
+      blur: false,
+    });
+    const speechbubble = document.createElement('dees-speechbubble');
+    speechbubble.windowLayer = windowLayer;
+    speechbubble.reffedElement = refElement;
+    speechbubble.text = textArg;
+    speechbubble.manifested = true;
+    windowLayer.appendChild(speechbubble);
+    windowLayer.style.pointerEvents = 'none';
+    (windowLayer.shadowRoot.querySelector('.windowOverlay') as HTMLElement).style.pointerEvents = 'none';
+    return speechbubble;
+  }
+
+  // INSTANCE
+  @property({
+    type: Object,
+  })
+  reffedElement: HTMLElement;
+
+  @property({
+    type: String,
+    reflect: true,
+  })
   public text: string;
 
   @property({
     type: Boolean,
   })
-  public disabled = false;
+  public wave: boolean = false;
 
   @property({
     type: Boolean,
   })
-  public isHidden = false;
+  public manifested = false;
 
   @property({
     type: String,
   })
   public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
+  public windowLayer: DeesWindowLayer;
+
   constructor() {
     super();
   }
@@ -48,27 +81,22 @@ export class DeesSpeechbubble extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        position: relative;
-        display: block;
         box-sizing: border-box;
         color: ${cssManager.bdTheme('#333', '#fff')};
         user-select: none;
       }
-      :host([hidden]) {
-        display: none;
-      }
 
       .maincontainer {
+        position: relative;
         will-change: transform;
         transition: transform 0.2s;
         transform: translateX(0px);
-        position: relative;
         transition: all 0.2s;
         margin-left: 0px;
-      }
-
-      .maincontainer:hover {
-        transform: translateX(3px);
+        filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
+        pointer-events: none;
+        opacity: 0;
+        transition: all 0.2s;
       }
 
       .arrow {
@@ -77,17 +105,17 @@ export class DeesSpeechbubble extends DeesElement {
         background: ${cssManager.bdTheme('#fff', '#333')};
         height: 15px;
         width: 15px;
-        left: 4px;
-        top: 5px;
-        border-radius: 2px;
+        left: 2px;
+        top: 12px;
+        border-radius: 3px;
       }
 
       .speechbubble {
         background: ${cssManager.bdTheme('#fff', '#333')};
-        padding: 0px 10px;
+        padding: 0px 16px;
         border-radius: 3px;
         position: absolute;
-        line-height: 25px;
+        min-width: 240px;
         font-size: 12px;
         top: 0px;
         left: 8px;
@@ -132,25 +160,70 @@ export class DeesSpeechbubble extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="maincontainer" @click=${this.handleClick}>
-        <div class="arrow"></div>
-        <div class="speechbubble"><span class="wave">👋</span> We build with launch.sh, and you can too.</div>
-      </div>
+      ${this.manifested
+        ? html`
+            <div class="maincontainer" @click=${this.handleClick}>
+              <div class="arrow"></div>
+              <div class="speechbubble">
+                ${this.wave ? html`<span class="wave">👋</span>` : html``}
+                ${directives.resolve(this.getHtml())}
+              </div>
+            </div>
+          `
+        : html``}
     `;
   }
 
   public async handleClick() {
-    if (this.disabled) {
-      return;
-    }
-
-    globalThis.location.href = "https://launch.sh"
+    console.log('speechbubble got clicked.');
   }
 
   public async firstUpdated() {
-    if (!this.textContent) {
-      this.textContent = 'Button';
-      this.performUpdate();
+    // lets make sure we have a ref
+    if (!this.reffedElement) {
+      this.reffedElement = this.previousElementSibling as HTMLElement;
+    }
+    if (this.manifested) {
+      await this.updatePosition();
+      (this.shadowRoot.querySelector('.maincontainer') as HTMLElement).style.opacity = '1';
+    } else {
+      // lets make sure we instrument it
+      let speechbubble: DeesSpeechbubble;
+      this.reffedElement.addEventListener('mouseenter', async () => {
+        speechbubble = await DeesSpeechbubble.createAndShow(this.reffedElement, this.text);
+      });
+      this.reffedElement.addEventListener('mouseleave', () => {
+        speechbubble.destroy();
+      });
     }
   }
+
+  public async updatePosition() {
+    const refElement = this.reffedElement;
+    const boundingClientRect = refElement.getBoundingClientRect();
+    this.style.position = 'fixed';
+    this.style.top = `${boundingClientRect.top - 13}px`;
+    this.style.left = `${boundingClientRect.left + refElement.clientWidth + 4}px`;
+    if (boundingClientRect.right > 250) {
+      this.style.width = `250px`;
+    }
+  }
+
+  public async getHtml(): Promise<any> {
+    if (!this.text) {
+      return '';
+    }
+    const normalized = domtools.plugins.smartstring.normalize.standard(this.text);
+    const result = await domtools.plugins.smartmarkdown.SmartMarkdown.easyMarkdownToHtml(
+      normalized
+    );
+    return unsafeHTML(result);
+  }
+
+  public async show() {}
+
+  public async destroy() {
+    (this.shadowRoot.querySelector('.maincontainer') as HTMLElement).style.opacity = '0';
+    this.windowLayer.destroy();
+  }
 }

ts_web/elements/dees-table.ts

@@ -117,12 +117,21 @@ export class DeesTable<T> extends DeesElement {
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesTable<T>>();
   // end dees-form compatibility -----------------------------------------
 
+  /**
+   * What does a row of data represent?
+   */
   @property({
     type: String,
     reflect: true,
   })
   public dataName: string;
 
+
+  @property({
+    type: Boolean,
+  })
+  searchable: boolean = true;
+
   @property({
     type: Array,
   })
@@ -169,9 +178,9 @@ export class DeesTable<T> extends DeesElement {
         display: block;
         width: 100%;
         min-height: 50px;
-        background: ${cssManager.bdTheme('#ffffff', '#333333')};
+        background: ${cssManager.bdTheme('#ffffff', '#222222')};
         border-radius: 3px;
-        border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
+        border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff10')};
         box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
         overflow-x: auto;
         cursor: default;
@@ -199,15 +208,20 @@ export class DeesTable<T> extends DeesElement {
 
       .headingSeparation {
         margin-top: 7px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#444444')};
       }
 
       .headerActions {
+        user-select: none;
+        display: flex;
+        flex-direction: row;
         margin-left: auto;
       }
       .headerAction {
         display: flex;
+        flex-direction: row;
         color: ${cssManager.bdTheme('#333', '#ccc')};
+        margin-left: 16px;
       }
 
       .headerAction:hover {
@@ -218,6 +232,24 @@ export class DeesTable<T> extends DeesElement {
         margin-right: 8px;
       }
 
+      .searchGrid {
+        background: ${cssManager.bdTheme('#fff', '#111111')};
+        display: grid;
+        grid-gap: 16px;
+        grid-template-columns: 1fr 200px;
+        margin-top: 16px;
+        padding: 0px 16px;
+        border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff20')};
+        border-radius: 8px;
+      }
+
+      .searchGrid.hidden {
+        height: 0px;
+        opacity: 0;
+        overflow: hidden;
+        margin-top: 0px;
+      }
+
       table,
       .noDataSet {
         margin-top: 16px;
@@ -237,7 +269,6 @@ export class DeesTable<T> extends DeesElement {
         text-align: left;
       }
       tr:hover {
-        
       }
       tr:hover td {
         background: ${cssManager.bdTheme('#22222210', '#ffffff10')};
@@ -306,19 +337,20 @@ export class DeesTable<T> extends DeesElement {
         font-weight: inherit;
         padding: 0px 6px;
       }
-
-      .action {
-        margin: -6px 0px;
-        padding: 10px;
-        line-height: 36px;
-        height: 36px;
-        display: inline-block;
-        border-radius: 8px;
+      .actionsContainer {
+        display: flex;
+        flex-direction: row;
+        height: 24px;
+        transform: translateY(-4px);
+        margin-left: -6px;
       }
-
-      .action:first-child {
-        margin-left: -8px;
-        width: min-content;
+      .action {
+        position: relative;
+        padding: 8px 10px;
+        line-height: 24px;
+        height: 32px;
+        size: 16px;
+        border-radius: 8px;
       }
 
       .action:hover {
@@ -369,7 +401,6 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .footerActions .footerAction:hover dees-icon {
-        
       }
     `,
   ];
@@ -410,8 +441,32 @@ export class DeesTable<T> extends DeesElement {
           </div>
         </div>
         <div class="headingSeparation"></div>
-
-        <dees-input-text></dees-input-text>
+        <div class="searchGrid hidden">
+          <dees-input-text
+            .label=${'lucene syntax search'}
+            .description=${`
+              You can use the lucene syntax to search for data, e.g.:
+              
+              \`\`\`
+              name: "john" AND age: 18
+              \`\`\`
+              
+            `}
+          ></dees-input-text>
+          <dees-input-multitoggle
+            .label=${'search mode'}
+            .options=${['table', 'data', 'server']}
+            .selectedOption=${'table'}
+            .description=${`
+              There are three basic modes:
+              
+              * table: only searches data already in the table
+              * data: searches original data, ignoring table transforms
+              * server: searches data on the server
+              
+            `}
+          ></dees-input-multitoggle>
+        </div>
 
         <!-- the actual table -->
         <style></style>
@@ -538,22 +593,28 @@ export class DeesTable<T> extends DeesElement {
                             return html`
                               <td>
                                 <div class="innerCellContainer">
-                                  ${this.getActionsForType('inRow').map(
-                                    (actionArg) => html`<div
-                                      class="action"
-                                      @click=${() =>
-                                        actionArg.actionFunc({
-                                          item: itemArg,
-                                          table: this,
-                                        })}
-                                    >
-                                      ${actionArg.iconName
-                                        ? html`
-                                            <dees-icon .iconFA=${actionArg.iconName}></dees-icon>
-                                          `
-                                        : actionArg.name}
-                                    </div>`
-                                  )}
+                                  <div class="actionsContainer">
+                                    ${this.getActionsForType('inRow').map(
+                                      (actionArg) => html`
+                                        <div
+                                          class="action"
+                                          @click=${() =>
+                                            actionArg.actionFunc({
+                                              item: itemArg,
+                                              table: this,
+                                            })}
+                                        >
+                                          ${actionArg.iconName
+                                            ? html`
+                                                <dees-icon
+                                                  .iconFA=${actionArg.iconName}
+                                                ></dees-icon>
+                                              `
+                                            : actionArg.name}
+                                        </div>
+                                      `
+                                    )}
+                                  </div>
                                 </div>
                               </td>
                             `;
@@ -602,11 +663,30 @@ export class DeesTable<T> extends DeesElement {
     `;
   }
 
-  public async firstUpdated() {}
+  public async firstUpdated() {
+    
+  }
 
   public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
     super.updated(changedProperties);
     this.determineColumnWidths();
+    if (this.searchable) {
+      const existing = this.dataActions.find((actionArg) => actionArg.type.includes('header') && actionArg.name === 'Search');
+      if (!existing) {
+        this.dataActions.unshift({
+          name: 'Search',
+          iconName: 'magnifyingGlass',
+          type: ['header'],
+          actionFunc: async () => {
+            console.log('open search');
+            const searchGrid = this.shadowRoot.querySelector('.searchGrid');
+            searchGrid.classList.toggle('hidden');
+          }
+        });
+        console.log(this.dataActions);
+        this.requestUpdate();
+      };
+    }
   }
 
   public async determineColumnWidths() {
@@ -627,7 +707,7 @@ export class DeesTable<T> extends DeesElement {
       const width = window.getComputedStyle(cell).width;
       if (cell.textContent.includes('Actions')) {
         const neededWidth =
-          this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 35;
+          this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 36;
         cell.style.width = `${Math.max(neededWidth, 68)}px`;
       } else {
         cell.style.width = width;

ts_web/elements/index.ts

@@ -18,6 +18,7 @@ export * from './dees-progressbar.js';
 export * from './dees-input-quantityselector.js';
 export * from './dees-input-radio.js';
 export * from './dees-input-text.js';
+export * from './dees-label.js';
 export * from './dees-mobilenavigation.js';
 export * from './dees-modal.js';
 export * from './dees-input-multitoggle.js';