1.0.254

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.248",
+  "version": "1.0.254",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

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

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';
 
@@ -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-table.ts

@@ -311,18 +311,21 @@ export class DeesTable<T> extends DeesElement {
         font-weight: inherit;
         padding: 0px 6px;
       }
-
-      .action {
-        margin: -4px 0px;
-        padding: 10px;
-        line-height: 34px;
-        height: 34px;
-        size: 16px;
+      .actionContainer {
+        height: 24px;
         display: inline-block;
+        transform: translateY(-4px);
+      }
+      .action {
+        position: relative;
+        padding: 8px 10px;
+        line-height: 24px;
+        height: 32px;
+        size: 16px;
         border-radius: 8px;
       }
 
-      .action:first-child {
+      .actionContainer:first-child {
         margin-left: -6px;
         width: min-content;
       }
@@ -425,10 +428,12 @@ export class DeesTable<T> extends DeesElement {
               name: "john" AND age: 18
               \`\`\`
               
-            `}></dees-input-text>
+            `}
+          ></dees-input-text>
           <dees-input-multitoggle
             .label=${'search mode'}
             .options=${['table', 'data', 'server']}
+            .selectedOption=${'table'}
             .description=${`
               There are three basic modes:
               
@@ -566,19 +571,21 @@ export class DeesTable<T> extends DeesElement {
                               <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}
+                                    (actionArg) => html`<div class="actionContainer">
+                                      <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>
@@ -654,7 +661,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;