@exmg/exm-grid 1.0.7 → 1.0.8-alpha.21

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

@@ -1,12 +0,0 @@
-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/src/styles/exm-grid-styles-css.d.ts

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

package/src/styles/exm-grid-styles-css.js

@@ -1,412 +0,0 @@
-import { css } from 'lit';
-export const style = css `
-  :host {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    font-family: Roboto, sans-serif;
-    font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
-    display: block;
-    --exm-arrow-upward-url: url('/node_modules/@exmg/exm-grid/assets/arrow-upward.svg');
-    --exm-table-card-width: var(--exm-theme-table-card-width, 100%);
-    --exm-table-card-margin-bottom: var(--exm-theme-table-card-margin-bottom, 5px);
-    --exm-table-color: var(--exm-theme-table-on-surface, var(--md-sys-color-on-surface-container));
-    --exm-table-card-background-color: var(--exm-theme-table-surface, var(--md-sys-color-surface-container));
-    --exm-table-row-divider-color: var(--exm-theme-table-row-divider-color, var(--md-sys-color-surface-variant));
-    --exm-table-row-selected-color: var(
-      --exm-theme-table-row-selected-color,
-      var(--md-sys-color-on-secondary-container)
-    );
-    --exm-table-row-selected-background-color: var(
-      --exm-theme-table-row-selected-background-color,
-      var(--md-sys-color-secondary-container)
-    );
-    --exm-table-row-hover-color: var(--exm-theme-table-row-hover-color, var(--md-sys-color-on-surface));
-    --exm-table-row-hover-background-color: var(
-      --exm-theme-table-row-hover-background-color,
-      var(--md-sys-color-surface-container-highest)
-    );
-    --exm-table-row-dragged-background-color: var(
-      --exm-theme-table-row-dragged-background-color,
-      var(--md-sys-color-surface-container-low)
-    );
-    --exm-table-rows-expanded-divider-border: var(--exm-theme-table-rows-expanded-divider-border, none);
-    --exm-table-rows-expanded-border: var(--exm-theme-table-rows-expanded-border, none);
-    --exm-table-rows-expanded-background-color: var(
-      --exm-theme-table-rows-expanded-background-color,
-      var(--md-sys-color-surface-container-low)
-    );
-    --exm-table-rows-expanded-color: var(--exm-theme-table-rows-expanded-color, var(--md-sys-color-on-surface));
-    --exm-table-th-color: var(--exm-theme-table-th-on-surface, var(--md-sys-color-on-surface-container));
-    --exm-table-th-background-color: var(--exm-theme-table-th-surface, var(--md-sys-color-surface-container));
-    --exm-table-th-sortable-hover-color: var(--exm-theme-table-th-sortable-hover-color, var(--md-sys-color-on-surface));
-    --exm-table-columns-background-color: var(--exm-theme-table-columns-background-color, var(--md-sys-color-surface));
-    --exm-table-th-height: var(--exm-theme-table-th-height, 48px);
-    --exm-table-th-sort-margin-left: var(--exm-theme-table-th-sort-margin-left, 0px);
-    --exm-table-td-height: var(--exm-theme-table-td-height, 48px);
-    --exm-table-th-sort-icon-height: var(--exm-theme-table-th-sort-icon-height, 1em);
-    --exm-table-th-sort-icon-width: var(--exm-theme-table-th-sort-icon-width, 1em);
-    --exm-table-col-number-padding-right: var(--exm-theme-table-col-number-padding-right, 10px);
-    --exm-table-checkbox-cell-width: var(--exm-theme-table-checkbox-cell-width, 24px);
-    --exm-paper-combobox-selected-item-color: var(var(--md-sys-color-primary), #000000);
-    --exm-paper-combobox-color: var(--md-sys-color-on-surface);
-    --exm-table-toolbar-setting-position: var(--exm-theme-table-toolbar-setting-position, absolute);
-  }
-
-  ::slotted([slot='pagination']) {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    border-top: 1px solid var(--exm-table-row-divider-color);
-  }
-
-  ::slotted([slot='toolbar']) {
-    display: block;
-  }
-
-  .table-card-container {
-    -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: none;
-    width: var(--exm-table-card-width);
-    margin: 0;
-    padding: 0;
-    box-shadow: var(--exm-theme-table-box-shadow, none);
-  }
-
-  :host([with-toolbar]) .table-card {
-    border-top: 1px solid var(--exm-table-row-divider-color);
-  }
-
-  .table-card {
-    -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: none;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    width: var(--exm-table-card-width);
-    background-color: var(--exm-table-card-background-color);
-    margin-bottom: var(--exm-table-card-margin-bottom);
-    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));
-    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));
-  }
-
-  table {
-    width: 100%;
-    color: var(--exm-table-color);
-    border-spacing: 0;
-    border: none;
-  }
-
-  table[data-table-layout='fixed'] {
-    table-layout: fixed;
-  }
-
-  table[data-table-layout='fixed'] td:not(.grid-checkbox-cell):not(.menu-cell) {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  table[data-table-layout='fixed'] th.grid-checkbox-cell,
-  table[data-table-layout='fixed'] td.grid-checkbox-cell {
-    width: var(--exm-table-checkbox-cell-width);
-  }
-
-  table[data-table-layout='fixed'] th.no-ellipsis,
-  table[data-table-layout='fixed'] td.no-ellipsis {
-    text-overflow: initial;
-  }
-
-  table thead tr,
-  table thead th {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    font-family: Roboto, sans-serif;
-    font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
-    font-size: 0.75rem;
-    font-size: var(--mdc-typography-caption-font-size, 0.75rem);
-    line-height: 1.25rem;
-    line-height: var(--mdc-typography-caption-line-height, 1.25rem);
-    font-weight: 400;
-    font-weight: var(--mdc-typography-caption-font-weight, 400);
-    letter-spacing: 0.0333333333em;
-    letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
-    text-decoration: inherit;
-    text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
-    text-transform: inherit;
-    text-transform: var(--mdc-typography-caption-text-transform, inherit);
-  }
-
-  table tbody tr,
-  table tbody td,
-  table tfoot tr,
-  table tfoot td {
-    -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);
-  }
-
-  td {
-    height: var(--exm-table-td-height);
-  }
-
-  .grid-toolbar th {
-    padding: 0;
-    text-align: left;
-  }
-
-  .grid-toolbar th > * {
-    overflow-x: auto;
-  }
-
-  .grid-columns th {
-    height: var(--exm-table-th-height);
-    font-weight: 500;
-    font-style: normal;
-    font-stretch: normal;
-    text-transform: uppercase;
-    line-height: 1.33;
-    letter-spacing: 2px;
-    color: var(--exm-table-th-color);
-    background-color: var(--exm-table-th-background-color);
-    vertical-align: middle;
-    text-align: left;
-    user-select: none;
-    white-space: nowrap;
-  }
-
-  .grid-columns th > span {
-    vertical-align: middle;
-    max-width: 100%;
-    display: inline-block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .grid-columns th svg {
-    fill: var(--exm-table-th-color);
-  }
-
-  .grid-columns th,
-  tbody td {
-    padding-left: 16px;
-  }
-
-  .grid-columns th:last-child,
-  tbody td:last-child {
-    padding-right: 10px;
-  }
-
-  th,
-  td {
-    border-top: 1px solid var(--exm-table-row-divider-color);
-  }
-
-  tbody td {
-    height: var(--exm-table-td-height);
-    -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);
-    font-weight: normal;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: 1.43px;
-    letter-spacing: 0.3px;
-    color: var(--exm-table-color);
-  }
-
-  tbody td svg {
-    fill: var(--exm-table-color);
-  }
-
-  th[data-sort] {
-    cursor: pointer;
-  }
-
-  th[data-sort]:hover {
-    color: var(--exm-table-th-sortable-hover-color);
-  }
-
-  th[data-sort]::after {
-    display: inline-block;
-    content: '';
-    -webkit-mask-image: var(--exm-arrow-upward-url);
-    mask-image: var(--exm-arrow-upward-url);
-    background-color: currentColor;
-    background-size: contain;
-    height: var(--exm-table-th-sort-icon-height);
-    width: var(--exm-table-th-sort-icon-width);
-    margin-left: var(--exm-table-th-sort-margin-left);
-    vertical-align: middle;
-    opacity: 0;
-  }
-
-  th[data-sort-direction]::after {
-    opacity: 1;
-    transition: transform 0.1s linear;
-  }
-
-  th[data-sort-direction='ASC']::after {
-    transform: rotate(0deg);
-  }
-
-  th[data-sort-direction='DESC']::after {
-    transform: rotate(180deg);
-  }
-
-  tbody > tr:not(.grid-row-detail):hover {
-    color: var(--exm-table-row-hover-color);
-    background-color: var(--exm-table-row-hover-background-color);
-  }
-
-  tbody > tr:not(.grid-row-detail):hover td {
-    color: var(--exm-table-row-hover-color);
-  }
-
-  tbody > tr:not(.grid-row-detail):hover svg {
-    fill: var(--exm-table-row-hover-color);
-  }
-
-  tr[data-selected] {
-    color: var(--exm-table-row-selected-color);
-    background-color: var(--exm-table-row-selected-background-color);
-  }
-
-  tr[data-selected] td {
-    color: var(--exm-table-row-selected-color);
-  }
-
-  tr[data-selected] svg {
-    fill: var(--exm-table-row-selected-color);
-  }
-
-  tbody tr[data-has-expanded-detail],
-  tbody tr[data-has-expanded-detail]:hover,
-  tbody tr[data-is-row-expanded] {
-    background-color: var(--exm-table-rows-expanded-background-color);
-    border: var(--exm-table-rows-expanded-border);
-  }
-
-  tbody tr[data-has-expanded-detail] td,
-  tbody tr[data-has-expanded-detail]:hover td,
-  tbody tr[data-is-row-expanded] td {
-    color: var(--exm-table-rows-expanded-color);
-  }
-
-  tbody tr[data-has-expanded-detail] td svg,
-  tbody tr[data-has-expanded-detail]:hover td svg,
-  tbody tr[data-is-row-expanded] td svg {
-    fill: var(--exm-table-rows-expanded-color);
-  }
-
-  tbody tr[data-is-row-expanded] td {
-    border-bottom: none;
-  }
-
-  tbody tr[data-has-expanded-detail] td,
-  tbody tr[data-has-expanded-detail]:hover td {
-    border-bottom: var(--exm-table-rows-expanded-divider-border);
-  }
-
-  tr.grid-row-detail {
-    display: none;
-  }
-
-  tr.grid-row-detail[data-is-row-expanded] {
-    display: table-row;
-  }
-
-  tr.grid-row-detail td {
-    padding: 20px;
-  }
-
-  tr .grid-icon-rotate[data-is-expanded] > * {
-    transition: transform 0.1s linear;
-    transform: rotate(180deg);
-  }
-
-  tr .grid-icon-rotate[data-is-expandable]:not([data-is-expanded]) > * {
-    transition: transform 0.1s linear;
-    transform: rotate(0deg);
-  }
-
-  .grid-row-drag-handler {
-    cursor: move;
-    vertical-align: middle;
-  }
-
-  .grid-row-drag-handler > * {
-    vertical-align: middle;
-  }
-
-  tr.dragged {
-    background-color: var(--exm-table-row-dragged-background-color);
-    opacity: 0.25;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5) inset;
-  }
-
-  tr.cloned {
-    background-color: var(--exm-table-row-dragged-background-color);
-    width: 100%;
-    box-sizing: border-box;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-    opacity: 0.9;
-  }
-
-  tr td.grid-cell-visible-on-hover {
-    text-align: center;
-  }
-
-  tr td.grid-cell-visible-on-hover > * {
-    visibility: hidden;
-  }
-
-  tr:hover td.grid-cell-visible-on-hover > *,
-  tr[data-has-expanded-detail] td.grid-cell-visible-on-hover > * {
-    visibility: visible;
-  }
-
-  tr td.grid-col-number,
-  tr th.grid-col-number {
-    padding-right: var(--exm-table-col-number-padding-right);
-    text-align: right;
-  }
-
-  tr th.grid-col-number > span {
-    width: 100%;
-  }
-`;
-//# sourceMappingURL=exm-grid-styles-css.js.map

package/src/table/exm-grid-base-toolbar.d.ts

@@ -1,23 +0,0 @@
-import { ExmgElement } from '@exmg/lit-base/index.js';
-/**
- * ### Styling
- * The following custom properties  are available for styling:
- *
- */
-export declare class ExmGridBaseToolbar extends ExmgElement {
-    static styles: import("lit").CSSResult[];
-    private actionsCount;
-    private settingsCount;
-    private active;
-    disableSeperator: boolean;
-    private observer?;
-    private getChildElementCount;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'exm-grid-base-toolbar': ExmGridBaseToolbar;
-    }
-}

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

@@ -1,91 +0,0 @@
-import { __decorate } from "tslib";
-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';
-/**
- * ### Styling
- * The following custom properties  are available for styling:
- *
- */
-let ExmGridBaseToolbar = class ExmGridBaseToolbar extends ExmgElement {
-    constructor() {
-        super(...arguments);
-        this.actionsCount = 0;
-        this.settingsCount = 0;
-        this.active = false;
-        this.disableSeperator = false;
-    }
-    getChildElementCount(selector) {
-        const element = this.querySelector(selector);
-        return element ? element.childElementCount : 0;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.observer = new MutationObserver((mutationsList) => {
-            setTimeout(() => {
-                for (const mutation of mutationsList) {
-                    if (mutation.type === 'childList') {
-                        this.actionsCount = this.getChildElementCount('div[slot=actions]');
-                        this.settingsCount = this.getChildElementCount('div[slot=settings]');
-                        this.active = this.actionsCount > 0;
-                    }
-                }
-            }, 60);
-        });
-        this.actionsCount = this.getChildElementCount('div[slot=actions]');
-        this.settingsCount = this.getChildElementCount('div[slot=settings]');
-        this.active = this.actionsCount > 0;
-        this.observer.observe(this, { attributes: false, childList: true, subtree: true });
-    }
-    disconnectedCallback() {
-        this.observer.disconnect();
-        super.disconnectedCallback();
-    }
-    render() {
-        return html `
-      <div class="wrapper ${this.active ? 'active' : ''}">
-        ${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="description">
-          <slot name="description"></slot>
-        </div>
-        <div class="filters">
-          <slot name="filters"></slot>
-        </div>
-        <div class="settings ${this.settingsCount > 0 ? 'has-settings' : ''}">
-          <slot name="settings"></slot>
-        </div>
-        <div class="extra">
-          <slot name="extra"></slot>
-        </div>
-      </div>
-    `;
-    }
-};
-ExmGridBaseToolbar.styles = [style];
-__decorate([
-    state()
-], ExmGridBaseToolbar.prototype, "actionsCount", void 0);
-__decorate([
-    state()
-], ExmGridBaseToolbar.prototype, "settingsCount", void 0);
-__decorate([
-    state()
-], ExmGridBaseToolbar.prototype, "active", void 0);
-__decorate([
-    property({ type: Boolean })
-], ExmGridBaseToolbar.prototype, "disableSeperator", void 0);
-ExmGridBaseToolbar = __decorate([
-    customElement('exm-grid-base-toolbar')
-], ExmGridBaseToolbar);
-export { ExmGridBaseToolbar };
-//# sourceMappingURL=exm-grid-base-toolbar.js.map

package/src/table/exm-grid-pagination.d.ts

@@ -1,37 +0,0 @@
-import { ExmgElement } from '@exmg/lit-base/index.js';
-import '@material/web/iconbutton/icon-button.js';
-import '@material/web/icon/icon.js';
-import './exm-grid-toolbar-filters.js';
-/**
- * ### Styling
- * The following custom properties  are available for styling:
- *
- * Custom property | Description | Default
- * ----------------|-------------|----------
- * `--exm-theme-table-pagination-bg-color` | pagination background color | `var(--mdc-theme-surface, #ffffff);`
- * `--exm-theme-table-pagination-color` | pagination foreground (mostly text) color | `var(--mdc-theme-on-surface, #02182b);`
- */
-export declare class ExmGridPagination extends ExmgElement {
-    static styles: import("lit").CSSResult[];
-    pageSizeLabel: string;
-    pageSizeOptions: number[];
-    pageSize: number;
-    pageIndex: number;
-    itemCount: number;
-    private renderPageSizeLabel;
-    private renderPageSizeOptions;
-    private renderPageRangeLabel;
-    private renderPageRangeActions;
-    private renderPrevPage;
-    private renderNextPage;
-    private fireEventPageChanged;
-    private handleOnClickPrev;
-    private handleOnClickNext;
-    private handleOnPageSizeChanged;
-    protected render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'exm-grid-pagination': ExmGridPagination;
-    }
-}