@exmg/exm-grid 1.1.5-alpha.5 → 1.1.5-alpha.6

package/dist/search/exm-toolbar-search.d.ts

@@ -8,6 +8,7 @@ export declare class ToolbarSearch extends ExmgElement {
     filterValue?: string | null;
     placeHolder: string;
     search?: HTMLInputElement;
+    static styles: import("lit").CSSResult[];
     private _debouncer;
     render(): import("lit-html").TemplateResult<1>;
     _getValue(): string;

package/dist/search/exm-toolbar-search.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { html } from 'lit';
+import { css, html } from 'lit';
 import { property, customElement, query, state } from 'lit/decorators.js';
 import { ExmgElement } from '@exmg/lit-base/index.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -62,6 +62,13 @@ let ToolbarSearch = class ToolbarSearch extends ExmgElement {
         setTimeout(() => this.shadowRoot.querySelector('#searchInput').focus(), 200);
     }
 };
+ToolbarSearch.styles = [
+    css `
+      :host {
+        width: 100%;
+      }
+    `,
+];
 __decorate([
     state()
 ], ToolbarSearch.prototype, "isSearch", void 0);

package/dist/styles/exm-grid-base-toolbar-styles-css.js

@@ -15,9 +15,8 @@ export const style = css `
   }
 
   .wrapper {
-    display: flex;
-    flex: 1;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: 1fr auto auto;
     align-items: center;
     padding: 10px 16px 10px 16px;
     overflow-x: var(--exm-theme-table-toolbar-overflow-x, initial);
@@ -39,10 +38,8 @@ export const style = css `
 
   .wrapper.active .description {
     color: var(--active-toolbar-color);
-    flex: 1;
     margin-left: 8px;
   }
-
   .wrapper .seperator {
     min-height: 32px;
   }
@@ -54,19 +51,12 @@ export const style = css `
   .wrapper .description {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-    font-family: Roboto, sans-serif;
     font-family: var(--mdc-typography-headline5-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
-    font-size: 1.5rem;
     font-size: var(--mdc-typography-headline5-font-size, 1.5rem);
-    line-height: 2rem;
     line-height: var(--mdc-typography-headline5-line-height, 2rem);
-    font-weight: 400;
     font-weight: var(--mdc-typography-headline5-font-weight, 400);
-    letter-spacing: normal;
     letter-spacing: var(--mdc-typography-headline5-letter-spacing, normal);
-    text-decoration: inherit;
     text-decoration: var(--mdc-typography-headline5-text-decoration, inherit);
-    text-transform: inherit;
     text-transform: var(--mdc-typography-headline5-text-transform, inherit);
     color: var(--toolbar-color);
     font-size: 1.25rem;
@@ -75,6 +65,7 @@ export const style = css `
     flex: 1;
     display: flex;
     align-items: center;
+    width: 100%;
   }
 
   .actions {

package/dist/table/exm-grid-base-toolbar.js

@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ExmgElement } from '@exmg/lit-base/index.js';
 import { style } from '../styles/exm-grid-base-toolbar-styles-css.js';
+import { classMap } from 'lit/directives/class-map.js';
 /**
  * ### Styling
  * The following custom properties  are available for styling:
@@ -43,18 +44,20 @@ let ExmGridBaseToolbar = class ExmGridBaseToolbar extends ExmgElement {
         super.disconnectedCallback();
     }
     render() {
+        const classNames = { active: this.active, 'has-action': this.actionsCount > 0 };
         return html `
-      <div class="wrapper ${this.active ? 'active' : ''}">
+      <div class="wrapper ${classMap(classNames)}">
         ${this.actionsCount > 0
             ? html `
               <div class="actions">
                 <slot name="actions"></slot>
               </div>
+              <div class="seperator ${this.actionsCount > 0 && !this.disableSeperator ? 'with-action-separator' : ''}">
+                &nbsp;
+              </div>
             `
             : ''}
-        <div class="seperator ${this.actionsCount > 0 && !this.disableSeperator ? 'with-action-separator' : ''}">
-          &nbsp;
-        </div>
+
         <div class="description">
           <slot name="description"></slot>
         </div>

package/dist/table/exm-grid-toolbar-css.js

@@ -6,9 +6,5 @@ export const style = css `
     height: 48px;
     flex: 1;
   }
-
-  .title > exm-toolbar-search {
-    flex: 1;
-  }
 `;
 //# sourceMappingURL=exm-grid-toolbar-css.js.map

package/dist/table/exm-grid-toolbar.js

@@ -82,7 +82,7 @@ let ExmGridToolbar = class ExmGridToolbar extends ExmgElement {
       `);
     }
     renderSearch() {
-        return html `<exm-toolbar-search placeHolder=${this.searchPlaceholder}></exm-toolbar-search> `;
+        return html `<exm-toolbar-search slot="description" placeHolder=${this.searchPlaceholder}></exm-toolbar-search> `;
     }
     renderDescription() {
         return html ` ${this.description} `;
@@ -144,7 +144,7 @@ let ExmGridToolbar = class ExmGridToolbar extends ExmgElement {
       <exm-grid-base-toolbar ?disableSeperator=${this.disableSeperator}>
         <div slot="actions">${this.renderActions()}</div>
         ${this.searchEnabled
-            ? html `<div class="title" slot="description">${this.renderSearch()}</div>`
+            ? html `${this.renderSearch()}`
             : html `<div class="title" slot="description">${this.renderDescription()}</div>`}
 
         <div slot="filters">${this.renderFilters()}</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-grid",
-  "version": "1.1.5-alpha.5+569284b",
+  "version": "1.1.5-alpha.6+a4dfa63",
   "type": "module",
   "description": "exmg grid element",
   "contributors": [
@@ -37,8 +37,8 @@
     "directory": "packages/exm-grid"
   },
   "dependencies": {
-    "@exmg/exm-search": "^1.1.5-alpha.5+569284b",
-    "@exmg/exm-sortable": "^1.1.5-alpha.5+569284b"
+    "@exmg/exm-search": "^1.1.5-alpha.6+a4dfa63",
+    "@exmg/exm-sortable": "^1.1.5-alpha.6+a4dfa63"
   },
   "peerDependencies": {
     "@exmg/lit-base": "^3.0.0",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "569284b73ae26df21846b0673aae5a14af49d594"
+  "gitHead": "a4dfa635573d70b8cfeefaf00bf1d2d79d3337fe"
 }