@exmg/exm-grid 0.0.2-alpha.0

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

@@ -0,0 +1,194 @@
+import { __decorate } from "tslib";
+import { html, css } 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';
+import { async, debounce } from '@exmg/lit-base/index.js';
+let ToolbarSearch = class ToolbarSearch extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this._isSearch = false;
+        this.placeHolder = 'Search';
+    }
+    render() {
+        const classMapValues = {
+            search: this._isSearch,
+        };
+        return html `
+      <div class=${classMap(classMapValues)} @click=${this._showSearch}>
+        ${this._isSearch
+            ? html `
+              <div style="position: relative">
+                <md-focus-ring style="--md-focus-ring-shape: 8px" for="searchInput"></md-focus-ring>
+                <md-icon>search</md-icon>
+                <input
+                  id="searchInput"
+                  placeholder=${this.placeHolder}
+                  value=${this.filterValue ? this.filterValue : ''}
+                  onfocus="let value = this.value; this.value = null; this.value = value"
+                  @keyup=${this._handleKeyUp}
+                  @blur=${this._handleInputBlur}
+                />
+                ${this.filterValue
+                ? html `
+                      <md-icon-button class="clear-button" @click=${this._handleClear}
+                        ><md-icon>close</md-icon></md-icon-button
+                      >
+                    `
+                : html ``}
+              </div>
+            `
+            : html `
+              <md-icon>search</md-icon>
+              <span class="interactive-content">${this._getValue()}</span>
+              <slot></slot>
+            `}
+      </div>
+    `;
+    }
+    _getValue() {
+        return this.filterValue || this.placeHolder;
+    }
+    _handleClear(e) {
+        e.preventDefault();
+        this.filterValue = null;
+        this.search.value = '';
+        this._notifyChange();
+    }
+    _handleKeyUp(e) {
+        const input = e.target;
+        if (this.filterValue !== input.value) {
+            this.filterValue = input.value;
+            this._notifyChange();
+        }
+        if (e.keyCode === 27) {
+            this._hideSearch();
+        }
+    }
+    _notifyChange() {
+        this._debouncer = debounce.Debouncer.debounce(this._debouncer, async.timeOut.after(200), () => {
+            this.dispatchEvent(new CustomEvent('exm-grid-toolbar-search-changed', {
+                bubbles: false,
+                composed: true,
+                detail: { value: this.filterValue },
+            }));
+        });
+    }
+    _handleInputBlur() {
+        this._hideSearch();
+    }
+    _hideSearch() {
+        this._isSearch = false;
+    }
+    _showSearch() {
+        if (this._isSearch)
+            return;
+        this._isSearch = true;
+        setTimeout(() => this.shadowRoot.querySelector('#searchInput').focus(), 200);
+    }
+};
+ToolbarSearch.styles = [
+    css `
+      :host {
+        display: block;
+        color: var(--md-sys-color-on-surface-variant);
+        background-color: var(--md-sys-color-surface-container-low);
+        border-radius: var(--exm-toolbar-search-border-radius, var(--exm-surface-border-radius, 16px));
+      }
+      :host > div {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        height: 48px;
+      }
+      h2 {
+        max-width: 936px;
+        width: 100%;
+        margin: 20px auto;
+      }
+      input {
+        width: 100%;
+        caret-color: var(--md-sys-color-on-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+      md-icon {
+        margin: 0 8px 0 16px;
+        fill: var(--md-sys-color-on-surface);
+        cursor: pointer;
+      }
+      :host > div > svg {
+        margin-right: 10px;
+      }
+      ::slotted(*) {
+        margin: 14px 12px;
+      }
+      span.interactive-content {
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 14px;
+        opacity: 0.6;
+        text-overflow: ellipsis;
+        letter-spacing: 0.005em;
+        box-sizing: border-box;
+
+        font-weight: 400;
+        cursor: pointer;
+        flex: 1;
+      }
+      .search {
+        display: absolute;
+        background: none;
+        /* outline-color: rgb(77, 144, 254);
+        outline-offset: 1px;
+        outline-style: auto;
+        outline-width: 1px; */
+      }
+      .search > div {
+        width: 100%;
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
+      .search input {
+        font-size: 14px;
+        margin: 15px 0px;
+        padding: 2px;
+        border: 0px;
+        width: 100%;
+        outline: none;
+        background: none;
+        box-sizing: border-box;
+      }
+      .clear-button {
+        position: absolute;
+        right: 0;
+        background: transparent;
+        border: none !important;
+        font-size: 0;
+        margin-right: 1rem;
+        color: var(--exm-table-color, black);
+      }
+
+      md-focus-ring {
+        --md-focus-ring-shape: 16px;
+      }
+    `,
+];
+__decorate([
+    state()
+], ToolbarSearch.prototype, "_isSearch", void 0);
+__decorate([
+    property({ type: String })
+], ToolbarSearch.prototype, "filterValue", void 0);
+__decorate([
+    property({ type: String })
+], ToolbarSearch.prototype, "placeHolder", void 0);
+__decorate([
+    query('#searchInput')
+], ToolbarSearch.prototype, "search", void 0);
+ToolbarSearch = __decorate([
+    customElement('exm-toolbar-search')
+], ToolbarSearch);
+export { ToolbarSearch };
+//# sourceMappingURL=exm-toolbar-search.js.map

package/dist/styles/exm-grid-base-toolbar-styles-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

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

@@ -0,0 +1,103 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: Roboto, sans-serif;
+    font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
+    border-top-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
+    border-top-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
+    --toolbar-bg-color: var(--exm-theme-table-toolbar-background-color, var(--md-sys-color-surface-container));
+    --toolbar-color: var(--exm-theme-table-toolbar-color, var(--md-sys-color-on-surface-container));
+    background-color: var(--toolbar-bg-color);
+    color: var(--toolbar-color);
+  }
+
+  .wrapper {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px 16px 10px 16px;
+    overflow-x: var(--exm-theme-table-toolbar-overflow-x, initial);
+    white-space: nowrap;
+  }
+
+  .wrapper.active {
+    --active-toolbar-bg-color: var(--exm-theme-table-toolbar-active-bg-color, var(--md-sys-color-secondary-container));
+    --active-toolbar-color: var(--exm-theme-table-toolbar-active-color, var(--md-sys-color-on-secondary-container));
+    background-color: var(--active-toolbar-bg-color);
+    color: var(--active-toolbar-color);
+    border-top-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
+    border-top-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
+  }
+
+  .wrapper.active .seperator.with-action-separator {
+    border-left: 1px solid var(--active-toolbar-color);
+  }
+
+  .wrapper.active .description {
+    color: var(--active-toolbar-color);
+    flex: 1;
+    margin-left: 8px;
+  }
+
+  .wrapper .seperator {
+    min-height: 32px;
+  }
+
+  .wrapper .seperator.with-action-separator {
+    border-left: 1px solid var(--active-toolbar-color);
+  }
+
+  .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;
+    padding: 0;
+    height: 48px;
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  .actions {
+    padding: 0 8px 0 0;
+    color: var(--mdc-theme-primary);
+  }
+
+  .filters {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+
+  .settings {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+
+  @media (max-width: 500px) {
+    .wrapper .description {
+      display: none;
+    }
+  }
+`;
+//# sourceMappingURL=exm-grid-base-toolbar-styles-css.js.map

package/dist/styles/exm-grid-common-styles-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/dist/styles/exm-grid-common-styles-css.js

@@ -0,0 +1,104 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: Roboto, sans-serif;
+    font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
+    color: var(--exm-theme-table-pagination-color, var(--md-sys-color-on-surface-container));
+    border-bottom-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
+    border-bottom-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
+  }
+
+  .wrapper {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 8px 10px;
+    white-space: nowrap;
+  }
+
+  .wrapper .page-size {
+    display: flex;
+    flex-direction: row;
+    margin-right: 26px;
+    align-items: center;
+  }
+
+  .wrapper .page-size .page-size-label {
+    margin-right: 10px;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: Roboto, sans-serif;
+    font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
+    font-size: 0.875rem;
+    font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+    line-height: 1.25rem;
+    line-height: var(--mdc-typography-body2-line-height, 1.25rem);
+    font-weight: 400;
+    font-weight: var(--mdc-typography-body2-font-weight, 400);
+    letter-spacing: 0.0178571429em;
+    letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
+    text-decoration: inherit;
+    text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
+    text-transform: inherit;
+    text-transform: var(--mdc-typography-body2-text-transform, inherit);
+  }
+
+  .wrapper .page-range {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .wrapper .page-range .page-range-label {
+    margin-right: 44px;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: Roboto, sans-serif;
+    font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
+    font-size: 0.875rem;
+    font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+    line-height: 1.25rem;
+    line-height: var(--mdc-typography-body2-line-height, 1.25rem);
+    font-weight: 400;
+    font-weight: var(--mdc-typography-body2-font-weight, 400);
+    letter-spacing: 0.0178571429em;
+    letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
+    text-decoration: inherit;
+    text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
+    text-transform: inherit;
+    text-transform: var(--mdc-typography-body2-text-transform, inherit);
+  }
+
+  .wrapper .page-range .page-range-actions {
+    user-select: none;
+  }
+
+  @media (max-width: 600px) {
+    .page-size-label {
+      display: none;
+    }
+  }
+
+  @media (max-width: 500px) {
+    .wrapper .page-size {
+      display: none;
+    }
+  }
+
+  @media (max-width: 450px) {
+    .wrapper {
+      overflow-x: auto;
+      white-space: nowrap;
+    }
+
+    .wrapper .page-range {
+      min-width: 1px;
+    }
+  }
+`;
+//# sourceMappingURL=exm-grid-common-styles-css.js.map

package/dist/styles/exm-grid-pagination-styles-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/dist/styles/exm-grid-pagination-styles-css.js

@@ -0,0 +1,104 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: Roboto, sans-serif;
+    font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
+    color: var(--exm-theme-table-pagination-color, var(--md-sys-color-on-surface-container));
+    border-bottom-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
+    border-bottom-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
+  }
+
+  .wrapper {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 8px 10px;
+    white-space: nowrap;
+  }
+
+  .wrapper .page-size {
+    display: flex;
+    flex-direction: row;
+    margin-right: 26px;
+    align-items: center;
+  }
+
+  .wrapper .page-size .page-size-label {
+    margin-right: 10px;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: Roboto, sans-serif;
+    font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
+    font-size: 0.875rem;
+    font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+    line-height: 1.25rem;
+    line-height: var(--mdc-typography-body2-line-height, 1.25rem);
+    font-weight: 400;
+    font-weight: var(--mdc-typography-body2-font-weight, 400);
+    letter-spacing: 0.0178571429em;
+    letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
+    text-decoration: inherit;
+    text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
+    text-transform: inherit;
+    text-transform: var(--mdc-typography-body2-text-transform, inherit);
+  }
+
+  .wrapper .page-range {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .wrapper .page-range .page-range-label {
+    margin-right: 44px;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: Roboto, sans-serif;
+    font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
+    font-size: 0.875rem;
+    font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+    line-height: 1.25rem;
+    line-height: var(--mdc-typography-body2-line-height, 1.25rem);
+    font-weight: 400;
+    font-weight: var(--mdc-typography-body2-font-weight, 400);
+    letter-spacing: 0.0178571429em;
+    letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
+    text-decoration: inherit;
+    text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
+    text-transform: inherit;
+    text-transform: var(--mdc-typography-body2-text-transform, inherit);
+  }
+
+  .wrapper .page-range .page-range-actions {
+    user-select: none;
+  }
+
+  @media (max-width: 600px) {
+    .page-size-label {
+      display: none;
+    }
+  }
+
+  @media (max-width: 500px) {
+    .wrapper .page-size {
+      display: none;
+    }
+  }
+
+  @media (max-width: 450px) {
+    .wrapper {
+      overflow-x: auto;
+      white-space: nowrap;
+    }
+
+    .wrapper .page-range {
+      min-width: 1px;
+    }
+  }
+`;
+//# sourceMappingURL=exm-grid-pagination-styles-css.js.map

package/dist/styles/exm-grid-setting-selection-list-styles-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/dist/styles/exm-grid-setting-selection-list-styles-css.js

@@ -0,0 +1,12 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+    position: relative;
+  }
+
+  .action {
+    color: var(--mdc-theme-primary);
+  }
+`;
+//# sourceMappingURL=exm-grid-setting-selection-list-styles-css.js.map

package/dist/styles/exm-grid-styles-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;